WEBサイトを制作する際の基本的な流れをご紹介していきます。WEBサイトの作り方は何となく分かるけど、業務としての流れって一体どうなってるの？と気になる部分もあります。
今の時代、サイトは個人でも全然作れます。ただ、プロはどの様な流れでサイトを作成しているのか理解する事でサイト作成のレベルがぐっと上がるはずです。今個人でサイトを作成しているけど、何かちょっともの足りないという場合には非常に参考になるのではないかと思います。
※このサイトの別記事で紹介している様なWEBアプリ等を制作する際にも、クライアントから依頼を受けた場合は、基本的には同じ様な流れで制作する事が多いです。ただ、サーバサイドの開発工数が大きい場合は、システムのプロジェクト開発方針を使用する事が多いです。
この記事は以下の様な方に参考にしていただけると思います。
- サイトを作る工程が分からない
- サイト制作会社に就職・転職したいので仕事の流れを予習しておきたい
- 現在サイトを作成しているが、なかなかクオリティがあがらないので、プロのサイト制作工程を知りたい
- サイト作成の工程を知る事でWEBアプリの作成に活かしたい
コンテンツ
WEBサイトを制作する流れ
では、WEBサイト制作会社が、サイトを制作するまでの一般的な流れをご紹介します。
※私がサイトを作成する際の基本の流れでもありますし、実際に私の友人が経営しているWEBサイト制作会社でも行っている仕事の流れになりますので、参考になるかと思います。
１．受注
まずは、クライアントからWEBサイト制作の仕事を受注します。
まずはクライアントが持っているイメージをしっかりと掴む事が重要になります。具体的にどの様なサイトを作るのかはこの後の工程で行いますが、ビジネス的な部分で、どの位の金額で、どの位まで実現させる事ができるのか？を即座に判断しなければならない事もあります。
ここからWEBサイト制作の作業の一連の流れが開始します。
２．要件・要望のヒアリング
サイトを作る目的を明確にして、作成するアウトプット（WEBサイト）のイメージの擦り合わせを行います。
クライアントが求める内容により、WEBサイトに必要な機能、ページ、デザイン等が全く変わってきますので、要件を詰めて何度もヒアリングする位の気持ちで行った方が良いです。
また、ヒアリングと同時に「こんな事もできますよ。」という提案も行ってＯＫです。機能を追加する事で、より良いサイトになる事もありますから。
さらに、この時点で、「クライアントが求めているもの」が何なのかを明確にする必要があります。HTMLサイトなのか、CMS系サイトなのか、PHP等でサーバ再度の開発が必要になるのか？等々。※この点については詳しい話はまた別記事でご紹介します。
場合によっては、格安のサイト作成サービスを使用するだけで事足りるケースもありますから、しっかりと要望をキャッチしておく必要があります。
３．マーケティング・調査
マーケティングに関してはどこまでやるかはバラバラですが、WEB上で集客する方法などを知っている場合は、それを武器にする事もできます。サイトを作ったとしても、誰も訪れないのではやはり意味がありませんからね。
仮に、マーケティングの一つとしてSEO対策を行うのであれば、他の競合サイトの調査を行った上で、サイトのタイトルにSEOキーワードを含める事などを提案しても良いと思います。
４．ワイヤーフレーム作成
ワイヤーフレームはWEBサイトのレイアウト設計図になります。ざっくりとした設計図で、イメージ写真などはこの時点では登場しません。
サイトを作るために必要な（以下の様な）部品を、どの様に配置するかを決める作業になります。
- ヘッダー
- グローバルナビゲーション
- メインコンテンツ
- サブコンテンツ
- フッター
- 各種画像
- テキストデータ
作業者の中でワイヤーフレームを共有しておく事で、デザイン・コーディング等を行う際の認識ずれを防ぐ事ができる様になります。
ディレクトリマップも作成
ディレクトリマップは、サイトの各ページやディレクトリの構造を分かりやすくしめしたものになります。ディレクトリマップを作成しておく事で、サイトのボリューム感なども把握する事ができます。
ドキュメントレベルで良いので、この時点でのディレクトリマップも作成しておきましょう。
※後続の工程で修正があった場合には、このディレクトリマップにも反映しましょう。
５．デザインカンプ作成
デザインカンプはWEBサイトの完成イメージ図を指します。
上記のワイヤーフレームとは違って、サイト上の各オブジェクトの色やデザイン等は基本的にここで決める事になります。
完成したWEBサイトで写真などを使用する場合は、デザインカンプ上でも実際に使う想定の写真を載せます。クライアントにも見せるものになりますので、本格的なデザイン工程となります。
また、画像とテキストの間の幅など、細かい部分までここで決めます。
デザインカンプはphotoshop等の画像編集ソフトを使用して作成するのが一般的です。
６．コーディング
HTML、CSS、JavaScript等でフロントサイドと呼ばれる部分を作成します。デザインカンプを基にして、実際にWEB画面を作っていきます。クライアントから素材（文章、画像等）を受け取っている場合は、デザインカンプの通りにそれらを配置していきます。
ただ、実際はワイヤーフレームを作成した時点で作り込みを開始する事が多いです。
文章作成も行う？
サイトの中で使用される文章は基本的にはクライアントから素材をもらいます。もしくは、クライアントとの打ち合わせを基に文章にします。こちらで、文章自体を書くことはめったにありません。
７．プログラミング
エンジニアの方であれば、コーディングとプログラミングって同じじゃない？と思うかもしれません。私も最初そう思いました。
ただ、WEBサイト制作の場合はプログラミングはPHP、Ruby、Node.js等によるサーバサイド側の作成を指す事が多いです。エンジニアとしては一番力の見せ所です。
単なるWEBサイトではなく、プログラムによる機能を付けたいという場合はこのプログラミングが必要になります。WEBデザインを行う会社が増えている中で、差別化が図れますし、会社の強みにもなる仕事です。
また、特別な機能を追加すれば、WEBサイトではなくて立派なWEBアプリケーション・プロダクトと認識してもらう事もできます。
８．テスト
次はテストを行います。テストの内容は一般的に以下の様なものになります。
デザインの確認
主に以下の様な事を確認します。
・デザインカンプで作成した通りのデザインがなされているか。
・PC、タブレット、スマホそれぞれで表示した際にレイアウトが崩れていないか（レスポンシブ対応）。
コーディング、プログラミングの確認
主に以下の様な事を確認します。
・WEBサイトのフロント側・サーバ側で想定通りに画面機能が動くか
・WEB画面の処理性能に問題はないか
テキストの確認
主に以下の様な事を確認します。
・サイトの中に記載されているテキストに誤りがないか。
・テキストのフォントは妥当か（デザイン側で確認する事もあります）
総合的なテスト
デザイン、プログラム、テキストの内容に問題がなければ、サイト全体として要件通りに動作するかを確認します。
各テストの中から抜粋して行ったり、全体的なイメージが問題ないか等を確認する事が多いです。
９．テストサイトアップロード
一旦テストが完了したら、完成したサイトをサーバにアップロードします。サーバにアップロードをしたらクライアントも確認できる様になるので、連絡をしてクライアントにも確認をしてもらいます。
この時点で修正が入る事も多いです。その場合は、必要な工程まで戻り、再度サイトの作成やテスト等を行う事になります。
１０．運用・保守
一旦サイトが完成したら、サイトの運用・保守作業も担当する事が多いです。しばらくの間は何かサイト上で問題が発生した際に、緊急の対応を行う事もあります。
運用の仕事で信頼を得る事ができれば、サイトのリニューアル時に再度仕事の依頼が来る事も多いです。
まとめ
今回はサイトを作る流れについて紹介をしました。
以前私は、独自の方法でサイト作成をしていましたが、プロが行っている制作工程を学ぶ事で、計画的にサイト作成を行う事ができる様になりました。やはり制作の原理というのはしっかりと掴んでおいた方が良いです。
システムの開発工程とも非常に似ているので、もの作りをする時の参考にもなるかと思います。
最初から、これらの工程を全て完璧に行う事は難しいかもしれませんが、少しずつ取り入れられる部分を取り入れて、サイトのクオリティアップを図れる様にしましょう。
