【実例付き】ランディングページ制作の「現場」でデザイナーが無視できない5つのポイント
ランディングページは、直接的に購買に結びつける時代を脱し、ユーザー体験や読後感を意識したページも増え、その目的は多様化しています。そのため、数年前では効果的だったランディングページも、目的によってはあまり効果に結びつかない場合もあります。
今回は、デザインの切り口から、ランディングページ制作の「現場」で無視できない5つのポイントを、実例を交えてご紹介いたします。効果的なランディングページを作成するためのポイントを、今一度確認してみましょう。
ランディングページ制作の「現場」で無視できない5つのポイント
1. 1つの具体的で明確な目標を持つ
ランディングページで目標を達成するかどうかは、ランディングページの作成前に決まっていると言っても過言ではありません。そのページが何のために存在するページなのか、誰が見ても分かるページにする必要があります。
目標として設定する指標はさまざまなです。ランディングページといえば物販で*「商品を購入してもらう」ことがゴールというイメージが強いですが、最近ではもう少しカジュアルな目標*を定めるのも珍しくありません。
・動画を見てもらう
・ゲームを楽しんでもらう
・ソーシャルメディアでシェアしてもらう
・記事を読んで商品を認知してもらう
http://event.atre.co.jp/sakura2018/
例えば、アトレさくらプロジェクト2018では、「さくらジェニック」をテーマにしたアトレ店内のフォトスポット紹介や、人気インスタグラマーによるフォトジェニックなお花見テクニック、レシピ紹介などを通じて、「アトレ」のブランドイメージ向上を目標に置いています。
https://www.ana.co.jp/ja/jp/domestic/departure/inflight/wifi-promotions/
また、ANA国内線「ANA Wi-Fi Service」のランディングページでは、2018年4月1日から始まっているANA国内線Wi-Fiサービスが無料になることを告知している内容になっています。最終的な導線として空席紹介や予約ができるようになっていますが、ANAでの旅がもっと便利になることをアピールしています。
このように、昨今のランディングページでは、必ずしも個人情報を取得したり売り上げに繋げたりといった目標だけでなく、よりカジュアルな目標を設定している場合もあります。ランディングページを作成する際は、具体的にどのような目的で作成するのか、しっかりと明文化しておくとよいでしょう。
2. ペルソナに合わせた写真を使う
ペルソナとは、商品・サービスを利用するターゲット層から抽出した人物モデルのことです。
参考:
今さら聞けない!「ペルソナとは」基礎知識とその重要性について
ランディングページにも、当然ながらペルソナ設定が必要です。しかし、まれにランディングページの「ペルソナ」と「使用する写真」にミスマッチが起こってしまうことがあります。
食品系LPなどを除いて原則として、想定するペルソナをランディングページのアイキャッチとして冒頭に登場させるのがよいでしょう。なぜなら、先頭に登場する人物を見て自分と近い人物や関係する人物であれば、ユーザーはよりランディングページに親近感を持ち、興味を持ち始めるからです。
ぬいぐるみをしゃべるおもちゃにするおしゃべりボタンPechat(ペチャット)のホームページのヒーローイメージは、「子どもと人形」の写真が登場します。子どもを持つお父さん・お母さんをターゲットにしていることが一目瞭然です。
コカ・コーラ社より発売するザ・タンサンのラインディングページでは、炭酸水の中でも男性の力強いイメージを借りています。もちろん、炭酸水は男女ともに飲むものではありますが、黒字に太い書体や若い男性をアイキャッチに取り入れており、若年男性層に訴求力があります。
この2例のように、無意識的にせよ、冒頭でモデルとした人物が、そのページのメインターゲットとして認識されがちです。人物画像で無料素材などを使いすぎると、ターゲット層と乖離した人物としてイメージされてしまうこともあるので、注意が必要でしょう。
3. ヒーローイメージにインパクトを持たせる
*「第一印象が最重要」*という、有名な心理学の法則「メラビアンの法則」は、ランディングページでも健在です。最初の数秒で心を掴むためには、インパクトのある高画質で魅力的な画像を用意するのは絶対に必要です。
https://www.ministop.co.jp/syohin/sweets/parfait/rennyuichigo-parfait2018/
ミニストップで発売する練乳いちごパフェのランディングページは、いちごに囲まれたカップのなかに美味しそうに飾られている練乳いちごパフェに、思わず視線が集まります。いちごの光沢やきっと柔らかいクリームが来訪者の目に止まるだけでも、「ミニストップの練乳いちごパフェ」の存在が刷り込まれてしまうでしょう。
http://www.mouse-jp.co.jp/campaign/nogizaka46/
また、乃木坂46のメンバーを起用して広告を展開しているマウスコンピューターのランディングページでは、耳が動く乃木坂メンバーをページトップに配置しています。
いずれのホームページも、アバブザフォールド(スクロールする前の「下の折り目」より上の部分)で高画質でインパクトのある画像を採用しています。ヒーローイメージがページの半分くらいしか占めてないランディングページよりも、大胆にアバブザフォールドを使い切ったほうが印象にも残りやすいため、ページ構成を考えるときには注意をしましょう。
4. ブランドイメージの軸を決める
ランディングページの全体的な統一感を保つために、可能な限りカラーパレットやフォントなどを統一しておきましょう。
Z クロッカンシュー ザクザクのページでは、年齢や性別を感じさせないカジュアルなパステルカラーの水色をベースにピンクやエメラルドグリーンも取り入れています。サンセリフ書体を取り入れ、シンプルながらもわくわく感のある演出が出来上がっています。
https://www.haagen-dazs.co.jp/3berry_rare_cheese/
一方、同じスイーツカテゴリでも、色やフォントを変えるだけでイメージがガラッと変わります。ハーゲンダッツより発売する3種ベリーのレアチーズのページでは、ピンクの色に、細字のペン字体を斜めに配置し、女性的な甘酸っぱいイメージに仕上がっています。
おなじ商品を紹介するにしても、フォント選びや配色選びで、イメージはガラリと変わってしまうものです。適切な組み合わせを選ぶためには、事前にしっかりとペルソナやターゲットを決めておくことが重要となります。
5. 視線の動線が命取り
ランディングページで最も重要なことは、下までスクロールしてもらうことです。
しっかりと最後まで読んでもらうために、視線を意識したデザインを心がけてみるとよいでしょう。そのためには、レイアウトを崩して「あそび」をつけることも時には必要でしょう。
http://www.fujimoto-deburring.co.jp/
静岡県浜松市でバリ取り(金属やプラスチックなどを加工する時にできるギザギザを取る作業)を行っている藤本工業株式会社のページでは、あえて斜め45度のラインを意識した直線的な構成になっています。そのため、視線が自然と右上から左下に流れる構成になり、思わず下までスクロールしたくなります。
また、ダイビングライセンスを楽しく取得できるピーシーズのページでも斜線を巧妙に取り入れており、視線が流れるような工夫がされています。
ランディングページは縦長のページになりやすいですが、その際に必ずしも水平の画像を重ね合わせる必要はありません。もちろん、斜めの線を取り入れるとデザイン上の難易度は上がりますが、コンバージョン率アップのために取り入れるのも一つの手段と言えるでしょう。
まとめ
高額で特別なソフトウェアを使わずとも、手軽なツールでランディングページを仕上げられる時代となりました。ランディングページ自体も、単調ですこしばかり「強引」だった時代と比べて、読後感やユーザー体験をより重視するようになっています。
ページのコンバージョンが1%上昇するだけで、売り上げは数万円単位で変わってくるケースも珍しくありません。少しでもコンバージョンをあげるために、今出来ることを取り入れてみてはいかがでしょうか。
- ランディングページ
- ランディングページ(landing page)とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。ただしWebマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ランディングページ
- ランディングページ(landing page)とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。ただしWebマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。
- ランディングページ
- ランディングページ(landing page)とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。ただしWebマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。
- ランディングページ
- ランディングページ(landing page)とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。ただしWebマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。
- ランディングページ
- ランディングページ(landing page)とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。ただしWebマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ランディングページ
- ランディングページ(landing page)とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。ただしWebマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- ランディングページ
- ランディングページ(landing page)とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。ただしWebマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。
- 導線
- 導線とは、買い物客が店内を見てまわる道順のことです。ホームページにおいては、ページ内での利用者の動きを指します。 ホームページの制作にあたっては、人間行動科学や心理学の視点を取り入れ、顧客のページ内での動きを把握した上でサイト設計を行い、レイアウトや演出等を決めることが重要になります。
- ランディングページ
- ランディングページ(landing page)とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。ただしWebマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。
- ランディングページ
- ランディングページ(landing page)とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。ただしWebマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。
- ランディングページ
- ランディングページ(landing page)とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。ただしWebマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。
- ランディングページ
- ランディングページ(landing page)とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。ただしWebマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ランディングページ
- ランディングページ(landing page)とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。ただしWebマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。
- ランディングページ
- ランディングページ(landing page)とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。ただしWebマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。
- 広告
- 広告とは販売のための告知活動を指します。ただし、広告を掲載するための媒体、メッセージがあること、広告を出している広告主が明示されているなどの3要素を含む場合を指すことが多いようです。
- ランディングページ
- ランディングページ(landing page)とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。ただしWebマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ランディングページ
- ランディングページ(landing page)とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。ただしWebマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ランディングページ
- ランディングページ(landing page)とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。ただしWebマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- ランディングページ
- ランディングページ(landing page)とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。ただしWebマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ランディングページ
- ランディングページ(landing page)とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。ただしWebマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ランディングページ
- ランディングページ(landing page)とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。ただしWebマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング