Webサイト制作のワークフローとディレクターの関わり

2021/08/12

ディレクション

ホンマヒロミツ

初めてのお客様から制作の依頼をお受けするときに多く聞かれるのが、発注してから納品（公開）までの流れがわかりにくいということがあります。
全ての制作で全く同じ工程を踏むわけではありませんが、基本的な工程というのは存在していてWepotでも定義しています。

この記事ではWepotで定義している制作の工程をご紹介し、どの工程でどんなことをしているのか、またどんなものを準備する必要があるのかなどご紹介いたします。
制作会社に依頼をするときの参考になれば幸いです。

計画立案 / 全体設計
- 初期ヒアリング
- 要件/仕様などの確認
要件定義
- WBS（作業分解構成図）作成
設計/提案
ビジュアルデザイン
開発
検証/マニュアル作成
公開 / 運用準備
- お客様最終確認（受け入れテスト）
- 公開作業/納品
まとめ

計画立案 / 全体設計

Webサイトの制作において一般的にはデザインやコーディングの部分に着目されがちだと思いますが、どんな素晴らしいデザインもどんな素晴らしいコーディングも前段階で行う設計の度合いに左右されます。
素晴らしいデザインや素晴らしいコーディングは事前に行った設計をはじめとする準備があってこそ効力を発揮するもので、むしろ設計が抜けているデザインやコーディングではどんなに見栄えがいいものであっても効果の出る物になるとは限りません。
初期の計画立案や全体の設計はwebサイト制作の命とも言える工程であると言っても大袈裟ではありません。

初期ヒアリング

どんな制作会社も制作のチームであっても一番最初はお客様からの問い合わせがあって初めてプロジェクトがスタートします。
この段階では契約前の段階ですので、まずは要件などをおうかがいし実際にどんなものを作っていくのかを確認します。
お客様が作りたい物についてはどんな制作会社もどんな制作チームであってもおうかがいする内容ではありますが、何を作るかも大事ですがWepotでは「なぜ作るのか」ということを必ずお聞きします。
作りたいものの背景にある原因部分をおうかがいすることで制作側としても細かな要点を押さえた制作ができますので提案内容も確度の高いものをご提案できるようになると考えています。

要件/仕様などの確認

作りたいものの背景をおうかがいしたうえで、何を作りたいのかということを合わせて精査していきます。

Webサイトにどんな機能を持たせたいのか
このwebサイトを運用することでどんな効果を得たいのか
その目的は何か

などをお互いの共通認識として合わせていく作業です。
その上で予算感やスケジュールについてもご提案させていただきます。
提案と同時におうかがいしている要件をもとに細かな仕様を詰めていく作業も行います。
仕様として考えられるのは概ね以下のよう内容が多いかと思いますので例として幾つか掲載します。

サーバー周り
- サーバー周り現在使用しているサーバーを使うのか、新たにサーバーを契約するのか（現在使用しているサーバーがある場合はそれらのログイン情報やアクセス情報などを確認）
- ドメインを現在のものを使うのか新規に取得するのか
CMSの有無（WordPressなど）
ロゴやデザインなどのレギュレーション確認
- レギュレーションがある場合はご共有いただく
- レギュレーションが特にない場合は制作する物に合わせて必要に応じて作成するなどの対応をする
お問い合わせフォームの確認
- 送受信だけで良いのか、データベースを作成する必要があるのか
- お問い合わせ項目の確認

などが挙げられます。

要件定義

ヒアリング・すり合わせをした内容をもとに、要件定義書を作成します。要件定義書は、お客様と制作側（Wepot）で共通認識をもつために必要なものです。以下に要件定義に必要な項目をリストアップしました。

ご依頼内容
ご依頼いただいた背景や、制作をするにいたった背景
目的/目標
ページ構成
サイトやシステムの仕様
納品物一覧
納品方法
お互いの役割分担
納期
マイルストーン（全体の暫定工数と暫定スケジュール）

などです。
プロジェクトやお客様の要件によっては掲載する内容が増減することがあります。

WBS（作業分解構成図）作成

これまでの内容をもとに詳細のスケジュールを作成します。
基本的にはWBSやガントチャートは制作側のものとして作成しますが、開示を求められた場合にはお客様にもご共有します。
PM（プロジェクトマネージャー）や各ディレクターはWBSをもとにプロジェクトを進行します。

設計/提案

要件定義の内容をもとに実際のサイト制作（デザインやコーディング）に向けて細かな設計を行います。
この設計がとても重要ですが、これらを細かく行なっている制作会社や制作チームはまだまだ少ないかもしれません。
Wepotではお客様の要望に応えしっかりと結果を出すことのできるサイト制作のため情報設計を重要視しています。

情報設計

多くの場合において情報設計は聞き慣れない言葉かもしれません。
情報設計はIA(インフォーメーションアーキテクト)と呼ばれますが、WepotではこのIAを得意としています。
BtoB（またはBtoBtoC）やBtoCなどお客様の業態や制作する内容によってIAの内容は大きく変わります。
基本的には

市場調査/分析
ペルソナの設定
カスタマージャーニーマップの設定

などです。
上記はかなり大雑把に書いていますが実際の内容はかなり細かく多角的な視点から調査分析を行います。
それぞれの項目は独立してはあまり使いようのないものではありますが、全てを関連づけていくことでユーザーのニーズや制作すべきコンテンツの洗い出しなどが可能になります。
そのためどれか一つが欠けても正しい情報の設計はできませんが、逆にこれらをしっかりと行うことでターゲットとなるユーザーにとって必要な項目や必要不可欠な内容が可視化されていきます。

コンテンツ/構成提案

IAで導き出した内容をもとに具体的なコンテンツを作成しご提案します。
これらのコンテンツには要件定義で定義している仕様やお客様からのご要望をフィードバックして詳細を詰めていく作業をします。

ワイヤーフレーム

コンテンツまでが出来上がりご提案をさせていただいたのち、ワイヤーフレームとしてIAで導き出した内容を可視化します。
この段階で重要になるのが掲載するコンテンツの順番や、UI（ユーザーインターフェース）の種類や機能、そしてテキストや画像の設定です。
これらが相互に作用することでより使いやすく、より効果の出やすいwebサイトの設計が出来上がっていきます。
ワイヤーフレームで重要になるのが、ワイヤーフレーム把握までもこれまで設計してきたものを可視化するという目的であるということになるためデザインの要素は入っていません。
テキストや画像枚数や画像の種類などを合わせて設計していきます。
この段階でのテキストはなるべく実際のサイトに掲載する内容でまとめていきます。
デザインの段階で文字数が大きく変わってしまうとデザインの調整が必要になり、場合によってはデザインをやり直すということにもつながってきますので、ワイヤーフレームの段階でテキストはある程度確定させていきます。
もちろん後からテキストを変更することは可能ですが、意味合いや文字数が大きく変わらないようにすることが重要です。

ビジュアルデザイン

デザインレギュレーションの策定

要件定義書や提案書類、ワイヤーフレームをもとにデザイン全体の設計を行います。
トーンアンドマナーやデザインのレギュレーションを定めることでwebサイト全体のイメージを固めていきます。

トップページデザイン

下層ページコンポーネントデザイン

数ページのwebサイトであればいいのですが、何十ページ何百ページというボリュームがあるwebサイトでは全ページのデザインをするというのは現実的ではありません。
そのためある程度共通化したパーツを作成し、各ページで使いまわしていくという手法を取ることが多いです。
この共通パーツのことをコンポーネントと呼称しています。
コンポーネントは抜け漏れがあると後から新たにデザインをしたり調整をしたりということが必要になり工数にも遅れが出たりするという可能性があるため、提案書やワイヤーフレームをもとにUIのデザインはもちろん、見出しや通常のテキストや画像の掲載の仕方など細かな共通パーツの設計を行います。
コンポーネントが出来上がってから、webサイトの中で代表的なページやボリュームのあるページ、お客様がデザインで確認をしたいページを中心にページデザインを行います。

開発

開発レギュレーションの策定

実際のコーディングを始める前に、お客様の要望やデザインをもとに開発のレギュレーションを確認、または策定を行います。
お客様のほうでレギュレーションがある場合は、レギュレーションの内容をしっかりと確認し遵守します。
レギュレーションがない場合は、公開後の運用を見据えたレギュレーションを策定します。
合わせて複数のエンジニアが同時に作業する場合はそれぞれの役割分担や作業領域なども定め、開発をすするめる上で注意事項などについても確認し合います。

開発環境構築

コーディングを進めるには開発環境というものが必要になってきます。
近年のwebサイト制作はテクノロジーの進化とともに開発そのものが複雑化してきているということもあり開発環境の構築は重要な項目です。
WordPressなどのCMSを用いたwebサイトの場合は下層環境が必要になったりデータベースが必要になってきますので、組み込みを行う際にスムーズに進むように開発の環境を整えておく必要がありあます。
Webサイトのコーディングでは以下のような役割分担があります。

フロントエンド
- 静的な実装という呼び方をしたりしますが、HTML/CSS/JavaScriptなどを使用したコーディングのことを指します。これらは特にサーバーがなくても開発段階でブラウザから確認することができる内容です。ただしJavaScriptの内容によってはサーバーが必要になることもあります。
サーバーサイド（またはバックエンド）
- 主にサーバーを必要とする実装のことを指します。
  例えばお問い合わせフォームなどはサーバーを経由してお客様やユーザーに情報が届く仕組みになっているため、サーバーサイドスクリプトと呼ばれるサーバー上で稼働するプログラミングが必要になります。
  サーバー側で動作稼働する部分の実装を担うのがサーバーサイド（またはバックエンド）エンジニアです。

開発環境/本番環境などサーバーやドメインの設定

実装を進めるにあたり実際にwebサイトを公開する本番環境の設定やお客様にご確認いただくための検証環境（テスト環境やステージング環境とも呼ばれる）を準備していく必要があります。
これらを設定するタイミングはプロジェクトによって異なる場合もありますが、多くの場合検証環境はフロントエンドのコーディングと並行して行われお客様にご確認いただけるページが出来上がったタイミングではなくてはいけないものです。
また、WordPressなどのCMSを使用したサイトである場合は本番環境にサブドメインを作成させていただきそこに検証環境を構築することもあります。
また、本番環境に全てを反映するまでには必要なページのリダイレクト設定なども行います。
旧webサイトから新webサイトになる段階でURLが変わってしまい閲覧できなくなるページなども出てくるためリダイレクトの設定はとても重要です。

トップページの実装

ほとんどのプロジェクトではトップページからコーディングを進めることが多い傾向にあります。
先にトップページを実装しお客様にブラウザで確認いただいている間に下層ページの実装を同時に進めるという場合がほとんどです。

コンポーネントの実装

実際に下層ページの実装を進める前にコンポーネントのデザインを実装します。
これを実装することによって、全ての下層ページはワイヤーフレームで策定したテキストや画像をコンポーネントに流し込む形で実装していくことが可能になります。

CMS開発

近年のwebサイトの制作ではWordPressをはじめとするCMSを使用することがとても増えきていて静的なサイトの制作は以前に比べてかなり減少したと感じています。
特にWordPressは汎用性も高く多くのwebサイトの制作に導入されています。
ただ、多く使われていると言うことはそれだけリスクも高いことにもなりますのでCMSの開発や導入の際にはセキュリティ面の強化が必須です。
CMSの開発フェーズでは静的に制作したものをCMSに組み込むだけではなくセキュリティ面の実装も行います。

お問い合わせフォームなどバックエンド開発

多くのwebサイトには必ずといっていいほどお問い合わせフォームは存在します。
お問い合わせフォームはサーバーを経由してお客様やユーザーの元へ届きます。
ここでもセキュリティ面の強化は重要な要素となり、CMSのプラグインだけでは心許ない時代でもあります。
これらの実装はバックエンドと呼ばれるサーバー側の開発の一部です。

アクセスログ解析ツールの設定

Googleアナリティクスなどアクセス解析ツールを組み込みます。
アクセス解析ツールを使用することでwebサイトへの訪問数や、どんなワードでどんな人たちが訪問しどんなコンテンツを閲覧しているかなどのデータを収集することが可能となります。
アクセス解析ツールはさまざまなものがありますが、お客様の任意のツールをwebサイトに組み込むフェーズです。

検証/マニュアル作成

デザインチェック

全ての実装が完了するとデザインがしっかり反映されているかどうか確認します。
デザインのチェックは実装できたページから順に行う場合と、全ての実装が完了してから行う場合がありますが、概ね実装とへこうして行うことが多いです。
実際にブラウザで確認してデザインの調整が入ることもありますが、大きなデザインの修正は行わずあくまでも調整をするフェーズとなります。

単体テスト（ブラウザチェック含む）

Webサイトのテストにはさまざまなものがありますが単体テストと言うものがあります。
単体テストは一つ一つのUIやアニメーション、そしてCMSとして組み込んだ箇所のテストなどがあります。
お問い合わせフォームなどのテストもこの単体テストに含まれます。
テスト項目を書き出し、それぞれの使用に基づきテストを行います。
そのため要件定義や要求仕様の整理が重要であることがわかります。

全体テスト（ブラウザチェック含む）

全体のテストは全ての単体テストが終わった後に実際にユーザーが使用する前提のストーリを作成しテストを行います。

使い勝手に問題がないか
UIのデザインは適切か
アニメーションは過剰になっていないか
リダイレクトは正しく行われているか

など全体を組まなく検証し必要に応じて調整を行います。

CMSなどの運用マニュアルの作成

近年ではCMSの導入が一般化してきたことを考えると特にWordPressを触ったことがあると言う方々も増えてきています。
しかし、それでもまだまだこれらを直接触って運用していくと言うのはすぐにはできないことです。
Wepotでは運用に際しての使い方や注意点などを記載したマニュアルを作成しお客様が問題なく運用できるようサポートするためマニュアルを作成しています。

公開 / 運用準備

お客様最終確認（受け入れテスト）

全てのテストが完了しお客様に直接触っていただきながら最終の確認を行います。
要件定義書や仕様書をもとに、承っている要件を達成しているかどうかなどお客様にご確認いただきます。

公開作業/納品

全ての作業を終え一般公開をいたします。
Webサイトは作って終わりではなく、公開してからがスタートです。
Webサイトは制作することよりも運用することの方が重要で、運用次第で結果が大きく変わります。
Wepotでは公開してからの運用を見据えた設計をすることでお客様のご要望に応えられるよう勤めています。