見た目をそろえて、だれでも使いやすいWebページの画面（UI）を作る

## 一番大事な内容と次の行動が、数秒で分かるようにする 装飾を整える前に、視覚的な強弱によって重要度を明確にする。ページを見た人が数秒以内に目的を特定し、主な価値を理解し、次に取るべき行動を認識できるようにする。 - 画面またはセクションごとに、主要なメッセージを1つに絞る。 - 基本の階層はページタイトル、セクション見出し、本文とし、必要な場合にだけ下位の階層を加える。 - より重要な内容は、サイズ、コントラスト、位置、周囲の余白によって強調する。 - 素早い読み取りが重要な場合は、補足詳細より先に結論を置く。 - 最も強い視覚表現は、主要な行動または意思決定のために取っておく。 - すべての要素を大きく、太字にし、色鮮やかにし、高コントラストにすることは避ける。 - 5秒テストを行う。初めて見た人が、ページの内容と想定される次の行動を説明できるか確認する。 ## 共通のマス目（グリッド）と余白の幅で、要素をそろえて並べる 間隔は要素間の関係を伝える。共通の尺度とグリッドを使い、関連する項目にはつながりを感じさせ、別のグループは明確に分け、レイアウトが変わってもリズムを保てるようにする。 - 8ピクセル単位の間隔尺度から始め、より細かな調整が必要な場合は4ピクセル単位への分割を認める。 - シンプルなレスポンシブグリッドを使う。たとえばスマートフォンでは1列、タブレットでは2列、広い画面では最大12列とする。 - グループ内の間隔を、グループ間の間隔より小さくする。 - 繰り返し使うコンポーネントを、共通の列、端、ベースラインに揃える。 - 開始値として、本文の行の高さを約1.6、段落間の空きを行の高さの約1.5〜2倍にする。 - ほぼ同じ測定値を増やさず、間隔の値には設計用の共通変数を使う。 - 対応するすべての画面幅で、セクションとコンポーネントをまたぐ縦方向のリズムを確認する。 ## スマホから広い画面まで、読む順番が崩れないようにする 利用者が必要とする順序で内容を並べ、視覚的なレイアウトによってその順序を補強する。レスポンシブ設計では、単に小さい画面へ収めるのではなく、意味を保たなければならない。 - まずモバイル向けに内容の順序を設計し、その後で広い画面向けにレイアウトを強化する。 - 実用上可能な場合、日本語の本文は1行35〜45文字、ラテン文字の文章は1行45〜75文字程度にする。 - Webの段落は、字下げだけに頼らず間隔で分ける。 - 各セクションでは、証拠より先に要点を置き、証拠の後に関連する行動を置く。 - 本文を読まなくても、見出しの並びだけで内容を理解できるようにする。 - 列が折り畳まれたり要素が移動したりしても、論理的なソース順を保つ。 - ズーム、文字の拡大、狭い画面幅、長いラベル、日付、価格、複数文字体系の混在を試験する。 ## 読みやすい文字の大きさと行間を決める 書体は階層、読みやすさ、信頼感を形作る。限られた文字サイズ尺度と十分な行の高さを使い、小さい画面でも読みやすく、内容の変化があっても安定するようにする。 - 開始値として、H1は約28〜36ピクセル、H2は22〜28ピクセル、H3は18〜20ピクセル、本文は16〜18ピクセルにする。 - 本文の行の高さは約1.6、見出しの行の高さは約1.25〜1.4にする。 - モバイルで13〜14ピクセル以下の本文に頼らない。 - フォントファミリーと太さを制限し、書体を増やす前に階層によって違いを付ける。 - 日本語の字間は標準に保ち、ラテン文字の表示用テキストにだけ必要に応じて控えめな字間調整を使う。 - 太字による強調は、読み取りを本当に導く少数の語句に限定する。 - 数字、記号、多言語文字列、利用者が生成した文章、欠けている字形を試験する。 ## 色の数をしぼり、文字が読める明るさの差（コントラスト）を守る 色は、意味を伝える唯一の手段にせず、優先度、状態、識別性を伝えるために使う。色数を抑えた配色により、主要な行動と重要な状態変化を認識しやすくする。 - 支配的な背景色、補助的なテキストまたは表面の色域、小さな比率のアクセント色を使う。 - 中性色に加え、機能色を約3色、主要なアクセント色を1色から始める。 - 成功、警告、危険、情報の各色を一貫して割り当てる。 - 通常の文章では少なくとも4.5:1、大きな文章では3:1のコントラストを目標にする。 - 主要な行動には、色、形、ラベル、配置を組み合わせた固有の表現を与える。 - 色で符号化した状態には、文章、アイコン、パターンなど色以外の手掛かりも組み合わせる。 - 無効、ホバー、フォーカス、画像上への重ね合わせを含め、すべての前景色と背景色の組み合わせを確認する。 ## くり返し使うボタンなどを、共通の部品と決まった値にまとめる 一貫性は、利用者の学習負担とチームの保守負担を下げる。個別ページを都度直すのではなく、繰り返し現れる視覚上の判断を、共有する設計用の共通変数とコンポーネントへ変換する。 - 色、間隔、書体、角の丸み、境界線、影、動きについて設計用の共通変数を定義する。 - 再利用できるボタン、カード、ナビゲーション、フォーム、ダイアログ、バッジ、フィードバック要素を構築する。 - 該当する場合は、標準、ホバー、アクティブ、無効、読み込み中、エラー、フォーカスの状態を定義する。 - 一時的な見た目ではなく、目的または役割に基づいてバリエーションを命名する。 - 同じ役割は、プロダクト全体で見た目と動作を一貫させる。 - 許可するバリエーション、内容規則、アクセシビリティ要件、レスポンシブ動作を文書化する。 - パターンが変わった時は共有コンポーネントを変更し、ページ固有のずれを避ける。 ## 画像やアイコンを、飾りでなく説明のために使う 画像、アイコン、図は、説明、案内、信頼の補強に使う。素材の扱いを標準化すると、装飾がメッセージを覆い隠すのを防ぎながら、知覚される品質を高められる。 - ヒーロー画像やカードなど、繰り返し使う素材の役割ごとに一貫した縦横比を割り当てる。 - 画像を実際の表示寸法に合わせて変更し、効率のよい新しい形式を優先する。 - レスポンシブな画像ソースを用意し、重要な内容を隠さない場合は画面外の画像の読み込みを遅らせる。 - 画像の見た目だけでなく、その目的を伝える代替テキストを書く。 - 1つのアイコン群の中で、線の太さ、角、塗り、視覚的な大きさを一貫させる。 - 図は、説明、視覚モデル、簡潔な要点として構成し、明確な凡例を付ける。 - 画像上の文字コントラストを確認し、必要な場合は安定した背景処理を用意する。 ## 押した時や入力した時に、すぐ控えめな反応を返す 操作設計では、使用できる対象を示し、入力を受け付けたことを伝え、進捗を見せ、結果を確認できるようにする。動きは、作業を遅らせたり不快感を生んだりせず、状態変化を明確にしなければならない。 - 可能な場合は、主要な入力から約100ミリ秒以内に見える反応を返す。 - ホバーと切り替えの時間は短くし、多くの場合は約120〜200ミリ秒にする。 - 関連する操作部品について、押下、読み込み中、成功、エラー、無効、フォーカスのフィードバックを定義する。 - 完了が即時でない場合は、進捗表示またはスケルトン表示を使う。 - 方向と速度変化を、装飾ではなく空間や階層の変化を説明するために使う。 - 内容と競合し、注意を拘束し、入力を妨げるアニメーションは避ける。 - 動きを減らす設定を尊重し、注意をそらす背景メディアを自動再生しない。 ## キーボードや画面読み上げ（スクリーンリーダー）でも、最後まで操作できるようにする アクセシビリティは操作上の中核要件であり、最後に行う視覚監査ではない。利用者が異なる入力方法と出力方法を通じて、状態を認識し、操作部品を理解し、移動し、エラーから回復し、主要な流れを完了できるようにする。 - 見えるフォーカス表示と論理的なキーボード順を保つ。 - 実用上可能な場合は、操作対象を少なくとも44×44ピクセルにする。 - 画像には意味のある代替情報、操作部品にはアクセシブルな名前、フォーム項目には明示的なラベルを与える。 - エラーでは対象項目を特定し、問題を説明し、修正方法を示す。 - 意味のある音声と動画には、字幕または書き起こしを用意する。 - キーボードだけを使う場合と、スクリーンリーダーの出力を使う場合の両方で、重要な流れ全体を検証する。 - コントラスト、ズーム、文字サイズ変更、動きの抑制、一般的な色覚の違いを試験する。 ## 公開前に、表示の速さと検索向けの基本を確かめる 性能、見つけやすさ、保守しやすさは、設計された体験の一部である。測定可能なリリース確認基準を定義し、日常的な内容やコンポーネントの変更後も改善が残るよう、意思決定を記録する。 - レスポンシブで圧縮済みの画像を使い、重要でない素材は必要な時にだけ読み込む。 - フォントを必要な字形に限定し、代替フォントでの表示を許可し、表示を妨げるスタイルを最小限にし、不要不急のスクリプトを遅らせる。 - 各ページに意味のあるH1を1つ置き、固有のタイトル、説明、ソーシャルプレビューを用意する。 - LCPは2.5秒未満、CLSは0.1未満を開始目標とし、その後は最新の性能基準を適用する。 - 最も重要な登録、購入、依頼の流れで、速度と離脱を試験する。 - リリース前に、階層、間隔、書体、色、状態、素材、アクセシビリティ、性能をレビューする。 - 設計上の意思決定を記録し、共有コンポーネントと設計用の共通変数を通じて変更を実装する。 - 実際の利用者の成果を監視し、よりよい基準を証拠が示した場合はしきい値を見直す。