Webデザインの基本原則 — 非デザイナーでもできるサイト改善

> このページのURL: https://lite-word.com/manual/web-design-basics/

> こんな質問に答えます:
> - サイトのデザインがなんかダサい気がする
> - デザインの知識がなくてもサイトをきれいにできる？
> - 文字の大きさや余白のバランスがわからない
> - 見やすいサイトにするコツを教えてほしい

はじめに🔊

「サイトがなんかダサい」「見にくいと言われた」——こう感じたことはないだろうか。実はWebデザインには明確なルールがあり、それを知っているかどうかで仕上がりが大きく変わる。

デザイナーじゃなくても大丈夫。 このページで紹介する基本原則を押さえるだけで、サイトの印象は劇的に改善できる。センスではなく「知識」の問題だ。

デザインの4原則🔊

デザインの世界で最も基本的な4つの原則。これだけ覚えれば、なぜ「ダサい」と感じるのかが分かるようになる。

1. 近接（Proximity）

関連する情報はまとめて配置し、関連しない情報は離す。

情報のグループが視覚的に分かることで、ユーザーはページの構造を瞬時に理解できる。

具体例:

• 店舗名・住所・電話番号・営業時間は1つのブロックにまとめる
• サービス紹介とお客様の声は別のセクションに分ける
• 価格と「申し込みボタン」は近くに配置する（離れていると迷う）

NG: 店舗名の下にサービス一覧、その下に住所、さらに下に電話番号……と関連情報がバラバラに散らばっている。

2. 整列（Alignment）

すべての要素に視覚的なつながりを持たせる。

テキスト、画像、ボタンの左端や中央を揃えるだけで、ページに秩序が生まれる。

具体例:

• テキストは左揃えが基本（日本語は左揃えが最も読みやすい）
• 見出しと本文の左端を揃える
• 3つ並んだカードの幅と高さを統一する

NG: 見出しが中央揃え、本文が左揃え、画像が右寄せ——と揃え方がバラバラ。

3. 反復（Repetition）

同じデザイン要素を繰り返して一貫性を作る。

色、フォント、アイコン、余白の取り方などを統一することで、サイト全体に「まとまり感」が出る。

具体例:

• 見出しの色とサイズをすべてのページで統一する
• ボタンの色と形をサイト全体で同じにする
• セクションごとの余白の取り方を揃える

NG: ページごとに見出しの色が違う、ボタンのデザインが3種類ある、余白がページによってバラバラ。

4. コントラスト（Contrast）

重要な要素を目立たせ、情報の優先順位を視覚的に伝える。

大きさ、色、太さなどの差をはっきりつけることで、ユーザーの目を誘導できる。

具体例:

• 見出しは本文より明らかに大きくする（1.5倍以上）
• CTAボタン（お問い合わせ等）はサイトの中で最も目立つ色にする
• 重要なキーワードは太字にする

NG: 見出しと本文のサイズがほぼ同じ、ボタンが背景に埋もれている、どこが大事か分からない。

配色の基本🔊

3色ルール

サイト全体で使う色は 3色 に絞るのが鉄則。色が多いほどゴチャゴチャした印象になる。

背景色の選び方

• 白（#FFFFFF）または薄いグレー（#F5F5F5程度）が最も安全
• 背景に濃い色を使うと文字が読みにくくなる
• 「背景に色を入れたい」場合は、白と交互にセクションの背景色を切り替える方法がおすすめ

色の組み合わせに迷ったら

自分で色を選ぶのが難しい場合は、配色ツールを使うと失敗しにくい。

• Coolors — スペースキーを押すだけでおしゃれな配色を自動生成
• Adobe Color — 色相環から補色・類似色を選べる
• Color Hunt — 人気の配色パレットを一覧で探せる

ポイント: 業種のイメージに合った色を選ぶこと。例えば、医療系なら青や緑（清潔感・安心感）、飲食系なら赤やオレンジ（食欲・活力）など。

余白（ホワイトスペース）の重要性🔊

詰め込みすぎ = 素人デザインの最大の特徴

「もったいないからスペースを埋めよう」——これが最もやってはいけないこと。素人が作ったサイトとプロのサイトの最大の違いは余白の使い方にある。

余白は「何もない」のではなく「呼吸」

余白には以下の役割がある。

• 情報のグループを区切る — セクション間の余白で「ここからは別の話題」と伝えられる
• 読みやすさを確保する — 文字が詰まっていると、読む気が失せる
• 高級感・信頼感を演出する — 余白が多いサイトほど洗練された印象になる
• 重要な要素を目立たせる — 周囲に余白があるものは自然と目に入る

余白の目安

迷ったら「多すぎるかな？」と思うくらいがちょうどいい。

フォント・文字サイズ🔊

基本ルール

フォントの選び方

• 見出し: 太めのゴシック体で目立たせる
• 本文: 読みやすいゴシック体（游ゴシック、Noto Sans JP等）
• 明朝体は見出しのアクセントとして使うのはアリだが、本文には向かない（画面では読みにくい）

画像の使い方🔊

高品質な画像を使う

ぼやけた画像、解像度が低い画像は、サイト全体の信頼感を大きく損なう。スマホで撮った写真でも、明るさと構図に気を配るだけで印象が変わる。

無料素材サイト:

• Unsplash — 高品質な写真が無料
• Pexels — 日本語検索対応の無料写真素材

テイスト（トーン）を統一する

サイト内の写真が「明るいナチュラル系」と「暗いクール系」で混在していると、統一感がなくなる。

• 写真のフィルター（明るさ・コントラスト）を統一する
• イラストを使う場合はタッチを揃える（フラットデザイン、手書き風など混ぜない）

意味のある画像を選ぶ

「なんとなくおしゃれだから」で選んだ画像は、かえって邪魔になることがある。

• その画像が コンテンツの理解を助けるか を基準にする
• 手順の説明にはスクリーンショットが最も効果的
• 装飾目的だけの画像は、読み込み速度を遅くするだけになりかねない

レイアウトの基本🔊

視線の流れパターン

人がWebページを見るときの視線の動きには法則がある。

Fパターン（テキスト中心のページ）:

1. まずページ上部を横に読む
2. 少し下がってまた横に読む
3. あとは左側を縦にスキャンする

→ 重要な情報はページ上部と左側に配置する

Zパターン（ビジュアル中心のページ）:

1. 左上 → 右上 → 左下 → 右下の順にZの字で視線が動く

→ ロゴは左上、CTAボタンは右上または右下に配置する

レイアウトの鉄則

• 重要な情報を上に置く — スクロールされないかもしれない。「結論 → 詳細」の順番
• 1セクション = 1メッセージ — 1つのセクションに複数のメッセージを入れない
• CTAは繰り返す — お問い合わせボタンは1回ではなく、ページ内に複数回設置する

スマホファーストの考え方🔊

現在、Webサイトへのアクセスの 70%以上がスマホから と言われている。PCで綺麗に見えても、スマホで見にくければ意味がない。

スマホファーストで気をつけること

• タップしやすいボタンサイズ — 最低44px x 44px（指で押せるサイズ）
• 横スクロールさせない — テーブルや画像が画面からはみ出していないか確認
• 文字が小さすぎないか — スマホでピンチ（拡大）しないと読めないサイトは離脱される
• 電話番号はタップで発信できるように — tel: リンクを設定する
• フォームの入力を簡単に — スマホで長い住所を打たせない工夫（郵便番号から自動入力など）

確認方法

ブラウザの開発者ツール（F12キー）でスマホ表示をシミュレーションできる。実機（自分のスマホ）でも必ず確認すること。

よくあるNGパターンと改善方法🔊

まとめ：改善チェックリスト🔊

サイトを改善するときは、以下の項目を上から順にチェックしてみよう。

• [ ] 色は3色以内に収まっているか
• [ ] 余白は十分に取れているか
• [ ] フォントは2種類以内か、本文は16px以上か
• [ ] 関連する情報がグループ化されているか（近接）
• [ ] テキストや画像の端が揃っているか（整列）
• [ ] デザインの統一感があるか（反復）
• [ ] 重要な要素が目立っているか（コントラスト）
• [ ] スマホで見て問題ないか
• [ ] 画像は高品質で、テイストが統一されているか
• [ ] CTAボタンは分かりやすく配置されているか

関連ページ🔊

• SEO対策とは？ — 初心者向けガイド
• お問い合わせ・コンバージョンを増やすには
• サイト表示速度の改善ガイド
• レスポンシブ対応ガイド
• ヘッダーロゴの設定

最終更新: 2026-03-17