2023年10月21日

Web制作におけるワークフロー6つの流れと成功ポイント

Webサイトの制作を進めるにあたっては、基本的なワークフローを知っておくことが重要です。どのような手順で制作するのかを把握しておくことで、制作側と質の高いコミュニケーションを取りやすくなり、プロジェクトをスムーズに進められます。

本記事では、Web制作におけるワークフローの重要性や実際の手順、成功させるための重要なポイントについて幅広く紹介します。

コーポレートサイト制作について
クライマークスのソリューションを見る

1.Web制作におけるワークフローの重要性

Web制作では、ワークフローを整理しておくことで、作業の進捗状況が明確になります。プロジェクトをマクロな視点でとらえやすくなり、円滑に進行できるだけでなく、「トラブルがあった際もスムーズに原因追及できる」という利点も見逃せません。

さらにプロジェクト全体の流れが可視化されていれば、作業工程の最適化・成果物の質の確保にも役立ちます。社内のWeb担当者や制作会社、ユーザーが関係するような、複数の人々が動くWeb制作現場では、ワークフローを整理しておく重要性がより高いと言えるでしょう。

2.Web制作のワークフロー

Web制作のワークフローは、以下の6つに大別されます。

• プロジェクトの前準備
• 戦略の策定
• 設計
• 制作・開発
• テスト
• 公開・運用

上記のフローについて詳しく解説します。

2-1.プロジェクトの前準備

プロジェクトの前準備は、Web制作のワークフローにおける最初のフェーズです。チーム編成や環境準備、キックオフミーティングなどを行います。プロジェクトを迅速かつ正確に進めていくための「土台作り」といったイメージです。

2-1-1.チームの編成

「チームの編成」は、主に制作側のプロジェクトマネージャーが担当する業務です。スケジュール状況やメンバーの適性などを判断しつつ、プロジェクトチームを編成します。「開発のみ」「戦略立案から運用まで」など、プロジェクト規模によってチーム編成も異なります。

チーム編成と同時に、WBS（作業分解構造図）を作成し、プロジェクト全体のスケジュールを把握できるようにしておきます。

2-1-2.プロジェクト環境・開発環境の決定

「プロジェクト環境の決定」では、プロジェクトの進捗状況を把握するためのツールやタスク管理のツール、チャットツールの準備などを行います。

「開発環境の決定」では、クラウド環境や採用するプログラミング言語・フレームワークなど、発注側の要望に合わせて開発環境の検討・決定をします。

同時に作成しておくのが、必要な情報がまとまったプロジェクト計画書です。これにより、新しくメンバーが入った際も、状況をスムーズに把握できるようになります。

2-1-3.キックオフミーティング

チーム編成や環境などの基本的な準備が一通り終わったら、発注側と制作側でのキックオフミーティングを行います。主に制作側が、プロジェクト計画書の内容を説明するようにして進めていくイメージです。

Web制作におけるキックオフミーティングでは、ただプロジェクトの概要について確認するだけでなく、その詳細まであらかじめ話し合っておきます。細かいところまで詰めておくことで、認識の相違をなくす効果があります。

2-2.戦略の策定

Web制作のワークフローにおける戦略の策定は、「調査・ヒアリング」「戦略の立案」に大別されます。この時に、設計準備を同時に行うことで、後のフェーズに移行しやすくなります。

2-2-1.調査・ヒアリング

調査では、統計データを使ったリサーチのほか、ユーザーテストやインタビュー、アンケートなどの手段を使うこともあります。

Web制作におけるヒアリングとは、「既存のWebサイトでの不満・要望」「伝えたいメッセージ、実装したい機能」などを聞き、制作・運用戦略に役立てることです。Webサイトの想定ユーザーや発注側の関係者などが、ヒアリングの対象になります。

ヒアリング時は、ヒアリングシートを活用するのが一般的です。制作側のメモとして使うのはもちろん、発注側に共有して、記入をしてもらうこともあります。

Web制作・発注時に必要なヒアリングシートの基本を解説

2-2-2.戦略の立案

「戦略の立案」とは、チームでの議論で、問題を解決するためのアイデアを出し合うことです。

Web制作の現場で具体的に決めるのは、ターゲットや訴求方法、コンテンツ内容などです。「コーポレートサイトかサービスサイトか」「BtoBかBtoCか」など、Web制作にはさまざまな種類があるため、プロジェクトの性質に合わせて決定します。

特にtoCのWeb制作においては、ターゲットの人物像をさらに掘り下げた「ペルソナ」を設定することがあります。年齢や性別だけでなく、生活パターンや価値観、「当該Webサイトを利用するまでのストーリー」など、設定する項目は多種多様です。

2-2-3.設計準備

「設計準備」で行うのは、フィードバックやWBSの更新などです。Web制作における設計前のフィードバックでは、評価コメントを付けてもらうなど、発注側のニーズや満足度を可視化することも有効です。

Web制作の戦略が策定されていれば、設計以降の作業内容もある程度見えてきます。フィードバックの内容をもとにWBSを更新し、後のフェーズを円滑に進められるようにしておくのも、「Web制作の設計準備」として重要です。

2-3.設計

「設計」では、Webサイトの骨組みを作り上げます。まずは、戦略の策定フェーズで作ったコンテンツ概要をもとに、ページ単位で細かく設計を進めていきます。

最初はビジュアル面ではなく、コンテンツ整理やニーズ分類などの「情報」の部分を設計していきます。いわゆる「サイトマップ」の作成です。

次にワイヤーフレームの設計（画面設計）をします。ワイヤーフレームとは、情報の概要を表す「スケッチ」のようなものです。これにより、コンテンツのレイアウトや機能の実装方法など、基本的な設計要素の議論ができるようになります。

サイトマップやワイヤーフレームの設計を進めると、「どのようなWebサイトになるのか」が大まかに見えてきて、課題を洗い出しやすくなります。特に議題として挙げられやすいのは、ユーザビリティやインターフェース面です。

ワイヤーフレームが完成したら、制作側から、設計意図や方向性を発注側に説明します。

2-4.制作・開発

「制作」ではデザインやコピー・コンテンツライティング、写真などの要素で肉付けをしていきます。一方、「開発」では、フロントエンドからサーバサイドまでの開発全般を行います。設計をもとに実際にコンテンツを作っていく、Web制作におけるワークフローの中核となるフェーズです。

2-4-1.ビジュアルデザイン

まずはWebサイトのビジュアルデザインを決定します。ミーティングをしつつ、サイト全体のデザインを決め、細かいパーツを制作していきます。

特にコーポレートサイトなどのデザインは、ブランドコンセプトなどを支える重要な要素です。見た目の美しさだけにこだわるのではなく、ユーザーにとっての印象や使いやすさにも配慮します。

2-4-2.開発準備

「開発準備」では、文字通り、開発フェーズを迅速かつ正確に進めていくための準備をします。具体的な取り組みとして挙げられるのは、エンジニア向けの社内ブリーフィングやシステム要件定義、ライブラリのガイドライン化などです。

社内ブリーフィングを実施する際は、あらかじめシートに必要事項を記入します。具体的にまとめられている情報としては、設計や制作までのフェーズで洗い出した課題や、開発の方向性、注意点などがあります。

2-4-3.開発・実装

「開発」では、Webサイト全体のベースコーティングをし、基本的な構造を作ります。

ベースコーティングでは、一度に全てを仕上げるのではなく、重要な数ページに絞って作業を進めていきます。「数ページのベースコーティングが確定したら、それを他のページにも展開していく」という流れです。

次に、Webサイトの細かい部分を作っていきます。具体的には、マイクロアニメーション実装や各種フォームの開設など、Webサイトに必要なさまざまな機能・仕様を実装していきます。

「開発」フェーズ全体で、定期的に振り返りの時間を設けて、より洗練された構造にしていくための方法を考えます。

2-4-4.コンテンツ編集・制作

「コンテンツ編集・制作」は、イラストやライティング、写真などの要素を入れていく段階です。発注側や制作側のディレクター、専門メンバーで連携しつつ成果物を作り上げていきます。

特にクリエイティブのような「感覚的な要素が大きい」「後から大きく修正することが難しい」要素については、方向性のすり合わせや中間レビューなど、細かい段階に分けて制作します。

2-5.テスト

Web制作のワークフローにおいて、開発が終わってから公開・運用までの期間は、全てこの「テスト」フェーズに該当します。テストの公開やフィードバック、最終チェックを通して、Webサイトの公開・運用につなげていきます。

2-5-1.テスト版の確認

本番公開前にはテスト領域でWebサイトを公開します。実際にWebサイトを公開するまでのスケジュールも同時に決めておき、発注側を含めた関係者に共有します。

2-5-2.フィードバック

「フィードバック」では、クライアント確認と、第三者チェックによる客観性の担保を実施します。確認するのは、主に以下の観点です。

• 機能：Webサイトの各機能をテストし、想定通りに動いているか
• パフォーマンス：表示速度や処理速度が適切か（トラフィックが多い時間帯にパフォーマンスを発揮できるかどうかなど）
• ユーザビリティ：コンテンツの情報が見やすいよう構造化されているか、設計・デザインが要件と異なっていないか

フィードバックで得た内容を、Webサイトに反映させます。

2-5-3.最終チェック

「最終チェック」は、完成形のWebサイトを見て、細かい部分で誤りがないかどうかを確認する段階です。例えばライティングの面では、誤字・脱字、表記揺れなどのチェックを行います。

他にもブラウザチェックやスマートフォンなどのマルチデバイスチェックなど、あらゆる手法で最終確認を実施します。ブラウザチェックとは、Webサイトが特定の環境、ブラウザで正常に動作するかどうかを確認することです。マルチデバイスチェックとは、PCだけでなく、スマートフォン・タブレットでも問題なく表示、動作されてるかチェックを実施します。

2-6.公開・運用

Web制作のワークフローでは、「公開前準備」「公開・運用」の2つに分かれます。

2-6-1.公開前準備

「公開前準備」では、リリース計画を作成します。公開当日のタスクなどを洗い出しつつ、「リリース計画書」「リリース手順書」などにまとめる作業で、リリースをスムーズに進めるだけでなく、抜け漏れを防ぐ役割があります。

リリース計画にまとめておく内容は、「公開までのタスク」「タイムスケジュール」「問題発生時の対処方法」などです。準備ができたら、制作側から発注側に、公開のスケジュールについての最終確認を依頼します。

2-6-2.公開・運用

公開後は、制作側から発注側へ「Webサイトが公開されたこと」「効果検証に関する連絡事項」などを伝えます。情報更新をCMSによりクライアント側で運用する場合は、マニュアルを作成し、事前に運用のための説明会を実施するのが一般的です。

公開から数週間後に、クロージングミーティングを実施します。場合によっては運用や効果検証に関する作業が残っているものの、Web制作のワークフローとしては、ひとまずここまでの内容で終了です。

3.Web制作の成功ポイント

Web制作におけるワークフローはとても重要ですが、他にも2つの成功ポイントがあります。

• クリエイティブな部分も含めた制作側の得意分野・実績と、発注側が求めているWebサイトの要素が合致していること
• ミーティングやフィードバックなどを通して、制作側と発注側のコミュニケーションの「量」と「質」が高まっていること

制作会社は、制作や開発に特化している企業から、クリエイティブ分野（グラフィック、映像など）に対応しているところなど多種多様です。制作側と発注側の「相性」の問題は、Web制作の成功を大きく左右します。

さらにWeb制作では、制作側と発注側が連携して業務に臨むため、綿密なコミュニケーションが重要です。ミーティングやフィードバックをフェーズごとに実施することで、認識の相違をなくす効果が期待できます。

4.まとめ

Web制作は、あらかじめ定められたワークフローに沿って進められます。ワークフローを通して理想的なWebサイトを作るためには、制作側と発注側の相性や、コミュニケーションの「量」「質」などの要素が重要です。

Web制作会社を選ぶ際は、制作能力やビジュアルの企画力といった制作物に関するポイントだけでなく、「ワークフローの的確さ」や「コミュニケーションの方針」なども考慮すると、制作工程をスムーズに進められる可能性が上がります。