ホームページリニューアルの進め方を8ステップで紹介
ホームページリニューアルを成功させるには、正しい進め方で望む必要があります。
ですが、ホームページリニューアルを進める上で、
『どんな進め方・手順でホームページリニューアルをしていいか分からない』
『ホームページリニューアルの具体的な工程について知りたい』
『ホームページリニューアルの全体の流れが知りたい』
などの疑問が生じると思います。
今回は、これからホームページリニューアルを検討中のホームページ担当者様へ向けて、ホームページリニューアルの進め方・手順の情報を提供しています。
【ホームページリニューアルの進め方１】課題の洗い出し
ホームページリニューアルの進め方１つ目は、課題の洗い出しです。
この工程では「約2週間」の期間が必要です。
課題の洗い出しは「ユーザー」「アクセス」「品質」「SEO」の４つの視点から洗い出していく必要があります。
具体的には、下記手順で課題の洗い出しをおこないます。
【ユーザー視点】ヒアリング
まずは、自社ホームページの使いやすさについて、ヒアリングを実施しましょう。
ヒアリングをおこなう内容は下記の通りです。
- ホームページのデザインは自社のイメージに合っているか
- 操作性に問題はないか
- 欲しい情報は掲載されているか
- 追加した方がいい機能はあるか（検索機能など）
ユーザーの声をもとに課題を見つけましょう。
ユーザーに対してヒアリングを実施するのが難しい場合は、社内でヒアリングを実施しましょう。
【アクセス視点】Googleアナリティクス
出典：Analytics
つづいて「Googleアナリティクス」を活用し、アクセス視点で課題を洗い出します。
「Googleアナリティクス」はGoogleが提供する分析ツールで、下記内容の分析が可能です。
- ホームページの利用状況
- ユーザーの基本属性
- 流入経路
- ホームページ内でのユーザーの動き
- ホームページでの成果
「Googleアナリティクス」で分析をおこなうには、まずホームページのアクセス数が上昇・停滞・下降しているか判断してください。
「停滞・下降」している場合は改善が必要です。
また、ユーザーの「ページ離脱率」についても分析をおこなう必要があります。
ホームページ内に離脱率が高いページがある場合も改善が必要となります。
【品質視点】Page Speed Insights
つづいて「Page Speed Insights」を活用し、ホームページ品質視点の課題を見つけます。
「Page Speed Insights」は、Googleが提供するホームページの表示速度を測定するためのツールです。
「Page Speed Insights」の機能は下記の通りです。
- ホームページの表示速度調査（PC/スマホに対応）
- 修正点を提案
- 最適化された素材の一括ダウンロードできる
スコアは下記のような形で評価されます。
▼スマホの場合は横にスクロールしてご覧ください
| スコア | 評価 |
|---|---|
| 90～100 | 速い |
| 50～89 | 平均 |
| 0～49 | 遅い |
「Page Speed Insights」ではURLを入力するだけで、ホームページの具体的な修正点を提案してくれるので、ホームページ品質における改善点を容易に見つけることが可能です。
【SEO視点】Googleサーチコンソール
つづいて「Googleサーチコンソール」を活用し、SEO視点の課題を見つけます。
「Googleサーチコンソール」は、自社ホームページ検索順位を改善するための分析ができるツールです。
「Googleサーチコンソール」の機能は下記の通りです。
- 検索順位の確認
- エラー表示ページのチェック
- 検索パフォーマンス
- 被リンク状況を確認
「Google サーチコンソール」は、ホームページ内容をGoogle検索エンジンロボットがどう見ているかを開示しています。
「エラー表示ページチェック」を実施し、Googleにホームページの内容が伝わっているか確認しましょう。
その後、検索順位の変動や被リンクのチェックをおこないます。
検索順位には、外部から評価（被リンク）の獲得が大きなポイントとなります。
被リンクが獲得できていない場合、コンテンツの内容に問題がある可能性があり、コンテンツの見直しが必要です。
【ホームページリニューアルの進め方２】目的の設定
ホームページリニューアルの進め方２つ目は、目的の設定です。
洗い出した課題を元に目的を決めましょう。
この工程では「約2週間」の期間が必要です。
目的の設定方法（SMARTを利用）
ホームページリニューアルの目的設定には「SMART」のフレームワークを利用し、進めることで質の高い目的設定が可能となります。
「SMART」では下記5つの要素を利用します。
【要素1】具体的（Specific）
ホームページリニューアルの目的は、具体的でないといけません。
誰が見ても分かるように目的設定する必要があります。
例えば「月間お問合せ獲得数１０件獲得」という目的設定であれば、これを達成させるための中間目的を設定します。
- アクセス数を１.５倍まで伸ばす
- ユーザーのページ離脱率を２０%減少させる
- 問合せフォームの離脱率を１５%減少させる
中間目的を設定することで、目標達成のための行動も具体的になりスムーズに施策をおこなうことが可能です。
【要素2】測定可能（Measurable）
ホームページリニューアルの目的は、測定可能である必要があります。
ホームページであれば「アクセス数」「売上数」「問い合わせ数」が指標となります。
例えば『自社認知度をあげたい』という目的にしてしまうと、測定ができずに答え合わせができません。
『月間で問い合わせを5件獲得する』など、測定可能な目的に設定するようにしましょう。
【要素4】達成可能（Achievable）
ホームページリニューアルの目的は、達成可能である必要があります。
非現実的な目的設定を行うとモチベーションの減少にも繋がってしまいます。
現在のホームページ状況から逆算して、達成可能な数字設定するようにしましょう。
【要素4】関連性（Relevant）
ホームページリニューアルでは、設定した目的が自社の最終目的と関連している必要があります。
多くの企業のゴールは「利益の獲得」が最終的なゴールといえるでしょう。
ホームページリニューアルで設定した目的が「利益の獲得」と関連性のあるものになっているか確認してみましょう。
【要素5】期限（Time-bound）
ホームページリニューアルの目的では、期限を設定する必要があります。
期限を設定しないと、モチベーションが上がらずホームページリニューアルをスムーズに進めることが困難となります。
『年度末までにホームページでの売上を100万円アップさせる』と期間設定し、最終的な期限までの目的を達成できるよう逆算し、行動に落とし込んでいきましょう。
【ホームページリニューアルの進め方３】競合他社分析
ホームページリニューアルの進め方3つ目は、競合他社分析です。
ある程度リニューアルの目的が定まったら競合他社分析をおこない、リニューアルの方向性が間違っていないか確認します。
この工程では「１〜２週間程度」の期間が必要です。
具体的には下記手順で、競合他社分析を実施します。
【分析1】競合他社の戦略を予想する
まずは、競合他社ホームページを閲覧し戦略を予想します。
- ページ数
- コンテンツの量
- デザイン
- 狙っているキーワード
などを重点に４～５社チェックしましょう。
競合他社ホームページの「良い点」「悪い点」書き出し自社のホームページと比較しましょう。
「良い点」は自社のリニューアルにも採用し「悪い点」に関してはまねしないようにすることで、自社の強みを差別化し企画を立てることが、正しいホームページリニューアルの進め方です。
【分析2】競合他社のニーズを確認
ホームページリニューアルを進める上では、競合他社のニーズとターゲットについて確認します。
分析ツールを使い競合他社の「アクセス数」「ユーザー属性」「流入経路」を確認します。
ツールで競合他社のニーズとターゲットを確認する目的は、自社でも比較的に勝てそうな領域を探すことです。
大手競合他社と「コンテンツ量」「情報量」で戦っても勝ち目がないためです。
まだ競合他社が提供していない「ニーズとターゲットの発見」し、それを反映していくことがホームページリニューアルの正しい進め方です。
競合他社分析にあると便利なツール
上記で紹介した競合他社分析を実施する上で便利なツールを２つ紹介します。
【競合他社分析ツール1】SimilarWeb
出典：SimilarWeb
「SimilarWeb」は、イスラエルの発の分析ツールです。
ホームページのURLを入力するだけで自社・他社問わず分析をおこなえるツールです。
「SimilarWeb」の機能は下記の通りです。
- トラフィック（アクセス数・平均利用時間・直帰率・ページビュー数など）
- ユーザー属性（性別・年齢）
- 競合他社の広告出稿状況
「SimilarWeb」では、無料トライアルも用意されているので、競合分析の際に利用してみましょう。
【競合他社分析ツール2】eMark+
出典：eMark+
「eMark+」は、株式会社ヴァリューズが提供するインターネット上の「ユーザー行動分析ツール」です。
「SimilarWeb」よりも上級者向けのツールですが、競合他社のユーザー行動を詳細に分析することが可能です。
「eMark+」の機能は下記の通りです。
- アクセス数・離脱率・滞在時間
- セッション数
- ページビュー数
- ユーザー属性（性別・年齢・住まい・職業・年収）
- 流入キーワードと流入分析
「eMark+」にも無料体験版が用意されているので、詳細なユーザー属性分析をしたい方は利用してみましょう。
【ホームページリニューアルの進め方４】ホームページ設計
ホームページリニューアルの進め方４つ目は、ホームページ設計です。
ホームページリニューアルの方向性が決まったら、実際に設計に入りましょう。
ホームページ規模にもより異なりますが、この段階では「約１か月」の期間が必要です。
具体的な手順は下記の通りです。
サイトマップ整理
まず、ホームページ設計ではサイトマップ整理をします。
既存ホームページをチェックし、現在のホームページ内コンテンツを書き出してみましょう。
その中から、
- 継続するコンテンツ
- 修正するコンテンツ
- 追加するコンテンツ
- 排除するコンテンツ
以上４点を決めてください。
選定方法は「課題の洗い出し」「競合他社分析」の情報を元に決定します。
例えば、自社ホームページのCVが「問い合わせ獲得」でありながら「お問合せフォーム離脱率」が高い場合は「問い合わせフォーム」を修正する必要があります。
このように１つずつのコンテンツの見直しをおこない、サイトマップの整理を実施するのがホームページリニューアルの正しい進め方です。
ホームページのレイアウトを決める
サイトマップの整理が終わったら、ホームページのレイアウトを決めましょう。
ホームページのレイアウトにはいくつか種類があり、それぞれにメリット・デメリットがあります。
自社のコンセプトとレイアウトが一致していない場合は、ホームページリニューアルをきっかけに、レイアウト変更も視野に入れましょう。
ホームページレイアウトの種類は下記の通りです。
シングルカラムレイアウト
シングルカラムレイアウトは、縦一列で設計されたホームページレイアウトです。
ユーザーが訪問した際に、メインコンテンツに目が止まりやすいのが特徴です。
シングルカラムに向いているホームページは「LP」「キャンペーンサイト」です。
逆に情報量が多いコーポレートサイトには向いていません。
▼スマホの場合は横にスクロールしてご覧ください
| メリット | メインコンテンツに集中してもらえる スマホから見てもレイアウトが崩れにくい |
|---|---|
| デメリット | 情報量が多いホームページには不向き 他のコンテンツへのリンクが難しい |
マルチカラムレイアウト
マルチカラムレイアウトは、全体の内容が分かりやすく、メインコンテンツとサイドバーが並列しているレイアウトです。
マルチカラムレイアウトは、最も多く採用されているレイアウトです。
カテゴリー層が分かりやすいので「ECサイト」「ポータルサイト」に向いています。
▼スマホの場合は横にスクロールしてご覧ください
| メリット | 多くの情報を掲載できる 離脱率の軽減ができる |
|---|---|
| デメリット | メインコンテンツが見られにくい スマホデザインが困難 |
フルスクリーン型
フルスクリーンレイアウトは、ホームページの画面全体に画像や動画を表示するレイアウトです。
コンテンツを強調できるレイアウトのため「コーポレートサイト」「旅行系・飲食・ファッションサイト」などに向いています。
▼スマホの場合は横にスクロールしてご覧ください
| メリット | ユーザーにインパクトを与えられる レスポンシブ機能しやすい |
|---|---|
| デメリット | 制作の難易度が高い ナビゲーションの中身が見にくい |
グリッド型
グリッド型は、コンテンツをグリッド(格子)のように並べた統一感のあるレイアウトです。
狭いスペースに多くの情報掲載が可能なため「トピック・ニュースサイト」「更新頻度が高いホームページ」に向いています。
▼スマホの場合は横にスクロールしてご覧ください
| メリット | レスポンシブデザインと相性がいい 情報を整理して伝えられる |
|---|---|
| デメリット | ユーザーが導線に迷う可能性がある コンテンツの差が作りづらい |
【ホームページリニューアルの進め方５】ワイヤーフレーム・デザイン制作
ホームページリニューアルの進め方５つ目は、ワイヤーフレーム・デザイン制作です。
ワイヤーフレームは、各ページの設計図です。
ナビゲーション、メインコンテンツの位置など決めていき、ワイヤーフレームを元にデザイン制作を実施します。
規模により異なりますが「１～２か月」の期間が必要です。
具体的な手順は下記の通りです。
ワイヤーフレーム制作のポイント
ワイヤーフレーム制作のポイントは、UIデザインの追求です。
UIデザインとは、ユーザーがホームページをスムーズに使えるようにすることで、UIデザインが優れていると目的が達成しやすくなります。
UIデザインで意識することはたった１つで「ユーザーに考えさせないこと」です。
例えば「料金プラン」のボタン例を紹介します。
下記のような３つのリンクボタンがあるとします。
左側のリンクボタンだとユーザーが『これは何の料金プラン？』と考えさせてしまう可能性があります。
そのため右側のボタンのように誰が見ても「HP制作の料金プラン」と理解できるようにデザインをしてあげる必要があるということです。
UIデザインに関しては、デザイナーと打ち合わせをおこない慎重に進めていきましょう。
デザイン制作のポイント
ホームページデザイン制作のポイントは配色を３色程度に留めることです。
デザイン制作では「文字色」「ボタン」「背景色」などの色を調整していきますが、配色を３色程度に留めるようにしましょう。
配色を割合は、ベースカラー（70%）メインカラー（25％）アクセントカラー（5％）の比率配色が黄金比と言われており、この割合で配色されたホームページは、美しい見た目になります。
配色例としてアサヒビールのホームページを見てみましょう。
出典：アサヒビール
アサヒビールのホームページでは、ロゴと同じ「青色」をアクセントカラーとし、メインカラーを同系色にすることによって、全体的にまとまりのあるホームページになっています。
ホームページリニューアルを進める際は、各企業のデザインの配色を参考にするようにしましょう。
【ホームページリニューアルの進め方６】コンテンツ制作・開発
ホームページリニューアルの進め方６つ目は、コンテンツの制作・開発です。
ホームページの規模により異なりますが「１～２か月」の期間が必要です。
デザインイメージが完成した段階で、いよいよコーディングへ移ります。
ホームページリニューアルコーディングの正しい進め方としては、既存のホームページのコードを修正するのではなく、テスト環境を作りコーティングを実施するのが一般的です。
イメージとしては、既存のホームページをコピーして、別のURLでコーティングを実施する形となります。
テスト環境構築で注意したいのが「Googleからの重複ペナルティ」です。
同じデータがネット上に２つあるとGoogleからペナルティを受けてしまいます。
ペナルティを受けると検索エンジンから除外される可能性もあるため、テスト環境全体にGoogle検索エンジンのロボットを巡回させないための「noindex」対応が必要です。
【ホームページリニューアルの進め方7】効果測定
ホームページリニューアルの進め方7つ目は、効果測定です。
この工程は、ホームページリニューアル後「約１か月経過後」に実施してください。
効果測定では、下記内容をチェックします。
- ホームページアクセス数は増加しているか
- お問合せなどのCV率は上がっているか
- 各ページの離脱率
- 悪化した数値の把握
などをみていきましょう。
ホームページリニューアルの目的で設定した指標を重点的にチェックしましょう。
数値が下がっていても、ホームページリニューアルは失敗ではありません。
分析して改善をしていくのが、正しいホームページリニューアルの進め方です。
【ホームページリニューアルの進め方8】改善作業
ホームページリニューアルの進め方8つ目は、改善作業です。
ホームページリニューアル後の「ファーストビュー」「コンテンツの配置場所」「導線」などの小規模な変更は、当たり前のようにおこなわれます。
ホームページリニューアル後の改善作業では「ABテスト」といわれる比較検証が重要となります。
「ABテスト」とは「Aパターン」「Bパターン」と２つパターンを用意し、それぞれの効果を検証して比較をおこなうテストです。
「ABテスト」を繰り返しおこなうことで、ホームページリニューアルの改善作業を効率化できます。
まとめ
ホームページリニューアルの進め方について紹介しました。
今回のポイントは下記の通りです。
- ホームページリニューアルでは４つの視点から課題を見つけて目的を設定する
- 競合分析で自社でも勝てる領域を見つける、正面から勝負してはいけない
- ホームページ設計では、コンテンツ整理と自社に合ったレイアウトを選定する
- ホームページの配色を３色程度に留める
- リニューアル後に「分析」「改善」を繰り返しおこなう
当サイト「ビズサイ」ではホームページ制作サービス（サブスクリプション）を提供しています。
ビズサイでは、ホームページの目的に合わせて３種類のプランを用意しており、お申込みから公開まで最短５営業日でホームページ制作ができます。
ホームページリニューアルのご相談も受け付けておりますので、お気軽にご相談ください。（詳しいサービスはこちら）
まずは無料でご相談ください。
お問い合わせ・ご相談や、公開後の修正依頼などに関しては、いずれかの方法にてお問い合わせください。
※年末年始・土日祝は定休日となります
※受付時間 9：00～17：30
