プログラミング/仕事

【現役フリーランスが語る】Web制作の流れ完全解説【コーディングはほんの一部分です】

web制作の流れ基礎講座

こんにちは、現在フリーランスのWeb制作者として活動しているしょーごと申します。

今回は「Web制作の具体的な流れ」についてお話していきます。

初学者さん
初学者さん
Web制作の勉強を始めたはいいけど、デザインとコーディングって実際どう進むの?
初学者さん
初学者さん
そもそも受注したら何をすれば、あと納品とか実務ではどうなってるの…?
しょーご
しょーご
こんな疑問に答えていきます!

これを話している私自身は

  • フリーランス歴2年半
  • 納品数100件以上
  • 100人ほどのフリーランス独立を支援

をした経験があり、現在もバリバリWeb制作を行っております。

「Web制作の流れ系記事」は

  1. 依頼者視点
  2. 制作者視点

の2種類がありますが、本記事は❷制作者視点で特に「Web制作フリーランス」に向けて書いたものになります。

本記事のクオリティは自身ありです(`・ω・´)ゞ

Web制作はコーディング以外にやること一杯!?

表に出てこないデザイン・コーディング”以外”の部分

近年Web制作の需要が高まり、スクールや学習コンテンツはいまや大量にあります。

そして、学習を始めてついにデザイン・コーディングのコツがつかめてきたというタイミング!

初学者さん
初学者さん
Web制作やっと分かったきたかもー!
初学者さん
初学者さん
あれ、でもこれ作った後どうすればいいんだろう…
初学者さん
初学者さん
確かに!パソコンにあるやつスマホでみれないし、多分アップロード的なことやらないとだよね…?

そう、Web制作の実務がどのように進んでいくのかは実は知られる機会が結構後だったりして、多くの初学者を悩ませています。

必要なものはデザインやコーディングのスキルだけではないのです。

そして実務を経験しても、自分が担当するのは一部分だったりして中々わかりづらかったりします。

しょーご
しょーご
私自身も自分自身でサイトをアップロードしたりブログを立ち上げるまでよくわかりませんでした

そこで今回の記事で、「Web制作の流れ全行程」を解説することで、そんなみなさんの問題を解決しようと思いました。

避けては通れない部分になりますので、なんども読み返すことで、頭にいれておいてください。

今回の記事を読むことで

Web制作の流れ全行程を頭にいれることができる

Web制作の簡単な流れ、フロー解説

まず全体を俯瞰して見てみましょう。

Web制作の流れ解説_figure
Web制作の流れ
  1. ご依頼受付
  2. ヒアリング
  3. 企画立案
  4. お見積書作成
  5. お申し込み
  6. 確定、半額振り込み
  7. 仕様検討
  8. 素材収集
  9. デザイン作成→確認、校正
  10. コーディング、システム入れ込み
  11. テスト→最終確認
  12. 公開、納品
  13. 請求書、支払い
  14. 保守運用

Web制作は大きく

  1. 発注フェーズ
  2. 制作フェーズ
  3. 運用フェーズ

に分けることができます。これを見ていただくと「デザイン・コーディング」はほんの一部分であることが分かりますね。

それではここから順番に見ていきましょう!

発注フェーズ

  1. ご依頼受付
  2. ヒアリング
  3. 企画立案
  4. お見積書作成
  5. お申し込み
  6. 確定、半額振り込み

依頼受付

まずは依頼を受けます。

どのような経緯で案件の依頼が来るかは様々なパターンが考えられます。

1-1 ヒアリング

その後はヒアリングを行います。

ヒアリングで聞くべきこと
  • 企業理念やコンセプト
  • 他社と比べた時の強み、自慢、サービスや商品の特徴
  • サイト制作(修正)の目的・背景を教えてください
  • 他社と比べた時の強み、自慢、サービスや商品の特徴
  • サイトのテーマ、コンセプトは何ですか
  • 制作(修正)後に期待する効果はありますか?
  • ターゲット層を教えて下さい
  • サイトに追加したい機能をお選び下さい
  • 参考にしたいサイトがあれば、URLを貼って下さい(見積もりの際の参考にいたします)
  • ご希望の納期(サイトオープン)はいつですか?
  • ご予算を教えてください

個人的なおすすめは「Googleフォームで作成して共有し回答してもらう」ことですが、ITリテラシーが低い方のために、

事前にフォームを共有しておき、ビデオMTGしながら一緒に項目を埋めていく方法もおすすめです。

また紙で郵送も全然ありえる手段です。特に中高年の方はGoogleフォームの使い方がわからない方もたくさんいらっしゃいます。

解説:お客さんは専門じゃないし、ほしいものがわからない

ヒアリングシートの言葉はできる限り専門用語は使わずに、簡単な言葉を使って記入するようにしましょう。

お客さんと自分のIT知識は想像以上に差があると考えたほうがいいです。

1-2 概算見積もり

この状態で一回概算見積もりを作成し、金額を確認してもらいます。

細かい項目に分けなくても、ここれは大まかな金額だけで大丈夫です。

細かい項目は正式見積もりで出していきます。

少し高めに見積額を出しておきましょう。この後の正式見積もりでは精査してみたら想像以上に工数が増えることが多いです。そして概算見積もりは高めになる傾向にあることも相手にも忘れず伝えておきましょう。

見積書はfreeeで作成するのがおすすめです。

freeeの見積書作成ページへ

フリーランスの会計は私含め会計freeeで行っている人が大半で、freeeで見積書・請求書を発行すると普段の会計と連携させることができて売上管理に大変便利です。

ひとまず無料で登録・会計できます。

1-3 企画立案

概算見積もりに問題がなければここからは具体的にどんなサイトを作るかの大枠を決めていきます。

ヒアリング内容を踏まえて

  • ページ数
  • システム要件・機能
  • サーバー・ドメイン提供の有無、契約はどちらがするか
  • 素材提供の有無、取材の有無
  • サイトの文章提供の有無、ライターアサインの有無

などを詰めていきます。ヒアリングシートに入れていても相手は理解しにくい部分なので、ビデオMTGなどで詳細をつめていきましょう。

それぞれの担当範囲を確認する感じです。

「全部任せるよ」と言われることがありますが、ちゃんとそれぞれ説明しておいたほうがいいですね。

お客さんも「サイト制作も色々確認事項多くて準備も大変なんだな」というのを共有できたほうが、この後の正式見積もり・請求での納得感が得やすくなります。

1-4 正式見積書作成

ここまでで大まかな仕様を策定できるので、会計freeeなどで正式見積書を作成します。

しょーご
しょーご
できるだけ細かい項目に分けたほうが納得感が出ておすすめです!

1-5 契約する

まずは業務委託契約書を発行します。

業務委託契約書サンプル

https://www.flourish777.jp/contract.pdf

業務委託契約の種類?

請負契約か準委任契約かの二種類が存在するが、Web制作の場合は「納品をもって報酬を支払う」請負契約が大半。

ちなみに業務委託契約書で重要なのは以下のポイントです。

  1. 作業範囲の定義
  2. 再委託(自分が外注するなら必須)
  3. 検収(納品物をチェックして、OKを出すこと)
  4. 瑕疵担保責任
  5. 著作権
  6. 損害賠償
  7. 機密保持
瑕疵担保責任とは?

納品後に未発見のバグ(不具合)が見つかった場合に、制作会社側が「補修や弁償をします」というもの。2020年4月より「契約不適合責任」と改称。

【民法改正】契約不適合責任とは?瑕疵担保責任との違いと売主の注意点

https://home4u-owners.jp/contents/sell-6-1011

1-6 請求書、半額振り込み

ここは人によるかもしれませんが、できれば「半額振り込み」を挟んだほうがいいです。

半額振り込みを請求する理由
  • 途中で相手の「やっぱいいや」などを防ぐ
  • 相手への「自分事感」を根付かせる
  • 直近のキャッシュフローが安定する

Web制作は二人三脚であるという意識を

この中で一番大事なのは「相手への自分事感を根付かせる」というところです。

Web制作は割と

お客さん

よしなに”いい感じ”に作っておいて

と言われることがあります。

しかし、Web制作とは本来「持ち主の売上を上げるための商売道具」であるはず。

最善のものを作るには相手の協力が不可欠ですし、半金をもらっていると

お客さん

せっかくお金払ってるんだから、しっかりしたものを作ってもらおう、そのためにこちらもしっかり動こう!

という意識を持ってもらえるので、コミュニケーションの自主性やレスポンスのスピードが早くなったりします。

ぜひ「半金」をもらっておいてください!

半金をいただくには相手への説明と理解が必要です。基本的にフリーランスは信用力が低いので、真摯に理由を説明しましょう。

請求書ももちろん会計freeeで!

会計freeeの請求書を見てみる

制作フェーズ

  1. 仕様検討
  2. 素材収集
  3. デザイン作成→確認、校正
  4. コーディング、システム入れ込み
  5. テスト→最終確認
  6. 公開、納品
  7. 請求書、支払い

2-1 仕様検討

大まかかにイメージしていた仕様を具体化していきます。

検討すべきこと
  • システム要件(フォームやEC機能、CMSの有無)
  • サーバー・ドメイン確定
  • サイトマップ作成

解説:サイトマップについて

サイトマップ

サイトの全体像を、「サイト構成図(本記事ではサイトマップ)」と呼びます

サイトマップの最大のメリットは「サイト全体の構成が把握しやすくなる」ということです。

樹形図に可視化することで、必要な要素や各ページまでの動線などを整理することができます。

サイトマップ(構成図)をエクセルで簡単に作成する方法【テンプレート付き】

https://web-kanji.com/posts/making-sitemap-by-excel#h-15

サイトマップで決める要件は以下の通り。

  1. 階層構造
  2. url
  3. ページタイトル
  4. ディスクリプション

2-2 素材収集

webサイトで使用する素材を収集したり提供してもらいます。

必要になる素材
  • ロゴ
  • 画像素材
  • アイコン
  • サイト内テキスト
  • メールアドレス

取材するならこのタイミング

なお素材はなければ提供を受けるか、取材するのなら見積もり前に取材する費用も入れておきましょう。

フリーの画像素材やアイコン、イラスト素材は以下の記事にまとめています。

2-3 デザイン作成

さて、ここからいよいよデザインを作成していきます。

デザイン作成の工程
  1. ワイヤーフレームを作成
  2. デザイントップ初稿作成
  3. 先方確認後修正
  4. 先方通過後下層デザイン作成
  5. 先方確認後修正
  6. デザイン完成

解説:ワイヤーフレームとは?

Webデザインにおけるレイアウトの骨組みのことです。

この骨組みに肉付けをしたのがデザインカンプと呼ばれるものになります。

ワイヤーフレーム

ワイヤーフレーム作成によく使われるツールはcacooFigmaなどがあります。

デザイン作成は都度確認を入れること

デザイン業務は差し戻しが大変多くなる部分です。

  • やっぱり前のデザインがいいかも
  • このサイトみたいにおしゃんにして
  • このボタンの形替えたい
  • テキストはこれも追加して
  • この機能追加したい
  • ロゴ変えたい

デザインがあらかた出来たときに、こんな要望が出てくるのは日常茶飯事です。

なので、作業工程の中で細かく「クライアント確認」を入れるようにしてください。

その上で

「トップページデザインはこちらでよろしいでしょうか?下層ページのデザインはこれを元に作成させていただきます。
以後トップページの大幅なデザイン変更があれば有償での対応となりますので、ご了承ください」

などのように、進めていくと無限修正を防ぐことができますので、おすすめです。

デザイン作成ツールについて

おすすめはAdobeのツールになります。

Web制作者ならAdobe CCはほぼ必須ツールになります。

Adobe CCとは?

Photoshop,Illustorator,XDなどAdobeツールがまとまったプラン

Figmaの可能性

最近は無料のデザイン作成ツールFigmaを使うデザイナーも多いです。

ただ、あなたがコーディングをメインにする場合はAdobe CCが必要であることは認識していたほうがいいです。

それは、大半のデザインカンプがPhotoshop,Illustratorで作られているからです。

仮にPhotoshop,Illustratorがないとデザインデータを開いたり画像を書き出したり、フォントサイズを調べたりすることが一切できないため、

コーディングする前から詰みます。

正直安いとは言えませんが、ちまたで「Adobe税」と言われるように必須の支出になり、

買わないことによる不利益の方が大きいので回収してやる勢いで仕事をするのがいいと思います。

Adobe CCより単品で買ったほうが損しますので、おすすめは圧倒的にAdobe CCです。

しょーご
しょーご
Adobeはググったときに大量の情報があるのもありがたいですね!

2-4 コーディング・システム入れ込み

ここまできてようやくコーディングに入ります。

Web制作会社などの下請けコーディング案件とはここからの工程を指します。

コーディングの流れ
  1. デザインカンプからの素材の書き出しを行う
  2. カンプを元にコーディングする
  3. 必要ならCMSなどシステム入れ込み、外部サービス連携をする(予約・ECシステムなど)
下請けコーディングの場合は
  • コーディング規約の共有
  • サイトマップの共有
  • FTP情報、サーバー情報

などの情報がこのタイミングで共有されます。

よくあるプログラミングスクールのWeb制作コースでは大半がコーディングの部分しか学習範囲になっていないため、

コーディングだけできれば仕事になると思われていますが、

フリーランスWeb制作者で一からサイトを作る場合は、コーディングは全体の工程の一部分でしかありません。

コーディングするデザインカンプはPhotoshop.Illustrator,Adobe XDの割合が9割9分です。
これらからコーディング練習できる教材で練習しておきましょう(検証ツール見ながら書く模写・写経は実務からは程遠いです)

2-5 テスト→先方確認

自分のローカル環境で開発したものをテスト環境に公開します。

テスト環境とは?

本番環境と同じようなサーバーにアップロードし、動作を確認すること。

ローカル環境で問題なかったもがサーバーアップロードするとバグることがままあるため、必須工程、いきなり納品はしません。

私はWeb制作者なら自分で一つレンタルサーバーをもっておくことをおすすめしています。

テスト環境に使うだけでなく、ブログ運営もできますからね。

WordPressブログの開設・運営はWebサイト公開周りの知識がつくので実案件にもとても勉強になります。

今ならConoHa WING がおすすめですね!

しょーご
しょーご
下請けの場合テスト環境は先方から与えられることもあります。

クライアント確認前にセルフチェックを行う

表示崩れが起きていないかの確認を行います。

具体的なチェックポイントを以下の記事にまとめました。

しょーご
しょーご
ぶっちゃけスマホ、タブレットを用意するのは難しいので、環境を再現できるエミュレーターなどをググって再現したほうがいいです。Windows,MacOS確認は必須なので、環境構築して確認するべきですね。以下の記事にまとめておきました。初学者の方が抜けがちな部分です。

初稿提出→先方確認

セルフチェックが終わった後は「初稿提出からの先方確認」があります。

大抵は問題があるので、修正が発生することになります。

最初は勘違いしやすいのですが、初稿と納品は違います。納期までに初稿を出していたのでは手遅れなので、余裕を持って初稿を提出し、クライアントの修正依頼はあるものとして動きましょう。

そして問題がなくなればいよいよ本番公開になります。

宣伝:コーディング→アップロード→確認→修正の練習ができる教材

ちなみにクライアントにOKをもらうまでを擬似的に練習できるコーディング教材を出していますので、参考までに!

模写コーディング教材
コーディング教材で練習できること&特典
  1. デザインカンプからコーディング
  2. 仕様書付き
  3. サーバーアップロード経験可能
  4. 厳し目の表示確認を2回無償で受けられる
  5. ポートフォリオ可能

本番公開→納品

クライアントのOKをもらったら本番環境にアップロードします。

納品方法は以下の記事にまとめています。

請求書発行、残額支払い

本番環境でも問題がなければ請求書を発行しましょう。

支払いを受けたら領収書を発行し、制作フェーズは終了します。

しょーご
しょーご
請求書も領収書も会計freeeで対応できます

運用フェーズ

  1. サーチコンソール・アナリティクス設定【推奨】
  2. プレスリリース
  3. サーバー・ドメインの保守【推奨】
  4. プラグインの更新【推奨】
  5. コンテンツの更新
  6. バックアップ【推奨】

ここからは表に出てきづらい「運用フェーズ」に入っていきます。

前提:サイトは作ってからが本番である

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サイト公開を認知してもらう施策です。難しく考える必要はなく以下のような方法が考えられます。

  1. 企業の公式facebookやTwitter,インスタに情報を流す(どこでも可能なはず)
  2. prtimesに出稿(企業規模による)
  3. 広告出稿(業態による)
  4. Google MapでのMEOで情報の充実、サイト追加(どこでも可能なはず)

SEOは指名検索以外は基本厳しいので、SEO以外での認知の拡大を図ったほうがいいですね。

3-3 サーバー・ドメインの保守【推奨】

保守はぜひやっていただきたいですね。

突然「サイトが見れなくなりました!」の連絡

以下はよくあるサイト飛ばす例です。保守しないと納品後一年くらい立つと来ます。

お客さん

なんか突然サイト見れなくなったんですが、バグですかね?

しょーご
しょーご
あ、もしかしてサーバー・ドメインの更新されなかった感じですか?

お客さん

あーなんか来てたけど忘れちゃってたんだよね、あれやんないとダメなの?

しょーご
しょーご
あー、サイト消えちゃったかもです…

保守を月額費もらって受けるかどうか

正直「サーバー・ドメインの管理更新」って、お客さんからしたら考えたくもないことなんですよね。

なので選択肢は2つあります。

  1. お客さんに契約してもらい自分がリマインド出したりする
  2. そもそもの契約をこちらで行い、更新もこちらが実費負担→請求

正直どちらでもいいと思いますが、保守として受ける場合はこちらで更新作業を行ったほうがいいと思います。

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' );

このようなコードで一応更新を自動化することができます。

プラグイン更新は保守運用に含まれます。

個人的には2週間に一回は管理画面を見て更新してあげるのがいいかなと思います。

3-5 コンテンツの更新

WordPressサイトを納品した場合ですが、重要なのは「サイトにコンテンツが投稿されているかどうか」です。

せっかくサイトを立ち上げても全く更新されていないサイトが多いのが事実ですが、実際は更新の仕方が分かっていなかったりします。

なので一緒に更新作業を行うことで作業を覚えてもらったり、月イチで案だし、相談に乗るなどして

サイトを更新するお手伝いを保守運用に入れると満足度が高いです。

3-6 バックアップ【推奨】

これはどんなサイトもそうですが、サイトが閲覧不能になる理由は様々あります。

  • サーバー・ドメインの更新忘れ
  • マルウェア侵入
  • サーバー触ってたら誤って消してしまった
  • 管理画面触ってたらおかしくなった

なので、バックアップを都度とったほうがいいです。実はここは自動化できます。

WordPressサイトのバックアップはUpdraftPlusで

UpdraftPlusはWordPressのバックアップを自動で行ってくれるプラグインになります。

私が行っているUpdraftPlusの設定
  • 自動更新は1週間ごと
  • 最大保存件数は7件くらい
  • 保存先はGoogle Drive

バックアップ専用プラグインUpdraftPlusの使い方・設定方法まとめ

https://tekito-style.me/columns/wordpress-plugin-updraftplus

バックアップも保守運用業務に入ります。

作業を自動化していますが、サイトに手を加えるときは自分で手動でバックアップを取るのでバックアップの名目で保守運用費用をもらっても構いません。

月額の中にすべてコミコミということになります。

Web制作の流れを練習しておくべし

Web制作の流れ解説_figure

自分でサイトを開設し運用する

ここまでWeb制作の流れを解説してきました。

ここまででこう思った方もいらっしゃるのではないでしょうか?

初学者さん
初学者さん
うーん、そうは言ってもイメージがつかない
初学者さん
初学者さん
正直実案件でできる気がしないんですよね…練習できるならしておきたいっす…
しょーご
しょーご
そんな人はブログを開設、運用するのがおすすめです!

ブログで得られる知識

ブログ開設、運用で得られる知識は以下の通り。

  • ドメイン・サーバーの契約、紐付け
  • サーバーへのWordPressのインストール
  • 既存テーマ、子テーマを使ったカスタマイズ
  • コンテンツの投稿
  • アナリティクス、サーチコンソールの設置及び分析
  • 保守運用全般

しょーご
しょーご
デザイン・コーディング以外の部分を学べるのがいいですね

WordPressサイトを爆速構築できるConoHa WING

今からサイトの立ち上げを行うなら、ConoHa WING がおすすめです。

『WordPressかんたんインストール』でものの10分でサイトを構築・公開できて、サイト速度も爆速でおすすめできるサーバーになります。

おまけ:ポートフォリオはアップロードしておくべし

Web制作の流れをみていただけたら分かるかと思いますが、サイトはサーバーにアップロードするのが必須なので、

ポートフォリオもサーバーにアップロードされているのは必須です。

どうしてもローカル環境でのコーディングばかりに焦点があたりがちですが、サーバーにアップロードするところまでどうせなら練習するようにしましょう。

Web制作完全独学ロードマップ公開中!

Web制作会社への最強の営業法紹介

\\\コーディング教材公開中///

HTML初心者からWordPress実案件レベルまでのコーディング教材noteで公開しています。

コーディング課題 XD PSDデザインデータ配布
  1. XD,PSDデザインからのコーディング
  2. 2回の表示確認特典
  3. ポートフォリオOK

初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編WordPressの実案件を模擬体験できるレベル感にしています。

しょーご

自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります!

さらに、まとめて購入していただくとかなりお得になります。

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

あなたに是非読んでほしい記事です!