members

members

【新人Webディレクター向け】 10分で読める!Webサイト構築の7ステップをご紹介!

Tweet

「Webサイト構築って具体的にどんなタスクで、どんな感じで進行するの?」と参考書を開いたことがある人は多いのではないかと思います。参考書に書いている内容では、「大体の流れは分かるけれど、具体的にどう進めるの??想像がつかない。。」と思った方もいるのではないでしょうか!

実際、新卒1年目の私は、案件に生かそうと参考書を開いても、難しい言葉や想像もつかない世界に躓いてばかりでした。
それから1年を経て、この度、小規模ながら、Webサイト構築を要件定義から公開までメインディレクターとして完遂することができました。
その実体験を元に具体的に、出来るだけ分かりやすくWebサイト構築のフローとタスクをご紹介します。

画像元

 

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

目次
1.要件定義★
2.基本設計
3.詳細設計
4.デザイン
5.コーディング
6.デバイス検証
7.公開判定、公開準備、公開★

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

基本的な各タスクについてより分かりやすくご紹介します。

1.要件定義★

●概要
誰に、どのような目的で、どのようなWebサイトを制作するのか関係者間で明確にします。手法としては、関係者同士でのワークショップ、ベンチマーク(競合/他社)調査、ユーザー調査等があります。

●ポイント
ターゲットや目的、目指す姿を参考サイトや他社の事例と比較しながら決定することで、制作の段階に入っても迷うことなく進行ができます。

●準備物
要件定義のために用いる手法による

●成果物
要件定義書

 

2. 基本設計

●概要
1.要件定義を元に、画面数・導線の設計(サイトマップ)、制作ページの一覧化・meta情報設計ファイルリスト一覧)を行います。

●ポイント
一覧として可視化することで、関係者同士で認識の相違をなくします。

●準備物
エクセル、パワーポイント等のツール

●成果物
サイトマップ一覧(パワーポイント推奨)、ファイルリスト一覧(エクセル推奨)

 

3. 詳細設計

●概要
1.要件定義 2.基本設計を元に、画面設計(構成/ワイヤーフレーム作成)を行います。

●ポイント
サイトやページの目的に沿ったポイントをあげ、参考サイトと共にイメージをしながらレイアウトを固めます。

●準備物
参考サイト、ファイルリスト

●成果物
画面設計書(ワイヤフレーム)、meta情報の記載

 

4. デザイン

●概要
3. 詳細設計までの経緯を受け、ビジュアル・イメージを形に起こします。
ユーザビリティ・アクセシビリティも視野に入れ、「障がいの有無、老若男女に関わらず、見やすい・分かりやすい・使いやすい」を考慮し進行します。

●ポイント
サイト・ページの目的に沿ったデザインとすることが重要です。挙動についてもデザイン段階で検討しておくと以降がスムーズです。
また、サイト全体でフォントサイズ・カラー・マージン・コンポーネント等統一できる箇所を決め、全体に波及することで、ブランディングの確立・制作時間の短縮に繋がります。

●準備物
参考サイト、デザインツール(Photoshop/XD等)、3. 詳細設計までの作成物・経緯の把握

●成果物
デザインデータ、デザイン(JPEG等の画像の書き出し)、デザインガイドライン

 

5. コーディング

●概要
4. デザインまでの情報を元に、Webページを制作していきます。
デザインで完璧と思われても、実際の画面で見た際に何らかの不具合がある可能性があります。(マージンが空きすぎている、行間が狭い等)その場合は、コーディング時点で、改修することで、よりユーザーにとって使いやすいサイトとすることができます。(デザインガイドラインに則る)

●ポイント
また、HTML/CSS/jsの基本要件・命名規則・ディレクトリ構造について、ガイドラインとしてまとめておく・統一しておくことが、運用のしやすさに繋がります。

●準備物
テキストエディタ、社内テスト環境

●成果物
HTML・CSS・js等、コーディングガイドライン

 

6. デバイス検証

●概要<br対応することを決定したデバイス・OS・ブラウザの検証を行います。
一般的に、大きくPC・タブレット・スマートフォンの3分類で、PCであれば、Windows10、macOS10.15等の細かい定義も行います。またブラウザによっても差異が見られるので、Google Chrome、Firefox、Edge、Safari等、各ブラウザごとでも検証します。

●ポイント
高品質を担保する為の重要項目となります。
チェックリストを作成し、それに基づいて、検証していくことで、抜け漏れを防ぎます。

●準備物
対応OSの定義・デバイスチェックリスト

●成果物
デバイスチェックリストに記載
※リストの内容としては、表示/挙動/SEO/アクセシビリティ等の分類に分け、それぞれ、表示崩れがないか、挙動の不具合がないか、meta情報の記載はあるか、画像にaltが入っているか、等項目を細かく設定します。

 

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

●概要
6. 検証が終われば、関係者間で公開しても良いかの判断を行います。合意が取れれば、本番環境にアップロードを行い、公開します。(手動でのアップ・時限式など方法はいくつかあります。)

●ポイント
デバイス検証同様、最終確認の為のチェックリストを作成することで、抜け漏れを防ぎます。
また、公開後も確認を行うことで、品質の担保を行います。

●準備物
最終確認チェックリスト・公開フローマニュアル

●成果物
最終確認チェックリストに記載
※リストの内容としては、文言・画像は正しいか、表示崩れがないか、挙動の不具合がないか、リンクは正常か等項目を細かく設定します。

 

さいごに・・・

以上、【新人Webディレクター向け】 10分で読める!Webサイト構築の7ステップをご紹介!でした!今回は、基本的なWebサイト構築(制作)についてご紹介させて頂きました。
実体験から出来るだけわかりやすく執筆したつもりではありますが、やはり、実際にやってみないことにはよくわからない部分もあるかもしれません。
ですが、大まかな流れと具体的にどのようなことをするのか、についてはお判り頂けたのではないでしょうか!
もちろん与件によっては、より長いフロー・多いタスクをこなす必要があったり、プロジェクト期間が変動したりします。

私もまだまだ未熟ながら、クライアントの皆様の想いをユーザーに届けることができるよう奔走して参ります。
最後まで読んでくださってありがとうございました。少しでもヒントになることができれば幸いです!

 

コラム執筆者

村上 紗莉奈(むらかみ さりな)

第4ビジネスユニットアカウントサービス第13ユニット所属 | ディレクター
2019年4月入社し、主にWebサイト構築・Webサイト構築/リニューアルご提案の業務に携わっています。
制作業務も行わせてもらってます。素敵なクリエイティブを見つけてシェアすることが好きです。