バナオの奮闘記

筑駒→東大→コンサルとエリートコースを歩んだ後、起業に挑戦したら大失敗。今はとある社長のもとで修行中の身。

WEB制作のワークフロー

7/18分。

WEB制作のワークフローをまとめておく。

 

 

 

オリエンテーションヒアリング

まずは、依頼主がWEB制作会社に、オリエンテーションで作りたいWEBサイトの概要を伝える。

この段階では、WEB制作の目的およびWEB制作に絡む外部要素はあるか、が明確になっていると良い。

 

目的は例えば、、

・WEBサイト全体のリニューアル

・新製品発売に伴うブランディングサイトの構築

などだ。

 

WEB制作に絡む外部要素はあるかについては、例えば、、

・CMが連動して制作される

・別の広告媒体からWEBサイトに顧客を誘導する

といったようなことだ。

 

外部要素がある場合には、段階的なリリースが必要になったり、スケジュールの縛りがきつくなったりすることがある。

これらは事前にWEB制作会社に伝えておきたい。

 

 

要求定義・要件定義

次に、"要求"をクライアントからWEB制作会社に伝える。

要求というのは、クライアントがどのような課題解決のためにWEBを制作するのかということだ。

 

例えば、

・既存のWEBサイトのコンバージョン率が悪いため、サイトを改修して改善したい

 

その要求を整理した上で、要求を満たすための要件を定義していく。

 

また、併せて以下も明確にしておく必要がある。

・作業範囲と内容

・WEBサーバの仕様

CMSの要否

・(動画コンテンツがあれば)動画用のサーバはどうするか

・(連動する紙媒体の広告があれば)スケジュールの連動

 

 

プレゼンテーション

WEB制作会社が、依頼主にプレゼンテーションをする。

この時には、具体的なイメージをもたせるために、ワイヤーフレームを切ったりする。

 

また、ビジュアルデザイン・UI・UXに関しても提案する。

 

 

制作仕様策定

制作仕様としては、以下のようなものがある。

 

・WEBページ基本設計

WEBページレイアウトの基本的な設計。ヘッダやフッタ、カラムなど、基本的なレイアウト構造

 

・コーディングルール

HTMLやCSSの記述書式に関するルール

 

・ファイル名ルール

HTMLや画像ファイルなどの命名規則

 

・id、class名ルール

idやclass名などの命名規則

 

・データ構造

WEBサイト内のデータ設置構造。共有ファイルや各コーナーごとのHTMLや画像ファイルの格納ディレクトリなどのルール

 

 

基本テンプレート制作

ヘッダ・フッタ・メインコンテンツ・サイドバーなどをdiv要素などで指定したHTMLテンプレートを作成する。

ヘッダには企業名・ロゴなどが、フッタには著作権情報などが配置される。

 

テンプレートは、コーナーごとに用意する。

例えば、企業情報・サービス情報・商品情報・IR情報などのコーナーだ。

 

また、テンプレートの作成において、head要素内の記述ルールは統一しておく。

スマートデバイス向けのmeta要素や、いいねボタン生成用のOGPコードや、アクセス解析用のスクリプトや、InternetExpolorerの下位バージョンに対応するための記述や、CSSへのリンクや、ファビコンへのリンクなど、前ページ共通して記載する内容が含まれるからだ。

 

 

モックアップ制作

モックアップは最初はワイヤーフレームに近い形で機能提案を行う。

必要に応じて、CSSによる簡易スタイリングやJavaScriptによる動作も実装する。

 

初期段階でのモックアップはHTML・CSSJavaScriptともに、簡易的にコーディングしておき、制作過程での変更にも柔軟に対応できるようにしておく。

JavaScriptjQueryなどのフレームワークおよびそのプラグインによって、開発を効率的かつスピーディに進める。

 

 

ビジュアルデザインと画像パーツ制作

ビジュアルデザインとコンテンツの中で使用される画像を切り分けて制作していく。

ビジュアルデザインとして使用する部分は、画像で作成するのかCSSによって表示させるのかを判断することになる。

この判断においては、メンテナンス性やデータ容量などが判断基準となる。

 

また、CSSスプライトが使用されるケースも増えている。

メニューボタン画像や画像で表現するグローバルナビゲーションなどは、CSSスプライト処理に適している。

 

 

コーディング

ここまで来て、実際のコーディング作業に入る。

コーディングの際には、改めてレギュレーションルールを統一を図っておく。

また、コーディングツールも統一しておいた方がいい。

この段階で、JavaScriptの実装を担当するエンジニアにも入ってもらい、バックエンドの機能もスムーズに実装されるようにする。

 

 

テスト公開と検証作業

検証時の主なチェック項目は以下の通りである。

・バリデーション(HTML、CSS

・キーワード、ディスクリプションの確認

・ファビコンなどの設置状況

・OGPタグの記述内容

アクセス解析タグの記述内容

・コンテンツ校正(文言・画像の確認)

ユーザビリティ確認

アクセシビリティ確認

機種依存文字など不正データの有無

・リンク確認

・フォームプログラム等の動作確認

JavaScriptによるプログラムの動作確認

・ソーシャルボタンの動作確認

・ターゲットブラウザでの表示・動作確認

・タッチデバイス等での表示・動作確認

・不要データの有無

 

 

 

納品・公開作業

基本的に、制作仕様策定で定めた通りのレギュレーションに則り、完成データが納品される。

 

基本的には、WEB制作会社から納品されたデータを、依頼主側でアップロードするのが一般的だ。

また、アップロードの際には、一旦テスト環境にデータをアップロードして最終チェックしてから、本番環境にFTPなどでデータをアップロードする。

 

 

運用・更新作業

運用およびコンテンツの更新作業は極力、省力化し、品質は均一化したい。

 

そのため、ガイドラインを制定すると良い。

ガイドラインに含める項目は以下の通りである。

・HTML、画像などのデータ設置方法

・雛形として利用できるHTMLデータの利用方法

・更新時の検証/承認フローおよびドキュメントフォーマット 

 

WEB制作会社に更新を依頼する場合には、更に以下の項目も必要だ。

・更新スケジュール

・更新時の素材提供ルール、提供スケジュール 

 

 

Webサイトの検証と効果測定

GoogleAnalyticsや、フォームへのアクセス結果などをもって、元々の要求が満たされているかを検証する。 

検証結果を踏まえて、サイトの修正計画を立てていく。

この繰り返しによって、PDCAを回していく。