こしばコーディングの勉強をしてたけど、Web制作全体の流れがよく分からないまま…。
初めてのエンドクライアントのお仕事で、受注から納品までの流れが分からず不安…。
苦手な仕事を外注してディレクションしたいけど、案件全体の流れが分からない…。
あなたもWeb制作全体の流れや進め方が分からずに困っていませんか?
実はWebデザインもコーディングもWeb制作全体の工程の一部に過ぎません。
Web制作全体の案件の流れ・進め方を知っておくとメリットが沢山あります。
- Webディレクターを目指せる
- エンド営業からの案件の進め方が分かる
- 全体の流れを考えながら自分のデザインやコーディングを担当できる
デイトラちゃん
こしば
デイトラちゃんデイトラの公式マスコットキャラクター。普段はデイトラ公式LINEアカウントに生息している。何を勉強するべきか悩んでいる人にアドバイスをしたりオンラインスクール「デイトラ」の広報活動をしたりしている。Webにチョット詳しい。
デイトラちゃんそれぞれの工程を勉強するのにデイトラのおすすめコースも教えてあげる✨
Web制作の全体の流れ

デイトラちゃんディレクター、デザイナー、コーダー、マーケターが担当する工程も分かりやすく色分けしておいたよ!
こしば
デイトラちゃん
こしば
デイトラちゃんデザインやコーディングなど得意なことに特化して、一部の工程だけ仕事にするフリーランスの方も沢山いるよ✨
こしばこしば最初は迷ったけど最初は実装(コーディング)で一人前になることを優先させたよ。
デイトラちゃん
デイトラちゃん一方、小規模なWeb制作会社だと複数の工程を担当することも珍しくないね。例えばデザインもコーディングも全部、任されることもある。
小規模なWebサイト制作を一人で全部するフリーランスの人もいるね。
こしばでもヒアリングとか要件定義とか情報設計とか難しい言葉で、こしば良く分かんないよ。
デイトラちゃんそれぞれの工程をこれから深掘りして解説していくから安心して!✨
1:ヒアリング

デイトラちゃんまずお客様がどんな悩みを抱えているのか?どんな目的があるのか?どうしてWebサイトが必要なのか?お話を聞いてみるんだ。
こしばでも仕事だと緊張して大事なことを聞き忘れちゃいそうだよ。
デイトラちゃん
こしばでも、どんなことを聞けばいいの?
デイトラちゃん- お客様がWebサイトを通して何がしたいのか?
- 企業理念・コンセプト
- 他社と比べた時の強み、自慢、サービスや商品の特徴
- サービスや商品のメイン客層
- HPを訪れた人に見せたいイメージ
- 完成イメージに近いサイトのURL(あれば)
- HPに必ず載せたい内容は?
- 追加したい機能などあれば
- 現行サイトがある場合は、現環境についての情報
デイトラちゃんこの3つはヒアリングのときに、しっかり聞いておくことが大切だよ✨
こしば
デイトラちゃん何も確認しないで勝手にWebサイトを作って後から「こんなはずじゃなかったのに…」ってお客さんから言われたら残念だよね?
こしば
デイトラちゃんお客さんの課題をしっかり聞いてあげもしないで課題を解決してあげられないでしょ?
こしばお客さんの課題をちゃんと解決してあげられるようにヒアリングシートをちゃんと用意するよ!
デイトラちゃん2:企画・提案

デイトラちゃんヒアリングした内容をもとに、お客さんの課題を解決してあげる企画や提案をするんだ!
こしば
デイトラちゃんお客さんがモノの販売をWebで完結させたいならECサイトの制作を提案することもある✨
デイトラちゃん
こしば
デイトラちゃん集客がしたいのか?何かサービスをはじめたいのか?認知拡大を目指すのか?ゴールを見据えて適切な企画と提案をするのが大事なんだ!
こしば3:受注

デイトラちゃん企画と提案をお客さんに納得してもらったらお仕事をもらえるんだよ✨
こしば
デイトラちゃんでも「案件獲得」はゴールじゃないからね。受注したからにはお客さんをがっかりさせないためにプロとして責任をもってプロジェクトを進めないといけないよ!
こしばこしばも責任をもってプロ意識をもってお仕事をするよ!
4:契約書を交わす

デイトラちゃん
こしば
デイトラちゃんもしWebサイトを制作して納品したのにお金を払ってもらえなかったらどうするの!?
こしばでも、こしば法律とか詳しくないし契約書なんて作れないよ…
デイトラちゃん
こしば
デイトラちゃん
こしば契約書のこととか全然、分からないから助かるよ。
デイトラちゃん
こしば技術だけ勉強しても仕事につながらないと受講費用を回収できないもんね。
こしば
デイトラちゃんもし遠方の人と契約するならオンラインで契約を交わせるサービスを利用するのもおすすめだよ!
デイトラちゃん
こしば
デイトラちゃん先にお金をいただいておけば外注費を払う余裕がなくなったり、納品した後にお金を支払ってくれなかったりというリスクは回避できるからね。
こしば
デイトラちゃんでも納品後じゃなくて納品前に請求するWeb制作会社やフリーランスもいることは知っておいていいんじゃないかな?✨
5:要件定義

デイトラちゃん
こしば要件定義とは?
Webサイトで実装すべき機能や満たすべき性能などのを明確にしていく作業のこと。
こしば
デイトラちゃん
デイトラちゃん
こしば
デイトラちゃん
こしば
デイトラちゃんちなみにデイトラのWebデザインコースでは要件定義についてかなり細かく触れているよ✨
こしば
デイトラちゃん
こしば6:情報設計

デイトラちゃん
こしば
デイトラちゃん
こしばでも、いきなりデザインからはじめたら駄目なの?
デイトラちゃん
デイトラちゃんテキストはお客さんに用意してもらうのかヒアリングして自分で書くのかは案件によるよ。
こしばたしかにお客さんの会社のことはお客さんが一番よく分かっているもんね。
デイトラちゃんお客さんのテキストが遅れてWebサイトの完成が遅れてしまうこともあるからね。
こしば
こしば
デイトラちゃん
デイトラちゃん実際にお客さんの顔を見ながら仕事ができるのはエンド営業やディレクターの面白いところだね✨
7:デザイン

デイトラちゃん
こしばデザインでは具体的にどんなことをするの?
デイトラちゃん
デイトラちゃん
こしば
デイトラちゃんデザインは課題解決のための手段。アートは自己表現。あくまでもWebデザインはお客さんの課題解決のためにすることだよ✨
こしば・デザインは課題解決
・アートは自己表現
【PR】デザインを勉強するならデイトラWebデザインコース!
こしば
デイトラちゃん
デイトラちゃん
こしば
デイトラちゃんデザイナーとして仕事ができるようになるために必要な内容を盛りこんでいるんだよ✨
こしばやっぱりデザインツールの使い方だけ覚えても実際に仕事をするのは難しそうだもんね。

デイトラちゃん実際にランディングページ、コーポレートサイト 、ECサイト、アプリのUI/UXデザインを手を動かしながら実践的に学べます✨
8:実装(コーディングとCMSの組みこみ)

デイトラちゃんHTMLやCSS、jQueryを使ってコーディングしたりWordPressのオリジナルテーマを作成するところだね!
こしば
デイトラちゃんHTMLやCSS、JQueryを使って実装する前にも本当はWeb制作って沢山のことをしないといけないんだ。
デイトラちゃん
こしば
デイトラちゃんWeb制作はデザインやコーディングのように一部の工程に特化して制作会社とパートナーを組む働き方もできるよ。
デイトラちゃん
こしば【PR】コーディングを勉強するならデイトラWeb制作コース!

デイトラちゃん未経験からでもWeb制作会社と一緒に仕事ができるレベルのコーディング力が身につくコースです。
デイトラちゃん9:検証・デバッグ

デイトラちゃん残り少しだから頑張ろう!
こしば
デイトラちゃん
デイトラちゃん
こしば
デイトラちゃん納品前にチェックシートを用意して一つ一つ確認するのがおすすめ✨
こしば
デイトラちゃん- テキストの誤字・脱字
- リンク切れ
- 404ページがあるかどうか
- お問い合わせフォームが正常に動くかどうか
- SNSのシェアボタンが機能するか
- SSL設定はされているか
- OGP設定
- favicon設定
- 適切なマークアップか
- ベーシック認証・noindexは外したか
- レスポンシブ対応できているか
- デザインカンプを再現できているか
- 表示崩れしているブラウザがないかどうか
- 表示速度は遅くないか
こしば
デイトラちゃんお客さんに納品してから不具合が見つかったら信用問題になることもある。
納品前は検証・デバッグはちゃんとしよう!
デイトラちゃん本来、お問い合わせフォームから受注できるはずだった注文が入らず売上が下がってしまうよね。
こしば
デイトラちゃん悪い評判もたって仕事が来なくなっちゃうかも。
こしば10:検収・納品

デイトラちゃんお客さんに最終確認をしてもらって納品するんだ!
こしば
デイトラちゃんでも納品して終わりで本当にいいの?またゼロから新しいお客さんを探すの?
こしば
デイトラちゃん11:運用

デイトラちゃんWebサイトは公開した後の運用や集客がうまくいってはじめて効果がでるんだよ✨
多岐に渡るWebサイトの運用の一例
- 集客してWebサイトに来てもらう
- Webサイトの解析と改善をする
- 見込み客のリスト獲得
- 商品販売
- サービス
こしば
こしば
デイトラちゃん
デイトラちゃん
こしばお客さんの代わりに運用をしてあげる仕事ができるようになるね!
デイトラちゃんだから最近Web制作だけじゃなく集客に有効なWebマーケティングが注目されているんだ✨
デイトラWebマーケティングコースが広告運用に力を入れている理由
デイトラちゃん主なWeb集客の方法
- リスティング広告(Google広告・Yahoo広告)
- Facebook広告・Instagram広告
- LINEマーケティング
- SNS集客
- MEO対策
- SEO対策
- 動画を使ったマーケティング
こしばこんなに沢山あると何からはじめればいいのか分かんないよ。
デイトラちゃんデイトラではWebマーケティングの全体像やWeb広告、Webサイトの改善まで勉強できるんだよ✨
こしばでも実際にはどんなスキルを身につけられるの?
デイトラちゃん
こしば
デイトラちゃんもちろん広告運用以外にも集客施策の概論も勉強するよ✨
こしば
デイトラちゃんSEO対策はご要望が多いからコンテンツを追加する予定だけどね✨
デイトラちゃん
デイトラちゃん
こしば
デイトラちゃん
こしばWebマーケティングの勉強をしたらWebをうまく使える人になれる!
デイトラちゃん
デイトラちゃん
こしば
デイトラちゃんしかもWeb集客を通してお客さんのビジネスと一緒に成長もできる。新規の顧客を開拓するための営業も無理せずに済むんだ✨
こしば
デイトラちゃんWebマーケティングを勉強して売上に貢献できる人材はとても需要があるんだよ✨
こしば【PR】広告運用を勉強するならデイトラWebマーケティングコース!

デイトラちゃん特にクライアントの売上を伸ばせる力がつくことにこだわっています!
Web制作の案件の流れを理解して自分がどんな役割をするか考えてみよう!

デイトラちゃん
こしば
デイトラちゃん
デイトラちゃん
デイトラちゃん
こしば
デイトラちゃん僕で良ければ、こしば君の相談に乗ってあげるよ✨
こしば
デイトラちゃん僕は普段、デイトラ公式LINEに生息しているんだ!こしば君も僕のLINEに遊びにきておくれよ✨
こしば
まとめ

Web制作全体の流れを解説しました。デザインやコーディングのような手を動かすところから勉強する人も多いため、Web制作の案件全体の流れを理解するのが後回しになってしまうことも多いのではないでしょうか。
Web制作の工程全体を理解していないとエンド営業やWeb制作のディレクションは難しいですよね。全体の流れを理解していないとデザインやコーディング(実装)専門の人もWeb制作全体の流れを理解できず円滑なコミュニケーションにも支障が出てしまうかもしれません。
しかしWeb制作全体の流れを把握できると以下のようなメリットがあります。
- Webディレクターを目指せる
- エンド営業からの案件の進め方が分かる
- 全体の流れを考えながら自分のデザインやコーディングを担当できる
Web制作にはデザイン・コーディング以外にもやらなければいけないことは沢山あります。デザイナーやコーダーがやらない仕事を大体、全部やるのがWebディレクターの仕事です。エンドクライアント向けの仕事の場合、制作会社だとWebディレクターが担当する工程も自分でやる必要がでてきます。
一方、デザインやコーディングの技術を磨いてWeb制作会社や他のフリーランスとパートナーになって一部の工程のスペシャリストになるのもフリーランスの生存戦略の一つです。
そしてWebサイトは作って終わりではありません。むしろ運用してはじめて効果が出る媒体です。Webサイトを作れるだけでなく上手に使える人つまり「Webマーケター」の需要も高まっています。
情報が溢れて迷いやすい時代ですが大事なのはWeb制作全体の流れを理解し、あなた自身で自分の目指す働き方や適性を振り返り自分のキャリアを考えてみることです。
どんなことが得意でどんな仕事をしていきたいのか考えてみましょう!
デイトラちゃんWebスキル診断や漫画で分かるデイトラのコース紹介もしているんだ。お得なデイトラ限定クーポンを貰えることもあるよ!