WEBメディアは、通常のコーポレートやサービスサイトとは異なり、メディアの目的が不明瞭になりやすいため、通常のサイト制作の中でも緻密な設計が必要になります。

特に企業がWEBメディアを立ち上げる場合には立ち上げて以降にも運用にも多大な労力とコストがかかるため、事前の設計と準備が特に重要になります。

この記事では、どのフェーズでどのような作業が必要になるか、その概要を紹介します。

5つのフェーズ

今回はWEBメディア制作のフェーズを以下に分解しました。

立ち上げフェーズ
調査フェーズ
要件定義フェーズ
設計フェーズ
制作フェーズ
運用フェーズ

WEB制作の業界において、制作フェーズの切り分けに標準的な分け方は見かけないので、紹介する人によってフェーズの切り方が分かれてしまっているのが現状ではないかと思います。

フェーズの区切り方

フェーズの区切り方では、これに戦略フェーズが加わるケースもあります。戦略フェーズといっても、呼び方が異なるだけで、やる内容に大きな違いはないように思います。戦略フェーズは、要件定義の前に行われる場合や、要件定義自体が戦略フェーズと呼ばれる場合や、要件定義の後に戦略フェーズがある場合など、様々です[1][2]。

また要件定義を設計フェーズに含めてしまうものもありますが、システム開発の現場で採用されている開発フローに照らし合わせれば、要件定義は切り出して一つのフェーズとしておくのがよいでしょう。

また制作フェーズでは、デザインと実装にフェーズを分ける場合もあります。

もともと開発工程の流れは、より複雑な工程が必要なシステム開発の現場で採用されているものが中心ですので、実際のWEB制作の現場ではこれらを大幅に省略したり、統合して進めるケースもありますので、ケースバイケースです。

それぞれのフェーズについて、詳しく紹介していきます。

立ち上げフェーズ

【タスク】
メディアの目的
現状の課題と理想
現状のアイデア整理

メディアを立ち上げる時には、何かしらの目的や課題感があることがほとんどです。まずはそういった現状の課題感やどういうサイトを目指したいのか？そういったアイデアを、ブレインストーミング的に出し合っていきます。

ある程度アイデアが出揃ったら、それらを整理し、今回のWEBメディアの立ち上げでどのようなことを目指したいのか、その輪郭を掴みます。

調査フェーズ（マーケティングフェーズ）

【タスク】
現状調査
ユーザー調査
競合調査
キーワード調査

調査フェーズでは、取り組みたいWEBメディアの市場や競合の現状がどのようになっているのかを把握します。この時に、ベンチマークとするようなメディアを見つけられると、イメージがより具体的になっていきます。ベンチマークは、サイト丸ごとが同じでなくても、「この部分はこのサイト」というように部分的に把握していく方法でも大丈夫です。

競合調査では、サイト名、サイトURLに合わせて、どの部分が優れている（課題がありそう）と思うか、を整理していきます。特に複数人が関わるプロジェクトでは、ただ競合が羅列されていても、どの部分を見ているのか人によってことなるため、目線を具体的にしていくとよいでしょう。

調査フェーズは、プロジェクトの規模によって必要性や重要性も変わってきます。例えば、実店舗のホームページを作るような場合よりも、WEB集客のみでビジネスを行うような場合の方が、はるかにWEB上での競合調査は重要になってきます。

要件定義フェーズ

【タスク】
ターゲット設定
ペルソナ設定
カスタマージャーニー
WEB戦略マップ
キーワード戦略

要件定義フェーズでは、具体的な制作に必要な要素を固めていきます。

ターゲット設定とペルソナ設定は同じようにメディアを誰に向けて作るかにおいて重要なのですが、ターゲットがサイト全体のテイストに影響するのに対して、ペルソナは特定の個人を仮定することで、カスタマージャーニーやその後のユーザー導線設計において、その個人がどのような感情でサイトを遷移していくかを設計していく点で重要になります。カスタマージャーニーでは、実際のペルソナがどのような動きをしていくか具体的にイメージしていきます。

WEB戦略マップとは、弊社が独自に作成しているもので、WEBメディアとは別にホームページやYoutubeやSNSなど周辺の関連する媒体が存在する場合がほとんどなので、それらの全体の媒体を通してユーザーがどのような遷移をするのかを検討していきます。

WEB戦略マップは作成したからといて、ユーザーが綺麗に想定通りに動いてくれない場合もありますが、あくまでも最初の仮定として作成しておくと、期待していた効果が得られない場合の振り返りの起点となるためおすすめです。

設計フェーズ

【タスク】
サイト構造設計
CTA設計
ユーザー導線フロー図
ワイヤーフレーム

設計フェーズからは通常のWEB制作フェーズに入っていきます。

サイト構造設計では、全体のサイトマップを作成したり、WEBメディアの場合では記事カテゴリを設定していきます。

CTAとはCall To Actionの略で、行動喚起のためのセクションを設けます。合わせてユーザーの動線フローを作ることで、ユーザーがサイト内でどのような動きをしながら、CTAに向かっていくかを設計していきます。

ワイヤーフレームでは、WEBサイトの骨組みを作ります。具体的に各ページにどのようなセクションを配置するかを検討していきます。

設計と要件定義を合わせて設計フェーズとする場合があります。他にも要件定義や設計を合わせて情報設計やUI/UX設計と表現する場合もありますが、明確に業界で標準となっている方法はありませんので、現状各社独自に自社の進め方に合わせたフェーズの区切り方を採用しているのが現状でしょう。

制作フェーズ

【タスク】
デザイン
コンテンツ作成
コーディング
テスト

いよいよ制作に入っていきます。デザインには、FigmaやAdobe XDを用います。以前はAdobe PhotoshopやIllustratorによって制作されることが多かったですが、最近ではよりFigmaといった、WEBベースの制作ツールに変わりつつあるように思います。（制作の規模や内容によって、使用するツールは変わります。）

コーディングは、デザインを元にWEB上で表示できるように実装していきます。プロジェクトによって変わりますが、本番環境以外に開発環境を用いるケースもあります。コーディングを担当するエンジニアは、まずはネット環境ではない自身のパソコン（ローカル環境といいます）で、実装を行い、ある程度開発が進んだら、開発環境に適用します。開発環境がない場合には、完成した段階で本番環境に適用します。

コーディングが完了したら、必ずテストを行います。テストはローカル環境や開発環境で基本的に洗い出して修正を行い、本番環境でも最終確認を行います。

運用フェーズ

【タスク】
サイト管理
ユーザー問い合わせ対応
SEO対策
アクセス解析
セキュリティ対策
コンテンツ更新

WEB制作後の運用フェーズでも行うことは多くありますが、具体的な内容は契約内容によって変わります。

WEB制作の契約によって、サーバーを提供するだけであったり、文言や画像を変えるだけであったり、WEB集客に向けてコンテンツを大幅に変更したりと、さまざまです。

また、運用では、維持のための運用と、発展のための運用があります。どちらがよいかは一概に言えませんし、目的によります。当然ですが、発展のための運用の方が単価は高い傾向になると思います。

制作者の立場としては、事前にクライアントに何が対応できて、何が対応できないのかを明確にしておきましょう。

まとめ

フェーズの区切り方は制作会社によってことなりますが、概ね同じ流れになると思います。また、プロジェクトによってはより簡易的に進める場合もあると思います。

この辺りの進行は予算やプロジェクトの規模、スケジュール感によっても変わってくるので、専門家に相談しながら進めてみるとよいでしょう。

WEB制作はご相談ください

株式会社Nobolでは、本記事で紹介したフロー全体、または一部を提供しております。

お客様のメディア支援の実績だけでなく、自社でもメディアを運営しておりますので、さまざまな観点からアドバイス可能です。

弊社では作って終わりではなく、制作後の集客の成功をサポートすることに力を入れています。発展させるための運用に興味がある方はぜひお問い合わせください。

[1]…WEB制作標準講座（総合コース）
[2]…WEBディレクションの新・標準フェーズ