ビジュアルデザインの基本を押さえることでシステムのわかりやすさはアップする。デザインの勘どころである4原則や色、フォントの特徴や選び方を押さえよう。色覚の多様性に配慮するカラーユニバーサルデザインも解説する。
これまでユーザーエクスペリエンス(UX)をデザインするフェーズを示した「JJGの5階層モデル」に沿って、下から順に骨格フェーズまで解説してきました。今回は骨格フェーズに続き、JJGの5階層モデルの最後となる「表層フェーズ」について、ITエンジニアの立場から取り組むべき内容を解説します(図1)。
表層フェーズでは見た目のデザインを決めていきます。こうした表層フェーズで行うデザインについて、「ビジュアルデザインの専門家であるビジュアルデザイナーの担当範囲であり、ITエンジニアには関係ない」と考えている方がいるかもしれません。しかし実際はそうではありません。
ここでいうデザインとは、家に例えると「外壁や壁紙をどれにするか」「室内にはどんな絵を飾るか」を決める作業に当たります。家を作るとき、外壁や壁紙を提案するのはインテリアデザイナーの役割ですが、どの壁紙を貼るかを最終的に決めるのは家主の役割です。システム開発も同様に、コンセプトに合ったビジュアルデザインであることに責任を持つのは、ビジュアルデザイナーへの依頼者であるITエンジニアなどの分掌となります。
ITエンジニアも表層デザインについて基本を学ぶことで、より良いUXを生み出すことができるようになります。以下では表層のデザインについて、ITエンジニアが知っておきたいポイントを解説していきます。
コンセプトやユーザー層からデザインを考える
まずは表層のデザインをビジュアルデザイナーに依頼できる場合に、ITエンジニアが担うべき役割を解説していきましょう。
システムのデザインは戦略フェーズからの積み上げが重要です。多くの場合、ビジュアルデザイナーはシステム構築の途中でプロジェクトに参画します。そのためビジュアルデザイナーが参画した段階で、戦略フェーズ以降に決めた情報を提供する必要があります。表層のデザインにおいても、システムのコンセプトやユーザー層、ユーザーの利用環境によってデザインが変わってくるからです。
「お薦めの本を紹介するWebページ」がダークなトーンの背景でシンプルにまとまっていたとしましょう。ユーザーが中高年の男性であれば、じっくり本を吟味するのに向いているかも知れません。同じWebページを、子どもが見たらどう感じるでしょうか。子どもにとっては面白みがなく、すぐに飽きられてしまうでしょう(図2)。
企業システムも同様です。業務効率化を目的としたシステムの画面に、たくさんのアニメーションや装飾が施されていたとしたら、ユーザーはどのように感じるでしょうか。作業の邪魔になり、効率化は達成できません。
このようなミスマッチが起きないように、ビジュアルデザイナーに「どんなユーザーが利用し、どのような目的があるシステムか」といったことをしっかり伝えるようにしましょう。戦略フェーズで策定したペルソナやストーリーボードを共有して説明するのもお勧めです。
またデザインを依頼する前に、ビジュアルデザインを行う上での制約を確認することも忘れてはいけません。ブランディングの一貫性を図るため、企業のコーポレートカラーやロゴ、イメージキャラクターを使うように求められることや、類似システムと関連性のあるデザインを求められることがしばしばあります。
受託型のシステムの場合は依頼主に、自社システムの場合は広報部などに、ビジュアルデザインの制約を確認します。さらに要件フェーズで決定したアクセシビリティーの方針をビジュアルデザイナーに伝えることも忘れないようにしましょう。
以上のような条件をビジュアルデザイナーに漏れなく伝えることで、ビジュアルデザイナーはユーザーや利用シーン、利用環境に適したビジュアルデザインを選択できるようになります。
必要な情報をビジュアルデザイナーに伝えればITエンジニアの仕事は終わりになるかというと、そうではありません。ビジュアルデザイナーが作成した情報システムの見た目を確認し、戦略フェーズから積み上げてきたコンセプトと照らし合わせて、問題ないかどうか確認することが必要になります。
もう一度、ユーザー層やシステムの目的・戦略などを振り返り、それらが表層のデザインとして実現されているかという観点で、デザインのレビューを行いましょう。そうすることで、個人の好みや感性に依存しない、UIの構築が可能になります。