サイトリニューアルにおける注意点 - 実例を添えて

サイトリニューアルにおける注意点 - 実例を添えて 先日デザインリニューアルをしましたが、これには下記のような目標がありました。
 ・コンテンツを見やすくする
 ・余計な情報の削除
 ・表示速度の向上
 ・気分

要はシンプルにして、コンテンツをより見ていただけるようにしたということです。
ついでなので、Webサイトのリニューアルはどうあるべきか、考えてみました。
参照元:An Exploration of Website Redesigns: Tips and Examples

【目次】
1)なぜリニューアルをするのか
2)目標設定をする
3)実例
4)参考サイトリスト
5)まとめ

(1)なぜリニューアルをするのか ウェブデザインを変更するためには費用と時間がかかります。
社長に言われたからや、担当が自分になったし好きなように変えたるぞ!などということは、無駄を持てあますだけで、問題外です。
また、何よりも既存ユーザーが慣れたものを変えるわけですから、より良くする責任があります。
担当者はこれを理解して課題を明確に抽出し、リニューアルが本当に必要かどうかを考える必要があります。

課題例

【事業的側面】
 ・PV、コンバージョンなどのKPIが悪い
 ・ブランドイメージに沿っていない
 ・展開する事業が、拡大あるいは縮小した

【技術的側面】
 ・アクセス解析をして、何が問題かを確信している
 ・サイトの表示スピードが遅い
 ・UI、IAなどが古いWeb技術で構築されている
  table、アニメーションgifを使用している。   ナビゲーションやカテゴリがわかりにくい

(2)目標設定をする ゴールを決めないと、プロジェクトは右往左往します。
課題を抽出した後には、リニューアル後のサイトをイメージをし、目標を設定しましょう。
またこの時大事なのが、「誰に」というターゲット設定となります。
これにより、担当者と制作会社の意識を統一するとともに、社内共有も可能になります。
上層部の鶴の一声や営業と現場の派閥争いに左右されないよう、明確な目標を持ち、ドキュメント化しておくことが大事になります。

ターゲット例

 ・新規ユーザー
 ・リピートユーザー
 ・学生
 ・一般消費者 etc

目標例

 ・資料請求の数を倍にする
 ・ブランドイメージを確立する
 ・注力事業を大々的に訴求する etc

3)実例 ここからは実例を見ていきます。

サイトリニューアルにおける注意点 - 実例を添えて まずは、地域情報を集約したサイトYP.com - Yellow Pages, the new YELLOWPAGES.COMです。
このサイトの目標は「ワンストップで、少ないクリック数でユーザーの役に立つことです」。
このため、検索のしやすさを重視しています。
新デザインでは、色味などブランドのテイストを維持しつつ、住んでいる地域の情報が大きく表示されるようになっています。
また重要度に応じて配置場所を変更したり、削除しています。
画像が全面に出ることで、印象的になる一方で、表示速度は少し落ちますが、設定した目標に対しては十分にクリアしている好例です。

サイトリニューアルにおける注意点 - 実例を添えて 次に、オンラインで請求書を送れるBlinksale | The easiest way to send invoices onlineを紹介します。
こちらの目標は「コンバージョンレートを上げる」ことでした。
つまり新規ユーザーがサイトのメリットを簡単に把握し、すぐに申し込みへと移れるかが重要になります。
このため、新しいデザインでは、左に何ができ、いくらなのかを配置し、目線の流れやすい右下に明るい色でボタンを用意しています。

サイトリニューアルにおける注意点 - 実例を添えて 最後に、Online Stock Trading, Online Investing, Online Broker | E*TRADE Securitiesの例を紹介します。
あまり大きく変わったとは言いがたいサイトですが、訴求コンテンツの配置を変更したり、左メニューの数を減らしたりすることで、従来情報量が多すぎたサイト構成を整理しています。
これにより、ユーザーが混乱しないようにし、より理解のしやすいサイトとなっています。
この会社は全体リニューアルよりも配置の再調整を目標にし、最適化を図ったのです。

4)参考サイトリスト サイトリニューアル時に参考になりそうなサイトです。
ちょっと古いのもありますが、ご参考に。
 ・An Exploration of Website Redesigns: Tips and Examples
 ・「Webサイトにデザインなんて関係ねー」と言う人に一言。Webデザインの重要性とは? | Webクリエイターボックス
 ・カヤックサイトリニューアル解説|面白法人カヤック
 ・ウェブサイトのリニューアルデザイン ビフォー・アフターいろいろ | DesignWalker
 ・【レポート】根拠のないサイトリニューアルはNG、第4回エンゲージメントセミナー | Web担当者Forum

5)まとめ 最後の例のように、全部のデザインを変えることだけがリニューアルではなく、欠けていたものを補うこと、また、欠点を修正すること、強調したいものを再配置することだけでも大きな成果をあげることが可能です。
適切なコストと最大限の成果でリニューアルが完了するよう、すべては最初の現状把握・目標設定が大事となります。

なお、当サイトの目標だった「余計な情報の削除し、コンテンツを見やすくする。表示速度の向上
に対しては、フォントサイズを大きくし、text-shadowをつけたり、行間をとったりすることで、読みやすくしました。
また、CSS3を使った表現や画像を極力排除したことで、表示速度もやや改善されているのではないかと思います。

(たぶん良くなったはず・・・)

sponsors

「サイトリニューアルにおける注意点 - 実例を添えて」をシェアする

記事作成:
記事URL:

TOP > > > サイトリニューアルにおける注意点 - 実例を添えて