Strategy

「オフィス光119」サービスサイトの調査やヒアリングによって、リニューアル前のサイトでは構成・デザイン・UIの3つ課題が挙げられました。

まず構成の課題は、サイトの増改築を行ってきたため情報が継ぎ接ぎになっていること。一度サイト内コンテンツの整理を行い、ユーザーにとって必要な情報を考えていきました。またリニューアル後にお客様自身でのサイト増改築が行いやすくなるよう、指針のあるコーディング規則に沿った構築が必要でした。

次にデザインは、全体的に淡白でおとなしい印象であったため訴求力に課題がありました。その結果、新規顧客は競合他社と見比べた際に訴求力が弱く感じられ、既存顧客は困りごとを解決できるコンテンツがなく、サイト全体の導線や掲載情報などにも不安が残る状態でした。

関連して、各コンテンツに視覚的なわかりやすさが足りないことも課題に。より直感的にサービスの魅力や信頼感が伝わるよう、図やイラストなどデザインの力も活かす必要がありました。

そして最後にUIでは、特にヘッダー周辺の使い勝手を改善することが目標となりました。具体的にはヘッダーを見た際に、ターゲット別に案内されるページが分かれていたり、簡単に切り替えられるといった機能的な改善です。

Design

リニューアル前の「オフィス光119」サービスサイトでの3つの課題に対して、それぞれ改善の対応を行いつつ、最終的に問い合わせ（受注）というゴールを達成するためのサイトを制作しました。

まず情報が整理されておらず何を伝えたいかわかりにくかった構成。こちらは一度サイト全体を整理して、ユーザーにとって必要なページに絞り、構成を組み直すことで解決を図りました。具体的には、新規顧客はサービスや製品紹介、既存顧客はサポートページにすぐ遷移できるよう構成・導線を分け、利用しやすいサイトにしています。

続いてデザインの訴求力が弱いという課題は、何を表現しているのか視覚的にわかりやすいデザインを制作することで改善。また新たにマテリアルデザインを取り入れ、全体的にスマートな印象のあるデザインへと変わりました。

関連して、コンテンツの視覚的なわかりやすさが足りない課題に対し、グラフ・アイコンを活用し直感的にサービス内容の良さや魅力を感じてもらえるよう一工夫。他にも、各構成パーツはお客様自身でメンテンナスが行えるように、扱いやすいコードで構築しています。

最後にUIで挙がったヘッダー周りの課題には、メガドロップダウンメニューを採用。メニュー内でターゲット別に案内を分けることで、知りたい情報がすぐ見つかる、使いやすいサイトにリニューアルしています。