はじめに
本記事にアクセスいただき、ありがとうございます！
A-ROOMは多摩地域にあるWeb制作会社が発信する
ウェブサイト・ホームページに関する情報ブログです。
前回の記事から、Webを作りたいと思った時に
知っておきたいことを以下の３つの分けてご紹介しております。
- 「Web制作を依頼する際に伝えること」
- 「そもそもWeb制作工程にはどんなものがある？」
- 「Web制作会社の選ぶ時にチェックするポイント」
前回は
1.「Web制作の依頼」編
詳細は以下リンクよりご覧いただけます。
今回は
2.「Web制作の工程」編
今回は「そもそもWeb制作工程にはどんなものがあるの？」
という疑問にお答えすべく、情報をまとめました。
Web制作を依頼したいけれど、
制作の流れや工程がよくわからないと悩んでいる方に向けて
具体的な流れを知っていれば、理想のホームページを実現する
ことの近道になるので、ぜひご確認ください！
目次
Webサイト制作の流れ（全体像）
Web制作の依頼〜制作までの流れ
依頼から制作着手までのステップは、大きく以下の3つに分けられます。
- 「お問い合わせ・見積り・発注」（契約までの工程）
- 「企画・デザイン・仕様設計」（上流工程）
- 「制作・実装・公開」（下流工程）
プロジェクト開始してからの流れ
さらに発注後のWebサイト制作の工程（上流・下流工程）は、
プロジェクト開始から公開後まで、大きく分けると8つのステップに
分けることができます。
制作工程の８ステップ
- コンセプトの開発
- 基本設計
- 詳細設計
- デザインの選択とコーディング
- システムへ実装する
- 動作の確認
- リリース
- 運用・保守
以降では、それぞれの工程でどのような作業が
必要なのかを解説していきます。
STEP.1：コンセプトの開発
新規制作、リニューアルに関わらず、目的・目標・ターゲットユーザーを
明確にするために、ペルソナ設計を行います。
これが明確でないと、デザイン・制作過程での判断基準が不明確となり、
プロジェクトが混乱したり、制作後も目標が達成できなかったりする
可能性があります。
コンセプトに関しては、なるべく詳細に作成しましょう。
チェックしたいポイント
達成したい目標に向けて、コンセプトに違和感がないか、
チェックをしましょう。
もし違和感がある場合は、参考サイトを提出し、
認識をすり合わせていきましょう。
STEP.2：基本設計
基本設計を立案します。
前述のコンセプトの策定により、適切なテーマ、コンテンツポリシー、
ページ数などを決定します。次に、ディレクトリ階層やメニュー構成など、
サイトの骨格を構築します。
さらに、コンセプトに沿った画面レイアウト（ワイヤーフレーム）を作成します。
この工程はにつきましては、リードデザインと呼ばれることもあります。
チェックしたいポイント
ターゲット層・自社イメージのサービスにあった
構成・デザインの世界観になっているかのチェックも大切です。
STEP.3：詳細設計
基本設計をベースに、各ページの情報を整理し、
テキストや画像などをワイヤーフレームに落とし込みます。
同時に、ワイヤーフレーム用の素材も準備します。
また、基本設計の段階で、次のステップである
TOPページの設計を進めるケースもあります。
チェックしたいポイント
ここでは、Webサイトに落とし込みたい情報・ゴールが
きちんと機能面も含めて設計されているかを確認しましょう。
STEP.4：デザインの選択とコーディング
デザイン制作は、Webサイト制作の目的やターゲットとなる
ペルソナに基づいて行われます。
一般的には、TOPページやメインページから方向性を定め、
下層ページのテンプレート制作を進めていきます。
デザインの方向性がぶれないように、ボタンやメニュー、
レイアウトなどのパーツをまとめて制作することで、
複数のメンバーでデザインしても統一感のあるWebサイトデザインに仕上がります。
デザインが固まりましたら、実際にデザインをサイトに
反映させるためにHTMLやCSSを記述する「コーディング」の段階です。
チェックしたいポイント
コーディングに入ってしまうと、デザインの修正はできなくなりますので、
もし要望と違っている場合はこの段階までにきちんと伝えましょう。
STEP.5：システムへ実装する
コンテンツやデザイン、機能が固まりましたら、
いよいよ実装の段階に入ります。
HTMLで作成したサイトの場合、サイトの構成や装飾を
言語で記述（コーディング）していきます。
また、CMSなどのツールを使用する場合、
サイトの基本構造をカスタマイズしたり、新しい機能を実装するためには、
HTML、CSS、PHP、JavaScriptなどの言語によるコーディングが必要です。
チェックしたいポイント
実装作業は見えない部分ですので、ここではいつまでに何が完成し、
どういった部分を段階的に確認すべきかスケジュールの把握をしましょう。
（例）トップページはいつ完成するか？
STEP.6：動作の確認
Webサイトの構築が完了したら、テスト環境での動作チェックを行います。
- 設計通りの仕様になっているか？
- 対象ブラウザで正常に動作するか？
- 文字化けやレイアウトの崩れはないか？
などを確認します。
また、JavaScriptが動作しているか、
サイト内検索やアクセス測定タグなど付属の機能が備わっているかを確認します。
テストで動作に問題がなければプロジェクト完了となり、
リリースに向けた作業を行います。
チェックしたいポイント
基本的な動作確認は制作会社側で行いますが、
自社で使用するPCやスマートフォンなどでも
きちんと問題なく閲覧できるか、確認しましよう。
STEP.7：リリース
仕様に沿ってWebサイトを構築し、正常に動作することを確認しましたら、
Webサイトを公開します。
サーバーにファイルがアップロードされていることを確認し、
ドメイン名を設定します。
リニューアルに伴うURLの変更がある場合は、
リダイレクトの設定も必要です。
リダイレクトは、ユーザーやクローラーが迷わないようにするもので、
SEOパワーも引き継ぐことができます。
チェックしたいポイント
リリース日時については、事前に制作会社と取り決めを行い、
問題があった際の双方の担当者・緊急連絡先などを確認しましょう。
また、リリース直後には必ずテストを行い、問題があれば
すぐに制作会社へ調整を依頼するようにしておいてください。
STEP.8：運用・保守
サイト公開後は、定期的な点検・保守運用を行います。
サイト作成ツールや付属機能を最新版に更新する必要がないか、
トラフィックの増加に対応するためにサーバーのアップグレードが
必要ないかなどを確認します。
また、新機能の追加やレイアウトの変更など、
調整が必要な場合もあります。
チェックしたいポイント
運用については、別置費用がかかる会社がほとんどですので、
事前に運用作業にいくらの予算がかかるのか、どんな内容を提供してもらうか、
確認と取り決めをしておきましょう。
まとめ
各ステップごとに重要項目が異なるため、
本記事が制作を依頼する前に把握する参考になればと思います。
目的を達成するWebサイトを構築するためには、
正しいプロセスで進めることが重要で、
各プロセスでチェックポイントが異なります。
Webサイトの制作は、制作会社に任せきりになる部分が多いですが、
事前に制作会社の工程と内容を理解することで、
効率的にプロジェクトを進めることができますね。
あわせて読みたい記事
Web制作依頼編
ペルソナ・ドメイン・SEOって何？
新着記事
ブランドサイトとは?
キャンペーンサイトとは?
ランディングページとは?
ECサイトとは?
当社の実績はこちら
ここまでお読みいただき、誠にありがとうございました！
今後も多摩地域・立川にあるホームページ制作会社として地域の皆様、 ホームページに関わる皆様に向けてお役に立てる有益な情報発信ができるよう努めて参ります。