「Webサイトの制作工程が知りたい」
「各工程でどんなことをしているの？」
「ざっくりと作業工程を教えて！」
Webサイト制作の工程を調べてみても、専門用語ばかりでイマイチよくわからずお困りではありませんか？
この記事ではWeb制作会社であるじゃぱそんが、Webサイト制作の工程と各工程の作業内容を解説します！
難しい専門用語もかんたんに解説し、Webが苦手な方でもわかるようにしましたので、ぜひ最後までご覧ください。
ヒアリング
Webサイトの制作は、発注者へのヒアリングから始まります。
ヒアリングの目的は、以下です。
- 現在の問題点を明確にする
- ゴールを設定する
- 撮影や動的機能が必要か判断する
まずは現状のサイトが抱える問題点を明確にします。
「既存のページでは自社で更新ができない」
「何年も前に作ったので、画面のサイズが小さい」
など、管理体制やサイトの目的によって問題点は様々です。
専門家である制作会社によるヒアリングは、発注者自身が気付けない問題点まで浮き彫りにします。
問題点を知ることで「更新しやすいサイトに」「スマホでも見やすいサイトに」といった、問題解決のための案を導き出します。
問題が解決された理想的なサイトをゴールとし、Webサイトの制作をとおしてゴールの達成を目指します。
設定したゴールの達成には、写真素材や機能が必要となることもあるでしょう。
たとえばサイトを更新するスタッフの人柄を伝えるために、スタッフの写真やオフィスの写真をサイト上に掲載することもあります。
写真のほかにも、動的機能が必要になることもあるでしょう。
動的機能とは、ユーザー毎に表示する内容を変える機能です。
たとえば会員制のサービスでは、予約状況や獲得したポイントなどがユーザーごとに異なります。ログイン機能などを使い、ユーザーごとに適切な内容を表示するのも動的機能の一種です。
ゴールの実現に必要な機能や素材などがわかれば、サイト制作の全体像が見えてくるでしょう。
このように、ヒアリングを通じて発注者と制作者の間で目的を共有していきます。
調査・分析
ヒアリングによって、解決したい問題とそのゴールがが見えたら、調査や分析をしながらゴール達成の実現性を確かめます。
競合調査によって今後のライバルとなるサイトや参考になるサイトを調べ、分析によって自社の強みと弱みを探るイメージです。
具体的には、以下のような要素をチェックします。
- 競合サイトの調査
- 類似サイト間でのポジションマップ
- 問題解決に必要な機能
- リニューアルの場合は現行サイトの分析
競合サイトの調査や類似サイト間でのポジションマップにあわせて、Webサイトの設計を修正します。
ポジションマップとは、競合優位性を導き出すための手法の一つです。
価格帯や商品の特性を縦軸と横軸に定め、2次元のマップ上で各商品の関係性を把握します。
競合サイトからヒントを得て、問題解決に必要な機能が見つかることもあるでしょう。
リニューアルの場合は、調査と併せて現行サイトの分析も重要です。
サイト分析では仮説を立てる事がなによりも重要で、たとえば「スマホの閲覧数が少ないのは、サイトがスマホ画面に対応していないせいではないか。」という仮説から対策を練ります。
データに基づいた仮説を立てていれば、対策が成功しているかどうかもまたデータで検証可能です。
アクセス経路や人気のページを分析して、サイト訪問者にとって満足度の高いWebサイトを目指します。
提案
調査や分析の終了後、制作会社から見積やスケジュールの提示とともに、制作するWebサイトについて提案が出されます。
ヒアリングや調査を経て、ようやくサイトの目指すべき場所が明確になった段階です。
提案を受けてから発注までの前後に、次の表のような項目を決定していきます。
| 決めるべき事 | 詳細 |
| サイトのコンセプト | サイトが伝えたいメッセージ。何をするサイトか、なぜユーザーが訪問するのかなどの問いから導き出す。 |
| ターゲット | 客層を年齢や性別、属性などを分けたもの |
| ペルソナ | 製品やサービスを利用する架空のユーザー像。ターゲットよりもさらに詳細な情報まで設定する。 |
| サイト名やキャッチコピー | サイトや商品の魅力を伝え、覚えてもらうための短い文章。場合によってはコピーライターに依頼する |
| サイトマップ （ディレクトリ階層の構成案） | サイト内の全てのページを組織図のような形で一覧にしたもの |
| ワイヤーフレーム | 各ページの設計図のようなもの。レイアウトの基本となる |
| トップページデザイン | サイト全体のトップとなるページ、そのデザイン。 現段階ではサンプル画像やテストテキストで構成する |
受注・契約
ここでようやく契約書を取り交わします。
契約書のほかにも、以下のような項目は書面で交わす方がよいでしょう。
| 交わすべき書面 | 詳細 |
| 仕様書 | Webサイトのページ数や必要機能をまとめたもの |
| 案件定義書 | 発注者の要望と、その要望をどのように叶えるかを文章でまとめたもの |
| 秘密保持契約書 | 業務に関して知った秘密（営業秘密や個人情報など）を第三者に開示しないとする契約。 |
この段階から制作会社の内部で編成チームが組まれ、デザイナーやコーダーなど各役割の担当者が決定します。
デザイン制作
デザイナーによるデザイン制作が始まります。主にワイヤーフレームを使って、トップページやひな形となる主要ページを制作していきます。
制作会社にもよりますが、トップページから順番に下層ページへとデザインを進めることが一般的です。
発注者に以下のようなことを確認しながら進めていきます。
| 確認事項 | 詳細 |
| ロゴやアイコン | 企業や商品のロゴなど |
| トーン＆マナー | ブランディングにおける、デザインの統一性のこと |
| 配色設計 | ブランドのイメージカラーの有無など |
| イラストのテイスト | イラストを使用する場合、ブランドのイメージに合っているか |
Photoshopやillustratorなどの編集ソフトを使って制作することが多いです。
次のコーディングの作業がしやすいように、レイヤー分けという画像を切り離す作業や、文字をアウトライン化してコピーできるようにする作業も行います。
アウトライン化とは、かんたんにいえば文字を図形に変えてしまうことです。図形は文字化けを起こさないので、アウトライン化することで特殊なフォントでも見た目を崩さずに表示できます。
コーディング(フロントエンド)
デザインができたページから順番にコーディングを開始します。
コーディングとは、HTML/CSSというコンピュータの言葉でページを組み立てることです。画像やテキストをどう配置するかなどを、HTML/CSSで書き上げていきます。
以下の項目も、コーディング段階で設定されます。
- ページの遷移
- スライドショーなど画面上の機能
- SNSでシェアされた際の表示
- 検索エンジンにページ情報を伝える設定
環境
完成が近づいてくると、納品データに対応した環境の準備を行います。
具体的には以下を用意します。
| 用意するもの | 詳細 |
| サーバー | Webサイトのデータの置き場所。大量のアクセスに対応できるかなどに関わる |
| ドメイン | インターネット上の住所のようなもの、URLともよばれる |
| データベース | データの保存・管理を行うシステム。 |
使用するサーバーによってPHPバージョンが変わる場合も有るため、サーバーとドメインは早めに決めておくとよいでしょう。
PHPバージョンとは、プログラミング言語であるPHPを細かくバージョンごとにわけたものです。PHPはバージョンごとに仕様が異なるため、動作環境のPHPバージョンは制作会社にとって重要な情報となります。
システム設計・開発(バックエンド)
コーディングの終了後は、バックエンドの開発が始まります。サイト訪問者には見えない裏側で働くシステムの開発です。ブラウザとサーバーの間で行われるやりとりを実装していきます。
開発されるのは、以下のような機能です。
- メールフォーム
- 受付フォーム
- マイページ機能
- ログイン機能
- カート機能
- アプリ開発
検証(環境別の動作チェック)
システムの構築まで終了したなら、Webサイトが正常に動作するかチェックしていきます。
以下のように環境を変えながら、不具合なく動作するかをチェックします。
- デバイスの違い（PCやスマホなど）
- OSの違い（WindowsやMacなど）
- ブラウザの違い（ChromeやIEなど）
- 表記間違えやデザインの崩れがないか確認
制作会社が確認を済ませたあとは、発注者にて最終チェックします。サイト訪問者の視点でチェックするとよいでしょう。
チェックが完了したら公開に向けて進んでいきます。
公開
発注者と制作会社間で公開に向けて準備を進めます。公開方法や公開希望日時について、制作会社と打ち合わせしておくとよいでしょう。
納品方法によって、公開前後の制作会社の作業が変わってきます。
| 納品方法 | 詳細 |
| HTMLデータ納品 | 発注者自身で公開作業を行う場合など、HTMLのデータの引き渡し時点を納品とするパターン |
| サーバーへのFTPアップ | 最も一般的な納品形式。データをサーバにアップする作業 |
| 管理画面からのデータアップ | 管理画面が存在するプラットフォームなどへの納品 |
公開日を事前告知している場合は、タイマー機能で公開できるかどうかも確認しておくとよいでしょう。
また公開前後は最もトラブルが起きやすいタイミングです。トラブル対処方として、深夜や休日の対応方法も確認しておくことをおすすめします。
保守・管理
公開後の保守・管理を継続して依頼する場合もあります。
たとえば以下のようなサービスの更新作業などです。
- レンタルサーバー
- 独自ドメイン
- ASPサービス
そのほか、個人情報など収集データの管理、セキュリティの最適化なども管理が必要です。サーバーパンクや停止の可能性がないかといった、専門的な知識が必要になる場合もあります。
更新・運用
Webサイトは、公開後も運用が続いていきます。コンテンツの更新や、アクセス分析と改善などを引き続き外部へ委託することもあるでしょう。
シチュエーションに応じて、以下のような作業が必要です。
| シチュエーション | 業務内容 |
| 通常運営 | 追加ページ掲載 |
| アクセス解析 | |
| SEO | |
| コンテンツ制作 | |
| お知らせ情報発信 | |
| SNS運用 | |
| ECサイトや販売代理店 | 運営代行 |
| アフィリエイト運用 | |
| 広告運用 | |
| キャンペーンサイト （プレゼントやアンケート） | 抽選、商品の発送 |
| 掲載終了 | |
| 投票結果掲載 | |
| 投稿画像掲載 | |
| 社内業務のサポート | 運用マニュアル |
| 掲示板サービス | |
| 導入サポート |
全ての作業を自社で行うにはかなりのリソースが必要となるため、必要に応じて外注することをおすすめします。運営についての相談は早い方がよいので、ヒアリングの工程で打診してみるとよいでしょう。
