こんにちは、現在フリーランスのWeb制作者として活動しているしょーごと申します。
今回は「Web制作の具体的な流れ」についてお話していきます。
本記事のクオリティは自身ありです(｀･ω･´)ゞ
この記事を書いたのは
しょーご（@samurabrass）
このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
Web制作の流れを動画でも完全解説しています！
Web制作はコーディング以外にやること一杯！？
表に出てこないデザイン・コーディング”以外”の部分
近年Web制作の需要が高まり、スクールや学習コンテンツはいまや大量にあります。
そして、学習を始めてついにデザイン・コーディングのコツがつかめてきたというタイミング！
そう、Web制作の実務がどのように進んでいくのかは実は知られる機会が結構後だったりして、多くの初学者を悩ませています。
必要なものはデザインやコーディングのスキルだけではないのです。
そして実務を経験しても、自分が担当するのは一部分だったりして中々わかりづらかったりします。
そこで今回の記事で、「Web制作の流れ全行程」を解説することで、そんなみなさんの問題を解決しようと思いました。
避けては通れない部分になりますので、なんども読み返すことで、頭にいれておいてください。
Web制作の流れ全行程を頭にいれることができる
Web制作の簡単な流れ、フロー解説
まず全体を俯瞰して見てみましょう。
- ご依頼受付
- ヒアリング
- 企画立案
- お見積書作成
- お申し込み
- 確定、半額振り込み
- 仕様検討
- 素材収集
- デザイン作成→確認、校正
- コーディング、システム入れ込み
- テスト→最終確認
- 公開、納品
- 請求書、支払い
- 保守運用
Web制作は大きく
- 発注フェーズ
- 制作フェーズ
- 保守運用フェーズ
に分けることができます。これを見ていただくと「デザイン・コーディング」はほんの一部分であることが分かりますね。
それではここから順番に見ていきましょう！
発注フェーズ
- ご依頼受付
- ヒアリング
- 企画立案
- お見積書作成
- お申し込み
- 確定、半額振り込み
依頼受付
まずは依頼を受けます。
どのような経緯で案件の依頼が来るかは様々なパターンが考えられます。
1-1 ヒアリング
その後はヒアリングを行います。
- 企業理念やコンセプト
- 他社と比べた時の強み、自慢、サービスや商品の特徴
- サイト制作（修正）の目的・背景を教えてください
- 他社と比べた時の強み、自慢、サービスや商品の特徴
- サイトのテーマ、コンセプトは何ですか
- 制作（修正）後に期待する効果はありますか？
- ターゲット層を教えて下さい
- サイトに追加したい機能をお選び下さい
- 参考にしたいサイトがあれば、URLを貼って下さい（見積もりの際の参考にいたします）
- ご希望の納期（サイトオープン）はいつですか？
- ご予算を教えてください
個人的なおすすめは「Googleフォームで作成して共有し回答してもらう」ことですが、ITリテラシーが低い方のために、
事前にフォームを共有しておき、ビデオMTGしながら一緒に項目を埋めていく方法もおすすめです。
また紙で郵送も全然ありえる手段です。特に中高年の方はGoogleフォームの使い方がわからない方もたくさんいらっしゃいます。
解説：お客さんは専門じゃないし、ほしいものがわからない
ヒアリングシートの言葉はできる限り専門用語は使わずに、簡単な言葉を使って記入するようにしましょう。
お客さんと自分のIT知識は想像以上に差があると考えたほうがいいです。
1-2 概算見積もり
この状態で一回概算見積もりを作成し、金額を確認してもらいます。
細かい項目に分けなくても、ここれは大まかな金額だけで大丈夫です。
細かい項目は正式見積もりで出していきます。
少し高めに見積額を出しておきましょう。この後の正式見積もりでは精査してみたら想像以上に工数が増えることが多いです。そして概算見積もりは高めになる傾向にあることも相手にも忘れず伝えておきましょう。
見積書はfreeeで作成するのがおすすめです。
フリーランスの会計は私含め会計freee
で行っている人が大半で、freeeで見積書・請求書を発行すると普段の会計と連携させることができて売上管理に大変便利です。
ひとまず無料で登録・会計できます。
1-3 企画立案
概算見積もりに問題がなければここからは具体的にどんなサイトを作るかの大枠を決めていきます。
ヒアリング内容を踏まえて
- ページ数
- システム要件・機能
- サーバー・ドメイン提供の有無、契約はどちらがするか
- 素材提供の有無、取材の有無
- サイトの文章提供の有無、ライターアサインの有無
などを詰めていきます。ヒアリングシートに入れていても相手は理解しにくい部分なので、ビデオMTGなどで詳細をつめていきましょう。
それぞれの担当範囲を確認する感じです。
「全部任せるよ」と言われることがありますが、ちゃんとそれぞれ説明しておいたほうがいいですね。
お客さんも「サイト制作も色々確認事項多くて準備も大変なんだな」というのを共有できたほうが、この後の正式見積もり・請求での納得感が得やすくなります。
1-4 正式見積書作成
ここまでで大まかな仕様を策定できるので、会計freeeなどで正式見積書を作成します。
1-5 契約する
まずは業務委託契約書を発行します。
請負契約か準委任契約かの二種類が存在するが、Web制作の場合は「納品をもって報酬を支払う」請負契約が大半。
ちなみに業務委託契約書で重要なのは以下のポイントです。
- 作業範囲の定義
- 再委託（自分が外注するなら必須）
- 検収（納品物をチェックして、OKを出すこと）
- 瑕疵担保責任
- 著作権
- 損害賠償
- 機密保持
納品後に未発見のバグ（不具合）が見つかった場合に、制作会社側が「補修や弁償をします」というもの。2020年4月より「契約不適合責任」と改称。
【民法改正】契約不適合責任とは？瑕疵担保責任との違いと売主の注意点
https://home4u-owners.jp/contents/sell-6-1011
2021/10追記 契約書類関連はこれで勢揃い
【初心者向け】Web業務委託契約のひな形セット（制作、保守、SNS運用代行）が控えめに言って神だったので、こちらで契約関連は解決します。
1-6 請求書、半額振り込み
ここは人によるかもしれませんが、できれば「半額振り込み」を挟んだほうがいいです。
- 途中で相手の「やっぱいいや」などを防ぐ
- 相手への「自分事感」を根付かせる
- 直近のキャッシュフローが安定する
Web制作は二人三脚であるという意識を
この中で一番大事なのは「相手への自分事感を根付かせる」というところです。
Web制作は割と
よしなに”いい感じ”に作っておいて
と言われることがあります。
しかし、Web制作とは本来「持ち主の売上を上げるための商売道具」であるはず。
最善のものを作るには相手の協力が不可欠ですし、半金をもらっていると
せっかくお金払ってるんだから、しっかりしたものを作ってもらおう、そのためにこちらもしっかり動こう！
という意識を持ってもらえるので、コミュニケーションの自主性やレスポンスのスピードが早くなったりします。
ぜひ「半金」をもらっておいてください！
請求書ももちろん会計freeeで！
制作フェーズ
- 仕様検討
- 素材収集
- デザイン作成→確認、校正
- コーディング、システム入れ込み
- テスト→最終確認
- 公開、納品
- 請求書、支払い
2-1 仕様検討
大まかかにイメージしていた仕様を具体化していきます。
- システム要件（フォームやEC機能、CMSの有無）
- サーバー・ドメイン確定
- サイトマップ作成
解説：サイトマップについて
サイトの全体像を、「サイト構成図（本記事ではサイトマップ）」と呼びます
サイトマップの最大のメリットは「サイト全体の構成が把握しやすくなる」ということです。
樹形図に可視化することで、必要な要素や各ページまでの動線などを整理することができます。
サイトマップ（構成図）をエクセルで簡単に作成する方法【テンプレート付き】
https://web-kanji.com/posts/making-sitemap-by-excel#h-15
2-2 素材収集
webサイトで使用する素材を収集したり提供してもらいます。
- ロゴ
- 画像素材
- アイコン
- サイト内テキスト
- メールアドレス
取材するならこのタイミング
なお素材はなければ提供を受けるか、取材するのなら見積もり前に取材する費用も入れておきましょう。
フリーの画像素材やアイコン、イラスト素材は以下の記事にまとめています。
2-3 デザイン作成
さて、ここからいよいよデザインを作成していきます。
- ワイヤーフレームを作成
- デザイントップ初稿作成
- 先方確認後修正
- 先方通過後下層デザイン作成
- 先方確認後修正
- デザイン完成
解説：ワイヤーフレームとは？
Webデザインにおけるレイアウトの骨組みのことです。
この骨組みに肉付けをしたのがデザインカンプと呼ばれるものになります。
ワイヤーフレーム作成によく使われるツールはcacooやFigmaなどがあります。
デザイン作成は都度確認を入れること
デザイン業務は差し戻しが大変多くなる部分です。
- やっぱり前のデザインがいいかも
- このサイトみたいにおしゃんにして
- このボタンの形替えたい
- テキストはこれも追加して
- この機能追加したい
- ロゴ変えたい
デザインがあらかた出来たときに、こんな要望が出てくるのは日常茶飯事です。
なので、作業工程の中で細かく「クライアント確認」を入れるようにしてください。
その上で
「トップページデザインはこちらでよろしいでしょうか？下層ページのデザインはこれを元に作成させていただきます。
以後トップページの大幅なデザイン変更があれば有償での対応となりますので、ご了承ください」
などのように、進めていくと無限修正を防ぐことができますので、おすすめです。
デザイン作成ツールについて
おすすめはAdobeのツールになります。
Web制作者ならAdobe CCはほぼ必須ツールになります。
Photoshop,Illustorator,XDなどAdobeツールがまとまったプラン
Figmaの可能性
最近は無料のデザイン作成ツールFigmaを使うデザイナーも多いです。
ただ、あなたがコーディングをメインにする場合はAdobe CCが必要であることは認識していたほうがいいです。
それは、大半のデザインカンプがPhotoshop,Illustratorで作られているからです。
仮にPhotoshop,Illustratorがないとデザインデータを開いたり画像を書き出したり、フォントサイズを調べたりすることが一切できないため、
コーディングする前から詰みます。
正直安いとは言えませんが、ちまたで「Adobe税」と言われるように必須の支出になり、
買わないことによる不利益の方が大きいので回収してやる勢いで仕事をするのがいいと思います。
Adobe CCより単品で買ったほうが損しますので、おすすめは圧倒的にAdobe CCです。
2-4 コーディング・システム入れ込み
ここまできてようやくコーディングに入ります。
Web制作会社などの下請けコーディング案件とはここからの工程を指します。
- デザインカンプからの素材の書き出しを行う
- カンプを元にコーディングする
- 必要ならCMSなどシステム入れ込み、外部サービス連携をする（予約・ECシステムなど）
- コーディング規約の共有
- サイトマップの共有
- FTP情報、サーバー情報
などの情報がこのタイミングで共有されます。
よくあるプログラミングスクールのWeb制作コースでは大半がコーディングの部分しか学習範囲になっていないため、
コーディングだけできれば仕事になると思われていますが、
フリーランスWeb制作者で一からサイトを作る場合は、コーディングは全体の工程の一部分でしかありません。
2-5 テスト→先方確認
自分のローカル環境で開発したものをテスト環境に公開します。
本番環境と同じようなサーバーにアップロードし、動作を確認すること。
ローカル環境で問題なかったもがサーバーアップロードするとバグることがままあるため、必須工程、いきなり納品はしません。
私はWeb制作者なら自分で一つレンタルサーバーをもっておくことをおすすめしています。
テスト環境に使うだけでなく、ブログ運営もできますからね。
今ならConoHa WING 
がおすすめですね！
クライアント確認前にセルフチェックを行う
表示崩れが起きていないかの確認を行います。
具体的なチェックポイントを以下の記事にまとめました。
初稿提出→先方確認
セルフチェックが終わった後は「初稿提出からの先方確認」があります。
大抵は問題があるので、修正が発生することになります。
そして問題がなくなればいよいよ本番公開になります。
宣伝：コーディング→アップロード→確認→修正の練習ができる教材
ちなみにクライアントにOKをもらうまでを擬似的に練習できるコーディング教材を出していますので、参考までに！
- デザインカンプからコーディング
- 仕様書付き
- サーバーアップロード経験可能
- 厳し目の表示確認を2回無償で受けられる
- ポートフォリオ可能
本番公開→納品
クライアントのOKをもらったら本番環境にアップロードします。
納品方法は以下の記事にまとめています。
請求書発行、残額支払い
本番環境でも問題がなければ請求書を発行しましょう。
支払いを受けたら領収書を発行し、制作フェーズは終了します。
保守・運用フェーズ
- サーチコンソール・アナリティクス設定【推奨】
- プレスリリース
- サーバー・ドメインの保守【推奨】
- プラグインの更新【推奨】
- コンテンツの更新
- バックアップ【推奨】
ここからは表に出てきづらい「保守運用フェーズ」に入っていきます。
WordPressサイトの保守については、こちらの記事にも書いています。
前提：サイトは作ってからが本番である
Webサイトを作るのはなぜか？それは売上を上げるためです。
置いておけばいいようなケースは、既にSNSなどで集客できていて看板程度にしか公式サイトを使わない企業だけです。
大半はWebサイトを母艦としていきたいはず。
なので、個人的には作った後も追加費用をもらって面倒を見たほうがいいと考えています。
この後の工程は順不動ですが、【推奨】となっている工程は追加費用や月額で対応を提案してみてください。
いずれもとても重要な工程です。
基本的に月額制
保守運用は基本的に月額制で作業を行います。
これから紹介する業務を月額いくらかで契約して作業をしていきます。
月額5千〜2万円の範囲で作業を行うフリーランスが多いように思います。
3-1 サーチコンソール・アナリティクス設定【推奨】
サーチコンソールは「どうやってサイトに辿り着いたか」アナリティクスは「サイト内でどういう動きをしているか」を計測するツールになります。
Googleアナリティクス導入時の設定・設置方法【初心者向け】
https://wacul-ai.com/blog/access-analysis/google-analytics-setting/ga-beginner/
【入門版】Google Search Consoleの登録・設定方法&使い方【スタートアップガイド】
https://web-kanji.com/posts/search-console-setting
アナリティクスとサーチコンソールを設置しないとサイト改善のしようがないため、ここでは運用フェーズで紹介していますが、
できれば設置は前提にして制作フェーズに入れていければベストです👍
3-2 プレスリリース
Webサイト公開を認知してもらう施策です。難しく考える必要はなく以下のような方法が考えられます。
- 企業の公式facebookやTwitter,インスタに情報を流す（どこでも可能なはず）
- prtimesに出稿（企業規模による）
- 広告出稿（業態による）
- Google MapでのMEOで情報の充実、サイト追加（どこでも可能なはず）
SEOは指名検索以外は基本厳しいので、SEO以外での認知の拡大を図ったほうがいいですね。
3-3 サーバー・ドメインの保守【推奨】
保守はぜひやっていただきたいですね。
突然「サイトが見れなくなりました！」の連絡
以下はよくあるサイト飛ばす例です。保守しないと納品後一年くらい立つと来ます。
なんか突然サイト見れなくなったんですが、バグですかね？
あーなんか来てたけど忘れちゃってたんだよね、あれやんないとダメなの？
保守を月額費もらって受けるかどうか
正直「サーバー・ドメインの管理更新」って、お客さんからしたら考えたくもないことなんですよね。
なので選択肢は２つあります。
- お客さんに契約してもらい自分がリマインド出したりする
- そもそもの契約をこちらで行い、更新もこちらが実費負担→請求
正直どちらでもいいと思いますが、保守として受ける場合はこちらで更新作業を行ったほうがいいと思います。
3-4 プラグインの更新【推奨】
これはWordPressサイトの場合ですが、プラグインは頻繁に更新したほうがいいです。
なぜならWordPressサイトのハッキングの割合の4割がプラグイン経由だからです。
私の友人も何人かプラグイン経由でマルウェアを仕込まれて、サイト閉鎖に追い込まれています。
実はプラグインのアップデートを自動化する方法があり、functions.phpに
add_filter( 'auto_update_plugin', '__return_true' );を追加すればプラグインを自動アップデートできるのですが、プラグインのバージョンが原因でサイトに不具合が起こる可能性を捨てきれないので、
これは最終手段的に捉えたほうがいいかなと思います。
既存テーマで作成した場合はテーマの更新も行ったほうがいいので
//本体のメジャーアップデートの自動更新を有効化
add_filter( 'allow_major_auto_core_updates', '__return_true' );
//本体のマイナーアップデートの自動更新を有効化
add_filter( 'allow_minor_auto_core_updates', '__return_true' );
//テーマの自動更新を有効化
add_filter( 'auto_update_theme', '__return_true' );
//プラグインの自動更新を有効化
add_filter( 'auto_update_plugin', '__return_true' );このようなコードで一応更新を自動化することができます。
プラグイン更新は保守運用に含まれます。
個人的には２週間に一回は管理画面を見て更新してあげるのがいいかなと思います。
3-5 コンテンツの更新
WordPressサイトを納品した場合ですが、重要なのは「サイトにコンテンツが投稿されているかどうか」です。
せっかくサイトを立ち上げても全く更新されていないサイトが多いのが事実ですが、実際は更新の仕方が分かっていなかったりします。
なので一緒に更新作業を行うことで作業を覚えてもらったり、月イチで案だし、相談に乗るなどして
サイトを更新するお手伝いを保守運用に入れると満足度が高いです。
3-6 バックアップ【推奨】
これはどんなサイトもそうですが、サイトが閲覧不能になる理由は様々あります。
- サーバー・ドメインの更新忘れ
- マルウェア侵入
- サーバー触ってたら誤って消してしまった
- 管理画面触ってたらおかしくなった
なので、バックアップを都度とったほうがいいです。実はここは自動化できます。
WordPressサイトのバックアップはUpdraftPlusで
UpdraftPlusはWordPressのバックアップを自動で行ってくれるプラグインになります。
- 自動更新は1週間ごと
- 最大保存件数は7件くらい
- 保存先はGoogle Drive
バックアップ専用プラグインUpdraftPlusの使い方・設定方法まとめ
https://tekito-style.me/columns/wordpress-plugin-updraftplus
バックアップも保守運用業務に入ります。
作業を自動化していますが、サイトに手を加えるときは自分で手動でバックアップを取るのでバックアップの名目で保守運用費用をもらっても構いません。
月額の中にすべてコミコミということになります。
Web制作の流れを練習しておくべし
自分でサイトを開設し運用する
ここまでWeb制作の流れを解説してきました。
ここまででこう思った方もいらっしゃるのではないでしょうか？
ブログで得られる知識
ブログ開設、運用で得られる知識は以下の通り。
- ドメイン・サーバーの契約、紐付け
- サーバーへのWordPressのインストール
- 既存テーマ、子テーマを使ったカスタマイズ
- コンテンツの投稿
- アナリティクス、サーチコンソールの設置及び分析
- 保守運用全般
WordPressサイトを爆速構築できるConoHa WING
今からサイトの立ち上げを行うなら、ConoHa WING 
がおすすめです。
『WordPressかんたんインストール』でものの10分でサイトを構築・公開できて、サイト速度も爆速でおすすめできるサーバーになります。
おまけ：ポートフォリオはアップロードしておくべし
Web制作の流れをみていただけたら分かるかと思いますが、サイトはサーバーにアップロードするのが必須なので、
ポートフォリオもサーバーにアップロードされているのは必須です。
どうしてもローカル環境でのコーディングばかりに焦点があたりがちですが、サーバーにアップロードするところまでどうせなら練習するようにしましょう。
Web制作完全独学ロードマップ公開中！
Web制作会社への最強の営業法紹介
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
これを話している私自身は
をした経験があり、現在もバリバリWeb制作を行っております。