こんにちは！フリーランス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制作の主な流れまとめ。
- 仕事を受ける
- 企画をする
- 設計をする
- 制作をする
- 保守運用をする
参考資料
