はじめに
目的
本書は、ホームページ（Webサイト）を作る人や運営する人が、誰でも見やすく、伝わりやすいサイトを作るための基本ルールをまとめたものです。専門的な理論を簡潔にし、具体的な実例や注意点で補足します。
対象読者
・これからサイトを作る個人や小規模事業者
・デザインの基礎を学びたい制作担当者
・既存サイトの見直しをしたい方
本書で扱う内容（概要）
第2章：Webデザインの基本ルールと4大原則
第3章：ホームページを構成する基本パーツ
第4章：色に関する具体的なルール
第5章：文字・フォントのルール
第6章：画像に関するルール
それぞれ実践で使えるポイントと具体例を中心に解説します。
読み方のポイント
まず全体を俯瞰してから、必要な章を順に読むと効率的です。小さな改善でも見やすさは大きく変わります。例：色の配分を変えるだけで滞在時間が伸びることがあります。
注意点
流行のデザイン手法は参考にしてください。ユーザーの使いやすさを最優先に判断してください。
Webデザインの基本ルールと4大原則
はじめに
Webデザインは見た目だけでなく、使いやすさを左右します。基本は「近接」「整列」「強弱」「反復」の4原則（CRAP）です。以下で分かりやすく説明します。
近接（Proximity）
関連する要素を近づけると、ユーザーは自然にまとまりとして認識します。例えば、名前・住所・電話は一つのグループにし、別の情報とは余白で区切ります。実践としては余白（マージン）を活用し、情報のグループ化を意識してください。
整列（Alignment）
要素を揃えると画面に秩序が生まれ、信頼感が増します。左揃えの本文、中央揃えの見出し、ボタンは同じ基準線に揃えるなど、基準を決めて一貫させます。グリッドを使うと整列が簡単になります。
強弱（Contrast / Emphasis）
重要な情報を目立たせることで理解が早まります。見出しは太字・大きめ、重要なボタンは色で強調します。ただし強調を多用すると効果が薄まるので、優先順位を決めて一つか二つだけ目立たせましょう。
反復（Repetition）
同じスタイルを繰り返すと統一感が生まれます。見出しのサイズ、ボタンの角丸、リンク色などをサイト全体で統一します。テンプレートやスタイルガイドを作ると反復が楽になります。
ホームページを構成する基本パーツ
ヘッダー
サイトの最上部にあってロゴやサイト名、連絡先、検索窓を置きます。訪問者がまず目にする場所なので、ブランドが分かる表示を優先します。固定表示（スティッキー）にすると利便性が上がります。
グローバルナビゲーション
主要なメニューで、サイト全体の道しるべです。項目は多すぎず、最大7個程度が目安。ドロップダウンは補助的に使い、重要なページへの導線を明確にします。
メインコンテンツ
ページの中心情報を載せる領域です。見出し→導入文→本文の順で構成し、重要な情報は上部に配置します。段落や見出しを分け、読みやすい長さに保ちます。
サイドバー
補助的な情報や関連リンク、CTA（行動喚起）を置きます。PCでは右や左に固定表示し、スマホでは下部に回すのが一般的です。広告や最近の記事リストを入れます。
フッター
最下部に会社情報、利用規約、プライバシー、サイトマップをまとめます。連絡先やSNSリンクを置くと信頼感が増します。どのページでも同じ内容を表示すると利用者が迷いません。
色に関する具体的なルール
配色の基本（70：25：5）
配色は「メイン70％／セカンダリー25％／アクセント5％」の比率が目安です。メインカラーはブランドの印象を作ります（例：ネイビーやブランドカラー）。セカンダリーは背景や見出し、カードの色に使い、アクセントはボタンやリンクなど注目させたい部分に使います（例：オレンジや赤）。
色の役割と使い分け
- メイン：サイト全体のトーン。ナビやヘッダーに使用します。
- セカンダリー：コンテンツの区切りや補助的な要素に使用します。
- アクセント：行動を促す要素（CTA）や重要な強調に使用します。
リンクと文字色のルール
リンクは伝統的に青が見分けやすいです。色だけで区別しない工夫も重要で、下線やアイコンを併用すると分かりやすくなります。背景と文字のコントラストが低い色（薄い灰色など）は避けてください。視認性が低いと読者が離れてしまいます。
色覚の多様性への配慮
色覚特性が異なる人にも配慮しましょう。重要な情報を色だけで示さず、テキストや形も使って伝えます。配色は3〜4色に絞ると統一感が出ます。
実践的なチェック方法
配色を決めたら、実際に画面で確認します。明るさや見やすさを確かめ、必要ならアクセントの明度や彩度を調整してください。
文字・フォントのルール
本文は読みやすさを最優先に考えます。使用フォントは2〜3種類までに絞り、本文用・見出し用・アクセント用と役割を分けます。本文には可読性の高いゴシック系や明朝系を選び、装飾的な書体は見出しやロゴに限定してください。
推奨サイズと行間
– 本文サイズはおよそ16px前後を基準にします。モバイルではやや大きめにするのが親切です。
– 行間（line-height）は文字サイズの1.5〜2倍を目安にし、読みやすさを確保します。
ウェブ対応とフォールバック
– 指定フォントが無い場合に備え、フォントスタックを用意します。
例: font-family: ‘Noto Sans JP’, ‘Hiragino Kaku Gothic ProN’, Meiryo, sans-serif;
– 可能なら可変フォント（variable font）でサイズや太さを調整すると軽量化できます。
アクセシビリティと強調
– コントラストを確保し、小さなサイズでも判読できる太さを選びます。
– 強調は太字や色で行い、過度な斜体や装飾は避けます。
禁則処理と校正のポイント
– 行頭に句読点や括弧が来ないようにします。句点「。」や読点「、」の行頭回避は重要です。
– 半角・全角の混在を避け、英数字は半角で統一するなど表記を揃えます。
– 改行位置は意味の切れ目で行い、語と語を不自然に分けないように調整します。
CSSでの具体例
– body{font-size:16px; line-height:1.6; word-break:keep-all;}
– 英数字長い語は overflow-wrap:break-word; で折り返しを補助します。
これらを守ることで、読みやすく整った文章表示が実現できます。
画像に関するルール
高解像度で信頼感を出す
画像は鮮明で高解像度のものを使います。画質が粗いとサイト全体の信頼性が下がります。商品や人物の写真は、必要に応じて部分を拡大しても粗くならない画像を用意してください。
トンマナ（トーン＆マナー）の統一
色調、明るさ、コントラスト、フィルターなどを揃えます。例えば全ての人物写真を柔らかい暖色系に統一すると親しみやすい印象になります。背景がバラバラだと雑多に見えるため、撮影時か加工で統一してください。
アスペクト比を揃える（具体例）
サムネイルは16:9、カード一覧は1:1、人物紹介は3:4など比率を決めて使います。比率をそろえると一覧画面で高さが揃い、整った印象を与えます。
画質と表示速度のバランス
高画質でもファイルが重ければ表示が遅くなります。必要な場面はWebPや圧縮（品質80前後）で軽くしてください。背景など装飾画像は解像度を落としても問題ない場合が多いです。
アクセシビリティと権利関係
alt属性で簡潔な説明を付け、画像の目的を伝えます。商用利用の画像はライセンスを確認し、必要ならクレジットを表示してください。
実践チェックリスト
・画像が鮮明か
・色調と明るさが揃っているか
・比率が決まっているか（例：16:9/1:1/3:4）
・ファイルサイズは適切か
・altが付与されているか
・使用権を確認したか
これらを順に確認することで、一貫性と洗練された印象を保てます。
