WEBデザイン
課題:LPデザイン制作
INDEX
目次

0. はじめに

a. LP(ランディングページ)とは何か?

ランディングページ (Landing Page)とは通常LPとよく呼ばれるもので、検索結果や広告を経由して訪問者が最初にアクセスするページのことを指します。

WEBサイトは様々なページからなる集合体であり、ランディングページはそのうちの1つのページを指すということです。

b. ランディングページを作成する目的

例えばあなたが何かの商品を販売するとして、様々な種類の広告を出すとしましょう。

すべての広告に対して全く同じランディングページ でいいでしょうか?答えはNoです。

広告の内容に合わせて流入するユーザーも異なるため、ランディングページもそれに最適化して構築することが必要です。

ランディングページは通常、特定の商品を販売する、問い合わせを獲得するなどを目的に構築されるページです。

ランディングページは高度なマーケティングスキルがないと効果的なものを作成することは難しいです。

LP作成にはマーケティングの本質が詰まっています。

1. ランディングページの概要を学ぶ

a. 使用教材

プロマーケター推奨理由
  • ランディングページ作成に当たってリサーチから実装、運用改善まで網羅的にわかりやすく解説されている数少ない教材。
  • プロも今も参照するほどの良書である。

b. 学習項目

以下は、実際にこの本の中で必ず読んでほしいパートです
  • LPO (Landing Page Optimizationとは)
  • 結果の80%を決めるリサーチ・3C分析・ペルソナ設計
  • ランディングページの作り方
  • ランディングページへの集客方法
読むだけではなく、読みながら「自分が作るとしたら~」と考えることが大切です!

2. ランディングページ 作成TIP

良いアウトプットを出すには大量の良質なランディングページのインプットが必要です。

類似する業界や雰囲気のランディングページを探し、優れた点を抽出するのが良質なLPを構築するポイントです。

3. ランディングページ 制作課題

以下はLP制作の参考例題です。

下記の案件から1つ、ご自身の興味に沿ってLPのデザインをFigmaで作成してみてください。

もしどれもしっくりこない方は、実際に存在する商品もしくは自分で考えた商品を販売するためのLPを作成しても構いません!

▼ コスメ系商材のLP制作

概要
  • 商品:コスメ系商品の販売促進を目的としたランディングページ
  • ターゲットユーザー:30〜40代女性
依頼内容
  • デザイン:1ページのレイアウトとグラフィックデザイン
  • ライティング:商品の特徴とメリットを魅力的に伝えるコピーライティング
デザインイメージ
  • 雰囲気:エレガントでモダン、女性らしさを強調したデザイン
  • カラースキーム:柔らかいパステルカラーを基調とした配色
  • フォント:読みやすく、洗練されたフォントの使用
技術要件
  • レスポンシブデザイン:デスクトップ、タブレット、モバイルに対応
  • SEO最適化:検索エンジン対策を考慮した構造
  • 速度とパフォーマンス: 高速なページロードが求められる
  • セキュリティ: SSL/TLSによる暗号化通信
参考画像
トグルを開いてLPを確認

▼ BtoB WEBサービス・アプリのLP制作

概要
  • 商品:Webサービス - ビジネスパーソン向けクラウドストレージサービス
  • ターゲットユーザー:ビジネスパーソン(個人事業主から中小企業経営者まで)
依頼内容
  • デザイン:1ページのレイアウト
  • ライティング:明確でインパクトのあるコピーライティング
デザインイメージ
  • 雰囲気:安心感を与える優しい雰囲気
  • カラースキーム:基調色を1色とする信頼感のあるカラーパレット、補助色として2色ほど使用
  • フォント:読みやすく公式感のあるSans-serif系のフォント
  • 例: Roboto, Arial
技術要件
  • レスポンシブデザイン:デスクトップ、タブレット、モバイルに対応
  • SEO最適化:検索エンジン対策を考慮した構造
  • 速度とパフォーマンス: 高速なページロードが求められる
  • セキュリティ: SSL/TLSによる暗号化通信
参考画像
トグルを開いてLPを確認

▼ パーソナルトレーニングジム

概要
  • 商品:パーソナルトレーニングジム
  • ターゲットユーザー: 健康と美容に意識が高い30〜50代の女性
依頼内容
  • デザイン:高級感のあるクリーンなデザインの1ページLP
  • ライティング:成功事例、トレーニング方法、顧客の声を紹介するインパクトのあるコンテンツ
デザインイメージ
  • 雰囲気:効果が実感できる信頼性の高いサービスを提供する安心感とエネルギッシュな印象を与えるデザイン
  • カラースキーム:高級感ある配色、画像は健康的で明るい雰囲気のものを選定
  • フォント: クリアで読みやすく、現代的な印象のフォント
技術要件
  • レスポンシブデザイン: すべてのデバイスでの閲覧を念頭に置いた設計
  • SEO対策: コンテンツの最適化、メタタグの設定、構造化データの利用
  • ローディングパフォーマンス: 画像圧縮と遅延読み込みを含む最適化
参考画像
トグルを開いてLPを確認

▼ 美容室のLP制作

概要
  • 商品:美容室
  • ターゲットユーザー:ファッションと美容に対する意識が高い20〜40代の女性
依頼内容
  • デザイン:洗練されたミニマリスティックな1ページLP
  • ライティング:サロンの理念、サービスの紹介、スタイリストの紹介、顧客の声
デザインイメージ
  • 雰囲気:清潔感があり、品質と美しさを強調した洗練された雰囲気
  • カラースキーム:明るいナチュラルな色
  • フォント: フェミニンでモダンなフォント
技術要件
  • レスポンシブデザイン: すべてのデバイスでの閲覧を念頭に置いた設計
  • SEO対策: コンテンツの最適化、メタタグの設定、構造化データの利用
  • ローディングパフォーマンス: 画像圧縮と遅延読み込みを含む最適化
参考画像
トグルを開いてLPを確認

▼ スイーツショップのLP制作

概要
  • 商品:手作りのスイーツショップ
  • ターゲットユーザー:スイーツ愛好家、特に20~40代の女性やカップル、ギフトを探している顧客層
依頼内容
  • デザイン:シンプルでエレガントなデザインの1ページLP
  • ライティング:商品の特徴説明、原材料と製造過程の紹介、お客様の声、店舗情報
デザインイメージ
  • 雰囲気:清潔感があり、品質と美しさを強調した洗練された雰囲気
  • カラースキーム:明るいナチュラルな色
  • フォント: フェミニンでモダンなフォント
技術要件
  • レスポンシブデザイン: すべてのデバイスでの閲覧を念頭に置いた設計
  • SEO対策: コンテンツの最適化、メタタグの設定、構造化データの利用
  • ローディングパフォーマンス: 画像圧縮と遅延読み込みを含む最適化
参考画像
トグルを開いてLPを確認

▼ コスメ系LP制作の課題

概要
  • 商品:天然成分を使用したスキンケアクリーム
  • ターゲットユーザー:美容と健康に関心の高い20〜40代の女性
依頼内容
  • デザイン:清潔感と信頼感のあるデザインの1ページLP
  • ライティング:製品の特徴、利用者の声、使用方法、成分の詳細、購入に向けた促進メッセージ
デザインイメージ
  • 雰囲気:清潔感と自然の優しさを感じさせる暖かく信頼性の高いデザイン
  • カラースキーム:ナチュラルな色合い、ホワイトとソフトピンクやアースカラーを基調
  • フォント:フェミニンで読みやすい、柔らかさを感じさせる書体
技術要件
  • レスポンシブデザイン: すべてのデバイスでの閲覧を念頭に置いた設計
  • SEO対策: コンテンツの最適化、メタタグの設定、構造化データの利用
  • ローディングパフォーマンス: 画像圧縮と遅延読み込みを含む最適化
参考画像
トグルを開いてLPを確認
LP 制作課題が完成しましたら、下記のテンプレートを参考に、Slackの「 c-【受講ID】-【お名前】」のチャンネルでコーチをメンションし、制作課題を共有してください🙌
その際、どの案件を選択したのかについてもご共有お願いいたします!
コーチにSlackで共有する際のテンプレート
〇〇コーチ (@メンション)

お世話になっております。
LPの制作が終了しました。
今回、私は〇〇についての案件を選択しました!
以下のファイルがLPとなっておりますのでご確認いただき、添削をよろしくお願いいたします。

※ ここにファイルを添付
WEBCOACH | キャリアチェンジまでの全てを学ぶマンツーマンWEBスクール
© 2020 by WEBCOACH