Yuri Minami
Ceneco Green Power ウェブサイトのメイン画像

Ceneco Green Power ウェブサイト

地域・リソース上の制約に向き合いながら協働し、クライアントの満足と合意形成につなげたウェブサイトリデザイン

プロジェクト種別
ナイジェリアの太陽光発電会社 Ceneco Green Power のウェブサイトリデザインに向けたUXコンサルティング
担当内容
ウェブサイト全体、デスクトップ・モバイル両方(22ページ)のリデザイン
チーム
UXデザイナー4名、クライアントのCEO
担当
リサーチ:チームで協働 デザイン:サービス関連ページのデザイン、デザインガイドの作成。
成果
デザイン成果物を期日通りに納品。提案したデザインの一部が公開サイトに実装され、ユーザーから好意的な反応があったと報告を受けました。

新しいブランドを反映し、ユーザー体験を向上させるウェブサイトリデザイン

Ceneco Green Powerは、住宅、商業施設、農業、オフグリッド環境、EV向けに太陽光発電システムの設置と保守を提供するナイジェリアの企業です。AIとIoTを活用し、アフリカの太陽光発電技術をリードする企業としてリブランディングを進めていました。私たちはUXコンサルタントとして、ウェブサイトのリデザインを担当しました。

新しいブランドを反映し、UXを向上させるウェブサイトリデザイン

UXコンサルタントとしての私たちのミッションは、ウェブサイトをリデザインし、ユーザー体験全体を向上させることでした。

事業は口コミで成長していた一方、ウェブサイトは十分に機能していなかった

サイト分析では、訪問者が月50人と少なく、直帰率も68%と高いことが分かり、ウェブサイトが十分に顧客獲得につながっていませんでした。改善すべき根本的な課題を3つ特定しました。

旧ウェブサイト

サイト評価で明らかになった課題

サービス内容が分かりにくい

複雑な情報設計と情報不足により、提供されているサービスを理解しにくい状態でした。

信頼性が伝わらない

コンテンツが少なく、デザインや画像に一貫性がないため、信頼性への懸念が生じていました。

ブランドとの不一致

旧ウェブサイトは、技術をリードする企業という新しいブランド像を反映していませんでした。

地域・リソース上の制約があった

直接アクセスできない市場に向けて、ナイジェリア特有のエネルギー事情とクライアントの限られたリソースを踏まえたデザインが必要でした。そのため、ステークホルダーと密に協働し、プロセス全体を通じて現地の状況を考慮し続けました。

ナイジェリアのユーザーに直接アクセスできない

地域的な制約により、ナイジェリアの顧客に直接アクセスできませんでした。

異なるエネルギー事情

ナイジェリアでは電力供給が不安定なため、現地の状況を理解することが不可欠でした。

クライアントの限られた運用体制

少人数のチームでサイトを管理していたため、長期的な効果を生むには、シンプルで拡張しやすいデザインが重要でした。

太陽光発電のウェブサイトでは、業界標準との整合性と独自性のバランスが重要

ナイジェリアの顧客に直接アクセスできなかったため、調査方法を調整しました。ユーザーインタビューの代わりに、ナイジェリア、米国、欧州の太陽光発電会社9社のウェブサイトを分析し、クライアントのCEOとCOOにインタビューを行いました。業界、事業、顧客、ナイジェリアの状況について理解を深めました。

競合調査では、多くのウェブサイトが似ており、業界で共通する方向性と差別化の重要性が見えてきました。インタビューからは、クライアントが透明性を重視し、太陽光発電の知識が少ない顧客にも自社の強みを伝えようとしていることが分かりました。

調査で得られた知見

顧客

安定した手頃なエネルギーとしての太陽光発電

ナイジェリアでは送電網からの電力が不安定で、利用できない地域もあり、コストも高いため、太陽光発電は重要な代替手段です。

最大の懸念はコスト

価格は顧客の大きな関心事であり、クライアントにも頻繁に質問が寄せられていました。

競合

データを活用した信頼の構築

競合は実績数値、レビュー、提携先など、多様な情報を提示して信頼性を高めていました。

ジャーニー全体を通じたストーリー

競合はサイト訪問から問い合わせまで、各段階でユーザーに寄り添うストーリーを構成していました。

クライアントの機会

業界標準と独自性のバランス

競合のサイトには、色や画像などのビジュアルデザインに共通する傾向がありました。

品質・革新性・透明性

クライアントは太陽光発電の価値や自社の強みを積極的に顧客へ伝えており、ウェブサイトにもそれを反映する必要がありました。

デザインの指針となる4つの戦略を導出

調査から、リデザインの指針となる4つの戦略を導き出しました。

技術力を伝える

技術を紹介し、業界をリードする企業としての位置づけを強化する。

成果を示す

実績とデータで成功を示し、信頼性を高める。

顧客の理解を支援する

太陽光発電を分かりやすく説明し、その価値を明確に伝える。

ジャーニーに沿ったストーリー

各段階の顧客のニーズや懸念に応え、納得感のある意思決定を支援する。

クライアントの要望を取り入れ、コンテンツ量をすり合わせるワークショップを実施

競合に共通するサイトマップを参考に、各ページに掲載する情報をクライアントと検討するワークショップを実施しました。その結果をもとに サイトマップ を作成しました。

ワークショップの目的

納得感を高め、実装への賛同につなげる

クライアントの意向をデザインに反映し、期待と最終成果のずれを最小限に抑える。

コンテンツ量の認識をそろえる

クライアントが対応できる範囲を定め、実装に向けた準備を整える。

情報設計のためのカードソーティングワークショップ

通常はユーザーと行うカードソーティングを応用し、調査で見つけた競合に共通する構成と比較しながら、CEOが思い描くサイト構造を把握しました。

戦略が最終デザインにどう反映されたかを見る

以下では、デザイン戦略が最終的な体験の各場面でどのように具体化されたかを紹介します。私は主にサービス関連ページのデザインを担当しました。

サービス一覧ページ

サービス一覧ページでは、提供するサービスと技術の活用を分かりやすく紹介します。

Ceneco Green Powerのサービス一覧ページの最終デザイン(1)
Ceneco Green Powerのサービス一覧ページの最終デザイン(2)
Ceneco Green Powerのサービス一覧ページの最終デザイン(3)
Ceneco Green Powerのサービス一覧ページの最終デザイン(4)
Ceneco Green Powerのサービス一覧ページの最終デザイン(5)

サービス詳細ページ

サービス詳細ページでは、サービスの内容に加え、太陽光発電を導入し、Ceneco Green Powerを選ぶ理由を詳しく説明します。

Ceneco Green Powerのサービス詳細ページの最終デザイン(1)
Ceneco Green Powerのサービス詳細ページの最終デザイン(2)
Ceneco Green Powerのサービス詳細ページの最終デザイン(3)

デスクトップ

モバイル

ウェブサイトをよりユニークで魅力的にする

第1版のプロトタイプを作成した後、4人のユーザーからフィードバックを集め、デザインを改善しました。主な変更点を紹介します。

グラデーションで先進的な印象を加える

初期の配色は一般的で技術的な印象が弱かったため、濃い青緑と淡い青緑の2種類のグラデーションを導入し、ビジュアルの独自性を高めました。

落ち着いた単色背景を使用した第1版のデザイン
改善前 - 第1版

特に単調な背景によって、ページの印象が弱くなっていました。

背景にグラデーションを加えた改善後のデザイン
改善後 - 第2版

グラデーションの背景により、活気と先進的な印象が加わりました。

サービスの流れを視覚的に強調する

サービスの流れは内容を理解するうえで重要ですが、初期デザインでは順序が伝わりにくく、見落とされがちでした。そこで、流れが明確に伝わるデザインに変更しました。

第1版のサービスの流れのデザイン
改善前 - 第1版

実装は容易ですが、手順の順序が明確に伝わりませんでした。

矢印の図で改善したサービスの流れのデザイン
改善後 - 第2版

実装の難易度は上がりますが、矢印の図によって手順の順序が効果的に伝わります。

実際の施工写真を紹介するギャラリーを追加する

ストック写真は見栄えが良い一方で、一般的で人の気配や実在感に欠けるという意見がありました。企業の実像を伝えるため、クライアントが持つ実際の写真を使った施工事例ギャラリーを追加しました。

ストック写真を使用した第1版のデザイン
改善前 - 第1版

ストック写真だけでは、整った印象はあっても、一般的で実在感に欠けるサイトになりがちです。

実際の施工事例ギャラリーを追加した改善後のデザイン
改善後 - 第2版

実際の施工写真を見せることで、事業の具体的な姿を伝えられます。

デザインガイドで実装と拡張性を支援

元ソフトウェア開発者として、デザイナー以外にもデザインの意図を伝える重要性を認識していました。そのため、ビジュアルデザインの指針、各セクションの目的やユーザーの関心を引くためのヒントをまとめたコンテンツ指針、実装に役立つリソース、アセット一覧を含むデザインガイドを作成しました。

ドキュメントの目的

実装を円滑に進める

クライアントがFigmaのデザインをWordPressで実装する必要があったため、作業を進めやすくするリソースを提供しました。

今後のページにも一貫性を保つ

将来のサービス拡大を見据え、一貫性を維持しながらページを追加するための指針を共有しました。

Ceneco Green Powerのデザインガイド

デザインガイド

協働的なアプローチがクライアント満足、合意形成、実装につながった

デザインと協働的な進め方が評価され、クライアントは成果に満足し、提案を採用しました。プロジェクト後にウェブサイトが更新され、顧客からの好意的な反応など、事業へのプラスの影響がありました。アクセス解析データなどの定量的な効果についても、クライアントに確認を進めています。

シンプルで分かりやすくまとめられている点が気に入っています。リサーチに基づいた提案で、素晴らしい仕事です。

Sunday Olusheyi Falaye、CEO

現在のウェブサイトは、品質も機能も以前のサイトとは見違えるほどです。

ナイジェリアの顧客
更新されたCeneco Green Powerのウェブサイト

更新後のクライアントのウェブサイト

制約に応じてデザインプロセスを適応させる重要性を学んだ

地域的な制約によりユーザーへのアクセスやクライアントとのコミュニケーションが限られたため、調査やデザインの方法を調整する必要がありました。デザイン思考のプロセスをすべて実施できない場合でも、戦略的に進める重要性を学びました。また、探索的なプロジェクトの中で、プロセスの定義、タスクの整理、チームの認識合わせを支援し、プロジェクトマネジメントの視点も強めることができました。

チーム内のプロジェクト計画シート

チーム内のプロジェクト計画シート