こんにちは。グッドパッチのUIデザインチームです。
グッドパッチにはさまざまな企業からの依頼が寄せられますが、Webページのリニューアルに関する相談も非常に多く、コンバージョン（CV）に関わる悩みを抱えているケースがほとんど。
では、デザインにおいてどういうポイントを意識すれば、CVにつながりやすくなるのでしょうか？
今回の記事では、東京ガスの電気自動車（EV）導入支援サービス「Charge Planner」のランディングページ（LP）リニューアルを支援した実例を基に解説します。
目次
LPを分析し、CVRを高める「3つの指針」を用意
同社がグッドパッチにLPのリニューアルを依頼したのは、この記事のテーマにもある通り「LPからの問い合わせを増やすため」。
プロジェクトでは、まずデザインの方向性を定めるため、当時のLPを分析し、問い合わせ（CV）の障害になっているポイントを整理。リニューアルにあたって、大きく3つの方向性を打ち出しました。
消費者の「購買行動プロセス」に沿ったページ構成にする
コンバージョンを目的としたWebページの場合、ユーザーの購買意欲が高まるようなページ構成にするのが望ましいです。
リニューアル前のLPを消費者の購買行動プロセスのフレームワーク「AIDMA」に照らし合わせたところ、Attention（注意）、Interest（興味）、Desire（欲求）に関するセクションに改善の余地が見られました。
- Attention（注意）：ユーザーの目を引くポイントを作る
- Interest（興味）：悩みへの共感や解決策を提示する
- Desire（欲求）：ユーザーが欲している情報を増やす
あくまで一例ではありますが、AIDMAの各要素をバランス良く配置することで、ユーザーが自然に問い合わせに至りやすい構成になります。
AIDMAとは、消費者の購買決定プロセスを説明するモデルの1つ。
消費者はまず、その製品の存在を知り（Attention）、興味をもち（Interest）、欲しいと思うようになり（Desire）、記憶して（Memory）、最終的に購買行動に至る（Action）という購買決定プロセスを経る。
リニューアル前のLPは「Interest（興味）」と「Desire（欲求）」にあたる情報が足りないと分析した
サービスの比較検討に必要な情報を補う
さまざまな企業がEV導入支援サービスを提供している中で、ユーザーはまずはLPにある情報を比較し、どの企業のサービスに問い合わせをするか決めます。
リニューアル前のLPはサービス内容の説明、つまり「Memory（記憶）」が中心の構成で、メリットの訴求や導入例といった「Interest（興味）」と「Desire（欲求）」にあたる情報が不足していることが分かりました。
ユーザーであるEVを導入しようと検討する担当者にとって、比較検討のために必要な情報が足りず、問い合わせをするかどうかの判断ができない状態になっていることが予想されたので、ユーザーが気にしやすい料金、導入事例、実績などの情報を補完、強調することにしました。
強調したい情報を分かりやすくする
先述した「Attention（注意）：ユーザーの目を引くポイントを作る」への対応も大切です。
リニューアル前のLPは、セクションごとの見た目の変化が少なかったり、セクション内でもジャンプ率（強調したい文字や画像の大きさ）が低かったりと、要素の優先度や強弱があまりなく、ユーザーがどの部分に注目すればいいか分かりにくかったため、メリハリをつけるデザインを心がけました。
LPの効果を高めるためのデザイン
先ほど示した指針を基に、リニューアルではLPの機能的な部分に手を加えました。
ワイヤーフレーム制作の段階で「AIDMA」を意識、議論の土台を整える
ユーザーがスムーズに問い合わせに至るようにするため、LPをAIDMAに沿った構成へと変更したのですが、ワイヤーフレームを作成する段階で、各セクションがAIDMAのどこに当てはまるかを明確にしました。
AIDMAの各段階に対応する内容とその情報量が一目で分かるようになるほか、関係者内での認識の齟齬が生まれにくくなり、議論をスムーズに進めることができます。
AIDMAの流れに沿ったワイヤーフレーム
導入の意思決定に必要な3つの情報
プロジェクトチームでは、EV導入支援サービスを検討するユーザーが、問い合わせを行う意思決定に必要な情報は、「企業に対する信頼性」「サービスの対応範囲」「費用」の3点だと捉え、以下のような情報を追加しています。
- 企業に対する信頼性：「東京ガスがワンストップでサポート」することを訴求するセクションや「導入事例」のセクションを用意
- サービスの対応範囲：「まるっとお任せ」という表現でさまざまなセクションで訴求。フローを可視化した図も用意
- 費用：独立したセクションを新たに用意し、ていねいに紹介
問い合わせフォームの改善
CVRの向上という目的を鑑みると、LPのデザインに加え、CVの直前である「問い合わせフォーム」の見直しも大切です。
今回のリニューアルでは、まず別ページに分かれていた問い合わせフォームをLP内に埋め込む構成に変え、離脱率の低下を目指しました。
さらにユーザーの利便性を優先する形で、問い合わせに必要な項目を約3分の1に。離脱の原因となりやすい項目をフォームの上部に配置し、簡単に答えられる項目を下部に配置しました。これにより、フォーム入力の心理的負荷を段階的に軽減し、最終的に問い合わせに至るまでのハードルを下げられるようになります。
情緒的な価値を伝えるファーストビューで、他社との差別化を
ここまでは機能的な面に対する改善を中心に説明しましたが、他社も類似のサービスを展開する中、ユーザーに選ばれるためには、別のアプローチも有効です。
競合サービスのLPを調査したところ、ファーストビューでは「サービスの機能的な価値」や「お得さ」などを訴求していることが多いことが分かりました。
リニューアル後のLPでは、サービスが提供できるもう一つの価値「情緒的価値」も訴求することにしました。具体的には、ファーストビューでCharge Plannerで実現したい世界を表現し、「Charge Plannerを使うことでCO2排出削減に貢献し、住みやすい未来への投資ができる」という価値を提案しています。
ビジュアルコンセプト
EV化を通してより良い社会を目指していきたいという「Charge Planner」の思いを表現するため、複数色のグラデーションとシャドウを活用し、明るい未来・社会に向かう、先進的ではあるが温かみもあるイメージを持たせています。
図中のアイコンやセクションの区切りを表すイラストは、ファーストビューのイメージと一貫性を持たせるためにアイソメトリックなイラストを制作し、統一感を高めています。
また、レイアウトは整頓されつつも、単調にならないようにリズムのある見せ方を取り入れ、ジャンプ率をつけることで、注目してもらいたい内容がよりユーザーの目に留まるようにしました。
競合サービスは単色をメインにすっきりとしたイメージのLPが多いのに対し、Charge Plannerのロゴはオレンジと緑のグラデーションを採用しています。情報だけでなく視覚的な印象からも、他社とは異なる世界観を印象付け、数あるEV導入支援サービスの中でも、Charge Plannerを第一想起してもらえるデザインを目指しました。
ファーストビューにイラストとアニメーションを採用
Charge Plannerが目指す未来のイメージをユーザーに具体的に伝えるために、ファーストビューではイラストを活用しています。
イラストは、充電ステーションを中心に構成されており、EVが街に溶け込んでいる様子を描いています。こちらはCharge PlannerのYouTubeでも使用されており、ユーザーがさまざまなタッチポイントで共通のデザイン要素に触れるよう統一感を持たせています。統一感を感じることは、サービスの世界観を強力に伝えるだけでなく、ユーザーに安心感と信頼感を与える効果もあります。
また、ユーザーがCharge Plannerの目指す世界をより鮮明にイメージできるように、イラストにアニメーションを追加するなど、LPの特性やユーザー体験に合わせて細かなデザインを意識しました。
ファーストビューのアニメーション
改修によりエンゲージメント率が約1.5倍に向上
LP更新前後の同じ月日期間で比較した結果、改修前50%弱だったエンゲージメント率が、改修後は70%強と20pt以上増加し、改修前後比でおよそ1.5倍の数値改善が見られたそうです。
エンゲージメントはページビュー、スクロール、リンクへのクリック等で高まる数値であり、新たなLPがユーザーにとって良い体験を提供し、関係性の強化やアクションに繋がっている様子が見られます。
また、東京ガス担当者の山本さんからは次のようなコメントをいただきました。
統一されたコンセプトのもと、イラストや事例を通じてサービスの魅力が直感的に伝わるようになり、社内でも大変好評を受けました。
作成過程では複数の構成やイラスト案をプロのデザイナーさんから積極的にご提示いただき、LP発注が未経験な中でも、当初想定を大きく上回る理想的なLP完成に導いていただきました。
—
ここまで読んでいただき、ありがとうございました！
デザインの力で、ユーザーにサービスの価値をより効果的に伝え、ビジネスに貢献するプロセスのヒントとして、皆さんのお役に立てれば幸いです。
また、グッドパッチでは一緒にLPデザインを始めとした、ユーザーのさまざまなタッチポイントのデザインに携わるコミュニケーションデザイナー、UIデザイナーを募集中です！
Credit
クリエイティブディレクター：栃尾 行美
UIデザイナー：平尾 帆野佳、河内 愛美
アカウントマネージャー：浦田 文恭
採用情報
・Goodpatch コミュニケーションデザイナーの採用情報
関連記事
・職種や肩書きは何でもいい、僕たちが提供できる価値は無限にあるから——UIデザイナー石井
