これを読めば完璧！Webサイトリニューアル 完全攻略ガイド

Jason Yuanは、Rhode Island社の若手デザイナーです。彼が実体験を語った 「Apple Musicにお祈りされたデザイナーが、Apple Musicのデザインを再設計してみた」は、 TheNextWebや FastCoDesignなどで取り上げられました。 Jasonは、「デザインで有名な有力企業でさえ訳の分からない選択をしてしまうことってあるし、そしてそれはこんなに簡単に直せちゃうんだよ」ということを実例を持って示してくれたのです。

もちろん、Appleはこのデザインの失敗で深刻な痛手を負ったわけではありません。一般のユーザーは、デザインに改善の余地があることさえ気づかない場合がほとんどです。

世界は完璧じゃありませんし、ちょっと使いにくい程度のインターフェースにユーザーは慣れています。例えば、ややこしい航空券予約プロセスでも我々はなんとか使えている訳ですし、適当な中小企業のWebサイトが結局何をいいたいのか分からないことなんてしょっちゅうです。たいていの場合、それはそれで良いのです。大丈夫、大きな問題ではありません。「戻る」ボタンを押して、見やすいページを探せばいい。運が良ければ、類似のより良いサービスの選択肢はたくさんあるでしょうし。だから、ダサくて使いにくいインターフェースのサービスにこだわる必要がないのです。だから問題にもならない。

しかし、もしあなたがそのユーザーに踵を返されるビジネス側ならば、全然大丈夫じゃありません。大問題です。さて、あなたのサイトはどうでしょう？

サイトリニューアルが必要な3パターン

例えば以下の3つのどれか1つでも当てはまったら、あなたのWebサイトはリニューアルが必要かもしれません。

1. 望んだコンバージョンが得られていない
   トラフィックはあるけれど、現状では充分ではない場合。おそらく、本来呼び込みたいページじゃないところにユーザーが行っちゃってるんだと思います。リード（見込み客）は生まれているけれど、思ったようにコンバージョンが伸びない場合、何かを変える必要があるでしょう。
2. 問題解決のためのゴールが変わった
   マーケティング戦略を変えたとき、Webサイトはその変化を反映する必要があります。例えば非営利のプロジェクトのためのブログだったけど、そのサイトで電子書籍や講座を販売しようとする場合、その変化を反映したアップデートが必要でしょう。
3. コンテンツに焦点を当てたい
   コンテンツ中心のデザインは、最近気になっている人も多いでしょう。これについては、詳しくは2018年のUX デザイントレンドで語っています。サイトを見にくる人は、目的の情報を見つけるためにそれを見ているのです。あなたのサイトは、ユーザーが求める記事を簡単に見つけられますか？検索エンジンに最適化されていますか？読みやすいデザインになっていますか？コンテンツをちゃんと届けようと思うと、たくさんのデザイン上の課題が挙げられます。

さて、あなたの現状が見えてきましたか？

そもそもサイトリニューアルとは？

次に、「サイトリニューアル」とはなんなのか、定義していきましょう。

サイトリニューアルとは、以下のようなことを指します。

• 質的・量的データに基づいて、ユーザーの導線を刷新する
• 新しいコンテンツを創り、デザインを組み立てる
• 顧客の体験や利便性を向上させる変化を取り入れる

逆に、以下のようなことはサイトリニューアルではありません。

• ブランディングの見直し
• UXやコンテンツをアップグレードせず、見た目だけを良い感じにする
• 利便性を考えず、要素の配置を変える

さて、サイトリニューアルは何を指し、どういう人にそれが必要なのかまで述べてきました。いよいよサイトリニューアルの計画を立ててみましょう。

フェーズ1：現在のwebサイトを分析し、新しいゴールを定めよう

Webサイトのリニューアルを検討しているなら、改善すべき目に見える問題はすでに分かっているかもしれません。しかし、Webサイトがうまく機能していない理由というのは、ひとつだけではなく複数ある可能性もあります。ここでは、Webサイトでチェックすべき4つのポイントをご紹介しましょう。

ⅰ. コンバージョン

最初にユーザーがホームページを訪れたとき、何をみるでしょうか？あなたのビジネスがどのようなものであるか分かりやすいですか？必要な情報はサイトの中で簡単に見つかりますか？もしこれらの質問に答えられないとすれば、ユーザーのペルソナを設定できておらず、どんなユーザーがターゲットなのかも不明確なのでしょう。 全てのターゲットアクションは、コンバージョン基準で明確に設定された目標結果に常に紐づけられている必要があります。

コンバージョン向上に役立つ目標設定の例

• Webサイト全体でのコンバージョンを一年で20％上げる
• 行動喚起 (CTAs)を再設定する
• 毎月50個の被リンクを増やす
• ニュースレター登録数を1000増やす

コンバージョンまでのボトルネックをつきとめる！

• もしこのWebサイトがなかったらどうなっているだろう？ 現状、このサイトは何の役目を果たしているんだろう？
• 競合相手と差をつけているのは何？ このビジネスは、どういうユーザーニーズを満たしているのだろう？
• サービスの特徴を詳細にアピールできるタグラインはある？
• 顧客はどんな人？ 個人、それとも法人？ 彼らの背景はどんなで、どうやってあなたを見つけているの？
• サイトへの「被リンク先（リファラル）」はある？ どうやってユーザーをサイトに誘導する？
• どの「行動喚起（CTA）」を取り入れて、どの順番でユーザーに見てほしい？

▲Yelpはコンバージョン戦略を変更し、場所ベースから体験ベースの配置にデザインを変更しました

ⅱ. ユーザビリティ

サイトの中心となるメッセージを、ユーザー・顧客に正しく伝えられていますか？ ユーザーにとってそのメッセージは分かりやすく、またそのメッセージが伝わるまでの導線はしっかり設計されていますか？ Webサイトの読み込みスピード、便利なメニュー、セキュリティ、動作性の高さ……非常に多くの要素がユーザビリティに関わっています。

ユーザビリティ向上に役立つ設定目標の例

• Webサイト滞在時間を平均2分間まで上げる
• Webサイトの読み込み速度を最適化する
• アクセシビリティ適応度を90％まで上げる
• 3つの異なるスクリーンサイズ向けに、レスポンシブデザインのサイトを作る

ユーザビリティに関するボトルネックをつきとめる！

• 分かりやすいサイト階層になっていますか？
• 違うブラウザでもちゃんと表示されますか？（Browsershotsを使って、違うバージョンのブラウザでどう表示されるかチェックしましょう）
• ナビゲーション／誘導経路は分かりやすいですか？パンくずリストを使って、サイトの中のどこにいるか分かりやすく表示されていますか？
• ページは素早く読み込まれますか？画像類は読み込み速度に影響しないよう、最適化されていますか？
• 全てのユーザーにとってWebサイトは使いやすいですか？ 文章と背景のコントラスト比はビジュアルを損なっていませんか？ 音声・動画にキャプションを付けていますか？ Web Accessibility のようなツールを使ってますか？（アクセシビリティの高いデザインについてはこちらで概括的に解説しています）

ⅲ. コンテンツ

もし、ページを訪問たユーザーが、サイトから期待した情報を得られていないとしたら、コンテンツ戦略を練り直すべきです。コンテンツは正確で、読みやすく、ユーザーのニーズに高い関連性を持っている必要があります。タイピングや文法的ミスという次元を超えて、本質的な部分でこうした問いに答えを出してみてください。

コンテンツの質を改善する目標設定の例

• 月に最低4つは記事を投稿する
• 経験豊富なライターを雇う
• ユーザーのニーズに適したプラットフォームを用意する

コンテンツに関するボトルネックをつきとめる！

• コンテンツは有益な情報になっていますか？ 情報はちゃんと更新されてますか？
• 多くのユーザーが理解できる語彙で書いてありますか？ 分かりにくいのはもちろんNGです。また、仮にターゲットとするユーザーが専門性の高い写真家であれば、彼らにISOとかアパーチャーについていちいち説明する必要はないでしょう。
• コンテンツの言葉遣いは問題ありませんか？ 言葉遣いや雰囲気は、Webサイト全体で一貫性がありますか？
• コンテンツは読みやすいですか？ 段落分け、箇条書き、見出し、空白を効果的に使えていますか？

▲CNNはニュース一覧が並ぶページで、新しいニュースほど大きい画像で表示し、くわえて文字が詰め込まれないようにデザインを変更しました

ⅳ. SEO（検索エンジン最適化）

SEO（検索エンジン最適化）対策の有無は、検索エンジンからあなたのサイトへたどり着くユーザー数を大きく左右します。たとえば、コンテンツがグラフィックばかりで埋め尽くされており、代替テキストや効果的なHTMLタグ、関連キーワードが挿入されていなければ、あなたのコンテンツは検索上位に表示されにくいでしょう。自ページのSEOをWebsite GraderやSEOptimerなどのオンラインツールを使って評価し、最適化の中の明らかな誤りは早めに見つけましょう。

SEO改善のために役立つ目標設定の例

• 50のバックリンクを一か月に生む
• HTTPSにサイトを変換する
• サイトのモバイルバージョンを作る
• チームにSEOのスペシャリストを呼ぶ

SEOのボトルネックをつきとめよう

• あなたのビジネスの業種で、最も人気で重要なキーワードを知っていますか？ そのキーワードをページに正しく盛り込んでいますか？
• タイトル・メタディスクリプションは表示可能文字数に収まっていますか？ 例えばタイトルは、Google検索にて32字までしか表示されません（2018年9月現在）。
• サイトは常時SSL化（HTTPS）されていますか？ Googleは、セキュリティの高いサイトを検索上位に表示します。
• Googleのクローラー（サイト巡回ロボット）に見つけてもらいやすいURLになっていますか？ RankSiderなどのツールを用いてチェックしてみてください！

評価フェーズの最後では、サイトリニューアルの詳細を述べたプロジェクト文書をまとめる必要があります。この文書の役割は、開発者、デザイナー、戦略担当者たちを、アイデアからリニューアル完成まで導くことです。この文書では、評価のフェーズで設定した全ての目標や期待する結果をきちんと説明し、会社の状態、ターゲットの性質、プロジェクトの予算や時間的制限を明記しましょう。

フェーズ2：”コンテンツファースト”の情報構造にリニューアルしよう

コンテンツファーストアプローチは、今日のWeb業界で最も人気なデザイン思想の一つです。これが意味するところはつまり、デザインはWebサイトの「主役」である情報やメッセージにとっての、ただのフレームワークにとどまるべきだということです。すごくオシャレでスタイリッシュなWebサイトでも、ユーザーに正しくコンテンツを届けられないのでは意味がありません。

またコンテンツファーストのアプローチは、ミッションやゴールに常に誠実に向き合っていられるため、サイトデザインへの迷いが少なく済みます。そして、正しいサイト階層と一貫性を確実に実現できます。

コンテンツファーストの思想のもとでWebサイトの情報構造をどうリニューアルしていくか、例を見ていきましょう。

情報構造（Information Architecture ＝IA）の構築は、あなたのWebサイトをユーザーにとって分かりやすく魅力的な方法でまとめることを示唆しています。IAの構築は、データに基づいて進行されます。ここにきてフェーズ1のリサーチ結果が大いに役立つのです。Heatmaps、 Googleアナリティクス、トラッキング ……そうした調査・分析ツールの全てがIAの構築をスムーズにし、IAは顧客情報とビジネス的要請（つまり利益）のバランスを取ってくれるのです。

ⅰ. ユーザーの流れとカスタマージャーニー

カスタマー・ジャーニーは、ユーザーがそのサイトを訪れるときに関わる全てのタッチポイント（何に興味を持ち、何のキーワードで検索して、何のページに訪れて、何のリンクをクリックして……）を描写したものです。カスタマージャーニーを作ろうという場合、ペルソナとユースケースが必要となります。

もしユーザーが、あなたの会社の製品についてもっと知りたくてWebサイトに来ているとしたら、最初に何をクリックするでしょうか？ あるタスク（「製品Aの中で自分の欲しいタイプを選んで買う」）をひとつ達成しようと思うと、たいがい小さいタスク（「製品Aの価格を会社ごとに比較」「製品Aの機能を知る」「製品Aのタイプごとの違いを知る」など）をいくつも完遂しなければなりませんよね。そして、そのタスク間の繋がり／関係性がまさにユーザーの経路であり、「カスタマージャーニー」を生むものなのです。

▲Spotifyのユーザーフロー（転載元）

フェーズ2は、コンテンツがどのように新しいゴールに役立つかをテストする役割を果たします。カスタマージャーニーにて得た知見を、現在のコンテンツを見直すのに活用しましょう。新サイトではどれに編集が必要で、どれが完全な書き直しが必要で、どれを削除すべきでしょうか？ 最後までコンテンツに目を通せないような不具合、内容の不一致がありませんか？ 競合相手のユーザーフローを検証して、顧客をどのようにゴールまで誘導しているか学ぶと良いでしょう。また検索画面をうろうろしている人たちには、魅力的なコピーとサイトへの行動喚起を意識して、彼らをうまく誘い込む方法を見つけましょう。

ⅱ. サイトマップ

サイトマップには、新しいサイトの案内図とページリスト、そしてページ同士の関係性を載せましょう。サイトマップは、サイトを体系化してくれるだけでなく、Webページを巡回するクローラーが各々ページを見つけやすくしてくれます。魅力的なサイトマップを作ることは、WebサイトのUXを考える上でもっとも重要なことのひとつです。

▲旅行マネジメントサイトのサイトマップ（転載元）

サイトマップの要素は、基本的にはカスタマージャーニーを作る際に決定するコンテンツのカテゴリーに準拠します。サイトマップの要素は階層状に構成される必要があるため、カテゴリを正しいアイテムに繋いでいくことで、それらの関係性について必要な情報を提供する図ができます。

フェーズ3: 修正を加えたワイヤーフレームを作成＆テストしよう

サイトマップが完成したら、ワイヤーフレームの作成に入りましょう。ワイヤーフレームとは、コンテンツが各ページでどう体系化されるかについての簡単な設計図です。ユーザビリティを具現化するステップといえます。

▲Booking.comの新デザイン用ワイヤーフレーム（転載元）

ワイヤーフレームはコンテンツ中心のツールです。そのため、ダミーの Lorem ipsum テキストはこの段階では使わず、旧Webサイトのテキスト（またはワイヤーフレーム用の準備テキスト）を使い、競合サイトのコンテンツと比較しましょう。準備テキストはざっくりとしたアウトライン、サイトに載る情報の箇条書きで問題ありません。

ワイヤーフレームは、情報構造を提示し、検証するためだけに存在しているため、色付けや組版、その他ビジュアル的な要素で独自性を出す必要はありません。これは「断捨離」的な思想で、簡単に後から変更できるように作成し、本当にUXにとって大切なものにフォーカスを当てたものにしてください。

製品をユーザーにテストしてもらおう

製品をうまく検証してくれるAIみたいなものが開発されるまでは、ユーザーに製品をテストしてもらう必要があるでしょう。デザイナーは幅広い手法を使って、ターゲットのリアクションを観察し、フィードバックを得て改善を続けます。例えば、KJ法のようなカードを使ったやり方や、調査、インタビュー、アイ・トラッキング（目線の追跡）、ゲリラテスト……等さまざまな方法があります。（ユーザーから客観的にフィードバックを得る方法論についてはこちら）

実際にユーザーに会って知見を書き起こすことも可能ですし、オンラインで潜在ユーザーから意見を聞くこともできます。どちらの場合でも、先述のワイヤーフレームが資料として使えるのです。

ユーザーはあなたの説明・解説とワイヤーフレーム上での位置確認だけを頼りに操作をします。そのため、最も現実的で操作可能性の高いシナリオを作ったほうが良いでしょう。そうすることで、デザインプロセス全体で行う似たようなテストの数を減らすことができ、またブランドのアピールポイントがユーザーに響いているかどうかを確実にチェックできます。

フェーズ4: UIを導入し、新デザインのサイトをリリースしよう

この第4フェーズでは、ワイヤーフレームは完璧に構築されたUIに姿を変えます。UIは情報構造とビジュアルデザインを結び付けます。サイトマップとワイヤーフレームの作成は、UIを導入するための準備です。そう、ビジュアルの部分は最後に来るのです。

UIのリデザインは、リブランディングとよく混同されます。UIを更新することは、新しいブランドアイデンティティを創出するときにも必要かもしれませんが、二つの用語は同じではありません。リブランディングは、ブランド社会での認識を変えようとするマーケティングのツールです。その変更には、ロゴ、名前、画像、また音声面からのリデザインさえも含まれるでしょう。リブランディングは会社を過去のアイデンティティから解き放つことが目的なので、これは非常に大ごとで急進的な行為なのです。一方でUIのリデザインは、その時々のWebデザインの流行を反映することが多く、頻繁に行われるべきなのです。

では、ビジュアルデザインにはどういうアプローチで取り組めばよいのでしょう？ ここでは3つのポイントを取り上げます。

ⅰ. トレンドの前に、ブランドを

近代的なwebサイトを持つ多くの会社は、彼らのブランドイメージと上手く合わないのであれば、グラデーションや大きなレタリングをUIに取り入れません。まずはそれを補助するような、基礎的なデザインアイディア（例えばマテリアルデザインや躍動感あふれる配色）を使ってみましょう。

もちろん、デザインがブランドのために活きるようにする必要があります。ブランドを無視してデザインだけが目立っても意味がありません。

▲流行を取り入れつつもユーザビリティを保っているビジュアルとレタリング。Lonely Planetが作った印象深いUX