エンジニアにもわかる「ユーザーインターフェース設計」

はじめに

島津悠樹と申します。Yahoo! JAPANのソーシャルメディア系サービスの開発・ユーザーインターフェース（以下UI）設計を担当しています。私からは「エンジニアにもわかる『ユーザーインターフェース設計』」と題し、エンジニアのみなさまに考え方のヒントとなるようなネタをお届けします。

エンジニアの方々にとって、UI設計は、おもしろそう、けれど、どこかとっつきにくい......、そんな印象を持っておられるのではないかと思います。

私も以前はそう思っていました。ですが、とっつきにくさを理由にUI設計をやらないのはもったいない、という思いで試行錯誤した結果、なんとか、UI設計のお仕事をいろいろ担当させていただくことができるようになりました。

本エントリーのテーマは、「UI設計のとっつきにくさを取っ払おう！」です。UI設計は何もデザイナーのための特別なものではありません。UI設計にありがちな誤解について、ひとつひとつ説明しながら解いていこうと思います。

UI設計にまつわる誤解を解く、3つのポイント

1. 「UI設計＝グラフィックデザイン」ではありません

イラストやグラフィックは描けないけどUI設計の最前線で活躍されている方はたくさんいらっしゃいます。UI設計のキモは、情報の整理とロジックの構築です。グラフィックデザインのセンスと、UI設計のセンスに因果関係はありません。私もお絵かきはまったく苦手です（笑）。ですが、明快なロジックを組み立て、それを言葉や図で説明できれば、それで十分やっていけるというのが実感です。

2. 「UI設計＝アート・自己表現」ではありません

UI設計は特別な才能を持った人の"不可侵領域"......。そんなイメージを持っておられる方がいらっしゃるかもしれません。ですが、多くの場合、UIを使う人は一般の方々です。一握りの関係者で作ったUIが、利用者には理解できない・うまく使いこなせない......となったら、それはよいUI設計とはいえません。UI設計のゴールは、サービス・機能を可視化し、利用者に理解してもらい、使っていただくことです。UIを、対象ユーザーの利用を促進するための手段と位置づけ、それを実現すべく、プロジェクト全体でUI設計を進めることが、質の高いUI設計につながります。

3. 「UI設計＝デザイナーの仕事」ではありません

インターネットが登場して間もないころ、UI設計はデザイナーの仕事でした。ここ数年で、UI構築手法・設計手法は複雑化し、デザイナー単独で対応しきれないものになってきています。JavaScriptやFlash、Silverlightなどの技術を使い、エンジニアがUIを作る場面が増えてきました。企画担当者が、ビジネスプランとセットでUIを考えていることもあると思います。UI設計は、エンジニアを含むプロジェクトメンバー全員の仕事になりつつあります。

自分もはじめたい。何から？

いかがでしょう、UI設計のとっつきにくさはなくなったでしょうか？　ここまでで共感いただけたら、本エントリーの狙いは9割がた達成です（笑）。次はご自身でいろいろ実践されることをお勧めします。

以下、私なりに考える取り組み方の一例です。ほかにもあると思いますので、ご興味ある方はこれにこだわらず、いろんな方法を試されるといいと思います。

A. インプットする

• ひたすら、読んで・見て・聴く


• 具体的には
  • ウェブデザイン・情報整理に関する書籍は充実しているので、どれか一冊購入し、流し読みしながら感覚だけでもつかんでみる
  • 他社のウェブサイトを見て、なぜこのようなつくりになっているか、目的・意図を推測してみる
  • 身近にイベント・セミナーなどの機会があるようだったら、参加し、生の声を聴く


• 参考としては
  • 書籍
    • ウェブユーザビリティの法則 ユーザーに考えさせないためのデザイン・ナビゲーション・テスト手法 （スティーブ・クルーグ/著）
    • 情報デザイン入門 インターネット時代の表現術 （渡辺保史/著）
    • それは「情報」ではない。無情報爆発時代を生き抜くためのコミュニケーション・デザイン （リチャード・S. ワーマン/著）
  • サイト紹介
    • Web Design Clip
  • イベント紹介
    • 東京アートビート
    • CSS Nite

B. ディスカッションする

• 身近なところで、日常的にUIについて話ができる状況をつくる


• 具体的には
  • 思ったことをいえる人を探す。理想は、どんなことをぶつけても受け止めてくれる、献身的な犠牲者（笑）
  • 日々の事象について、考えたことを言ってみる。人の意見も聴きながら、自分の考察を再確認する
  • 周囲への情報提供をする一方で、周囲から情報を得られる状況をつくる

C. アウトプットする

• 試作する。業務で提案する


• 具体的には
  • 既存のウェブサイトのUIや既成のUIライブラリ・UIデザインパターンに、より使いやすくならないか、試しで変更を加えてみる
  • 日ごろ得られた蓄積された知見をもとに、業務の現場で提案してみる


• 参考としては
  • UIライブラリ
    • The Yahoo! User Interface Library
    • jQuery
  • UIデザインパターン
    • UIデザインパターン （ソシオメディア）
    • Design Pattern Library （Yahoo! Inc.）
    • UI-patterns.com

インプット・ディスカッション・アウトプット、この3つを循環的に実践することが知見と経験の蓄積につながり、効果的だと思います。ただ、前述のとおり、方法はこれに限りませんので、ご自身なりにやりやすい方法をぜひ見つけてみてください。