デザインストーリー
ユーザーインターフェイス グラフィックデザイン
先進性とユーザビリティを表現するグラフィック
デジタルデバイスの操作感を取り入れたユーザーインターフェイス（以下UI）に最適なグラフィックスデザインとは何か。それは、情報の主従を整理した上で、「シンプルでミニマルな表現」と、コンテンツを引き立てる「ハイライト表現」を組み合わせること。その考えに至るまでの背景とプロセスをご紹介します。
情報の主従を踏まえた色使いへ
富士フイルムブランドの複合機のUIグラフィックを作り込む上で何を重視するかデザイナー達は議論を重ねました。そこで出た答えは、情報の主従を整理し、グラフィックでわかりやすく表現することでした。
そのために採用したのは、コンテンツを引き立たせる「ハイライト表現」です。画面全体をダーク基調にし、目立たせたい文字やイラスト、プレビュー等をハイライトカラーにすることで、視線を導く効果を狙っています。ボタンやアイコンも華美な装飾を施さずシンプルに表現して、迷わない操作感を重視しました。
また、より細部のデザインにもこの考え方を活用しています。一般的には、機能名称（例えば「部数」という情報）が目立つようにデザインされることが多いですが、新商品のUIでは、設定値（部数に対して「1部」という情報）の方がより目立つように明るいカラーを採用し、文字サイズも大きくしています。機能名称より、いま自分が行っている設定を確認できることの方が「主」であると考えたためです。
色見の実機検証とアイコン表現のこだわり
デザイナーがツールを使って机上でデザインした画面を実際の商品の画面に表示させると、思い描いていた印象とは異なり、ダークカラーとハイライトカラーが思うような色味にならなかったこともありました。理想の見え方に近づけるために実機での色再現を繰り返し検証し、色の微調整を重ねました。
アイコンはモノトーンでも見やすいようにシンプルなかたちにしました。さらに、シンプルでありながら、複数のアイコンが並んだ時でもひと目で区別できるように、各アイコンのモチーフを工夫しています。それぞれのアイコンの角の丸みは1ドット単位で検証しています。わずかに丸みを持たせ、硬すぎない印象に仕上げました。
思い切ったUIスタイルへの挑戦
ダークカラーをベースにしたUIスタイルは、複合機に採用されている事例がまだ少ないですが、その狙いを検証しながら、社内の関連部門とも目指す姿を共有し、デザインを作り込んでいます。
人間の目や手の動きなど、身体的な特性はそう大きく変わることはありませんが、グラフィック表現の手法は時代とともに進化していきます。私たちデザイナーは日々の生活や仕事を通じて目にするものや体験することから得られるさまざまな気づきから、先進的かつユーザビリティを高めるUIスタイルを追求していきます。
※本記事中の画面イメージの色は、実際の複合機の操作画面とは異なることがあります。