デザインは自由な表現である一方で、守ることで「伝わりやすくなる基本」も存在します。
今回は、SALEバナーを例に、「感覚で作ったデザイン」と「基本構造を意識したデザイン」とで、伝わり方がどう変わるのかをBefore → Afterでご紹介します。

Before｜デザインの基本構造が崩れている状態

課題①｜中央・左右対称の基本が崩れている

• 「80％OFF」の ％OFFの上に不自然な空白があり、視覚的な重心がズレてしまっている
• 一般的に、美しく・安定して見えるデザインは中央揃え・左右対称が基本

　このズレによって、違和感を覚える構成になっていました。

課題②｜SALEの文字が大きすぎ、逆三角形構造になっている

• 「SALE」の文字が極端に大きく、全体として逆三角形の形に
• デザインの基本としては、上が小さく、下が安定する三角形構造の方がきれいに見える

　その結果、視線が落ち着かず、読みづらい印象になっていました。

課題③｜全体のバランスが取れていない

• 写真・文字・色、すべての要素が噛み合っておらず、構造的にバランスが悪い状態
• 「何を一番伝えたいか」以前に、デザインとしての土台が不安定になっている

　デザインとしての根本的なバランスが崩れてしまっていました。

After｜基本構造を整え、伝わるバランスへ

改善①｜ターゲットに合わせた表現設計

• 中央揃え・左右の重心を意識し、視線が自然に流れる構造に調整

　まずは「整って見える」状態を作ることで、情報がスムーズに頭に入るようにしました。

改善②｜主役は「SALE」ではなく「80％OFF」

• 重要なのは、「SALEであること」よりも「80％OFF」という割引率
• 情報を整理し、何を一番伝えたいのかを明確化

　そのうえで、デザインとしてのバランスを整えています。

改善③｜文字は“固まり”で見せる

• 文字要素をバラバラに置くのではなく、意味ごとに固まりとして配置

　情報の塊が整理され、一目で理解しやすい構成になりました。

改善④｜基本を守ったうえで「遊び」を入れる

• デザインは、基本を無視して自由にするものではありません
• 基本をしっかり押さえたうえで、余白や写真の動きなどに少しの「遊び」を加える

　そのバランスが、デザインの完成度を高めます。

デザインは、感覚よりも構造が先

「なんとなく配置する」「モデル写真を先に置いてから考える」
そうした作り方では、バランスが崩れやすくなります。

• まず構造を考える
• 次に情報の優先順位を決める
• 最後に表現として整える

この順番を守ることで、デザインは安定して伝わるものになります。

DESIGN診断で、デザインの“土台”を見直しませんか？

「なぜかダサく見える」「情報は合っているはずなのに、しっくりこない」

そんなときは、デザインのセンスではなく、基本構造の問題かもしれません。

Whatif Productionでは、既存のバナー・LP・Webサイトを対象に
DESIGN診断（デザインレビュー）を行っています。

• バランス
• 情報整理
• 構造の組み立て方

をプロの視点で確認し、どこをどう直せば良くなるのかを具体的にお伝えします。

 

▼DESIGN診断はこちら
https://stg.whatif.jp/design-review