新人ディレクター向け！Webサイト構築の基礎

「Webサイト構築って具体的にどんなタスクで、どんな感じで進行するの？」と参考書を開いた事がある人は多いのではないかと思います。参考書に書いている内容では、「大体の流れは分かるけれど、具体的にどう進めるのかわからない。。想像がつかない。。 」と思った方もいるのではないでしょうか！
 
実際、新卒1年目の時の私は、案件に生かそうと参考書を開いても、難しい言葉や想像もつかない世界に躓いてばかりでした。
それから1年を経て、この度、小規模ながら、Webサイト構築を要件定義からリリースまでメインディレクターとして完遂することができました。
その実体験を元に具体的に、出来るだけ分かりやすくWebサイト構築のフローとタスクをご紹介します。

まず大まかなWebサイト構築（制作）フローとしては以下となります。
※要件や開発スコープによって異なります。

どのタスクも重要にはなりますが、特に需要と感じているのは★を付けた「1. 要件定義」「7. 公開判定、公開準備、公開」です。この2つがWebサイトの迅速性・正確性を左右すると個人的に思っています。
 
以下、基本的な各タスクについてより分かりやすくご紹介します。

要件定義★

●概要
誰に、どのような目的で、どのようなWebサイトを制作するのか関係者間で明確にします。
手法としては、関係者同士でのワークショップ、ベンチマーク（競合/他社）調査、ユーザー調査等があります。
●ポイント
ターゲットや目的、目指す姿を参考サイトや他社の事例と比較しながら決定することで、制作の段階に入っても迷うことなく進行ができます。
●準備するもの
要件定義のために用いる手法による
●成果物
要件定義書

基本設計

●概要
要件定義を元に、画面数・導線の設計（サイトマップ）、制作ページの一覧化・meta情報設計ファイルリスト一覧）を行います。
●ポイント
一覧として可視化することで、関係者同士で認識の相違をなくします。
●準備するもの
エクセル、パワーポイント等のツール
●作成するもの
サイトマップ一覧（パワーポイント推奨）、ファイルリスト一覧（エクセル推奨）

詳細設計

●概要
要件定義・基本設計を元に、画面設計（構成/ワイヤーフレーム作成）を行います。
●ポイント
何となくの構成ではなく、サイトやページの目的に沿ったポイントをあげ、参考サイトと共にイメージをしながらレイアウトを固めます。
●準備するもの
参考サイト、ファイルリスト
●作成するもの
画面設計書（ワイヤフレーム）、meta情報の記載

デザイン

●概要
3. 詳細設計までの経緯を受け、ビジュアル・イメージを形に起こします。
ユーザビリティ・アクセシビリティも視野に入れ、「障がいの有無、老若男女に関わらず、見やすい・分かりやすい・使いやすい」を考慮し進行します。
●ポイント
何となくのイメージではなく、[1] サイト・ページの目的に沿ったデザインとすることが重要です。
挙動についてもデザイン段階で検討しておくと以降がスムーズです。
また、サイト全体でフォントサイズ・カラー・マージン[2] 等統一できる箇所を決め、全体に波及することで、ブランディングの確立・制作時間の短縮に繋がります。
●準備するもの
参考サイト、デザインツール（Photoshop/XD等）、3. 詳細設計までの作成物・経緯の把握
●作成するもの
デザインデータ、デザイン（JPEG等の画像の書き出し）、デザインガイドライン

コーディング

●概要
デザインまでの情報を元に、Webページを制作していきます。
デザインで完璧と思われいても、実際の画面で見た際に何らかの不具合がある可能性があります。（マージンが空きすぎている、行間が狭い等）その場合は、コーディング時点で、改修することで、よりユーザーにとって使いやすいサイトとすることができます。（デザインガイドラインに則る）@[1] 
●ポイント
また、HTML/CSS/jsの基本要件・命名規則・ディレクトリ構造について、ガイドラインとしてまとめておく・統一している事が、運用のしやすさに繋がります。
●準備するもの
エディタ 、社内テスト環境
●作成するもの
HTML・CSS・js等、コーディングガイドライン

デバイス検証

●概要
対応することを決定したデバイス・OS・ブラウザの検証を行います。
一般的に、大きくPC・タブレット・スマートフォンの3分類で、PCであれば、Windows10、macOS10.15等の細かい定義も行います。またブラウザによっても差異が見られるので、Google Chrome、FireFox、Edge、Safari等、各ブラウザごとでも検証します。
●ポイント
高品質を担保する為の重要項目となります。
チェックリストを作成し、それに基づいて、検証していくことで、抜け漏れを防ぎます。
●準備するもの
対応OSの定義・デバイスチェックリスト
●作成するもの
デバイスチェックリストに記載
※リストの内容としては、表示/挙動/SEO/アクセシビリティ等の分類に分け、それぞれ、表示崩れがないか、挙動の不具合がないか、meta情報の記載はあるか、画像にaltが入っているか、等項目を細かく設定します。

公開判定、公開準備、公開★

●概要
検証が終われば、関係者間で公開しても良いかの判断を行います。合意が取れれば、本番環境にアップロードを行い、公開します。（手動でのアップ・時限式など方法はいくつかあります。）
●ポイント
デバイス検証同様、最終確認の為のチェックリストを作成することで、抜け漏れを防ぎます。
また、公開後も確認を行うことで、品質の担保を行います。
●準備するもの
最終確認チェックリスト・公開フローマニュアル
●作成するもの
最終確認チェックリストに記載
※リストの内容としては、文言・画像は正しいか、表示崩れがないか、挙動の不具合がないか、リンクは正常か等項目を細かく設定します。

以上、となります。
実体験から出来るだけわかりやすく執筆したつもりではありますが、やはり、実際にやってみないことにはよくわからない部分もあるかもしれません。
ですが、大まかな流れと具体的にどのような事をするのか、についてはお判り頂けたのではないでしょうか！
もちろん与件によっては、より長いフロー・多いタスクをこなす必要があります。また、ページ数によってもプロジェクト期間が変わってきます。
 
今回は、基本的なWebサイト構築（制作）についてご紹介させて頂きました。
 
最後まで読んでくださってありがとうございました。
少しでもヒントになることができれば幸いです！