コンポーネントには定石がある

ボタン・フォーム・ナビゲーションのような画面部品（コンポーネント）には、使いやすくするための決まった作り方があります。ゼロから考えるより、この定石を土台にするほうが、利用者が迷わない画面になります。

分かりやすいのがボタンの状態設計です。ボタンには、通常・ホバー（カーソルを重ねた状態）・押下（押している状態）・無効（押せない状態）の4つの状態があり、それぞれ見た目を変えます。見た目が変わることで、いまこのボタンがどういう状態かが画面から伝わります。とくに無効状態は、なぜ今は押せないのかを示す役割を持ちます。必須項目が空のうちは予約ボタンを薄い無効の見た目にし、入力が埋まると押せる見た目に変える、という作り方です。

フォームでは、入力欄が何を入れる場所か分かるラベルを添え、必須項目を示し、入力を間違えたときはどこがどう違うかを伝えます。ナビゲーションでは、利用者がいまどの画面にいるか（現在地）を示し、元の画面へ戻れるようにします。どれも、利用者が迷わないための共通の工夫です。入力欄も、いま操作している欄（フォーカス）や間違い（エラー）を見た目で返します。

アフォーダンスとタッチターゲット

アフォーダンスとは、形がその使い方を示すことです。少し浮き上がって見えるボタンは押せそうに見え、下線のついた青い文字はリンクだと分かります。利用者は説明を読まなくても、見た目から操作を予想します。逆に、押せないただの飾りを押せそうな見た目にすると、利用者は押しても反応がなく戸惑います。押せるものは押せるように、押せないものはそう見えないように作ります。

スマホでは指で操作するため、押せる部分の大きさも重要です。小さすぎるボタンは狙って押せず、隣を誤って押してしまいます。この押せる領域の大きさをタッチターゲットと呼び、iOSは約44ポイント、Androidは約48dpを最小サイズの目安とします。ボタン同士の間隔も十分に取り、指先はマウスのカーソルより太いことを前提に設計します。

プラットフォームの標準に従う（HIG・Material）

スマホアプリのデザインには、OSごとの標準ガイドラインがあります。iPhoneやiPadはAppleのヒューマンインターフェイスガイドライン（HIG）、AndroidはGoogleのマテリアルデザインです。ボタンやアイコン、画面の切り替え方の作法が、それぞれ細かく決められています。

なぜ標準に従うのかというと、利用者はすでに他のアプリで操作を覚えているからです。戻るボタンの位置や共有アイコンの形が標準どおりなら、初めて開いたアプリでも迷わず操作できます。独自の作法にすると、見た目は新しくても使い方を一から覚え直すことになり、利用者の負担が増えます。

ニールセンの10ヒューリスティック

できあがった画面が使いやすいかを点検するとき、便利な物差しがあります。ヤコブ・ニールセンがまとめた10のユーザビリティ・ヒューリスティックです。ヒューリスティックとは、経験から導かれた点検の目安のことです。

10項目には、システムの状態を見せる、利用者になじみのある言葉を使う、操作を取り消せるようにする、一貫性を保つ、エラーを予防する、などが含まれます。すべてを暗記する必要はありません。前回作った引き出しの画面を、この10項目で一つずつ点検すると、なぜ使いやすいのか、どこが惜しいのかを言葉にできます。

アクセシビリティとUXライティングの基礎

使いやすさは、できるだけ多くの人に届く形で考えます。これがアクセシビリティです。基本は2つあります。1つは色のコントラストで、背景と文字の明るさの差が小さいと読みにくくなります。もう1つは文字サイズで、本文が小さすぎると読めません。スマホの本文は16ピクセル前後を目安にします。

色の使い方にも注意します。エラーを赤い色だけで示すと、色の見え方が異なる人には伝わりません。色に加えて、文字やアイコンでも意味を示すようにします。

画面に出す言葉も設計の一部です。これがUXライティングです。ボタンのラベルは、送信のような一般的な言葉より、予約するのように押した後に何が起きるかが分かる言葉にします。エラーメッセージは、何が起きたかだけでなく、次にどうすれば直るかまで伝えます。短く、利用者の言葉で書くのが基本です。

演習：引き出した画面を原則で解説する

ここからは、学んだ原則を実際に使ってみます。前回（3-1）でまとめた参考UIパターンの引き出しから画面を1つ選び、なぜこう作られているかを原則で解説します。

ここで言葉にした理由は、通し課題で自分のUIを設計するとき、なぜこの形にしたかを説明する根拠になります。良いUIの理由を言葉にできると、そのまま自分の設計にも使えます。