成功するWeb制作の流れ「これだけは抑えたい」重要ポイントまとめ

webサイト制作・リニューアルなどで失敗したことはありませんか？
昨今、各企業はwebサイト制作にしっかり予算を取るようになり、おおよそ3年から5年のスパンでwebサイトのリニューアルを実施する企業が増えています。

しかし、必ずしもリニューアルがうまくいっていないことはよくあります。
いざ、webサイト制作・リニューアルを実施することになったけど、どのような準備をしたらよいかわからず、
制作会社を決めて失敗したことはありませんか？

よくあるのが、提案段階では良い制作会社と思っていたらプロジェクト開始後、提案時にいなかった人が実務担当者となり会話から実力不足がにじみ出て不安が絶えず結果リニューアルそのものが失敗してしまう、というケースでWeb業界あるあると言っても過言では有りません。

webサイト制作の流れを知る

Web 制作は一連の段階を経て完成に至るわけですが、実は様々なプロセスがあり、この流れをよく理解することにより、企画から運営までプロジェクトは一気にスムーズになります。
Web 制作の流れは、web サイトに持たせる機能や役割によっても多少異なりますが、おおまかに整理すると以下の３つのフェーズに分類されます。

【第1フェーズ】事前調査・制作方針策定：現状課題の把握と改善要件を盛り込みながら
リニューアルの方向性を決める

【第2フェーズ】 Webデザイン・制作：上記で策定した内容に則ったWebデザイン、HTML の制作を行う

【第3フェーズ】サイト運営：リニューアル後の検証やサイト運営

【第1フェーズ】事前調査-webサイトリニューアル失敗しないためのポイント

Web制作（webリニューアル）の依頼をする際、【第2フェーズ】web制作つまりデザインやHTMLの作り込みだけを意識してしまい、【第1フェーズ】事前調査・制作方針策定と【第3フェーズ】サイト運営に意識が向いていない発注者がほとんどです。どのフェーズも重要ですが、web制作の流れで最も重要なのは【第1フェーズ】の事前調査・制作方針策定フェーズになります。ここが、のちのWebサイトパフォーマンスを大きく左右することを理解している発注者は非常に少ないのが現状であり、業界の大きな課題ともいえます。

理由は、Webサイトリニューアルが失敗するパターンにありがちなことと同じなのですが、デザインや見た目で判断し、現状の課題を解決せず残したままリニューアルしてしまうことが多いからです。それらの失敗をなくすため、現サイトの課題とおかれている状態を正確に把握し、どのような方針でリニューアルを進めていくかをしっかり議論・検討することが重要なのです。
Webサイトは、目的や役割が必ずあり、それらを果たすには、方針決定と運用のところまでweb制作の検討段階で念頭におくことが非常に必要なのです。

また、Webサイトの形態や役割にはECサイトやオウンドメディア、コーポレートサイト、サービスサイト、ポータルサイトなど様々ですが、今回は複雑なシステム開発や連携が少ない比較的一般的な「コーポレートサイト」、「サービスサイト」のケースで説明していきます。

コーポレートサイトは企業そのものの紹介をするホームページで、サービスサイトは企業のサービスを紹介し、サービスの問い合わせを獲得するホームページのことを指します。
では、【第1フェーズ】事前調査・制作方針策定ではどのようなことに注意し進めるべきなのでしょうか？
まずは事前調査について解説していきます。

webサイト制作【第1フェーズ①】事前調査について

事前調査とは、読んで字のごとく現状のサイトや周辺環境を正確に把握することです。
webサイト制作、リニューアルを実施するにあたり、事前調査が非常に重要です。
理由は、リニューアルで一番多い失敗は、デザイン目線でのみリニューアルを進めてしまい、ユーザー視点での、現状の課題の積み残しをしてしまうことが多いためです。
つまり、現在位置が分からないままゴールを目指しても到着するのは難しくなるということです。

また、この事前調査をやらずにweb制作・サイトリニューアルを進めてしまうと、「課題の積み残し」「改悪によるアクセス数の減少」「ＵＩ/UX劣化によるＣＶＲの低下（売上減）」など深刻な問題に発展することも多々あります。

webサイト制作【第1フェーズ①】事前調査の具体的な内容とそのノウハウ

サイトの課題をユーザー（定性）視点で現状のwebサイトの抽出を行うことです。　企業のweb担当者はあくまで事業者でありサービス提供側の視点が強くお客様やユーザーの視点に立ちにくい状況にあります。ユーザー視点で課題抽出するためには、第三者による「ヒューリスティック評価」を実施したり、場合によっては、実際にサイトを利用する顧客に対して「被験者テスト」を行うことによりより深い課題を発見することもできます。

ヒューリスティック評価とは

別名エキスパートレビューともいわれ、UI/UXの専門家がユーザーインターフェース（UI）を経験則（ヒューリスティック）に基づいて評価し、ユーザビリティ上の問題点を発見する検査方法です。認知心理学をWebサイトに応用したかたちで、短期間かつ低コストで実施でき、設計初期段階のプロトタイプや仕様書レベルでも評価が可能である点が特徴です。

被験者テストとは

サイトユーザビリティ改善のための課題抽出の方法で実際のユーザー（被験者）にwebサイトを使用してもらい、その様子を観察して使い勝手や問題点を明らかにする試験です。被験者はシナリオに沿って作業を行い、その行動や発言から操作の失敗や不満の原因を探り、webサイトの改善点を見つけます。

ユーザビリティテストでは、被験者に思考を声に出してもらいながら操作してもらい、その過程で発生する問題や疑問点を把握します。被験者は事前の予習不要で、ありのままの操作を通じて評価されます。一般的に5人の被験者で約80％の課題が抽出されるというデータもあり少人数で効率的な課題抽出が可能です。

また、社内のweb担当ではない営業担当やカスタマーセンターの担当者から意見を聞くことも有効です。

アクセスログ解析で見るべきポイント

次に、客観（定量）視点でのサイトの課題抽出です。
具体的には「アクセスログ解析」を行い課題抽出することです。　
アクセスログ解析は様々なベンダーが実施していますが、ここで重要なのは
数字を並べて定点観測するのではなく、数字の異常値からのサイトの課題の発掘を行うことです。

具体例としては、

などの分類を行い。それぞれのページごとに改善ポイントを洗い出したり、ページの表示の優先順位を変えたりします。もしくは、④アクセスが少なくCVRの悪いページなどは削除の対象とする場合もあります。

こういったことはサイトを眺めていても表面化しない課題なので必ず客観的な数値をもとに改善案を抽出するフローをリニューアルには入れる必要があります。

競合ベンチマーク評価とは

最後に、競合視点での課題抽出です。
競合視点の課題抽出は、おおむね4社から6社ほど、競合サイトを抽出し、

• ナビゲーション/カテゴリ
• コンテンツ
• サイト構造カテゴリ
• サイトの機能
• フォーム

など　あらゆる視点で比較します。

コーポレートサイト、サービスサイトのいずれも競合他社が明確に存在するはずですが、事業における競合他社のwebサイトが参考にならない場合は、類似する業界やビジネスモデル、サービスに範囲を広げ、UIUXが優れている、またはWeb販促に予算をかけていそうなWebサイトをピックアップします。
重要なのは、事業競合よりもマーケティング視点でのサイト競合を優先してピックアップすることです。

インターネットユーザーは、必ずサイトを横断してサービスやコンテンツの質を比較します。その目線に立つことが重要なのです。そして、現状の自社サイトとの違いや差別化ポイントを抽出し、逆にいいところを取り入れるという作業になります。ポイントとしては、

• トレンドとなるものを発見してそれに倣う
• 比較して優位性の見いだせるポイントを探る
• 単純にいいところに倣う

といった視点でインターネットの世界では斬新であればよいというものではなく、ユーザーが慣れ親しんだものが使いやすく優れているということも多々あるという考え方です。

webサイト制作【第1フェーズ①】事前調査　まとめ

ここまで、自社の主観的な視点、アクセスログによる客観的な視点、競合他社と比較した視点と

マーケティングでいう３Ｃの視点に近い複眼で現状を把握することによって正確な現在地と進むべき方向が浮き彫りになるわけです。

また、時間や予算的に余裕があるならリニューアル前にユーザー被験者テストを行うこともお勧めです。被験者テストの利点は上記の３Cの視点に加えて、表面化されていない深い課題や、サービスそのものやコーポレートの在り方に関する情報も得ることができることがメリットになります。

サイトの部分改修ではなく、サイトリニューアルの場合はある程度深い課題改善や改修ができるためセットで実施することを強く推奨します。

webサイト制作【第1フェーズ②】制作方針策定フェーズの工程

事前課題の把握が終われば、それをもとにサイト全体の構造をどう作り上げていくかというフェーズに移ります。　その中で最も重要なポイントがペルソナの設計になります。

どのような顧客層が、どんな目的で自社のサイトを利用するのかを明確にすることです。では、ペルソナはどうやって作っていけばいいでしょうか。

ペルソナのゴールは、webサイトリニューアルするメンバー全てが同一のペルソナを想像してサイト制作の優先順位を決定できることです。また、ペルソナを今後マーケティング戦略の判断基準に使えるレベルに落とし込みができている状態だと望ましいです。

広告や、web制作、メルマガ、TVCMなどすべてのマーケティング活動が一貫して同じペルソナが基準で運用されることが成功の秘訣です。

ペルソナ作成についてまずは、プロジェクトメンバーで、実際にいるクライアントやお客様を例に出して、グルーピングしていきます。　
グルーピングするための軸は様々ありますが、共通して言えるのは

• 基本プロフィール
• 嗜好性
• ファースト/セカンドニーズ
• ウォンツ

になります。BtoBビジネスの場合、クライントの規模や、担当者の役職、年齢、その担当者がおかれているミッションなども検討項目にいれるとよりリアルにペルソナを想像しやすくなります。

こういったペルソナをいくつか作成して、優先順位をつけていきます。
ペルソナの数は少なければ少ないほどターゲットが絞られた良いサイトになりますが、必ずしも1つに絞る必要はありませんが、多すぎるペルソナも優先順位がつけづらくなるので、3～5個程度に絞ることをお勧めします。

ペルソナが定まり、プロジェクトメンバー全体で腹落ちした状態で次にすべきweb制作の流れは、コンバージョンシナリオの作成です。

コンバージョンシナリオとは、ペルソナがwebサイトを回遊する際に、どのような順番でどのようなコンテンツを閲覧し、情報を理解、取得しコンバージョン（お問い合わせ、申し込みなど）へ辿るかを図式化したものです。

コンバージョンシナリオ作成の際は、それぞれのペルソナの気持ちになって、どんな情報が欲しいか、どんな不安要素があるかを時系列で考慮して考えていきます。例えば、新しく「バッグ」を購入したいお客様の場合、

など、商品への興味が深くなるにつれて周辺情報や商品を使った場合の不安点やニーズが出てきます。　
これらの要件に対してどのようなページ構成で情報提供してくかを設計していきます。
一度に確認したい情報もあれば、情報量が多すぎることによって離脱につながる場合もあるのでしっかりとしたユーザー目線での設計が必要です。

例えば
１～３は商品詳細ページに情報掲載
４．５．は特集ページに掲載　もしくは記事コンテンツやFAQで説明といった形になります。

こうして、必要なコンテンツと優先順位が見えてきます。
コンバージョンシナリオをペルソナ毎に作成し（ペルソナが３個あればコンバージョンシナリオも３個）、鳥瞰してどんなコンテンツが必要なのか？優先順位が高いのかのアタリをつけます。
既存のサイトがある場合は、そのページの見直しを行い、見落としがある場合は新規でコンテンツを作ることになります。ペルソナやコンバージョンシナリオを作ることによって、webサイト制作時の目線を極力ユーザー視点での検討が進められるようになります。

このあたりまでアウトプットが整理できてくるとこれらをweb制作会社へ要件として伝えていく必要があります。
また、場合によってはこれまでの事前調査を伴走してくれるweb制作会社もあるのでその場合はwebリニューアルとセットで委託するとかなり深い議論ができるためお勧めです。

Web制作会社へレクチャー＆提供が必要なもの

下記は発注者側が用意しておくべき、Web制作会社へレクチャー＆提供が必要なもの一覧です。

この他、他のサイトとの連携などがある場合はその洗い出しが必要です。

ページがリニューアルした後に連携ができなくなり表示崩れや表示できないといった不具合の原因になります。

こういった、発注側でしっかり現状の把握ができておらずリニューアルで不具合やミスにつながることは多々あります。　web制作会社は連携されていない情報を外部からくみ取ることは非常に困難で、こういった連携ミスによるトラブルは発注側に責任があるのでしっかりと情報をそろえるようにしましょう。

ここまでくるとweb制作の流れは、事前調査・制作方針策定フェーズから、次のフェーズになります。

【第2フェーズ】Webデザイン・制作

web制作フェーズは、基本的にはweb制作の要件や課題がweb制作会社に伝わった状態です。
※制作会社によっては、【第1フェーズ②】制作方針策定フェーズから伴奏型で要件を組み立ててくれる会社もあります。（ECマーケティング社では予算と納期を勘案して可能な限り事前調査フェーズから伴走してくれます。）

まず、web制作会社からサイト構造設計を担う「ハイレベルサイトマップ」や「サイトストラクチャ」を納品してもらいます。これらは、これから作るwebサイトの全体設計図です。

要件に含まれるページがすべて記載されているか過不足をしっかり確認しましょう。
全体を俯瞰できる資料であるため、もし不足しているページがあっても気づきやすいため、納品物に追加してもらうことをおすすめします。

サイトマップの確認が終わると、次は主要ページのワイヤーフレームの確認になります。

ワイヤーフレームの完成度はWeb制作会社の力量が問われます。

ノウハウを有する制作会社は、ワイヤーフレームの段階で、ペルソナを意識した導線設計や競合ベンチマークで抽出したポイントを反映した状態で第一稿が出来上がってきます。
また、デザイン前の状態ですが、より完成版に近い形で吟味して何度も修正することがwebの完成度を飛躍的に上げるのです。
さらに高度なUI/UXのノウハウや、SEOの基本的な配慮などがあれば、コンバージョンレート（CVR）やアクセス数の増加につながります。

発注側のワイヤーフレームにおけるチェックポイントは、ペルソナをイメージして情報の優先度や反映されているかという視点でしっかり確認します。また、競合ベンチマークでチェックしたポイントが反映されているか確認します。
サービスサイトやコーポレートサイトとしての戦略との不一致などのチェックもこの段階で行います。

ワイヤーフレームの状態で各ページの構成は校了状態（大幅な修正は不可）になるという意識をもって慎重に確認する必要があります。

また、デザインが入っていない状態でのワイヤーフレームの検討はデザインに目移りすることなく、正確にUIやコンテンツの優先順位を検討できるといったメリットも大きいです。
サイトリニューアル時のWeb制作会社を選定するコンペで、提案段階でデザイン案を提出させ、その良し悪し（たいてい上層部の好み）で制作会社の選定を行う企業が時々ありますが、これほど危険なことはないと断言します。
現状課題も解決策も不明な状態で出されるデザインを基準に選んだ先にWebリニューアルの成功はあるのでしょうか？
ここまでの流れを理解できた方はこれが以下に危険であるか、もうお分かりでしょう。

特に大企業では、社長や役員などの上層部は検討やweb制作のプロセス段階では報告が入らず、判断するための情報がないため「このデザインかっこいいね！」「見積もり一番安いね！」という感じでベンダーが決まってしまいます。そうした場合、最初のデザインで決定してしまうとそれに引っ張られてしまい、事前調査や政策方針の検討ができずに、残課題を残して見た目のデザインのみリニューアルするといった失敗に陥りやすいです。

Web制作会社選定の重要な視点は以下３つに集約されるといえるでしょう。

【第2フェーズ】Webデザイン・制作①中間納品物のチェックポイント

ワイヤーフレームの確認はTOPページから順番に行うこと多いと思いますが、校了後デザインの確認なります。
デザインでの確認は、HTMLになる前のJPEGなどの画像で行うことが多いですが、この時点ではブランディング面や戦略面でイメージとして齟齬が無いかや、ワイヤーフレームで見落としていた軽微な修正ポイントはないかなどをチェックします。
テキストデータも入ったデザインである場合は、法務無部門へのチェックも同時に回すことによって公開までの時間短縮ができます。また、色味が入った状態で、UI/UXの確認も必要になります。
例えば、コンバージョンポイントのボタンの配色がベースカラーの反対色になっているかどうかや、全体的な視認性に問題ないかなどです。

デザインのチェックが終わり、次の段階では制作会社はコーディング作業に入ります、その後HTMLの状態のテストサイトでさらに細かな挙動やページ遷移エラーのチェックなどを行い受け入れテストを行います。

【第2フェーズ】Webデザイン・制作②最終納品物　受入テストのポイント

受け入れテストの流れは、テストの目的や範囲、合格基準などを定めた「テスト計画書」を作成します。

ユーザーの業務や要件に合わせてどの機能を重点的にチェックするかを明確にしましょう。

テスト環境や端末、アカウント権限などを事前に確認・用意します。実担当者が実際に運用する状況に近づけるのがポイントです。

計画書とテストケースに基づきテストを行い、結果を記録・評価します。

不具合が見つかれば修正し、必要に応じて再テストを実施します。

利用者視点の一連の操作（例：ユーザー登録～お問い合わせ完了）を想定して流れをチェックします。他のツールや外部サービスとの連携部分もきちんと動くか確認します。

旧サイトと比較し、機能差異や使い勝手を検証します。また、レスポンスタイムや、リンク切れ、リダイレクト漏れが無いかも入念にチェックします。

重要なのは、ユーザー目線で実際の運用に即して確認し、優先順位をつけたうえですべての機能を網羅的にテストできない場合は、リスクの高い部分や重要な箇所を重点的に実施することです。

受け入れテスト合格後はようやく本番公開の作業に移ります。CMSやシステムが入っている場合はダウンタイム（一時的にwebサイトを停止する時間）が必要なケースもあります。その際は極力アクセスの少ない、土日や深夜帯で行うことがベターです。

【Web担必見】メンテナンス中のサーバ設定

このとき注意すべきことは、ダウンタイム中、Webサーバにリクエストするステータスコードを「503」に設定することです。これにより、Googleなど検索エンジンのクローラに対し、Webサイトが一時的なメンテナンス中であることを伝えられるため、SEO評価が下がることを防げます。
当然、リニューアル前にはwebサイト上で〇〇日●●時からwebリニューアルを行うという予告を一般のお客様へ行っておくことも忘れてはいけません。

もうひとつ忘れがちなのはWeb広告の停止です。稼働中のWeb広告がある場合、サイトメンテナンス中は停止しましょう。広告費を使って誘導したユーザにわざわざサイトメンテナンス画面を見せるなど、イメージダウンに繋がりかねません。

さて、本番公開が終わってもまだ安心してはいけません。本番公開後は、本番環境でないと見つからない、バグや表示崩れシステム面での連携などをチェックします。特に他サイトとの連携は発注者が把握していないといったケースが多いので要注意です。

【第3フェーズ】サイト運営でやるべきこと

webサイトリニューアル完了後は、サイトの運営フェーズに移ります。

リニューアル後にやるべきことは、リニューアルから約１か月～３か月の間で、リニューアル後アクセスにどれぐらい変動があったかを確認します。
可能であればSEOの順位もチェックします。リニューアルの直後は、googleなどの検索エンジンが新サイトをクロールして把握するまでに時間を要するために一時的にSEO順位が下がることが多いです。また、リニューアル後の効果がどれぐらいあったかを把握し今後定点観測していくことをお勧めします。

リニューアルの戦略や意図がユーザー（閲覧者）にしっかり伝わってるかどうかを確認するために、この時点で被験者テストを行うことも有効です。
こういった形でwebサイトの状態を把握する仕組みを作り上げ、PDCAを回していくことが重要です。
運営フェーズにおいては、サイトの更新業務も重要になってくるため、可能であれば

運用マニュアルの作成や、webサイト更新のルールも同時に策定して運用の土台を気づいていき担当者が変わっても問題ない体制を築くことが重要です。また、マーケティングサイトの場合はリニューアル後キャンペーンを行ったり、広告出稿を強化するといったマーケティング施策と連動することも考えられます。

成功するWeb制作流れのまとめ

成功するWebサイト制作の流れと重要なポイントについて、コーポレートサイト、マーケティングサイトに特化した内容を解説してきました。

様々な目的を果たすwebサイトですが、web制作（リニューアル）前に必ず現状の把握や今後どのようにリニューアルを実施して何を達成するかの目標を明確にする必要があります。その事前調査・制作方針検討の段階である程度評価が決まります。当然リニューアルには予算と期限が設けられますが、どんなものを作るか？どこを目指すのか？を決める前に、予算と納期を確定してしまうと、プロジェクトが非常に手詰まりになりやすいです。

しっかり余裕を見てプロジェクト推進するようにしましょう。

Web担当者必見！成功するWebサイト制作のポイントは以下の通りです。
ぜひプロジェクト成功にお役立てください。