企業のWeb担当者の方は既にご存知かもしれませんが、Webサイト制作をするにあたり、ある程度の流れというのは存在します。
初めての方はWebサイト制作の流れがわからないかもしれないので、この記事に丁寧に解説したいと思います！
Webサイト制作の流れ概要
はじめに、Webサイト制作の流れをサクッとご説明したいと思います。
- 初回打ち合わせ/ヒアリング/仕様決定
- サイトマップ作成
- ワイヤーフレーム作成
- TOPページデザイン作成
- 下層ページデザイン作成
- コーディング開始
- テストページ公開
- 本番移行
一般的なWebサイトの制作はこのような流れで進みます。では以下に、各工程を大分類で分けて詳しく説明していきたいと思います。
サイトのイメージを共有する
Webサイト制作を始めるにあたり、一番最初の工程になります。
1.初回打ち合わせ/ヒアリング/仕様決定/現状確認
まずは新しくできる、もしくはリニューアルされるサイトのイメージを制作会社と共有します。
制作サイドからのヒアリングを通して、「こんな風にしたい！」という参考サイトの共有などを行います。
他にも、投稿機能やEC機能など、この段階で必要な仕様を洗い出し、共有を行ったり、サーバー/ドメインなどの契約状況の確認も併せて行います。
サイトの骨子を決めていく
続いてはサイトの骨組みを決めていきます。
2.サイトマップ作成
サイトマップとは、Webサイトの地図のようなもので、どういったページがどれだけ存在し、どういう風にリンクされるかを図式化した資料になります。
この段階でWebサイト制作費用算出に重要な「サイトのページ数」というのが明確になります。
また、必要な情報をどのページに入れるかをこの段階で決めておくと、今後の工程もスムーズになります。
3.ワイヤーフレーム作成
サイトマップでサイト自体の構成が決まったら、次はページ単位で「ワイヤーフレーム」という資料を作成していきます。
ワイヤーフレームとは、読んで字の如くになりますが、デザインの前段階の骨組みのようなものになります。
デザインで肉付けをする前に、どこになんの情報を掲載するのかページデザインを簡単に作成を行い、情報の整理をします。
サイトのデザインを決めていく
サイトの骨子が完成すると、肉付けであるデザインを行います。
4.TOPページデザイン作成
Webサイト制作において、一気に全てのページをデザインする、というのはあまりおすすめできません。
まずはTOPページからデザインを行い、サイトで使用するフォント、カラー、トーンなどを決めていきます。
これを共有する前に全ページデザインしてしまうと、修正の手間が半端なくなってしまうので、まずはTOPページから始めるのが一般的となります。
ちなみに、WebサイトのデザインにはPC用のデザインとSP（スマホ対応）のデザイン2種があります。
5.下層ページデザイン作成
TOPページのデザインが決定したら、次は他の下層ページのデザインに入ります。
この段階に差し掛かると、依頼側もサイトに使用する原稿や画像など、色々と準備が必要になってきます。
下記の記事で詳しい準備物を記載していますので、是非参考にしてみてください。（リニューアルに関してですが新規制作も大体同じです）
デザインをブラウザに起こしていく
Webサイトのデザインが無事決まると、よく聞く「コーディング」という作業に入っていきます。
6.コーディング開始
サイトのデザインが決定するとWebサイト制作も終盤に入り、デザインをコードで書いてブラウザ上で見れる状態にしていく「コーディング」という作業に入ります。
コーディング作業を始めると、デザインの変更が難しくなってくるので注意しましょう。
多くはWPというHP管理ソフトを通してHPを管理できる状態にするので、WP導入作業などもこの段階に入ってきます。
7.テストページ公開
ここからはサーバーやドメインの状況にもよるのですが、まずはテストページにてコーディングが完了したサイトをブラウザ上で確認します。
サイトのアニメーションや文字、画像のサイズ感、スマホでの見え方など細かく確認し、このテストページの段階で全ての修正を行います。
また、投稿機能などの確認もこの段階で行います。
Webサイトが完成！
テスト環境で確認ができると、無事本番公開です！
8.本番移行
これもテスト環境と同じく、例えば新規でドメインを取得する場合は必要の無いこともありますが、本番環境への以降を行い、一般的に見れる状態となります。
ここまでくると、無事サイトは公開されます！お疲れ様でした！
まとめ
企業のWeb担当者向けにWeb制作の一般的な流れを解説しました！
全てのサイト制作がこの流れに沿うわけではありませんが、一般的にはこんな感じでWebサイト制作は進んでいきます。
少しでも皆様のお仕事の参考になれば幸いです！
