
こんにちは!フリーランスWebデザイナーのマッシュ(@mush_designer )です。

これからWeb制作のお仕事をしたいけど、制作の流れのイメージが沸かないんだ。
そんな方のためにWeb制作の流れを次の段階に分けてまとめました。
- 仕事を受ける
- 企画をする
- 設計をする
- 制作をする
- 保守運用をする
また、このブログでは次のことを解説します。
- Web制作の主な流れ
- 使用ツール
合わせて、使用ツールもまとめましたので是非、参考にしてくださいね!
それではご覧ください。
Contents
Web制作全体の流れ
まずはWeb制作全体の流れをご覧ください。

全体像が把握できたところで、次に簡単に何をするのか解説します。
STEP.01 仕事を受ける
仕事の受注
お客様よりお仕事を受注します。
- メール
- 電話
ヒヤリング
ヒヤリングではWebサイトを作る目的(ゴール)、デザインイメージ、ブラウザ対応などお客さまにお聞きします。
- Excel
- Googleスプレッド
- Googleフォーム
見積書提出
ヒヤリングをもとにお見積り書を提出します。
契約書の締結
お見積りやサービスにご納得していただけたら、契約書の締結をします。
- クラウドサイン:https://www.cloudsign.jp/
STEP.02 企画をする
目標・ターゲットの選定
ヒヤリングをもとにWebサイトの目的(ゴール)とターゲットユーザーを決めます。
市場調査・分析
お客様さまの市場や競合他社を調査・分析します。
- PowerPoint
- Keynote
STEP.03 設計をする
サイト設計をする
次の資料を作成します。
- サイトマップ:サイト全体のページ構成をリスト形式の一覧
- ディレクトリマップ:Webサイト内の全ページのURLとタイトルや記事内容がまとめられた一覧表
- 技術仕様書:Webサイト制作における技術要件をまとめたもの
【参考:サイトマップ】

【参考:ディレクトリマップ】

【参考:技術仕様書に記載すること】
- OS・ブラウザ情報
- スマホ対応
- SSL化について
- PowerPoint
- Excel
- Googleスプレッド
- cacoo:https://cacoo.com/ja/
ワイヤーフレーム制作
制作するデザインの設計図(ワイヤーフレーム)を制作します。ワイヤーフレームはシンプルな線や図、テキストで構成されています。
【参考:ワイヤーフレーム】

- PowerPoint
- Photoshop:https://www.adobe.com/jp/products/photoshop.html
- Illustrator:https://www.adobe.com/jp/products/illustrator.html
- XD:https://www.adobe.com/jp/products/xd.html
- Sketch:https://www.sketch.com/
- cacoo:https://cacoo.com/ja/
- 手書き
STEP.04 制作をする
デザインをする
ワイヤーフレームをもとにデザインを制作します。Web業界ではこれを「デザインカンプ」と呼びます。
コーディングをする
HTML、CSS、JavaScriptなどを使用しコーディングしていきます。
- Dreamweaver:https://www.adobe.com/jp/products/dreamweaver.html
- Sublime Text:https://www.sublimetext.com/
- Atom:https://atom.io/
CMS実装(WordPressなど)
CMSを使い、管理・更新するシステムをカスタマイズします。
- WordPress:https://ja.wordpress.org/download/
テスト・チェック
サーバーへテストアップし最終確認をします。
- 機能チェック(問い合わせフォーム、リンクなど)
- ブラウザ表示チェック
- コーディングチェック(バリデート、ページスピードなど)
- タグチェック(meta、計測タグなど)
【サーバーアップ】
【コーディングチェック】
- W3Cマークアップ検証サービス(HTML):https://validator.w3.org/
- W3Cマークアップ検証サービス(CSS) :http://jigsaw.w3.org/css-validator/
- W3Cリンクチェッカー:https://validator.w3.org/checklink
- PageSpeed Insights :https://developers.google.com/speed/pagespeed/insights/?hl=ja
サイトアップ・納品
サーバーにアップ、またはデータ納品します。
- ファイル便:https://gigafile.nu/
STEP.05 保守・運用する
更新作業、メンテナンス、分析・改善
テキスト・画像などの差し替えやCMSの更新・メンテナンス、アクセス解析などをします。
- Googleアナリティクス:https://developers.google.com/analytics?hl=ja
- Googleサーチコンソール:https://search.google.com/search-console/about?hl=ja
まとめ
Web制作の主な流れまとめ。
- 仕事を受ける
- 企画をする
- 設計をする
- 制作をする
- 保守運用をする
参考資料