Webデザイナーを目指している方にとって、ランディングページ(LP)のデザインは必須スキルのひとつです。
LPはユーザーに行動を促すためのページであり、バナーやコーポレートサイトとはまた違う工夫が必要になります。
今回は実案件をモデルにした LP制作の練習課題 を用意しました。
完成したLPはポートフォリオや作品集に掲載してOK!
就活の制作実績としても活かせる内容になっています。
オンライン英会話サービスのLPデザインを作ろう!

あなたは、架空の企業「Fiction Lang(フィクション・ラング)」が提供するオンライン英会話サービスのLP制作を担当することになりました。
新規ユーザーを獲得するためのキャンペーンページを、以下の条件で作成してください。
■企業名
Fiction Lang(フィクション・ラング)
■キャンペーン内容
11月1日~12月31日までにお申し込みの方に限り、受講料「1ヶ月無料」
■サービスの特徴
・ネイティブ講師によるマンツーマンレッスン
・通常受講料:月額9,800円〜
・AIを活用した学習サポート
・24時間365日受講可能
・充実のサポート体制
■ターゲット層
20代後半〜40代の社会人(キャリアアップや海外出張に備えて英語を学びたい層)
LPに盛り込むべき要素
■ファーストビュー
・「キャリアにつながる英会話を、今すぐ始めよう!」などのキャッチコピー
・アイキャッチ画像(講師と受講者が会話している写真など)
・「無料体験に申し込む」ボタンを大きく配置
■キャンペーン情報
・「1ヶ月無料」を目立つデザインで配置し、期間や条件を明記する
■サービスの特徴紹介
・「ネイティブ講師」「スキマ時間で受講可能」「AIを活用した学習サポート」など3〜6つのポイント
・アイコンやイラストを使って視覚的に分かりやすく
■利用者の声(信頼性アップ)
・「仕事で英語を使えるようになった!」などの体験談
■フッター
・架空の会社情報や問い合わせ先を記載
■その他
・「お申し込みの流れ」や「講師紹介」や「受講できる内容」「オンライン英会話がオススメの方」などを任意で入れる

誰に向けたページなのかを意識しながら、デザインを制作しよう!
デザインを制作する上でのポイント
■配色
青や緑など「信頼感」「安心感」を与える色を基調にするのがおすすめです。
ボタンにはオレンジや赤など、コントラストの強い色を使用しましょう。
■フォント選び
可読性の高いゴシック体を基本に、見出しは太字でメリハリをつけましょう。
■情報の優先順位
「1ヶ月無料」というキャンペーン情報は最も目立たせるべき要素です。
逆に細かい会社情報はフッターで十分です。
■スクロールの流れを意識する
上から下に読み進める中で「訴求 → 詳細 → 特徴 → 信頼感 → 行動」というストーリーが自然に伝わる構成にしましょう。
■素材選び
人物写真を使うときは、視線がボタンやコピーに向かうように配置すると自然に誘導効果が生まれます。
外国人講師と日本人受講者の写真など、ユーザーが利用シーンをイメージできるものを活用してください。
■スマホ対応
LPはスマホで閲覧されることが多いため、必ずスマホ版も意識してデザインしてください。
制作の流れ
- STEP.01リサーチ
- 同業他社のLPを分析し、構成や配色の傾向を把握する。
- STEP.02ワイヤーフレーム作成
- 紙やツール(Figma、XD)で大まかな構成を整理
- 要素の優先順位を決める
- STEP.03デザインルールを決定
- 配色(メインカラー・サブカラー・アクセントカラー)
- フォント(見出し用・本文用)
- 画像スタイル(写真かイラストか)
- STEP.04デザイン作成
- ファーストビューを最初に作り、全体のトーンを固める
- 特徴や利用者の声などセクションを追加する
- CTAボタンを複数配置(冒頭・中盤・末尾)
- STEP.05レビュー & 改善
完成したデザインを一度離れて見直す。友人やSNSでフィードバックをもらうのも効果的。

案件を進めるイメージで取り組もう!
サンプル完成例

教育サービスらしい信頼性を持たせつつ、「わかりやすさ」「信頼感」「行動しやすさ」をしっかり盛り込み、実案件を想定した練習課題としても参考になるように作成しました。
ファーストビューでは「最初の1ヶ月受講料無料」という強い訴求を大きく打ち出し、訪問者がひと目でキャンペーンの魅力を理解できるようにしました。申し込みボタン(CTA)は視認性を高め、スムーズに行動につながるように配置しています。
全体の配色はブルーを基調とし、誠実さや清潔感を表現。
サービスの特徴はアイコンと短い説明文で整理し、忙しい社会人でも一目でメリットを把握できる構成にしています。
また、利用者の声を掲載することで信頼感を補強し、安心して申し込めるよう心理的ハードルを下げています。
完成後の活用方法
完成したLPはポートフォリオに掲載可能です。
就活用ポートフォリオでは「実案件を想定した練習課題」として紹介できますし、デザイン仲間やSNSコミュニティで公開すれば、フィードバックをもらって改善点を洗い出すことも可能です。
LPデザインは「ユーザーに行動を促す」ための仕組みが求められるため、Webデザインの中でも実践的なスキルが身につく分野です。
今回の課題を通して、ターゲットやペルソナを意識したデザインを考える習慣がつけば、就職活動やフリーランス活動に大きな強みとなります。
ぜひ繰り返し挑戦して、自分らしいデザインスタイルを見つけてみてください。