初心者がやりがちなWebデザインのNG例10選（改善案つき）

Webデザインを始めたばかりの頃は、チュートリアルどおりに作っているはずなのに、
「なんか素人っぽい…」
「思ったより見た目が整わない…」
と感じることはありませんか？

実はその違和感の多くは、初心者が共通してやってしまう “NGデザインのクセ” によって生まれています。

しかもこれらのミスは、特別なセンスがなくてもルールを知るだけで一気に改善できるものばかり。

この記事では、Webデザインを学び始めた人がやりがちなNG例を挙げ、具体的な改善ポイントをセットで解説します。

☑ 余白の作り方
☑ 配色の基本ルール
☑ 見出しと本文のメリハリ
☑ UI/UXで押さえるポイント

など、今日からすぐに実践できる内容です。

「デザインが一気にプロっぽくなった！」と感じられるはずなので、ぜひチェックしてみてください。

なぜ初心者のWebデザインは「違和感」だらけになるのか？

初心者のWebデザインに“なんとなく違和感”が出てしまうのは、デザインの基準がないまま作り始めることに原因があります。
プロのデザイナーは、制作に入る前に以下の基準を必ず整理します。

• 余白
• 色数
• フォント
• 情報の優先順位
• グリッド（揃えのルール）

しかし初心者は、基準を決めず感覚で作ってしまうため、各要素のルールが揃わず、結果として統一感のないデザインになります。

デザインの基準がない

基準がないと、要素ごとに数値がバラバラになり、“整っていない印象”になります。

これらの細かいズレが積み重なり、「なんか素人っぽい」につながります。

情報整理が不十分

初心者デザインは 情報の優先順位（ヒエラルキー） が弱い傾向があります。

• 大事な見出しが小さい
• 補足情報がやたら目立つ
• 文章のまとまりが見た目でわからない

ユーザーが「どこを見ればいいかわからない」状態になると、それだけで読みにくく、違和感が生まれます。

使いやすさより「見た目」を優先してしまう

初心者は「オシャレ」や「かっこいい」を優先しがちですが、Webデザインの本質は 使いやすさ・読みやすさ にあります。

• クリックできるボタンが小さい
• 余白を詰めすぎて窮屈
• 行間が狭くて読みにくい
• 色数が多すぎて混乱する

見た目を優先して“ユーザーの使いやすさ”を無視すると、UXが下がり、結果的に違和感につながります。

NG例① 余白が足りなくて窮屈なデザインになる

よくある失敗

初心者がもっともやりがちなミスが 余白不足 です。

• 文字と文字が詰まりすぎている
• 画像まわりの余白がほとんどない
• カードの内側余白（padding）が小さすぎる
• セクションとセクションの距離が近い

余白が少ないデザインは、情報がギュッと固まり、ユーザーは「読みにくい」「見づらい」という印象を持ちます。

しかも、余白が少ないだけで素人感のあるデザイン に見えやすくなります。

改善ポイント（余白の取り方の基本）

余白は「なんとなく」で決めず、数値をある程度“固定”します。

✔ カード内の余白 → 24px 〜 32px を基準にする
✔ セクションの余白 → 80px〜120px 程度を確保
✔ 要素間の余白 → 小(8px) → 中(16px) → 大(32px) のように段階をつくる

プロのデザインは、「余白が広い」だけで洗練されて見えます。
迷ったら 2倍に広げる くらいでちょうどいいです。

NG例② テキストの行間・字間が適切でない

読みづらくなる原因

行間（line-height）や字間（letter-spacing）が適切でないと、文章が一気に“読みにくいデザイン”になります。

特に日本語は、行間が少し変わるだけで読みやすさが大きく変化します。

最適なラインハイトとレタースペースの目安

一般的に次を基準にすると読みやすくなります。

• 本文文字サイズ 16px → 行間 1.6〜1.8
• 本文文字サイズ 18px → 行間 1.5〜1.6
• 字間は 0〜0.05em の範囲に収める

英字は字間を少し広げたほうが読みやすいケースもありますが、初心者は “詰めすぎないこと” だけ意識すればOKです。

NG例③ 色を使いすぎて統一感がなくなる

よくある色使いの誤り

初心者は、カラフル＝オシャレと勘違いし、色を使いすぎる傾向があります。

• セクションごとに違う色
• ボタンがページ内で毎回違う
• 見出し色がバラバラ
• 強調色を多用して騒がしい印象に

色数が多いと、統一感がなくなり混乱を招きます。

配色は「3色まで」が基本ルール

プロデザインでは以下の3色に絞って構成します。

1. メインカラー（ブランドカラー）
2. サブカラー（補助）
3. アクセントカラー（強調用）

特にアクセントカラーは 本当に重要な場所だけ 使うことで、ユーザーの視線誘導がスムーズになります。

「色に迷ったら3色まで」
これだけで一気にデザインが整います。

NG例④ フォントの種類が多すぎる

フォント迷子になる理由

初心者は「オシャレに見せたい」という気持ちから、フォントを次々と変えてしまいがちです。

• 見出しがゴシック
• サブ見出しが明朝
• 本文が手書き風
• ボタンは別のフォント

これでは一瞬で“素人感”が出ます。

フォントは原則“2種類まで”でOK

基本ルールはこれだけ。

• 見出し用フォント 1種
• 本文用フォント 1種

日本語フォントは読みやすさの関係で“1種類のみ”でも十分です。

迷ったら「Noto Sans JP」1本で全て統一するこれだけで8割解決します。

NG例⑤ 文字サイズのメリハリがない

見出しと本文が同じ大きさ問題

初心者に多いのが、すべてのテキストが同じサイズで、どれが重要かわからない状態になっているデザインです。

• H1 と本文がほぼ同じ
• 見出しが目立たない
• キャッチコピーが弱い

優先順位が視覚化されていないため、読み手が迷ってしまいます。

ヒエラルキー（情報の優先順位）の作り方

見出し → サブ見出し → 本文の関係をしっかり数値で分けます。

この階層がしっかりしているだけで、一気にプロっぽく見えます。

NG例⑥ ボタンの押しやすさを考えていない

クリック領域が狭い

見た目を優先しすぎてボタンを小さくしすぎると、ユーザーが押しづらくなります。

• テキストに padding がほとんどない
• スマホで押せないサイズ
• 角丸や影がなくクリックできるかわかりにくい

機能性が低いと離脱の原因になります。

適切なボタンサイズと余白のとり方

基本基準はこれだけ。

• 高さ 44px 以上（スマホ推奨）
• テキストの左右に 16〜24px の余白
• アクションカラーを明確にする
• ホバー・アクティブ時の変化を必ず付ける

「押しやすさ」はデザインの重要な要素です。

NG例⑦ 行頭や余白のズレでレイアウトが崩れる

揃っていないことで “素人感” が出る

• 画像の角が揃っていない
• 左のラインが微妙にズレている
• カードの幅が統一されていない
• ボタンの位置が毎回違う

この“数pxのズレ”が積み重なると、素人感・雑な印象につながります。

グリッド・基準線の作り方

プロは、最初に 揃える基準線 を作ります。

• セクションの左右余白を一定にする
• 12カラム・8カラムなどのグリッドを決める
• 左揃えラインを1本決めて全要素を合わせる

これだけで劇的に整います。

NG例⑧ 情報が整理されておらずゴチャゴチャする

情報を詰め込みすぎる問題

初心者は「伝えたいこと」を全部入れがちです。

• 文章量が多い
• 吹き出しやアイコンを多用
• 類似情報があちこちに散らばっている

情報が整理されていないと、ページが“混乱状態”になります。

「グルーピング」で整う理由

情報は「意味でまとめる」だけで整理されます。

✔ 見出しと本文を近づける
✔ 似た情報は同じボックスに入れる
✔ 1つのカードには1つの情報だけ

グルーピングができると、視線の流れが自然になり読みやすくなります。

NG例⑨ アイコン・画像の統一感がない

デザインテイストのバラバラ問題

• アイコンが線画と塗りつぶし混在
• 角丸写真と四角写真が混在
• イラストのタッチが違う
• ストック画像の色味がバラバラ

統一感がないだけで、全体のクオリティが一気に落ちます。

統一するポイント（線の太さ・タッチ・角丸など）

統一すべきポイントは明確です。

• アイコンの線の太さを揃える
• 角丸の数値を統一する
• 写真は同じ色調で揃える
• イラストのタッチを合わせる

これらを統一すると「洗練されたデザイン」に見えます。

NG例⑩ インタラクションを考えず“死んだUI”になる

ホバーや活性状態がないケース

初心者デザインは「静止画」になりがちです。

• ボタンにホバーがない
• フォームのフォーカス状態がない
• リンク hover がわからない
• 押しても反応がない UI

動きがない UI は “死んでいる”ように見え、ユーザーが操作に不安を感じます。

最低限入れるべきインタラクション例

• ボタンホバーで色 or 影が変わる
• テキストリンクは下線 or 色変更
• フォーム入力中は枠線色を変える
• ナビゲーションの現在地ハイライト

これだけで「触れるUI」になり、使いやすさが大幅に改善されます。

まとめ：初心者のデザインは「余白・統一感・優先順位」で改善できる

最後に、初心者が最初に改善すべきポイントはこの4つです。

✔ まず余白を広くとる

余白を2倍にするだけでデザインのクオリティが上がります。

✔ フォント・色は極力少なく

色は3色、フォントは2種までに制限するだけで統一感が生まれます。

✔ 情報の優先順位を視覚化する

文字サイズ・色・余白の差で「どれが重要か」を明確にします。

✔ ボタン・UIは使いやすさを最優先に

押しやすいサイズ、ホバー、フォームの反応など“使えるUI” にすることが大切です。