Webデザインでやってはいけない10のNG例｜失敗を防ぐためのチェックリスト
2026/01/21
デザイン・ブランディングデザインの「NGポイント」を知ることが成果への近道
多くの企業ホームページは、
“デザインの失敗”が原因で離脱率が高くなっています。
しかし逆を言えば、
やってはいけないポイントを知り、改善するだけで
デザインは驚くほど見やすくなり、成果も上がります。
ここでは、実際の改善現場でよく見られる
10個のNG例 を厳選して紹介します。
Webデザインでやってはいけない10のNG例
情報を詰め込みすぎて読みにくい
“全部伝えようとして、何も伝わらない”状態。
- 文章が長い
- 画像や枠が多すぎる
- どれが重要かわからない
デザインは 引き算の美学 が重要です。
デザインの統一感がない
ページごとに色・フォント・レイアウトがバラバラだと、
読みにくいだけでなく “信用できない” と判断されます。
統一ルール（デザインシステム）を決めることが重要。
スマホ最適化が不十分
スマホ比率は70％以上。
- ボタンが小さい
- 文字が小さい
- 余白がない
- 横スクロールが発生する
これだけで即離脱につながります。
ボタンが押しづらい・わかりづらい
CTA（お問い合わせ・予約など）は
“目立つ × 押しやすい × わかりやすい”
が基本。
- 色が背景と同化
- テキストが小さすぎる
- 形が認識しづらい
ボタン改善だけでCVRが1.5倍〜2倍に上がるケースも多いです。
フォントサイズが小さく視認性が低い
特にスマホでよくある問題。
- 12〜14pxは小さすぎる
- 行間が詰まりすぎ
- コントラストが弱い
16px以上・行間1.6〜1.8が基本。
色数が多く見づらい
色を使いすぎると素人感が出ます。
推奨：
メイン1色＋アクセント1色＋グレー系1色
に収めること。
写真の質が低い
- ピンボケ
- 暗い
- 画質が粗い
- フリー素材感が強い
企業の信頼性は写真の質に強く影響します。
目的が不明確なキャッチコピー
抽象的な言葉は伝わりません。
例：
×「未来へ挑戦」
○「製造業の採用課題を解決する専門パートナー」
“誰のための価値なのか”を明確に。
重要情報が下に埋もれている
ユーザーは スクロールせずに判断 します。
上部に置くべき情報：
- 何の会社か
- 何が強みか
- 実績
- CTA
重要な情報が下にあると離脱が増えます。
導線（CTA）がわかりにくい
導線が弱いと、問い合わせにつながりません。
NG例：
- ボタンが小さい
- どこに行けばいいかわからない
- “次にすべき行動”が示されていない
導線設計は デザインより成果に直結 します。
NG例を改善するだけで問い合わせ率は大きく変わる
実際に、これら10項目を改善しただけで
- CVR1.5〜2倍
- スマホ離脱率減少
- 滞在時間UP
- 主要ページの閲覧数UP
など、多くの企業で成果が出ています。
“難しいデザインテクニック”ではなく、
基本ができているかどうか が重要です。
成果が出る企業が徹底しているデザインの“基本”
- 情報の優先順位を明確にする
- 余白を大切にする
- 写真・フォント・色の統一
- ユーザーを迷わせない導線
- スマホ中心の設計
- 見やすさを最優先する
Webデザインは「センス」ではなく
“ルール”דユーザー理解” で決まります。
まとめ：デザインは「足し算」より「引き算」が成果を生む
デザインで失敗する最大の原因は
“盛り込みすぎ”です。
良いデザインは、
- 情報が整理され
- 見やすく
- 目的が明確で
- 迷わず行動できる
この状態を生み出します。NG例を1つずつ改善していくだけで、
サイトの印象も、成果も大きく変わります。
制作会社が語る、伝わるデザインの条件とは？についてはこちらの記事でも詳しく紹介しています。
制作会社が語る、伝わるデザインの条件とは？
（→https://refu.co.jp/column/effective-design-conditions/）
無料相談
Refuでは、デザイン改善・導線設計・写真ディレクションまで
成果を出すためのWebデザイン改善 を行っています。
「デザインを整えたい」「問い合わせを増やしたい」企業様はお気軽にご相談ください。
