各サービスを解りやすく区分けしよう！

先日（2013年7月23日）から富士山頂をGoogleストリートビューで見れるようになったみたいですね！

初めてストリートビューを見た時は確かアメリカしか表示されていなかったけど、感動して夢中でロサンゼルスの街を走り回った？ものです。この手のWebサービスって本当に楽しいですよね！

さておき、本シリーズも今回で最終回です。

前回までは割とホームページの仕様、技術的な部分でしたが今回はホームページに掲載されている情報の見せ方的な部分になります。サービスの紹介もちょっとした工夫で解りやすくすることができます。

各サービスを解りやすく区分けしよう

業種にもよると思いますが、Studio SPECに関しましては提供しているサービスが割と多く、情報が混同してしまう可能性もあります。

例として、
Studio SPECでは「名刺のデザイン」も行っていますが「名刺の印刷」も行っています。
よく閲覧するとその内容の差異は理解できますが、一見どちらのサービスについてのページなのか解り辛いと感じてしまう可能性もあります。

なぜならカタログやチラシなどの広告と違い、ホームページに関してはユーザーが必ずしもトップページから訪問してくれるとは限らないからです。

仮に、
「オーストラリア　名刺印刷」
とGoogle検索をかけた場合、Studio SPECのホームページはトップページではなく、
「名刺 / レターヘッド印刷」
のページが表示されます。

“オーストラリアで名刺を印刷してもらいたいユーザー”がStudio SPECは”名刺のデザイン”も行っているんだ！

と気が付き、
「名刺デザインページ」に移動したとき似たようなページ構成、デザインだと困惑してしまう可能性があります。

これはあくまでも一例ですが、複数のサービスを提供しているサイトの場合、さまざまなケースを想定することが出来ます。

全ての業種に当てはまるわけではありませんが、Studio SPECではこのような形で対策を行っています。

各サービスにテーマカラーを設け、見出しやキーポイントに使用することで各サービスを解りすく区分けしました。

第一回でも触れましたが、Studio SPECでは各サービスをユニークなテーマに例えてサービスの説明をしています。そのカラーを各サービスのページに適応させました。

Studio SPECのホームページはWordPressで制御しているので、各サービスページが表示されたときに自動でカラーが変わるように設計しています。

勿論、新たにページを追加したときも同様、それぞれ自分がどのサービスに属しているかを判別、該当カラーが適応されます。
WordPressって本当に便利ですよね！

と、話はそれましたが実際に画像でご説明致します。

グラフィックデザインはStudio SPECのコアサービスでもあるのでStudio SPECのメインカラーでもある青を適応。メインカラーを使用する事により中心になるサービスを解りやすくしています。

グラフィックデザインと密接な関係にあるサービスですので、比較的近い関係の緑系を適応。
かけ離れた色を使用しない事でサービスの関係性が近い事を表しています。

その他、サービスにもそれぞれ適した色を設定しています。

メインのナビゲーション部分にマウスオーバーさせた時にも各サービスのテーマカラーが表示されます。

スマホで閲覧しても！

このように処置する事により、メインのナビゲーションを利用してページ移動した際にも自身がページ移動した事を認識しやすくしています。

今回は色を変えるといった比較的解りやすい手法を取り入れましたが、これ以外にも様々な方法でホームページに訪れたユーザーの理解を促す方法があります。

ホームページを作るにあたって、ビジュアルやトレントを意識することは勿論大切ですが一番大切なのは、ユーザーの目線に立ち、情報の質も含め、どのようにすればユーザーが得たい情報を的確に得ることが出来るかを考慮する気持ちだと僕は常に思っています。

話は飛躍してしまいましたが、4回の連載でStudio SPECのサイトリニューアルの簡単な紹介をさせていただきました。
この4回の連載を通じて、これからホームページをリニューアルやパワーアップさせようと考えている方に対して、何らかのヒントになれたらとてもうれしいです。