Webサイトのデザインには、載せる情報の順序、ページ間の移動、文字と写真、色や余白、ボタンや入力の使い方が含まれます。画面を美しくするだけでなく、訪問者が必要な答えを探し、次の行動を選べるように作ります。

UIは画面や操作の接点、UXは利用して目的を達成するまでの体験全体を指す言葉です。アクセシビリティは、障害のある人を含めて情報や操作を利用できるようにする考え方です。専門語で目的を置き換えず、実際の用事を言葉にしてください。

架空の修理店なら、初めて依頼する人が対象品、持参物、受付方法を確認する用事です。トップ、修理の案内、店舗案内を用意し、条件を読んで相談へ進めるようにします。採用サイトなら仕事内容と応募、商品販売なら商品の条件と購入など、必要な情報と流れは変わります。

原稿、写真、ロゴを準備し、どこに何を載せるかを決めます。公開できる事実がない場合は、写真や色から作り始めず、原稿を確かめます。サイトによる売上や認知の変化は、デザインを作っただけでは保証できません。

この章の根拠：出典4出典5

ワイヤーフレームは、情報を置く位置を線や文字で示す設計案です。紙や画面作成ツールで、タイトル、要点、条件、写真、リンクを並べます。完成する見た目を細かく描く前に、何を先に読み、どこへ進むかを確認します。

修理の準備ページでは、何の準備か、品名・症状・写真、受付条件へのリンクという順にします。注意事項は必要な判断の近くへ置きます。全画面に同じ大量の案内を置くより、そのページで答える疑問と次の行動を絞ります。

狭い画面では、横並びを一列にするなど配置が変わります。レスポンシブデザインは、画面幅などへ合わせて表示を調整する方法です。パソコン用の案を縮小するだけでなく、長い日本語や写真を入れ、読む順序と行き先が残るかを試します。

写真に必要な条件が写っていない、リンクの行き先が未定、本文がまだ仮の文字だけという案では、使いやすさを判断できません。短くても実際に載せる原稿を置き、必要な資料とリンクの関係を確認してください。

この章の根拠：出典6

配色はロゴや既存の指針を確認し、背景、本文、見出し、操作するリンクに役割を持たせます。「業種ならこの色」という決めつけで選ぶ必要はありません。色だけで必須や注意を伝えず、文字や形でも意味がわかるようにします。

書体は見出しと本文の役割を決め、長い文章を読めるかを試します。フォントは文字の形をまとめたデータです。使用や配信の条件があるため、自社で使う環境へ適用できるかを提供者の条件で確認します。画像に文字を焼き込むと、拡大や更新が難しくなる場合があります。

写真は、対象品、作業の状態、提供する内容を答えるものを選びます。利用してよい元ファイルを用意し、狭い画面で必要な箇所が切れないか、本文の説明と対応するかを見ます。情報を伝える画像には役割に合う代替テキストを付け、装飾画像とは分けます。

通常の文字と背景には4.5:1、大きい文字には3:1などのコントラスト基準があります。ロゴ等の例外もあり、本文の読みやすさとブランド表現を同じ理由で処理しません。色の値と実際の表示で確認します。

この章の根拠：出典1出典7

近接は関係する内容を近くに置くこと、整列は端や基準線をそろえること、反復は同じ役割を同じ見た目で示すこと、対比は重要度などの違いを見た目の差で示すことです。四つは飾りを増やす規則ではなく、情報を読みやすく整理する見方として使います。

架空の修理相談の案内には、品名、症状、写真という三つの準備物があります。見出しと説明を近づけ、左端をそろえ、三つの見出しを同じ大きさにします。主見出しと次の行動には別の強さを付けます。読者が「何を用意するか」を拾える配置にするのが目的です。

原則を適用しても情報が不足していれば疑問には答えられません。受付できる物や相談先が不明なら、色を変える前に内容を確認します。売上や申込み率が上がる保証にもなりません。ここでは全体のデザイン工程の具体例として、一枚の準備案内へ四原則を適用します。

品名の見出しと説明の間が、次の症状の見出しとの間より広いと、どこまでが一組か分かりにくくなります。見出しの直後の余白を小さくし、次の準備物との間を広くすると関係が伝わります。余白は「余った場所」ではなく、情報をまとめるための材料です。

CSSでは見出しのmargin-bottomを0.25rem、各sectionのmargin-topを1.75remにする例を使います。この数値は練習用の選択で、全画面の規定ではありません。MDNのボックスモデルは、要素の内側のpadding、枠のborder、外側のmarginを区別します。枠の内側へ文章を寄せ過ぎるならpaddingを調整し、組の間ならmarginを見ます。

全ての余白を同じ値にすると、同じ組か別の組かが消えることがあります。逆に小さい画面のために全て詰めると読む余裕がなくなります。長い説明と短い説明を入れて、一組がまとまり、別の組と混ざらない距離を確認してください。

品名だけ左、症状だけ中央、写真だけ右に寄せると、読むたびに開始位置が変わります。説明を左揃えにし、見出しと説明の端をそろえると、上から内容を追いやすくなります。中心に置いた短い主見出しが適切な場合もありますが、長い説明文まで中央へ寄せる必要はありません。

反復では、三つのh2に同じ文字の大きさと余白を指定します。症状だけ大きいと、他より重要な条件だと受け取られる場合があります。実際に優先度が違うなら、理由が分かる文章も添えます。同じ種類のリンクへ同じ下線や操作枠を使うことも、操作の手がかりになります。

反復は画面の全てを同じにする意味ではありません。主見出しはページの話題、h2は準備物の種類なので役割が違います。揃える対象は同じ役割に限ります。情報の階層をHTMLで表したうえで外観を整え、文字の大きさだけで見出しを表す方法へ置き換えないでください。

主見出しを本文より大きくし、次のリンクへ背景を付けると、話題と進む先の違いを示せます。全ての項目を強調すると、どれを先に読むか分からなくなります。本例では主見出し、準備物、次の行動という役割へ強さの差を付けます。

デザインの対比と、WCAGの文字のコントラスト基準は別の確認です。W3Cは通常の文字と背景へ4.5:1以上、大きい文字へ3:1以上などの条件を示しています。ロゴ等の例外もありますが、普通の説明文が薄くて読みにくいことをブランドの色だけで正当化しないでください。画面のスクリーンショットの印象ではなく、指定した前景色と背景色で確認します。

本例の薄い灰色#aaaを濃い#173140へ変え、リンク文言はHTMLで「こちら」から「相談前の条件を読む」へ変えます。これはCSSの色変更とは別の手順です。W3Cのリンク目的の説明は、リンクの文章や対応する文脈から行き先の目的が分かることを扱います。枠を派手にする前に、リンクを押して何が出るかを文字で知らせます。

この章の根拠：出典1出典2出典3

ページ間の一貫性は、すべてを同じ画面にすることではありません。会社名、ナビゲーション、本文、見出し、リンク、注意事項など、同じ役割に同じ規則を使います。サービスの説明と店舗案内は内容が違っても、相談先への入口は同じ意味で見つけられるようにします。

小さなスタイルの見本を作ると、画面の種類が増えても確認できます。本文色、見出しの大きさ、段落の余白、リンクの下線と現在位置の表示、写真の説明位置を並べます。色の名称だけでなく値を記録し、担当者が同じ指定を使えるようにします。

HTMLのサイトでは複数ページから共通のCSSを読み、CMSではテーマのスタイルや共通部品を使う構成が候補になります。ただし、共通設定の変更は複数ページへ影響します。一つの画面だけを見て変更せず、トップ、サービス、案内など代表的なページを確認します。

原稿を長くしたときや、メニュー項目を増やしたときにも試します。自社担当が更新する情報では、文字数を極端に制限しないと崩れる案をそのまま納品条件にしないでください。更新できる幅と、専門担当が必要な変更を説明してもらいます。

この章の根拠：出典5出典6

配置と見た目の試作には、紙や画面作成ツールを使えます。自作のHTMLとCSSは内容と表示を分けて学べ、CMSは管理画面から文章や画像を更新する仕組みです。WordPressではテーマと追加機能が表示・操作へ関係するため、希望がどの設定で実現できるか確認します。

制作を依頼する場合は、目的、ページと原稿、配置案、見た目の見本、必要な操作、更新できる範囲を渡します。画面制作、コード、写真、試験、公開、操作説明、継続保守がどこまで費用に入るかをそろえます。画面作成ツールで描けることと、公開したサイトで動くことは別です。

以下の練習ではdesign-demoへbefore.html、after.html、before.css、after.cssを保存します。before.htmlは「こちら」とbefore.css、after.htmlは「相談前の条件を読む」とafter.cssを使います。二つのHTMLをブラウザで開き、同じ準備原稿で表示と文言を比べます。HTMLのリンク文言変更とCSSの変更の両方を行う比較です。

CSSだけの差を確認したい場合は、after.htmlのコピーでstylesheetのhrefだけをbefore.cssへ変更します。この場合はリンクの文言は変わりません。狭い幅と文字拡大、Tabでの現在位置も確認します。実際の受付はありません。

変更が反映されなければ、保存先、href、開いている複製、キャッシュを確認します。既存テーマへ移す場合は同名クラスと上書き範囲を調べ、変更前のファイルと設定を保管します。作業環境で試し、実環境のバックアップと戻し方を担当者が確認してから適用します。

この章の根拠：出典3出典1出典2出典5出典8

公開前に、スマートフォンで必要な条件を読み、次のリンクへ進みます。パソコンでは文字拡大とキーボードの移動も試します。入力欄があるなら、説明、間違いの修正、送信後の案内、会社側の受付まで確認します。Easy Checksは初期点検に役立ちますが、全体への適合を証明するものではありません。

写真の表示サイズと容量、読み込み、操作への反応も確認します。遅い場合は計測して、画像、スクリプト、サーバー等の原因に合わせて直します。文字を画像へ置き換えて読みやすさを損なう案や、演出が終わるまで重要な内容を隠す案は見直します。

検索向けには、ページの答えとタイトル、見出し、意味のある内部リンク、画像の説明をそろえます。検索公開の設定は担当者が確認し、公開しただけで検索掲載や順位を保証しません。デザインの評価も、見た目だけでなく訪問者が必要な内容へ進めるかで行います。

公開後に原稿や写真を更新したら、関係する画面を点検します。実際に聞かれた質問、読めなかった箇所、受付の不備を記録し、改善の候補へ戻します。変更前の版と復旧方法を保管し、表示不良なら対象の変更を戻して確認する担当を決めておきます。

この章の根拠：出典9出典6出典8

修理店の例では、対象と準備を読んで相談へ進むために、ページを用意し、配置を決め、色・文字・写真を選び、四原則を準備ページへ当てました。共通の規則を他のページへ広げ、実装と操作確認、公開後の更新へつなげます。

自作でも制作依頼でも、原稿と画面の理由を説明できることが出発点です。配置案、見た目の見本、実ページの確認結果、更新で未確認の範囲を残し、必要な仕事と費用を制作担当へ相談してください。

この章の根拠：出典5出典9出典6