BLOG

2016年6月28日/ Webサイト, マーケティング, リニューアル

UXを取り入れたWebサイトリニューアルの設計方法

こんにちは!Webマーケターのhonokaです*(^o^)/*

早いことに入社してもうすぐ3ヶ月が経ちます。これまでは頼まれた仕事を試行錯誤しながらやってきましたが、これからは自分で仕事を見つけていき多くのことを学んでいきたいと思います!


さて、前回は自社サイトのリニューアルに向けて目的や課題、これから取り組んでいくことについてご紹介しましたが、今回は前回に引き続き、その課題点に基づいた「UXを取り入れたサイト設計」についてご紹介していきたいと思います。

入社3日目で自社サイトのリニューアルを任された新卒が取り組んできた5つのこと

※こちらが前回の記事です。

 

目次

  • はじめに
  • 企業サイトのリサーチ
  • ターゲットをさらに選定するためのペルソナ設定
  • つくりだすプロセスが重要なカスタマージャーニーマップの作成
  • ワイヤーフレーム
  • 取り組んだ結果
  • おわりに

 

はじめに

まずはじめに、UXについて説明したいと思います。

【UX(ユーザーエクスペリエンスとは?】

日本ではUXのことを「ユーザー体験」と置き換えられることがありますが、国際規格により「ユーザーエクスペリエンス」という用語は定義されています。

UXとはシステムを利用する前から利用した後のすべての体験のことをいい、製品やシステムを使用したときの個人の知覚や感覚のことをいいます。

また、人によって利用シーンが違うため、ユーザーのおかれている前提条件にしたがっていろんな考え方をしていく必要があります。

クランチタイマーでは、「UX HIROSHIMA」というコミュニティを運営しているのですが、そのコミュニティを通じて勉強した内容を業務でも活かしています。

その中で、ペルソナ設定やカスタマージャーニーマップなどを使いながらリニューアルに向けたサイト設計をしました。

今回は実際にクランチタイマーが取り組んできたことをご紹介します!

 

企業サイトのリサーチ

リニューアルするにあたって、はじめに取り組んだことが「企業サイトのリサーチ」です。

レイアウトやデザインのトレンドの調査を目的とし、クランチタイマーでどうリニューアルしていくのかを明確にしていくために広島県のIT企業や全国のIT企業のWebサイトのリサーチをしました。

デザイン参考サイト URL
DRAWING AND MANUAL(東京) http://www.drawingandmanual.jp
バーグハンバーグバーグ(東京) http://bhb.co.jp/about
FICC(東京) https://www.ficc.jp/contact/
アグイジェ(東京) http://aguije.jp
アクアリング(愛知) http://www.aquaring.co.jp

※自社がリサーチしたサイト(一部)

上記のようにデザインの参考になりそうなサイトをピックアップしました。

そして実際にアニメーションなどが与える効果などを社員同士でディスカッションし、どういうコンテンツ内容やデザインでリニューアルしていくのかを具体的に考えました。

 

ターゲットをさらに選定するためのペルソナ設定

企業サイトのリサーチをして、だいたいのイメージが掴めたらすぐに配置やデザインを決めるのではなく、ペルソナを設定していきます。

ペルソナとは、「ユーザーを特定し仮想のユーザー像を具現化すること」です。自社の商品、サービス、製品を使う、または自社のお店を好きになってくれる、象徴的な顧客像のことを言います

persona
※自社が設定したペルソナ

どの企業もサイトをリニューアルするときに必ず「誰に向けたサイトなのか」という「ターゲット選定」をすると思います。

ここで曖昧なターゲット選定ではなく、そのターゲットをさらに1人の人物に絞っていくことでユーザー目線での判断ができるようになります。
ユーザーが抱えている問題はなにか、どうすれば解決できるのか、ペルソナのストーリーを持って進めることが重要です。

 

つくりだすプロセスが重要なカスタマージャーニーマップの作成

ペルソナを設定したところで、カスタマージャーニーマップを作っていきます。

カスタマージャーニーマップとは、ユーザーがゴールにたどり着くまでの空間と時間を「旅における一連の経験」として視覚化したものを指します。

ペルソナの設定でターゲットが明確になったうえで、ターゲットがとる行動が時系列に変化するということです。

これを作成し、ユーザー目線に立って考えることで、どんな情報がほしいのか考えていきます。

ステージ 認知
思考・感情 どんな制作会社があるだろう?
チャネル・行動 部下に聞く。
経営仲間に聞く。
ネットで検索(広島 HP制作)
SNSやブログを見る。
情報ニーズ twitterのフォロワーを増やす。つぶやきを増やす。
セミナーを開く。

※自社が作成したカスタマージャーニーマップ(一部)

カスタマージャーニーマップを作成する目的は大きくわけて「現状分析」と「計画」があります。

ペルソナによってカスタマージャーニーマップの内容も変わってくるのでペルソナにフォーカスして考えていくことが重要です。

 

ワイヤーフレーム

ワイヤーフレームとは「Webサイトの配置図」のことで「なにを、どこに、どのように」配置するのかを考えながら作っていことをいいます。ワイヤーフレーム_sarvis_2_20160518
※自社が作成したワイヤーフレーム

コンテンツの構造設計を整理しながらピックアップし、情報に優先順位をつけていきます。ヘッダーやフッター、コンテンツやサイドバーの配置を決めることで、より具体的なサイトのイメージが浮かびやすくなります。また、モバイルサイト向けにもサイトを構成しなければならないので、コンテンツの量や表示方法も考えていきます。

 

取り組んだ結果

はじめに上記の4つのことに取り組んできましたが、リニューアルをするにあたって基盤をしっかりと作っておかないとサイトのリニューアルがスムーズに進むか進まないかが決まるのでとても重要です。課題解決のためのサイトはなんなのかをユーザー目線で考えていき、リニューアル前の課題点を踏まえながら目的に応じたサイトを作っていきます。

 

おわりに

今回は「UXを取り入れたサイト設計」についてご紹介しました。

次回では、「ユーザーのわかりやすさを追求したコピーライティング」についてご紹介したいと思います☆

Resent Posts

Category