画面は、ユーザーとソフトウェアとの対話を仲介します。ユーザの指示をインプットとし、ソフトウェアからの結果をアウトプットとします。一連の流れに沿ってに繰り返すことで、特定の業務となる人間の意思決定を自然と実行できるようにします。
■ 画面を構成する部品
画面を構成するための定番の部品があります。これらの部品を組み合わせることで、画面をデザインし、適切な操作を促すようにします。
①ボタン (Button)
ユーザーがクリックやタップすることで特定のアクションを起動するための要素
②テキストボックス (Textbox)
ユーザーがテキスト情報を入力するための領域
③ラベル (Label)
部品の説明や指示を表示するテキスト要素
④チェックボックス (Checkbox)
複数の選択肢から一つまたは複数を選択するための部品
⑤ラジオボタン (Radio Button)
複数の選択肢から一つだけを選択するための部品
⑥ドロップダウンリスト (Dropdown List)
選択肢の一覧から一つを選択するための部品
⑦スライダー (Slider)
値の範囲を指定するための部品
⑧タブ (Tabs)
画面のコンテンツを複数のセクションに分け、一つのセクションをアクティブにして表示するための部品
⑨アイコン (Icon)
機能や内容を視覚的に示すための小さなグラフィック要素
➉モーダルウィンドウ (Modal Window)
背景を暗くして、情報やアクションを強調して表示する小さなウィンドウ
⑪スクロールバー (Scrollbar)
画面の可視領域を超える内容をスクロールして閲覧するための部品
⑫フレーム(Frame)
部品を配置する画面の枠
■ 画面デザインの原則
画面のデザインには、操作性と呼ばれる、見やすさ、理解しやすさ、使いやすさなどの定性的な非機能要件を含みます。直感的な操作を実行可能とし、必要な情報をユーザーに効果的に伝えるなどの配慮が必要になり、特に、B2Cなどのコンシューマ向けの画面では、デザインに必要とされる「センス」が問われることもあります。そのため、画面のデザインは、非エンジニアの工業デザイナーが担当することもあります。感覚的なアイデアは、エンジニアのような機能やロジックだけに精通した人よりも、ユーザに近く、そして、デザイン能力があるため、受け入れられやすいという傾向があります。
画面のデザインを進める際には、以下のデザイン原則に配慮します。
①一貫性
同じ動作や機能には、常に同じデザインやアイコンを使用する
②シンプルさ
必要な情報や機能のみを表示し、余分なものは排除する
③直感性
ユーザーが直感的に理解しやすいデザインを心がける
④フィードバック
ユーザーがアクションを取った際に、それに対するフィードバックを提供する
■ 画面デザインの手順
コンシューマ向けの画面デザインの基本的な手順を以下に示します。
1.ターゲットユーザーの定義
誰のためのデザインなのかを明確にします。ターゲットユーザーのニーズや期待を把握します。
2.ワイヤーフレームの作成
ワイヤーフレームとは、画面の基本的なレイアウトや配置だけを考えた簡易的なスケッチです。ユーザとやり取りする情報の階層構造やナビゲーションを設計します。
3.モックアップの作成
ワイヤーフレームをもとに、具体的な色やタイポグラフィ、イメージなどを使用して画面の見た目を詳細にデザインします。
4.プロトタイピング
モックアップを基に、クリックなど簡易的に動作可能なプロトタイプを作成します。これにより、実際のユーザー体験をシミュレートし、デザインの有効性をテストすることができます。
5.ユーザーテスト
プロトタイプをターゲットユーザーに使用してもらい、フィードバックを収集します。このフィードバックをもとに、デザインを改善していきます。
6.最終的なデザインの確定
ユーザーテストの結果をもとに、デザインを修正し、最終的なデザインを確定します。
7.実装
デザイナーと開発者が連携して、デザインを実際の画面として実装します。この際、デザインのガイドラインや仕様書が役立ちます。
8.継続的な評価と改善
画面が実際に公開された後も、ユーザーフィードバックのデータをもとに、継続的にデザインを評価し、必要に応じて見直しをしていきます。
画面は、ソフトウェアのデザインの中で、唯一、目に見えるものであり、ユーザの思考や嗜好など、事前に予測できない要素が多分に含まれます。その結果、最終的に認識齟齬などが発生し、クレームとなるケースもあり得ます。そのため、画面に関しては、実現すべき機能が決定したら最初から明示し、編集を繰り返していく必要があります。
■ まとめ
「画面のデザインは、アートか、機能優先か、それが問題だ」
画面のデザインに凝りすぎると、時に見直しに次ぐ見直しが発生し、ソフトウェア開発のプロジェクトに影響を与える場合もあります。しかし、機能一辺倒だと、機械的過ぎて、使う側も理解しずらいこともあります。プロジェクトに影響が出ない範囲で、デザインへのこだわりを持つことが、一つの落としどころだと考えます。