LPデザインの基本とコツ｜配色・余白・フォントで印象を作る

「LPを作りたいけれど、デザインに自信がない」——そんな相談をよく受けます。実際、デザインを学んだことがない人がいきなり完成度の高いランディングページを作るのは難しい。ただ、プロのデザイナーが頭の中でやっていることの多くは、いくつかの「原則」に分解できます。配色、余白、フォント、視線誘導。この4つを順番に押さえていけば、少なくとも「読みづらい」「胡散臭い」LPは避けられます。

この記事では、非デザイナーが今日から使えるLPデザインの基本ルールを、なるべく具体的にまとめました。センスではなく、判断の軸として読んでもらえれば十分です。

LPデザインで最初に決めるべきは「目的」と「1メッセージ」

結論から言うと、LPデザインの良し悪しは、見た目より先に「目的が1つに絞れているか」で8割決まります。配色やフォントを考える前に、このページで何をしてほしいのかを一文で言えるようにしておく必要があります。

LPはコーポレートサイトと違って、訪問者に取ってほしい行動が明確です。資料請求、無料登録、購入、問い合わせ——どれか1つ。複数のゴールを並べると、ユーザーは迷い、結果的にどれも選びません。「あれもこれも」は親切ではなく、離脱の原因になります。

デザインを始める前に、以下を紙に書き出してみてください。

• 誰に届けたいか（ターゲットの状態・悩み）
• このLPを見たあと、何をしてほしいか（CV）
• 競合と比べて、一番伝えたい強みは何か（USP）
• 信じてもらうために必要な根拠は何か（実績・仕様・保証）

この4つが言語化できていないと、どれだけ綺麗に装飾しても「結局なんのページ？」になります。逆にここが固まっていれば、デザインは「目的を邪魔しない」方向に整えるだけで済む。デザインは足し算ではなく引き算、と言われる理由はここにあります。

配色は「3色ルール」で迷いを消す

LPの配色で迷ったら、ベース・メイン・アクセントの3色に絞るのが基本です。色を増やすほど印象は散らかり、CTAボタンも目立たなくなります。

具体的な配分の目安は次の通りです。

ベースは白やごく薄いグレーが無難。メインはブランドカラーや業種のイメージに合う色（信頼感なら青系、温かみならオレンジ系など）。アクセントは「ボタンを押してほしい」という一点に集中させるため、メインの補色や反対色に近い目立つ色を1つだけ選びます。

非デザイナーが失敗しがちなのは、「アクセント」を複数の場所で使ってしまうこと。赤の見出し、赤の枠線、赤のボタン、と並べると、ボタンが埋もれてクリック率が落ちます。アクセントは「ここを押してほしい」場所だけに使うと覚えておいてください。

色の組み合わせに自信がないときは、ブランドカラーを1色決めて、あとは無彩色（白・グレー・黒）で組むのが安全策です。派手さは出ませんが、安っぽくは絶対になりません。

余白は「情報のグループ分け」のために使う

余白の役割は、装飾ではなく「どの要素とどの要素が仲間か」を伝えることです。これを近接の法則と呼びます。

例えば、見出しと本文の間が広く、本文と次の見出しの間が狭いと、読み手は「どこからどこまでが1セクションか」を判断できません。逆に、関連する要素を近づけ、関連しない要素を離すだけで、デザインは一気に整って見えます。

意識したい余白のポイントは次の4つです。

1. セクション間の余白を、要素内の余白より大きく取る（ブロックの境界がはっきりする）
2. 見出しと本文の距離は近めに（同じ話題だと示す）
3. 画像と説明文はセットで近づける（どの画像の説明か迷わせない）
4. CTAボタンの周りは広めに余白を取る（押すべき場所として浮かび上がる）

特にスマホで見るLPでは、余白を「もったいない」と感じて詰めすぎる人が多い。ですが、画面が小さいからこそ、余白がないと圧迫感で読む気が失せます。1画面に詰め込むのではなく、スクロールで気持ちよく読ませる設計のほうが、結果的にCVは上がります。

このあたりの考え方は、スワイプ式LPとは？スマホ時代の縦型・1画面1メッセージ設計でも詳しく扱っているので、スマホ前提でLPを作る人は合わせて読んでみてください。

フォントは「2種類まで」が基本ルール

フォントは欲張らず、見出し用と本文用の2種類までに抑えるのがセオリーです。3種類以上混ぜると、統一感が崩れて素人っぽくなります。

日本語LPでよく使われる組み合わせは以下のようなパターンです。

• 見出し：ゴシック体（太め） × 本文：ゴシック体（標準）：モダンで読みやすい王道
• 見出し：明朝体 × 本文：ゴシック体：上品さ・専門性を出したいとき
• 見出し：手書き風 × 本文：ゴシック体：親しみやすさを出したいとき（多用注意）

サイズの設計も大事です。本文を16px前後に置いたとき、見出しはその1.5〜2倍程度をひとつの目安にすると、リズムが出ます。本文・小見出し・大見出しで明確に差をつけることで、流し読みでも構造が伝わるLPになります。

避けたいのは、本文の中で太字・色文字・下線・サイズ変更をすべて同時に使うこと。強調が多すぎると、結局どこが大事なのか分からなくなります。強調は1画面に1〜2箇所まで、と決めておくと迷いません。

フリーフォントを使う場合は、商用利用の可否とライセンスを必ず確認してください。受注制作で納品するなら、クライアントにもライセンス情報を共有しておくとトラブル防止になります。

視線誘導は「Z型」「F型」「縦一直線」を使い分ける

人の視線には自然な動きがあり、それに沿ってレイアウトするだけで読みやすさが大きく変わります。代表的なのが、Z型・F型・縦一直線の3パターンです。

• Z型：上から下へジグザグに視線が動く。情報量が少ないファーストビューやキャッチコピー部分に向く。
• F型：左揃えで文章を読み下す動き。テキスト中心のセクションに向く（特にPC）。
• 縦一直線型：上から下へまっすぐ。スマホ縦スクロールやスワイプ式LPの基本。

スマホ中心の時代では、3つ目の縦一直線が主役です。1画面1メッセージで、上から下に「課題→共感→解決→根拠→CTA」と並べると、迷いなく読み進められます。

視線を意図的に誘導するためのテクニックもあります。

1. 人物写真の視線の先に、見せたい要素（CTAや商品）を置く
2. 矢印やイラストで次のセクションへ自然に促す
3. CTAボタンの直前に「あと一歩」の不安解消文（保証・無料など）を置く
4. 重要な情報ほど画面の中央寄せか、左揃えで上部に配置する

特にファーストビューは、視線設計が最重要です。何のサービスで、誰のためで、何ができるのかが3秒で伝わらないと、その下はほぼ読まれません。詳しい設計手順はLPのファーストビューで離脱を防ぐ7つの法則にまとめているので、合わせて確認してみてください。

画像・アイコンは「伝えるため」に使う

結論として、画像は装飾ではなく、文字を補完して理解を早めるために使うものです。なんとなく綺麗な写真を貼る、は逆効果になりがちです。

LPに使う画像の役割は、おおまかに3つに分かれます。

フリー素材の人物写真を多用すると、どこかで見たことのある「テンプレ感」が出ます。可能なら、サービス画面のスクショや、自社で撮った写真、オリジナルのイラストを混ぜるだけで、独自性が一気に上がります。

アイコンも、複数のスタイル（線画と塗りなど）を混ぜると統一感が崩れるので、同じシリーズで揃えるのが鉄則。これは細かいですが、効きます。

画像のファイルサイズも忘れずに。重い画像はLPの表示速度を落とし、ファーストビューが見られる前に離脱されます。Web用に書き出し（WebPやJPEGの適切な圧縮）をしておきましょう。

モバイルファーストで設計する

今や、LPの閲覧の多くはスマホから来ます。だとしたら、デザインはスマホ画面から作り始めるのが合理的です。これがモバイルファーストの考え方です。

PCで作ってからスマホに縮めると、文字が読めないほど小さくなったり、CTAボタンが画面外に追いやられたりします。逆にスマホから設計すれば、限られた面積に本当に必要な要素だけが残るので、自然と「1画面1メッセージ」のシンプルな構成になります。

モバイル設計で意識したいポイントを挙げておきます。

• 本文は16px以上、見出しはさらに大きく（拡大しないと読めないのはNG）
• タップ領域は最低44px四方（指で押せるサイズ）
• CTAボタンは固定表示も検討（スクロール中も常に押せる）
• 横スクロールは原則NG（縦スクロールだけで完結させる）
• 画像は縦長 or 正方形が安全（横長は小さくなりすぎる）

スマホで縦スクロールするLPは、紙芝居やストーリーに近い読まれ方をします。だからこそ、1スクロールごとに伝えたいメッセージを1つに絞ると、すんなり読み進めてもらえる。最近はこの考えを徹底した「スワイプ式LP」も増えてきました。

非デザイナーが「整って見える」ための最終チェックリスト

最後に、公開前にざっと確認したいチェック項目をまとめます。これだけ見ても、最低限の品質は担保できます。

• 目的（CV）が1つに絞れているか
• 色は3色以内に収まっているか
• アクセントカラーはCTAなど重要箇所だけに使っているか
• セクション間の余白が要素内の余白より広いか
• フォントは2種類以内、強調は1画面1〜2箇所か
• 見出しと本文のサイズに明確な差があるか
• スマホで読んだとき、文字が小さすぎないか
• CTAボタンが目立ち、押したくなる文言になっているか
• ファーストビューで「誰のための何か」が3秒で伝わるか
• 画像・アイコンのスタイルが揃っているか

ここまで読んで「原則は分かったけれど、それでも自分の手で形にするのは大変そう」と感じた人もいるはずです。実際、配色や余白を一から決めてコーディングまでするのは、慣れていないとかなりの時間がかかります。

そんなときに使えるのが、チャットで対話するだけでスワイプ式の縦型LPが自動生成できるLP Boardです。伝えたい内容を話していくだけで、スマホ前提に整ったレイアウトが出来上がるので、デザインの原則を一から覚えるより先に「とりあえず動くLP」を試せます。月額制で作り放題、買い切りプランもあり、商用利用・受注制作もOK。紹介報酬50%の制度もあるので、自分で使うだけでなく、クライアントワークにも組み込みやすい設計です。

まとめ：原則を知ってから、ツールに任せる

LPデザインは、特別な才能ではなく「目的を1つに絞る → 色を3つに絞る → 余白で意味を分ける → フォントで情報を構造化する → 視線を誘導する」という順序のあるプロセスです。この記事の原則を頭に入れた上でツールを使えば、「なぜこのデザインになっているのか」を自分で説明できるようになります。

まずは1本、手を動かして作ってみるのがいちばん早い。チャットで話すだけでスマホ最適化されたLPが組み上がるので、原則の答え合わせとしても便利です。LP Boardを無料で試すから、今日のうちに1ページ作ってみてください。