ソフトウェアの GUI をデザインする
アプリケーションを作成するとき、ユーザーが使いやすいものにするにはどうすればよいか考える必要があります。最近は、テキストのみによる操作はあまり見られなくなり、GUI (Graphical User Interface) を用いることが一般的になっています。優れたアプリケーションを設計する上で、使い勝手の良いユーザーインターフェースをデザインすることはとても重要です。
この GUI を考える上で注意深くデザインしなくてはならないものに、「アイコン」「ツールバー」「メニュー」があります。普段、アプリケーションを使っていてアイコンやツールバーを意識せずに利用しています。なぜなら、機能を考えて誰にでも理解できるようにデザインされているからです。（初めて利用する人には多少の教育は必要ですが、直感的にわかるような作りになっています）例えば、
切り取り (cut) コピー (copy) 貼り付け (paste) 開く (open) 保存 (save) 印刷 (print)
のように割り当てられています。しかし、すべてにおいて、このようにちょうど良いアイコンを選んだりデザインできるわけではありません。これらの機能でも、全体のデザインによっては別のアイコンに作り替える必要もあります。
実際、ユーザーがあまり考えずにアイコンの機能を理解してもらえるようにするには、多くのことを考えなければなりません。どんな分野のどんなユーザーがどんな環境で利用するアプリケーションなのかによって、形や色、配置、数などが異なります。グラフィック分野とビジネス分野、一般ユーザー向けとプロフェッショナル向けなど、どんな対象向けにアプリケーションを提供するかによってデザインが変わってきます。
また、簡潔で明瞭でなければなりません。アプリケーション本来の目的をじゃましないように目立ちすぎてもいけません。一つのアクションでは行えないような、複雑な機能をアイコンに割り当てることもさけるべきです。優れたアイコンは、識別しやすく、機能を容易に理解でき、機能が明解なものです。
アイコンデザイン
アイコンをデザインするときには、機能を適切に表現するものでなくてはなりません。まず、機能を適切に表現するアイコンのデザインをいくつか作り、目的にもっともあうものを選択するようにすると良いでしょう。アイコンのデザインに、マーケティング的な要因などを入れて綺麗（かわいらしく）にデザインしたいと考えるかもしれません。ある程度、考慮するのはよいかもしれませんが簡潔かつ直感的なデザインにすることを忘れてはいけません。すでに利用されているアプリケーションや他のアプリケーションと統合するような場合は、ユーザーの慣れを考慮して他のアプリケーションと統一感のあるデザインにする必要があります。
アプリケーションのアイコンデザインは、サイズ、色数といった制限があります。アプリケーションが動作する環境が、カラーなのかグレースケールなのか、大きな画面なのか小さな画面なのかなど環境に応じたデザインをしなくてはなりません。
使用できる色数は画面の解像度によっても異なりますが、Windows 95 のように 16色以内と OS で制限されているモノもあります。これは、使用するユーザーの解像度が最低でも 16 色は表示できるので、その最低の色に制限することですべてのユーザーが同じように見えるようにするためです。
 |
 |
|||
モノ (1 bit) |
16色 (4 bit) |
216色 (Web Safe) | 256色 (8 bit) |
フルカラー (24 bit) |
アイコンをデザインできるサイズ（16x16, 24x24, 32x32, 64x64...）にも制限があります。
 |
 |
 |
16 x 16 |
24 x 24 |
32 x 32 |
このような、色数やサイズの制限があるなかで実際の機能をうまく表現しなくてはなりません。ディザという技法を使って、決められた階調でより豊富な階調を表現する方法もあります。
 |
ディザにより中間色を表現 |
アイコンのデザインで、奥行きや色調はとても重要な要素になります。デザインする際に、縁を滑らかにするためにアンチエイリアスという手法を利用します。例えば、曲線となる部分にグレートーンを使用することで滑らかな曲線を表現することができます。
 |
 |
凹凸を表現するには、左上に光り、右下に影を入れてデザインすることで凸イメージを表現できます。
人間の色彩感覚を考慮して、色を使い分けることもできます。青は、視覚障害者や年輩の方には識別しにくい色です。赤は、危険を知らせたり迅速な動作を要求するようなときに使用されます。黄色は、注意を促すときに使用されます。白は清潔感があり明るいイメージがあるが、黒は暗いイメージがあります。
色による立体視を利用することもできます。例えば、ものが並んで配置されているときに、青いものは赤いものより遠くに感じられます。アイコンを配色する際に、暗い色調（青）を背景にして中間色（緑）を真ん中にし、明るい色調（赤）を上部に置くことで遠近感を表現できます。
アイコンと背景色の関係も考慮する必要があります。たとえば、暗い色を背景に選ぶなら、パステルカラーのテキストにすると読みやすくなります。逆に淡い色を背景にした場合、濃いめの色をテキストにすると読みやすくなります。これらを考慮してアイコンの色を決定することは重要です。しかし、背景色はアプリケーションのウィンドウの背景色と同じような色になることが多くなるでしょう。アイコンの背景色は、よほどの理由がない限りすべてのアイコンで一貫性を持たせたせるべきです。中間色を表現するために、淡い色と暗い色を混ぜるようなディザを使った表現を行う方法を紹介しましたが、画面の解像度によっては意図したとおりに見えないことがあるので注意が必要です。
アイコンができたら他の人にも見てもらい、アイコンの機能を認識できるかテストしてみると良いでしょう。他の人がきちんと認識できるようであれば、適切なアイコンが作られていることになります。もし、曖昧な認識ならば再度デザインし直した方がよいでしょう。このテストの場合、アイコン一つでテストする時と、複数のアイコンが並んでいる時のテストでは結果が異なる場合があります。アプリケーションで実際に使われるアイコンの列でテストすると効果的です。
ツールバー
たいていアイコンは、ツールバー上に集められています。ツールバーは、メニューの中で頻繁に使われるものを簡単に選択できるようにするため考えられました。たいていのツールバーは、ウィンドウの上部で水平に配置されています。アプリケーションによっては、左に縦に置いてあるものをあります。グラフィック系のアプリげーションでは、ツールバーを一つのウィンドウとして自由に配置できるようになっているものがあります。
最近では、ツールバーは当たり前のように使われているが、濫用してはいけません。効果的なツールバーを作るには、
- よく使うメニューの項目を、ツールバーのアイコンにする。
- ボタンのクリックのようなトグルスイッチで操作できるようなものに限定する。
といったことに考慮すると良いでしょう。
ツールバーに多くのアイコンを並べると、アイコンを探すのに手間取ってしまいかえって使いづらいものになってしまいます。これは、ツールバーの数にも同じことがいえます。一つのウィンドウに複数のツールバーが並ぶとアイコンを探す手間がかかり使いづらいものになってしまいます。
ツールバー上のアイコンの配置についても考慮する必要があります。並びに一貫性を持たせることは重要です。各ウィンドウのツールバーの位置は同じ位置にあるようにするべきです。また、もっとも使用頻度の高いアイコンをツールバーの左に配置し、使用頻度の少ないものを右に配置します。
 |
| メーラーを例にツールバーを作成（ちょっと遊びすぎですが...） 送信・返信・保存・添付保存・検索・削除 |
アイコンとテキストで表現したり、機能別にグループ化することも有用です。操作の慣れの具合で表示が切り替えられるように、アイコン部やテキスト部の表示の有無を設定できるようにするとよい。
ツールバーの色は、ウィンドウなどとバランスを考えて目立ちすぎないようにすべきです。ウィンドウの背景色を利用することがもっとも違和感がない色です。
メニュー
ほとんどの機能は、メニューから選べるようにアプリケーションを設計することが重要です。ツールバーやそこに並ぶアイコンは、メニューのサブセットになっていなくてはなりません。メニューを設計する際に、プルダウン／プルアップ・メニューからサブメニューを開くことがあるが、せいぜい３段階ぐらいまでに抑えるようにした方がよい。それ以上になるなら、新しくメニューを作るべきです。また、一つのメニューから選べる項目があまり多すぎないようにすべきです。メニューの数（メニュータートルの数）と項目数のバランスをとる必要もあります。例えば、メニューの数がやたら多く、開いてみると 2, 3 個しか項目がないとか、一つのメニューに数十個も項目があるといった作り方をすべきではありません。項目を探すのに苦労して使いにくいものになってしまうからです。メニューの配置にも優先順位や機能によって左から右へ並べるようにします。
メニューの並びは、ほとんどが上図のように、「ファイル」「編集」と続き最後に「ヘルプ」が並びます。
ファイル 新規、開く、保存、印刷、閉じる、終了といった基本操作が登録されています。 編集 カット、コピー、ペースト、クリア、環境設定といった操作が登録されています。 ヘルプ アプリケーションの使い方やバージョン情報などを表示する機能が登録されています。
メニューの各項目には、マウスによる選択ではなく簡単にキーボードから機能を実行できるキーボードショートカットが割り当てられています。これは、頻繁に使う機能をキーボードのキーに割り当てることで、マウスを使わずにすぐに実行できるようにするためのものです。Windows では、コントロールキーとアルファベット一文字を割り当てます。Macintosh では、コマンドキーとアルファベット一文字を割り当てます。
Windows Macintosh 新規 Ctrl + N Cmd + N 開く Ctrl + O Cmd + O 保存 Ctrl + S Cmd + S 印刷 Ctrl + P Cmd + P 取り消し Ctrl + Z Cmd + Z 切り取る Ctrl + X Cmd + X コピー Ctrl + C Cmd + C 貼り付け Ctrl + V Cmd + V すべてを選択 Ctrl + A Cmd + A
これらはあくまでも、一般的な割り当てですが、この割り当てに準じていないアプリケーションもあります。しかし、最低でも上記のショートカットは基本と思って割り当てた方が良いでしょう。
その他
「アイコン」「ツールバー」「メニュー」以外にも、考慮すべき点はあります。
「ボタン」では、機能が明確なラベルにすることや、「はい」「いいえ」「キャンセル」「ＯＫ」「Yes」「No」「Cancel」などといったラベルをアプリケーション全体で統一させる必要があります。
「ダイアログ」では、複数の機能を盛り込まずに単一の機能にすることや、ボタンのレイアウトの統一などアプリケーションの操作で一貫性を持たせることでユーザーに利用しやすいようにする必要があります。
アプリケーションをユーザーに利用してもらう場合、本来の用途を満足させる機能を実現することは当たり前ですが、GUI の不備により使いにくいものになってしまっては意味がありません。満足のいく機能を備え、それを使いやすい形で提供することが優れたアプリケーションを設計することだと思います。
