2014/10/16プログラマの中にはシステムやアプリケーションのユーザーインタフェース(以下UI)の開発を担当したことのある方もいると思う。UIはソフトウェアの出来栄えに直結する部分であるため色々と注文をつけられやすいが、実はなぜこうであるかということを論理的に説明することがなかなか難しく、違和感を感じながらも指摘された通りに修正を行っている方も多いのではないだろうか。普段、我々がブラウザで参照するwebページのほとんどがシステム化され、またスマートフォンの台頭によりアプリケーションに触れる機会が多くなった昨今、UIの重要性はきわめて高まってきており、ただ機能を満たすように作ればそれでいいというわけにはいかなくなってきている。そこでかなり乱雑ではあるが、私が普段からUIについて考えていることをいくつか紹介したいと思う。当たり前のものから、「それは明らかに私見だろう」というものまで雑多にまとめてみたので、もしよければご覧になっていただきたい。「マニュアルでしっかり説明しとかなきゃ」UIはそれを見ただけで操作が可能なように設計すべきだ。できればマニュアルをまったく見ることなく使いこなせることが理想であり、このためUIは直感的でなければならない。直感的であるためには、誰もが持っている共通の常識基盤を利用する。普段我々が慣れ親しんでいる現実世界の存在を模することや物理法則に従うことだ。「UIはデザイナーにまかせよう」UIの設計はデザイナーがやるべきではない。UIの設計とは、すなわち機能仕様の設計だからだ。各画面に必要な情報や画面遷移は機能設計者がまとめ、それを元にデザイナーがデザインする方法が良い。地図で目的の場所を探すとき、県→市→町というように広範囲から詳細へと目を移す。UIも同じように概要から詳細へと情報の粒度の流れを作ることで、ユーザーにスムーズなブラウジングを促すことができる。トップページなどの階層の浅い画面にはサマリーのような大まかな情報、階層が深くなるにしたがってより詳細な情報を表示する。概要画面は画面当りの情報量が増えすぎないよう情報の選別を行いバランスをとる。詳細画面は情報量が多少多くても構わないが、1つの画面に同系列の情報をまとめ、なるべく異なった系統の情報を表示しないことを心がける。色に意味を持たせることは直感的という観点から非常に重要である。可能であればすべてのボタン色は同じ色に統一し、すべてのハイパーリンクは同じリンク色にする。ボタンなどの(イベントが発生する)コントロールは、それがコントロールであることがわかるよう他と際立って異なる配色にすべきだ。状態や状況の区別にも色分けがなされていることが望ましい。配色に慣れていくほどに、ユーザーは右脳で瞬時に判断できるようになる。「今はやりのフラットデザインで」フラットデザインは画面をシンプルにしようというコンセプト以外は受け入れられない。ボタンはボタンであることがわかるようにすべきだ。「もっとクリック減らせないの?」かつては画面遷移を極力減らすことこそ正義だという考え持った人が結構いたが、これは誤りである。情報がまとまっているか、いかに画面階層が理解しやすいかの方が断然重要である。画面階層の設計はユーザーの理解度に大きく影響を及ぼす。画面階層が論理的でないことは、UIの理解し難さに直結する。1クリック省けたからなんだというのだ。文字も画像もない、一見すると何もないような余白の部分がクリックできてはならない。クリッカブルな領域を広げすぎてはいけない。タイトルと説明文がある場合、両方をまとめてアンカータグでくくらず、タイトルのみをリンクとする。タッチパネル式の端末においては、スライドする際に安心して指を置くことのできる領域が必要となるからだ。PCの場合においても複数のフレームが存在するページでは、当該フレームをアクティブにするという空クリックが起こりえる。「もっとこうインタラクティブにさぁ......」クリック・タップがトリガーとならないプログラム処理の実行は極力避けるべきだ。twitterではツイートの一覧をスクロールしていくとデータの先読みが発生し、通信処理およびDOM操作が行われる。非力なマシンではこれによって端末の動作が重くなり、場合によっては無応答となってしまう。CPUはユーザーのものだ。CPUを使用する際は必ず了承を得て(クリックさせて)ほしい。CPU使用率のチェックをテスト項目に入れるべきだ。「よし、○○と名づけよう」ネーミングが難しいからといって安易に造語を作ったり、かっこいいからといってわざわざ難解な語句を使用していはいけない。可能な限りなるべく平易な表現で誰にでもわかるような単語を使用すべきだ。「ここだけメニューとっぱらってコンテンツ領域を広げよう」トップ画面から存在するメニューはどの画面にいっても消えてはいけない。それは端末そのものについている操作ボタンと同じように振舞うべきだ。場所を移動してはいけないし、体裁や内容が変わってもいけない。画面にスペースがなければどこかにまとめてもいいが、トグルの位置は変えてはいけない。iPhoneのホームボタンが急に消えたら困るだろう。「吹き出しとかで説明しちゃえば?」ポップアップな吹き出しは正直うざい。マニュアルを読まないなら画面で説明しようという試み自体は理解できる。画面はシンプルであるべきで、なるべく直感的に理解できるように努力をすべきだろう。吹き出しを消すためにそこまでいって×をクリックさせないでほしい。「Bootstrapを使用しているのでUIは1つです」レスポンシブデザインとは、UIの開発で楽ができる手法のことではない。レスポンシブであったとしても、モバイルとPCできちんと情報量に差をつけるべきだ。名前を記憶しておくコメント:SpecialPRスポンサーからのお知らせPR玄米茶こんにちは。十数年のサラリーマン生活を経て、現在はフリー(個人事業主)でWebシステムの開発をやっています。久しぶりの対面研修で思ったことよく学びよく遊びよく寝る、頭の回転が良い子供がたくさん育つ国になるといいな。新着記事SpecialPR@ITメールマガジンのお申し込み新着記事をいち早く知りたい、オリジナルコラムを読みたい――メールマガジンに登録して、@ITを120%使いこなそう。ITmediaはアイティメディア株式会社の登録商標です。