Web制作の流れ
基本的なWEB制作の流れについてまとめた資料です。
1〜9の順番に進めていきましょう。それぞれの工程でどのくらい時間がかかるかを想定し、納品・締め切りまでのスケジュールを立てていきます。
目次
ヒアリング
クライアントの要望を確認し、ターゲットユーザー設定やコンセプトメイキングを行います。
また公開日までの詳細なスケジュールを作成します。
コンセプトメイキングではまずサイトを作るための目的を明確にします。
目的を明確にした後、それを達成するための具体的な手段（コンセプト）を考えます。
それによってどのようなコンテンツ・ページ構造・デザインにしていくかを決定します。
ヒアリングの前に、事前にお客さんにどのようなことを確認しておいてほしいかを整理するため、「ヒアリングシート」というものがあるとその後の打ち合わせもスムーズに進みます。
参考記事：
https://www.gpol.co.jp/blog/66
ヒアリングシートで得た情報を取りまとめ、企画書を作成しましょう。
WEBサイトを作成する目的、達成したいこと、それを実現するためのデザインコンセプト、具体的なスケジュール感をまとめプレゼンを行います。
この工程を通して、クライアントと制作者との間で作るものを明確に決め、イメージの共有をすることが大切です。
情報収集
ページに掲載するテキスト情報と画像情報（場合によっては動画や音声情報）を集めます。
多くの場合クライアントから一式受け取ることになりますが、撮影や準備が必要な場合、誰がどのように行うかを決定します。
ワイヤフレーム作成
Webデザインは掲載する情報が多く、複数ページのデザインとなるためデザイン作成前にワイヤーフレームを作成します。
ワイヤーフレームでは色や詳細なデザインのことは考えず、レイアウトのみを考えることになります。デザイン作成のための設計図と考えてください。
（色をつけてしまうとWEBサイトに対するイメージが生まれてしまい、後の工程のデザイン制作でイメージとの乖離が生まれてしまう可能性があります。）
またワイヤーフレームの段階でクライアントの確認を取り、決定後は掲載する情報や構成、また大幅なレイアウト変更が起こらないようにします。
ワイヤーフレーム 参考：
https://n-works.link/blog/webdesign/wire-frame
デザイン作成
ワイヤーフレームを元に、具体的なデザインを作成します。
この段階で大幅なレイアウト変更は行わず、あくまでレイアウトはワイヤーフレームに従います。
作成後クライアントに確認を行い、決定後は大幅なデザイン変更が無いようにします。
デザイン素材の書き出し（スライス / アセット）
デザインから素材の書き出しを行います。
単独で扱われる写真や画像を中心に書き出しをします。
画像の種類によって形式を選び、適切なファイル名を付けます。
ファイル名のルール
ファイル名は必ず半角英数字で付けます。
使用できる記号はハイフン（-）またはアンダーバー（_）のみとなり、その他の記号やスペース（半角全角問わず）は使用できません。
ファイル名が適切で無い場合、ローカル環境で問題なく表示されている画像がサーバーにアップした後で表示されなくなる場合があります。
ローカル環境・・・Web制作においてデスクトップ環境のことをローカル環境と呼びます。またサーバー環境をリモート環境と呼びます。
・ローカル環境で確認：データをデスクトップ上で見ている状態
・リモート環境で確認：サーバーにアップしたデータを見ている状態
コーディング・プログラミング
デザインデータを元に、HTML・CSS・Javascript（jQuery）などを作ります。
余白や大きさなどは必ずデザインデータ通りに作成するため、必要な場合あらかじめ数値を書き出しておくと良いかもしれません。
システム構築（必要な場合のみ）
WordPressなどCMSを実装する場合、PHPなどの言語を用いてシステム構築を行います。
※不要な場合この工程は省きます。
検証・修正
各種ブラウザで表示の差異がないか検証し、必要であれば修正を行います。
実際のサーバーにアップする場合、検索制御などをかけてURLを知っているユーザーのみ確認ができるようにします。
検索制御の参考：
https://keywordfinder.jp/blog/seo/noindex-nofollow/
公開
サーバーにデータをアップロードして公開します。（検索制御などの設定をしている場合削除します）
