ピザが食べたいと思った時、選択肢には次の3つがあります。手軽な宅配ピザを注文するか、冷凍ピザをレンジに入れるか、あるいは生地から手作りするか。

手軽な解決策でもその場しのぎにはなりますが、自分で料理した方が満足感は高くなります。具材を吟味できるだけでなく、それぞれの分量や組み合わせまで、好みにぴったりのものを作ることができるからです。さらに、1から何かを作るという経験を得ることにもなります。

ウェブサイトのリデザインも同じです。30日間でウェブサイトを急ごしらえすることは可能ですが、時間をかけて完璧を目指した時と同じ結果は得られません。

ここで生まれる違いは、短期間で作られたウェブサイトのほとんどが外観と機能のみを重視しているという点です。見た目が美しくすべてのボタンが機能すれば成功だとみなされるのです。しかし、インバウンドマーケティングにこうした姿勢は相容れません。

インバウンドマーケティングの成否はウェブサイトの構成に大きく左右されます。サイトのリデザインにあたっては、見た目以外の要素にも力を入れる必要があります。目標達成やビジネス戦略との連携を重視するべきなのです。

これを実現するには、各ページに後付けでコンテンツを追加するだけのリデザインよりも長い時間がかかります。どの程度の期間を見ておくべきかが気になるところですが、戦略に基づいたウェブサイトリデザインを計画されている方のために、大まかなタイムラインをご紹介しましょう。

ご注意いただきたいこと:必要な期間は、ウェブサイトの規模や複雑さによっても変わります。ページ数や機能が多ければ、それだけ多くの作業が必要になりますし、プロジェクトの舞台裏を支えるチームの性質にも左右されます。

社内チーム、フリーランス、制作会社など、担当するスタッフによってプロセスが異なり、これによってスケジュールにも違いが出てきます。外部の開発者に委託する場合は、フリーランスとの直接契約でも制作会社に委託する場合でも、30~60日の検討期間を設けて適任者を選ぶようにしましょう。

1か月目

現在のウェブサイトの評価

ウェブサイトの刷新には正当な理由が必要です。まず自社のウェブサイトの現状を評価し、それを踏まえてリデザインが必要な最大の理由を明確にします。

現在のウェブサイトを厳しい目でじっくりと見直してみてください。問題点やうまくいっている点はどんなところでしょうか。ただ、この評価は個人的な好みを超えた客観的なものでなければならないということを忘れないでください。大切なのは数字です。サイト滞在時間、バウンス率、コンバージョン率といった主要指標を分析し、記録しましょう。このようなデータを見ることで、現在のウェブサイトで改善が必要な部分(リデザインの焦点となるべき部分)を明確に把握することができます。

目標の設定

現在のウェブサイトの弱点がわかったら、新しいウェブサイトで何を達成したいかを考え、目標を立てます。

多くの人々がこのステップを飛ばしてしまいがちですが(新しいウェブサイトを完成させること自体が目標になってしまうため)、必ず取り組むようにしてください。 キャンペーンに目標が不可欠であるように、ウェブサイトの立ち上げにも目標は不可欠です。目標設定を早い段階で行うことも重要です。そうすることで、目標に合わせて最適化されたウェブサイトを計画することができます。

前のステップで評価した数字に基づいて、SMARTゴール(具体的、測定可能、達成可能、適切、期限の5要件を満たす目標)を設定しましょう。毎月の訪問者数や有望見込み客(リード)数、コンバージョン率など達成したい目標について考え、以降のステップで参考にできるよう記録しておきます。

マーケティングゴールを作成するための無料エクセルテンプレートはこちらからダウンロードできます。

バイヤーペルソナ

たとえ、明確なバイヤーペルソナを確立してすべてのマーケティング戦略をこれに沿って実施しているという模範的な会社であっても、ぜひこの機会にペルソナを見直し、必要に応じて更新してください。詳細なバイヤーペルソナのプロフィールがない場合は、リデザインプロジェクトを進める前に必ずこのステップを完了しておきましょう。

バイヤーペルソナがウェブサイトリデザインの鍵といわれる理由はいくつかあります。まず、バイヤーのプロフィールによってウェブサイトの構造が決まるという点です。ウェブサイトはユーザーをスムーズにファネルの中へ導くような作りになっていなければならず、その経路はバイヤーのタイプによって異なります。また、バイヤーペルソナはプレミアムコンテンツの提示にも関連するため、ウェブサイトの制作にとりかかる前に自社が想定するバイヤー像を明確にしておくことが、リードを増やす戦略の効果となって表れます。

2か月目

コンテンツの点検

冷蔵庫に残りものがある時に、ピザは注文しません。それと同じように、すでに読者の共感を得てコンバージョンに貢献しているウェブページやコンテンツを見直す必要はありません。

そのためにも、ここでは自社のあらゆるオンラインコンテンツをチェックしてください。古いウェブページやブログ記事、ポートフォリオ、ケーススタディーなど、顧客やマーケティングに用いるものならすべてです。残すもの、修正するもの、そして完全に切り捨てるものを見極めましょう。

残すものと修正するものについては、同じURLのままにするか新しいURLにするかを判断します。切り捨てると決めたものについては、そのページからのリダイレクト先も検討しましょう。ハブスポットではこのプロセスを組織的に計画するための便利なエクセルシートをご用意しています。このシートでは、点検のプロセスに必要不可欠なSEO(検索エンジン最適化)も同時に計画することができます。古いウェブサイトがSEOで築いてきた貴重な価値を失ってしまわないようにしましょう。

3か月目

情報アーキテクチャー

何を残して何を切り捨てるかが決まったら、空白を埋める新しいコンテンツの内容と、コンテンツ全体をどのように組織化するかを計画しましょう。

最初のステップはサイトマップの構築です。ナビゲーションバーの上に並べるカテゴリーを決め、各カテゴリーにどのコンテンツを配置するかを決めます。ドロップダウンメニューを使用する場合は、必ずしもコンテンツをタイプやトピック別に並べる必要はないということを、頭に入れておきましょう。ストーリーに沿ったページ構成や、想定されるバイヤーがサイト内を移動する経路となるような構成を意識してみてください。訪問者がどのようにサイト内を進んでいくのが理想的でしょうか。訪問者が自然にその経路をたどるような構成を考えましょう。

これを実現する簡単な方法が、サイトマップの延長となる目的マップです。 目的マップでは各ページに具体的なバイヤーペルソナとライフサイクルステージ、そして目標を設定します(長期的に見て、これが経費削減と時間の節約につながります)。この作業を通じてページを追加したり削除したりしながら、ウェブサイトにおけるバイヤージャーニーを完成させてください。

purpose-map-_sparkreaction

コンテンツ制作

各ウェブページの目標が定まって、コンテンツ制作の準備ができました。十分な時間を確保して、サイトに掲載するコンテンツを作り上げましょう。この作業は早い段階で完了させておくようにしてください。コンテンツに合わせてデザインを決める方が、デザインに合わせてコンテンツを書くよりも簡単です。

このステップの中心となるのは本文ですが、ディテールについても忘れないようにしましょう。CTA(Call-To-Action)のコピーやフォーム、メタディスクリプション、そのほかの小さなテキスト要素も用意しておきます。HubSpot COSを使ってリデザインをしている方は、スマートコンテンツやパーソナライゼーショントークンについてもここで考えておきましょう。

ワイヤーフレームの計画

ここからいよいよ、ウェブサイトを形にしていくデザイナーの出番です。用意した魅力的な写真やテキストを効果的に提示するため、最初にそれぞれの要素をページのどの位置に配置するかを決定します。これがワイヤーフレームです。

デザインプロセスをワイヤーフレームからはじめると、個々のデザイン要素をあちこちに動かす必要がなくなり、既定の場所にプレースホルダ―を一致させるだけで済むため、長期的にかなりの時間を節約することができます。

ワイヤーフレームを作る方法はいくつもあります。一番シンプルなのはホワイトボードに手描きする方法ですが、もっときれいに作りたい場合は、Photoshopなどの画像加工ソフトウェアや、 Axureのようなインタラクティブなワイヤーフレーム作成ソフトウェアが使えます。

sparkreaction-faq-wireframe-new

4か月目

デザインモックアップ

ワイヤーフレームが完成したら、デザインの細部に取りかかります。色をつけたり、さまざまなフォントを試したり、写真を置いたりしてみましょう。

このステップはPhotoshopなどのデザインソフトウェアで行うことができます。モックアップが完成すると、本物のウェブサイトがウェブ上でどのように見えるかをほぼ完璧にシミュレーションすることができます。そのためには、コンテンツも本物を使いましょう。

このプロセスには数週間を確保しましょう。デザイナーがすべての要素を組み込むだけでもかなりの時間がかかるというのが第一の理由ですが、それよりも重要なのは、かなりの確率で見直しと修正が必要になる可能性があるからです。完璧なデザインを実現する上で、このステップはきわめて重要です。

sparkreaction-faq-design-mock-new

5か月目

開発

すべてのコンテンツが理想通りに配置されました。目標を達成し、訪問者をバイヤージャーニーに沿って誘導するデザインが完成したという手ごたえもあります。難関はクリアです。(おめでとうございます!)これまでに作ってきたものをまとめて、コード開発者に渡しましょう。

問題がなければ、あとは完全に機能するウェブサイトが完成するのを待つだけです。ただし、プログラミングには長い時間がかかることもあるので注意してください。開発担当者によって完成に要する期間は異なりますが、このステップには最低1か月を確保するようにしましょう。

公開日の2週間前

コンテンツの配置を決める

ページが完成したら、まずはコンテンツの配置です。本文のコピーと貼り付け、CTAの組み立て、ファイルのアップロード、画像の挿入などを行います。この際、コピーの調整を行わなければならない可能性もあるということを覚えておいてください。コンテンツに基づいてデザインを制作した場合でも、いざ形にしてみると理想通りに仕上がらないこともあります。そんな時はメッセージがうまくおさまるよう、表現を変えてみてください。

この段階では、全体の校閲も入念に行いましょう。誤字脱字ほど、ウェブサイトの信頼性を損なうものはありません。どれだけ手間がかかっても、公開前に洗い出して修正しましょう。

URLと301リダイレクトを確定する

数か月前に作成した、古いウェブサイトページとそのURL、リダイレクト先のリストを思い出してください。このリストが役立つのはこの段階です。新しいウェブアドレスを入力し、以前のページには301リダイレクトを設定します。とてもシンプルですが、見落としてはならない重要なステップです。

SEO

皆さんはすでに、キーワードや検索エンジン最適化(SEO)のための戦略を実施されていることでしょう。新しいウェブサイトを公開する前に、SEOのベストプラクティスを取り入れることをおすすめします。ページソースにメタディスクリプションや内部リンクを追加し、URLやH1タグ、alt属性にキーワードが含まれていることを確認します。

トラブルシューティング

「公開」ボタンを押す前に、初日から最高のユーザー体験を提供できるよう最終チェックを行いましょう。さまざまなブラウザーやデバイスで複数のページをプレビュー表示して、おかしなところがないか、スムーズに機能するかを確認します。問題があれば調整します。リンクはすべてクリックして、エラーがないことを確かめてください。すべての機能が正常に働くことが確認できたら、公開の準備は完了です。

6か月目(公開日当日)

とうとうこの日がやってきました。新しいページをすべて公開しましょう。でも、安心するのはまだ先です。予想外の問題が起きてもすぐに対応できるよう、準備しておきましょう。

また、この日は必ず品質保証を行うようにしてください。どこかに見落とされていた問題が残っていないとも限らないからです。301リダイレクトが機能しており、サイトの各ページが正しく表示されることを確認しましょう。

公開後

リデザインのプロセスは、公開とともに終わるわけではありません。

ヒートマップの生成

ヒートマップは、訪問者がウェブサイトをどのように利用しているかを理解するうえで非常に役立ちます。ヒートマップソフトウェア(Hotjar、Crazy Egg、HeatMapperなど)をインストールして、訪問者がどこをクリックしているかを把握しましょう。これによって訪問者の行動パターンを推測し、それに合わせて修正を行うことができます。最終的に目指したいのは、訪問者が迷わずに目的のコンテンツに到達できるウェブサイトです。

sparkreaction-heatmap

A/Bテストの実行

デザインを決める際、CTAをコピーの横に配置するべきか、その下に配置するべきかといった問題で迷った方もいることでしょう。ヘッドラインがなかなか決まらなかったということもあるかもしれません。ウェブサイトを公開してしばらく時間がたったら、A/Bテストを実行して長期的に最適なオプションを判断することができます。

ユーザーテストを使った検証

ユーザーテストは、ウェブサイトの公開前に行うこともでき、その方が効果が高くなります。新しいウェブサイトを1日でも早く公開することを最優先としてテストができなかった場合は、公開日のあとに実施しても構いません。

ユーザーテストでは実際のユーザーと一緒にスクリーンに向かい、どのようにウェブサイトを使っているかを観察します。どこが人気で、どこがつまずいているでしょうか。ここで得られた洞察を活かしてウェブサイトを改善してください。

目標に対する実績値を確認する

6か月前に設定した目標を覚えておられるでしょうか。ウェブデザインに関わる決定は、すべてこの目標に向けて行われたものです。その成果を評価する時がやってきました。新しいウェブサイトのデータと古いウェブサイトのデータを比較して、どこで効果が上がり、どこで上がっていないかを明確にしましょう。

確認するアナリティクス(分析)データの種類は設定された目標によって異なりますが、一般的な指標には以下のようなものがあります。

  • サイト内滞在時間
  • バウンス率
  • クリックスルー率
  • コンバージョン率
  • トラフィックソース
  • トップランキングページ
  • 合計ページビュー

タイムラインは以上ですが、ウェブサイトに関わる作業はこれで終わりではありません。ウェブサイトに「完成」はないのです。コンバージョン率向上のための最適化や新しいコンテンツの追加、ビジネスの変化に伴う更新など、調整作業はこれからも続きます。これからウェブサイトを運営していくうえで、長期的な目標に近づくための修正は悪いものではないのだということを覚えておいてください。

New Call-to-action


 

元記事発行日: 2019年3月18日、最終更新日: 2019年3月18日