サポートトレーニング&認定サービスパートナーパートナーを探すハブスポットパートナーがビジネス成長を強力にサポートします。変ですね...完全に一致した結果が見つかりませんでした。一度検索ワードを変えてお試しください。Emailメルマガに登録するマーケティングブログEメールアドレスハブスポットはお客様のプライバシー保護に全力で取り組んでいます。ハブスポットは、コンテンツ、製品、サービスに関連する情報を配信するため、お客様から提供された情報を利用します。この情報配信はいつでも停止できます。詳細については弊社の「プライバシーポリシー」をご覧ください。Mukai)@takumamukaiランディングページ(LP)の目的はコンバージョンの獲得であり、もちろんランディングページのデザインにおいても同様です。ブランディング目的のコーポレートサイトやオウンドメディアと同じような考えで制作しても、効果は期待できません。コンバージョンの種類によっても求められるデザインは異なります。本稿では、ランディングページのデザインについて最低限知っておきたいポイントを、20の他社事例を挙げながら紹介します。ランディングページのデザイン例と特徴まずは一般消費者向け(BtoC)と企業向け(BtoB)、それぞれのランディングページのデザイン例を、制作する上でのポイントと併せて紹介していきます。BtoC用ランディングページのデザイン例と特徴Liftage(リフタージュ)BtoC商品のランディングページデザインのポイントは、誰に何を売っているのかをわかりやすく伝えることです。「誰に」とはいわゆるターゲットのことですが、上図のようにターゲット層の人物写真を使うことで、ユーザーにランディングページの内容を自分事としてとらえてもらいやすくなります。「何を」はもちろん商品です。基本的にランディングページのユーザーは、リスティング広告やバナー広告など、情報量の少ない広告を見て訪問します。ファーストビューには必ず商品写真を掲載し、認知向上を図ることが大切です。ランディングページには商品に直接触れることができないというウィークポイントがあります。した点をカバーするためには、化粧品など直接肌に触れるものなら使用感、食品ならシズル感、日用品なら使用シーンが伝わる写真を使うと効果的です。店舗や施設なら、実際の雰囲気が伝わる写真が良いでしょう。最近では動画を活用しているランディングページもよく見かけます。SlimBtoB用ランディングページのデザイン例と特徴freeeBtoBの製品・サービスは、BtoCよりも成約までの検討期間が長い傾向にあります。そのため、文章が読みやすいシンプルで余白の多いデザインが多く使われています。競合との比較が避けられないのもBtoBの宿命です。いえ、長々とスペックを説明しても読まれません。自社製品の強味について、以下の事例のようにポイントを絞ったり、表やグラフにしたりして、簡潔にわかりやすくアピールする工夫が必要です。WantedlyfreeeBtoBリード獲得用ランディングページのデザイン例と特徴Hubspotインバウンドマーケティングにおけるリードジェネレーション(見込み客獲得)を目的としたランディングページは、広告ではなく、ブログやメルマガなどのコンテンツから誘導するのが普通です。コンテンツ内で十分に興味やニーズを喚起できている場合は、ランディングページ上での過度なアピールは必要ありません。上図のHubSpotのランディングページのように、極力シンプルなデザインでも十分に効果的です。おすすめのランディングページデザインまとめサイトここまでは用途・活用法別にランディングページデザインの特徴を簡単に紹介してきましたが、参考事例はあくまで代表的なもので、実際はもっと多様なデザインが取り入れられています。参考用にランディングページのデザインを集めたサイトを以下に3つ紹介しますので、興味のある方はご覧ください。アーカイブとにかく事例掲載数が豊富なサイトです。23のカテゴリーとベースカラー、デザインの雰囲気で絞りこむことができます。・ランディングページ集めました。こちらも有名なサイトです。14のカテゴリーに分けられており、色のイメージで絞りこむことができます。・WebDesignClipおしゃれなデザインのランディングページを探しているなら、こちらのサイトがおすすめです。日本だけでなく、海外のランディングページも集められています。ランディングページのデザイン制作における4つのポイント冒頭でもお伝えしたとおり、ランディングページの目的はコンバージョン獲得です。デザインにおいても「いかにしてユーザーをコンバージョンへ誘導するか」を意識して制作しなければいけません。ここでは、ランディングページのデザインを考える上で最低限知っておきたいポイントを以下の4つに分けて紹介します。FORCE商品や用途を問わず、ランディングページのデザインにおいて最も重要なポイントが、キャッチコピーや文章の可読性を高めることです。ユーザーがランディングページを読むか否かを判断するのはファーストビューのキャッチコピー、そしてコンバージョンの決め手となるのが商品説明などの文章だからです。ポイントは全体の色数を少なくすることや、過度の装飾を控えることなどですが、フォントの使い方にも以下のような工夫が必要です。キャッチコピーに画像フォントを使って、立体感を出したり袋文字にしたりする文章のフォントサイズにメリハリをつける(ジャンプ率を高くする)アピールポイントは太字にしたり、色を変えたり、マーカーを引いたりして強調する理想は上図や以下の事例のように、流し読みしただけでアピールポイントが伝わるようなデザインです。関電ガスちなみにランディングページでは、自社が伝えたいことを伝えるのではなく、ユーザーの課題を代弁したり、ユーザー本人も気付いていない問題を指摘したりするようなキャッチコピーや文章が効果的です。したコピーと文章作成に役立つのがこちらの書籍です。顧客の「本音」がわかる9つの質問(橋本哲児/秀和システム)顧客のインサイト=「本音」を引き出す方法と、それを実際のマーケティングに生かす方法が「9つの法則」としてまとめられています。ランディングページの制作を初めて実施する担当者の方に、ぜひとも読んで頂きたい1冊です。続きを読ませる工夫をするユーザーをコンバージョンへと導くためには、途中で離脱されることなく、最後まで読んでもらわなければなりません。そのためには、内容はもちろんのこと、デザインにおいても続きを読ませる工夫が必要です。ポイントは以下の3つです。視線の動きが単調にならないように文章スペースを左右に振り分ける色にコントラストをつけたり、写真や図解を使ったりしてリズミカルに読めるようにする矢印や▽、グラデーションをうまく使って、ユーザーの視線を先へ先へと誘導するAirbnbLiftage(リフタージュ)RIZAP訴求したい印象に最適な配色・背景色を選ぶいまやカラーマーケティングというジャンルがあることからもわかるように、色はマーケティングにおいて重要な役割を担う要素です。ランディングページにおいても、配色や背景色次第で商品の魅力が半減することもあるので注意が必要です。訴求したい商品・サービス日本ロングライフ信頼感や安心感のアピールに適しているのが白や青をベースカラーとしたデザインです。上図の事例は老人ホームですが、BtoBサービスや保険のランディングページなどでもよく使われています。・あたたかさや親近感を訴求したい商品・サービスオフィスおかんサービスのあたたかみや親近感をアピールしたい場合に最適なのは、オレンジなどの暖色系カラーです。他に、ニンニクを使ったサプリメントなど、元気や力強さを訴求したい商品にも使われています。・おトク感を訴求したいランディングページドコモdカード商品・サービスの種類を問わず、特別なプレゼントや割引を設けたキャンペーン用のランディングページには、ゴールドや赤など派手でインパクトの強いカラーが多く使われています。クリッカブルなCTAボタンでクリックを促進するアスタリフトクリッカブルとは「クリックできる」という意味の言葉です。CTAボタンは色や大きさで目立たせることも大切ですが、BtoC商品など、賑やかなデザインのランディングページの場合、それだけでは埋もれてしまうこともあります。そこで有効なのが、ボタンに立体感を出したり、矢印アイコンを入れたりして「このボタンはクリックできますよ」とアピールする手法です。上の例のように、思わずクリックしたくなるような質感を出せればベストです。他にも、マウスポインターを上に乗せると色が変わったり、プルプル振動したりする仕様のCTAボタンもあります。やよいの青色申告オンラインワイヤーフレームの作り方とポイントワイヤーフレームは構成案とも呼ばれ、ランディングページの設計図のような役割を担います。ディレクターが作成し、企画・提案段階で使われるのが一般的ですが、デザイナーとのデザインイメージのすり合わせにも欠かせません。目的はコンテンツや構成の共有であり、細かいデザイン指示は不要です。それよりも、ランディングページ全体でどのようなストーリーでコンバージョンへ誘導するか、そのために各コンテンツで何をアピールするか、といった「意図」を明確にする方が大切です。反響の高いランディングページに必要な7つの要素とストーリー構成については、こちらのページを参照してください。ワイヤーフレームは、社内用に手書きで作成する場合もあれば、クライアント向けにIllustratorなどを使う場合もありますが、以下のようなオンラインのワイヤーフレーム作成ツールを使えば、デザインツールやコーディングの知識がなくても見映えの良いワイヤーフレームを作成できます。axureディスプレイ上のCTAボタンをクリックして遷移先のフォームを確認できるなど、インタラクティブ性のあるワイヤーフレームが作成できるのもオンライン作成ツールの魅力です。Cacoo日本語対応しているツールを使いたい方はCacooがおすすめです。無料トライアルも用意されています。ランディングページにおけるレスポンシブデザインの注意点レスポンスデザインとは、PCやスマートフォン、タブレットなど、デバイスごとの画面サイズに応じて、フォントや画像のサイズとレイアウトを調整して表示できるデザインのことです。・パソコンでの表示(棒グラフの左右に吹き出し)マネーフォワード・スマートフォンでの表示(棒グラフの下に吹き出し)マネーフォワードまた、それぞれのデバイスのユーザーが見やすいデザインを作れることだけでなく、HTMLやCSSをデバイスごとに分ける必要がないため、一括で修正や管理ができるというメリットもあります。デザインによってはきめ細かい調整がきかないことや、スマートフォンでの表示速度が遅くなる、フォームが小さくて指でタップしづらいなど、ユーザビリティを損なう場合もあります。画像を多く使っていたり、スマートフォンからの流入数が多いランディングページは、スマートフォンに特化したデザインにすることが望ましいでしょう。まとめランディングページにおけるデザインの役割は、”魅せる”ことでもブランドイメージの刷り込みでもありません。ユーザーをコンバージョンへと導くことです。そのためには、以下のような工夫が大切です。コピーや文章を読みやすくする続きが読みたくなるレイアウトにする商品・サービスのを魅力が引き立つ色を使う思わずクリックしたくなるようなCTAボタンを設置するHubSpotでは、デザイン以外にも、ランディングページのパフォーマンス向上のためのノウハウを完全無料のeBookで詳しく紹介しています。これからランディングページの活用を考えている方、現状のランディングページの成果にお悩みの方は、ぜひ下のボタンをクリックしてダウンロードしてください。2020年2月10日トピック::ランディングページいかがでしたか?お気に召したのであればシェアはこちらから。