Webサイトのリニューアルを成功させる5つのプロセス

こんにちは！

ITエンジニア・webディレクター・webデザイナーなどのIT人材の自立・キャリアを支援するITプロパートナーズのCTOの柳澤（やなぎさわ）です。
弊社は、独立精神旺盛な優秀なエンジニアの方々の独立・起業サポートや、フリーランス支援を行っている会社です。

こちらの弊社運営サイト、「スタートアップ開発ラボ STaP（スタップ）」では、企業の新規事業開発担当者の方や、システム開発責任者の方、事業責任者の方達に向けて、事業開発のコツや、自社プロダクトやWebサービスを立ち上げる際にポイントや注意点について、弊社ノウハウを包み隠さずにお伝えしています。

さて、Webサイトをリニューアルしたい、リニューアルしないといけない。

そのような考えに至った時、どのように行動すれば良いのでしょうか？

どうすれば良いのか把握している方もいれば、方法がわからずモヤモヤしている、という方もいらっしゃるでしょう。

そこで、今回はWebサイトリニューアルに向けて必要なアクションを5つのプロセスに分けて、順番に見ていきたいと思います。

そもそもなぜリニューアルするのかを考える

CMの「結果にコミットする」という某スポーツジムのキャッチフレーズが流行ったことがありました。

実はこのキャッチフレーズはWebサイトのリニューアルも含めた、物事の進め方を考える上でとても良い示唆を含む、名キャッチフレーズです。

みなさん、結果にコミットするために必要なものは？と聞かれて、なんと答えるでしょうか。

多くの方が、「結果に向けて努力すること」と答えそうですが、それは答えとしては50点しか差し上げられません。

残り50点分の答えは、「コミットされた結果が明らかであること」です。

言い換えれば、ゴール地点が明らかでなければどれだけ走ってもゴールインしたかどうか分からないのと同じです。

Webサイトのリニューアルについても同様で、まずは、そもそもなぜWebサイトをリニューアルしたいのか、する必要があるのか、そして、目指すべきWebサイトの姿を明らかにしましょう。

使い勝手が良いサイトにしたい、見た目を良くしたい、コンテンツを増やしたい、機能を追加したい、といった風にこの時点では漠然としたアイデアでも構いません。

現状の課題や問題点をリスト化する

ある程度、求めるWebサイトの姿が見えてきたならば、次は課題・問題分析のステップへと進みます。

このステップは、求める姿と現状を比較し、そのギャップはなにが原因なのか、どうやれば埋めることができるのか、つまり改善点を考えていきます。

例えば、サイトの見た目が悪いので、見栄えの良いサイトにしたいとしましょう。

まずは、見た目の良いサイトをイメージしてみてください。センスの良い他社のWebサイトを参考にしても良いです。

その理想とする姿と、今のWebサイトを比較した結果、色の使い方が悪くて雰囲気に問題があるだとか、画像の配置が悪くてごちゃごちゃしていて印象が悪いだとか、きっと問題が見つかるはずです。

問題が見つかったら、それで終わりではありません。問題は洗い出された後、リスト化し整理していく必要があります。

一見すると異なる問題でも、同じ根を持つ問題というのがあるのです。

一例を挙げましょう。

ユーザビリティが良ければ見た目もおのずと美しくなる機能美という考え方がある通り、Webサイトの見た目の問題と、Webサイトの使い勝手、ユーザビリティの問題は、少なくからず相互に関係しています。

このタイプの改善点を考える際、見た目とユーザビリティ、二つの観点から考えなくてはなりません。

片方の観点からのみの改善点ですと、新たな問題点と化けてしまう可能性もあります。

ワイヤーフレームの作成

現在のWebサイトの改善点が明確になってきたら、いよいよリニューアル後のWebサイトの実像を作り上げています。

まずはWebサイトの見た目を決めます。そのための資料がワイヤーフレームです。企業や個人によっては、ワイヤーや画面構成図とも言います。

ワイヤーフレームは、Webブラウザーに表示すると、どういった風に表示されるのかを示した「Webサイトのデザイン素案」です。

右上に会社のロゴを入れるだとか、その下に帯状の他のページのリンク集を置くだとか、どういった見た目のサイトにするか、イラストにして大枠で明らかにします。

ワイヤーフレームは、ページのデザインの数だけ作成した方が良いでしょう。

例えば、どのページも似たデザインだけれど、トップページだけは異なる構成という場合は、多くのページで使う汎用ワイヤーフレームと、トップページ専用のトップページ用ワイヤーフレームを作るのです。

百聞は一見に如かずと言いますが、ワイヤーフレームとしてイラストにすることで、新たな気付きを得られ、曖昧さを減らすことができます。

もし、ワイヤーフレームを作成せずに、曖昧さを残したまま後続作業に入ってしまうと、実際のWebサイトが完成していく中でイメージとの差異があることに気が付き、手戻りの発生、ひいては時間的・経済的な損害が発生するかも知れません。

サイト設計とデザインを考える

ワイヤーフレームと同時並行で、相互に関係しながら進める必要があるのは、「どういったページを持ち」、「それらのページはどう遷移していくか」を考えるサイト設計です。

「どういったページを持つか」という話題は、サイトマップをどうするのかという議論と実質同じ意味です。

サイトマップ作成時の注意点としては階層感覚です。

Webサイトに表現したいことのキーワードをWBSのように大項目、中項目・小項目と区分分けして組み立てていくと良いでしょう。

例えば大項目として[採用情報]を置けば、その下にくる中項目としては[新卒採用]と［キャリア採用］といった項目が必要ですよね。

更にその下に、それぞれの応募条件などが小項目になるのかもしれません。

この場合、大項目[採用情報]は一つのページとしておくべきですが、[新卒採用]と［キャリア採用］はそれぞれ独立した一つのページにするべきかどうかは、Webサイトの方向性などで変わってくるでしょう。

ただ、大項目[採用情報]と中項目である[新卒採用]と［キャリア採用］は同じレベル感でサイトマップに表示されるものではありません。

そして、「もう一つのページはどう遷移していくか」というのは、ある目的があってWebサイトにアクセスした顧客が商品を買うだとか、問い合わせをする、といった、そのWebサイトにアクセスした目的を達成できるようなページ遷移の流れができているかどうかを考えるものです。

少々、分かりにくいので具体的に言いましょう。

例えば［資料請求をする］のボタンを押した後、どんな画面を出すのが妥当でしょうか。

答えは、どこに送れば良いや、どの資料が欲しいのかなどを伝えてもらうための［入力フォーム画面］です。

［資料請求をする］を押すと、ホーム画面に戻ってしまうようなWebサイトは欠陥Webサイトですよね。

どんなページを持ち、それらの画面がどう遷移していくのかを明確にする資料としては、遷移図が知られています。

なお、通常はワイヤーフレームとサイトマップが固まった時点で、モックアップを作成します。

モックアップとは、HTMLなどサイトの表示画面を作るための技術で、実際に表示画面だけを作ったものです。

このモックアップを作ることで「ここに他のページに移動するためのボタンを置く」だとか、「この選択肢を選ばせるところは、ラジオボタンではなくチェックボックスにする」、「背景のカラーはこの色が良い」といったWebサイトの見た目について、ほぼほぼ固まることになります。

開発フェーズに進む

さて、モックアップの制作などを通してWebサイトの見た目、殻の部分はおおむね固まってきました。

しかし、会員登録機能や、商品購入履歴の確認やカートの中身を表示する機能などはまったく実装されていません。

そういった中身の部分を作り上げていくのが開発フェーズです。

実際に作業を進めるのはシステムエンジニアやプログラマーなどのITエンジニアたちですが、どんな機能を作って欲しいのかをすり合わせて、必要な条件をWebサイトの製作を依頼した側と、実際に作る側で合意しないといけません。

その必要な条件を整理することを要件定義と言います。

例えば、会員登録機能というのは、システム的に言えば会員の情報をデータベースに登録することです。

会員登録機能をWebサイトが持つ場合、データベースに登録する情報について、依頼者と開発者の双方が正しく理解していなければ、思っていたのと異なるものができた、という事態になってしまいます。

年齢というファクターを一つ取っても、会員情報でなにをしたいかによって、何歳とだけ入力させるのか、それとも何年何月何日と生年月日を入力させるのか、そもそも年齢は要らないとなるのか、方針が変わってくるはずですので、しっかり要件定義を詰めるようにしましょう。

そして、要件定義でどんな機能を作るのか合意できれば、ITエンジニアはどんどん実際にコーティングし、Webサイトを構築していきます。

ブラウザチェックをする

ビジネスの世界において、納品されたものを検品しないでOKすることは滅多にないはずです。

Webサイトについても同様です。

機能が正しく動くかどうかの確認はWebサイトを構築したITエンジニア側でも確認しているはず。

しかし、最近ではPCだけでなく、AndroidやiOSのスマホ・タブレットでWebサイトを確認する方も増えてきました。

更に、PCのWebブラウザーと言っても、Microsoft EdgeやFirefox、Chromeなどいくつもの種類があります。

その結果、端末やブラウザーが異なると、Webサイトのデザインが崩れたり、実装された機能が動かない、表示されない、という事象が発生することもあります。

すべての端末やブラウザーで表示が崩れていないか、問題なく機能が動作するかどうかの確認はしなくても構いませんが、一般的なブラウザーについては意図した通りのWebサイトになっているのかどうかを確認するべきです。

解析・検証

ブラウザーでの確認も終わり、Webサイトが公開されると、やっと一息つけます、と言いたいところですが、実際はここからが重要です。

Webサイトのリニューアルについての効果測定をしなくてはいけません。Webサイトが目的とする事項を達成することをコンバージョン(CV)と言いますが、そのCVの能力がどれだけ上がったかをチェックしなくてはいけません。

具体的にはリニューアルする前に比べて、購入者数や資料請求者数、あるいは会員数などWebサイトが達成するべき目標がどれだけ増えたかを見ていきます。

そこで、ご存知の方も多いかと思いますが、2つの指標について見てみます。

2種類の目標達成指標

①KGI

ちなみにですが、この手の購入数などのWebサイトの目標を特にKGI (Key Goal Indicator/重要目標達成指標)と呼びます。

KGIが増えたならばリニューアル成功ですし、逆に言えばKGI増加のためにWebサイトのリニューアルが必要だとも言えます。

②KPI

また、KGIを達成するためには、リニューアル前に比べてWebサイトの注目度が上がっている必要があります。

Webサイトの注目度を表す指数としては、サイトのアクセス者数や滞在時間など様々な要素がありますが、これらはKGIに対して、KPI（Key Performance Indicator/重要業績評価指標）と呼ばれます。

KPIは補助的な指数ですが、KPIの向上なくしてKGIの向上は見込めません。

また、リニューアルによってWebサイトのKPIが増加しても、ライバルもWebサイトがリニューアルしたり、時間と共に陳腐化して、またKPIが低下する可能性があります。

そうならないように、PDCAを回して、更なるリニューアルも含めたクオリティーの維持管理が重要です。

まとめ

今回はWebサイトのリニューアルを見ていきました。

ビジネスモデルによってWebサイトへの依存度は変わりますが、自社のWebサイトを持っていない企業はもはや絶滅危惧種です。

どこの企業も持っているために、いかに他社よりクオリティーの高いWebサイトを作成するのか、頭を悩ませている経営者・担当者は非常に多いと思います。

そして、他社がリニューアルしたのを見て、「最近のトレンドに合わせなきゃ」と慌ててリニューアルに踏み切る経営者・担当者も少なくありません。

しかし、そのような「世間に合わせたリニューアル」はあまり良くありません。

すでにお伝えした通り、リニューアルの際は自社の目指すべきWebサイトの姿をまず設定してください。

そうすれば、おのずと良いサイトになり、他社の動向などで一喜一憂する必要もなくなるはずです。

この記事が皆様のお役に立てば幸いです。