TH01-14
「要素は揃っているはずなのに、なぜか安っぽく見える」
「どこを読んでいいか迷う」
そんな「散らかったLP」を救うのは、センスではなくデザインの4原則による徹底的な「再配置」です。
本記事では、架空のLPを例に、4原則を使ってプロのクオリティへ引き上げる添削プロセスを公開します。
目次
【近接】で「情報の迷子」をなくす
Before：画像、キャッチコピー、ボタンがすべて同じ間隔で並んでいる。
After：
- 「キャッチコピー」と「その説明文」を極限まで近づける。
- 「申し込みボタン」の周りに大きな余白を取り、他の要素から遠ざける。
- ロジック：関連するものを一塊（ユニット）にすることで、ユーザーは「情報の区切り」を直感的に理解できるようになります。
【整列】で「信頼感」を担保する
Before：中央揃えのテキストの横に、左揃えのリストが並び、視線が泳いでしまう。
After：
- LPのメイン軸を決定（例：スマホ閲覧を意識した中央軸、または可読性重視の左軸）。
- すべての要素の見えない「端」をその軸に吸着させる。
- ロジック：整列が完璧なページは、それだけで「しっかりした企業が作っている」という信頼感をユーザーに与えます。
【反復】で「サイトの掟」を作る
Before：セクションごとに見出しのデザインや、ボタンの色・形がバラバラ。
After：
- 「メリット紹介の見出し」のデザインを統一する。
- 「クリックできる要素」はすべて同じアクセントカラーと角丸にする。
- ロジック：同じパターンを繰り返すことで、ユーザーは「この形は重要だ」という学習を済ませ、迷わず読み進められるようになります。
【対比】で「視線の滑り台」を作る
Before：全部の文字が大きく、どこが一番の売りかわからない。
After：
- メインコピーを圧倒的に大きく（2倍以上）し、補足文は思い切って小さくする。
- 背景色に濃淡をつけ、重要なセクションだけ色を変える。
- ロジック：強弱をつけることで視線に「流れ」が生まれ、最終的な「購入・登録」というゴールまでユーザーを誘導します。
添削とは「ロジックの再確認」
デザインが上手くいかないときは、1pxのズレや色の微調整に走る前に、この4原則に立ち返りましょう。
「近接・整列・反復・対比」のどれかが欠けていることが、違和感の原因です。
このプロセスを繰り返すことで、あなたのデザインは「なんとなく」を卒業し、プロの説得力を持つようになります。