東京ガス

東京ガス「Charge Planner」のランディングページ（LP）リニューアル

東京ガス株式会社

TOKYO GAS Co., Ltd.
東京ガス株式会社は、1885年の創業以来、日本最大の都市ガス事業者としてエネルギー供給を基盤に社会に貢献。ガスと電気の安定供給をはじめ、ネットワークや海外事業、不動産サービスなど家庭や企業に向けた省エネ技術やスマートライフ実現のためのサービスを展開しています。また、環境負荷を低減する取り組みにも積極的に取り組み、持続可能な未来のエネルギー社会に向けた活動を推進しています。

ご支援前の課題

• LPからの問い合わせを増やしたい
• YouTube動画の掲載なども考慮したデザインにしたい
• コンバージョン率を改善し、LPからの問い合わせを増やしたい
• サービスの認知度を高めたい

グッドパッチの対応と支援後の成果

• 既存のLPをリニューアルし、サービスの魅力が直感的に分かりやすいLPに
• 情緒的な価値を伝えるファーストビューとビジュアルコンセプトで他社との差別化
• エンゲージメント率が約1.5倍に向上
• 社内にLPのノウハウがインストールされ、ほかの施策に生かせるように

東京ガスグループでは2050年のカーボンニュートラル実現に向けたロードマップを策定し、さまざまな取り組みを実施しています。

グループ経営ビジョン『Compass2030』にて掲げられた2050年CO2ネット・ゼロ実現への具体的な道筋として、2024年3月に「カーボンニュートラルロードマップ2050」を策定。
まずは国内供給エネルギーにおいて目指す姿を示しました。

今回LPをリニューアルした電気自動車（EV）導入支援サービス「Charge Planner」は、こうした東京ガスグループが目指す2050年カーボンニュートラル実現に向けた具体的な取り組みの一つとして企業向けにサービスを展開しています。

Charge Plannerは、「顧客の状況に合わせたEV導入計画の提案」「補助金申請を含めた設計・工事・保守の対応」「EV充電器の設置および充電マネジメント」などを含めた、EV導入を総合サポートするサービスです。
東京ガスグループが掲げる2050年カーボンニュートラル実現に向けた取り組みの一つとしてサービスを展開しており、企業などの社用車・公用車をガソリン車からEV車に切り替えるためのユーザーのさまざまな悩みをサポートし、円滑なEV切り替えを実現しています。
一方で、サービスのLPからの問い合わせ率がなかなか上がらないことを課題として抱えていました。
そこでCharge PlannerのLPリニューアルを企画し、外部の専門機関としてグッドパッチに依頼。東京ガスグループでは、過去にグッドパッチが別部署を支援しており、その際のアウトプットにご満足いただけたことが選ばれた理由の一つだといいます。

グッドパッチではまず当時のLPの分析から着手。問い合わせ（CV）の障害になっているポイントを整理し、LPリニューアルにあたって大きく3つの方向性を打ち出しました。

１．消費者の「購買行動プロセス」に沿ったページ構成へ

まずリニューアル前のLPを、消費者の購買行動プロセスのフレームワーク「AIDMA」の観点から分析した結果、特にAttention（注意）、Interest（興味）、Desire（欲求）のセクションに改善の余地があることが判明しました。

• Attention（注意）：ユーザーの目を引きつける要素やインパクトのあるビジュアルが不足している。
• Interest（興味）：ユーザーの悩みや課題に対する共感を示し、適切な解決策を伝える情報が不足している。
• Desire（欲求）：ユーザーが求めている具体的な情報や魅力的な訴求ポイントが不足している。

これらの要素に対し、追加の情報やレイアウト、ビジュアル、ライティングを含め適切に配置・強化することで、ユーザーの興味を自然に引き出し、最終的に問い合わせやアクションにつながるLP構成に近づけることを目指しました。

２．サービスの比較検討に必要な情報を補足

リニューアル前のLPは、サービス内容の説明、つまり「Memory（記憶）」を中心とした構成になっており、メリットの訴求や導入例といった「Interest（興味）」と「Desire（欲求）」にあたる情報が不足していました。

ユーザーである「EVを導入しようと検討する担当者」にとって、比較検討のために必要な情報が十分に提供されておらず、それにより、問い合わせをするかどうかの判断ができない状態になっていることが予想されました。そこで、料金プランや具体的な導入事例、実績データなどの情報を補完し、わかりやすく強調することで、ユーザーが迷いなく問い合わせに進める道筋を構築していきました。

具体的には以下のような情報を整理し追加することで、ユーザーがLPを見た際に必要な情報やメリットがわかりやすく伝わる構成を目指しました。

• 企業に対する信頼性：「東京ガスがワンストップでサポートする」という安心感を伝えるセクションを設け、さらに具体的な「導入事例」を紹介することで、実績に基づいた信頼感を訴求
• サービスの対応範囲：「まるっとお任せ」というキャッチフレーズを活用し、サービスの幅広い対応範囲をさまざまなセクションで訴求。サービスフローを可視化した図を追加し、具体的な進行イメージが持てるように
• 費用：独立したセクションを新たに用意し、わかりやすいキャッチコピーと導入前後の図解イラストで訴求。初期費用の軽減・コストの平準化いったメリットをぱっと見で分かるように

３．目を引く情報設計でユーザーの関心を誘導

リニューアル前のLPは、セクションごとの見た目の変化が乏しく、セクション内のジャンプ率（強調したい文字や画像の大きさ）が低かったりと、要素の優先度が一見した限りでは
わかりづらい構造になっていました。

そこで、ユーザーが必要な情報を瞬時に把握しやすくするために、見た目の優先度や視線の流れを意識し、メリハリをつけるデザインにしました。これらの方針を元にLP全体を再設計し直すことで、コンバージョン（CV）につながりやすいLPを目指しました。

Charge Plannerの目指す世界をより鮮明にイメージしてもらうため、ファーストビューにアニメーション付きのイラストを追加するなど、LPの特性とユーザー体験に合わせた細やかなデザインを意識しました。このイラストはYouTubeをはじめとする他のタッチポイントでも使用されており、統一感のあるデザインで一貫性の向上に寄与しています。

ファーストビューにイラストとアニメーションを採用し世界観を表現

トーン&マナーにおいては、既存のロゴを参考にしつつ、その世界観を最大限に生かすための工夫を重ねました。競合サービスが単色をメインにすっきりとしたイメージを採用する中、Charge PlannerのLPではロゴが持つオレンジと緑のグラデーションに注目。グラデーションが持つエネルギーや調和のイメージを活用し、全体のトーンが鮮やかで印象的になるよう、まとめました。

これにより情報だけでなく視覚的な印象からも、他社とは異なる世界観を印象付け、数あるEV導入支援サービスの中でも、Charge Plannerを第一想起してもらえるデザインを目指しました。

「EV化を通してより良い社会を目指す」というCharge Plannerの想いを反映するために、デザイン全体を通して複数色のグラデーションとシャドウを活用。これにより、先進的でありながら温かみを感じさせる、明るい未来に向かうイメージを表現しています。

LP更新前後の同じ月日期間で比較した結果、改修前50%弱だったエンゲージメント率が、改修後は70%強と20pt以上増加。改修前後比でおよそ1.5倍の数値改善が見られたとのこと。

エンゲージメントはページビュー、スクロール、リンクへのクリック等で高まる数値であり、LPのリニューアルによってユーザーにとって良い体験を提供し、関係性の強化やアクションにつながっていることが数値でも明らかになっています。

最後に、東京ガス担当者の山本さんからは次のようなコメントをいただいています。

統一されたコンセプトのもと、イラストや事例を通じてサービスの魅力が直感的に伝わるようになり、社内でも大変好評を受けました。
作成過程では複数の構成やイラスト案をプロのデザイナーさんから積極的にご提示いただき、LP発注が未経験な中でも、当初想定を大きく上回る理想的なLP完成に導いていただきました。

グッドパッチではLPをはじめ、ユーザーのさまざまなタッチポイントのデザインやUI/UX改善を強みとしています。ユーザーにサービスの価値をより効果的に伝え、ビジネスに貢献するプロセスにお悩みの企業の方がいらっしゃいましたら、ぜひお気軽にご相談ください。

本プロジェクトの詳細は、こちらのブログ記事でもご覧いただけます。

東京ガス「Charge Planner」のLPリニューアルから考える、CVRを高めるUIデザインとは｜Goodpatch Blog グッドパッチブログ

クリエイティブディレクター：栃尾 行美
UIデザイナー：平尾 帆野佳
UIデザイナー：河内 愛美
アカウントマネージャー：浦田 文恭