こんにちは！ゆいです！
今回は、「Webサイト制作時の仕事の流れとWebデザイナーの役割」をご紹介します。
くまWebサイト制作に携わりたいけど、仕事の流れや対応範囲が分からないな……
今後、コーポレートサイトやLP制作などのWebサイト制作に携わっていきたいWebデザイナーさん必見の内容になっています。
この記事はこんな人にオススメ
- Webデザイナーに興味がある人
- Web制作に興味がある人
- 副業やフリーランスに興味がある人
- 現在、WebデザイナーやWeb制作で副業をしていたり、フリーランスとして活動している人
Webサイト制作案件のご契約前〜ご契約〜ご契約後の流れ
Webサイトの種類や規模、誰から受注するのか（エンドクライアントやWeb制作会社）によって流れが変わります。
この記事では、以下を想定します。
- 自分がフリーランスもしくは1人Web制作会社
- 自分がWebデザイナーである
- お客様はエンドクライアント
- 5ページ~10ページ程度の小規模Webサイト
- 企画からしっかりと作り込む（単なる名刺代わりのWebサイトではなく、Webサイトを通じてお問い合わせを増やす・売上を上げるなどの明確な目的を持つWebサイト）
ゆいWeb制作会社などから案件を受ける場合も、全体を分かっていたほうがスムーズに仕事ができるから参考にしてみてくださいね！
Webサイト制作の全体的な大まかな流れは以下のようになります。
- 営業
- 契約前（ヒアリングなど）
- 契約（契約書の締結など）
- 契約後（Webサイトの企画・制作）
- 納品
- 作成後（保守・運用など）
営業後、Webサイト制作案件のご契約前〜ご契約〜ご契約後の流れ
実はWebデザイナーは、Webサイトを制作するだけではなく、ヒアリングや契約書の締結、企画などやることがたくさん！
ただし名刺がわりのサイトであれば、企画部分が省かれることもあります。
ゆいWeb制作会社から受注する場合は、Webデザインだけ・コーディングだけ・Web制作だけという場合も多いよ！
Webサイトの作成〜公開〜公開後までの流れ
こちらも、Webサイトの種類や規模、誰から受注するのか（エンドクライアントやWeb制作会社）によって制作期間や流れが異なります。
Webサイト制作では、「企画・準備フェーズ」「制作・実装フェーズ」「保守・運用フェーズ」の3つのフェーズがあります。
ゆいそれぞれ解説していくね！
企画・準備フェーズ
企画・準備フェーズは、表の①〜⑧に当たる部分です。
企画・準備フェーズはWebサイトを制作する上で、最も重要なフェーズです。
ある意味実際の制作よりも重要といっても過言ではありません。
くまえ！どういうこと！？
ゆいここをミスしてしまうと、全部台無しになってしまうこともあるし、制作が本当に大変になってしまったりもするよ
「コンセプト設計やターゲット選定などの『企画』が、Webサイトの命運を分ける」と肝に銘じましょう。
1. ヒアリング
ヒアリングシートを準備して、あらかじめクライアントに記入してもらっておくと、ヒアリングがスムーズに進みます。
なぜWebサイトを依頼してくれたのか？という目的や背景を聞くことが特に重要です。
クライアントが言語化できないこともあるので、具体的に丁寧に言語化してきましょう。
更にクライアントの話を全部鵜呑みにしてしまうのではなく、「本当の目的や要望は何なのか？」を考えながら聞きましょう。
専門用語など分からないことが出てきたら必ず聞くようにしましょう。
ゆいヒアリング前に、クライアントの会社、サービス、市場、業界のリサーチは行っておこう！
ゆいヒアリングには、良いサイトを作ることだけじゃなく、トラブルを避けたり、予算内の妥協案を模索したりするなどの目的もあるよ！
くま最初の擦り合わせがすごく大事だね！
2. 要件定義
要件定義とは、Webサイトが何をできるようにするか、Webサイト作成にどんなことが必要かを決める作業のことです。
クライアントと話し合って、「これがしたい！」「こんな機能がほしい！」などのアイデアを集めて、それをきちんと書き記します。
これによって、理想のWebサイト制作を実現する大切なステップになります。
要件定義をしっかりしておくと、理想のWebサイト制作を実現しやすくなりますし、トラブルも格段に少なくなります。
ゆい要件定義はプチ契約書に近いですね
要件定義はフリーランスや会社によって異なっていたりするので、テンプレートがありません。
「要件定義」と調べてみて、参考にしてみてくださいね。
3. 調査や企画
調査や企画段階では、サービスや商品の強みや弱み、価値などを分析したり、競合調査をしたり、市場調査したりします。
また、誰（ターゲットやペルソナの設定）に何を伝えるのかを決めたり、コンテンツ内容を決めたりもします。
ゆい言語化して、明確にしておきましょう！
ゆい企画に沿って、制作を実施していくよ！
4. 進行表を作成
要件定義に沿って、スケジュールを決めます。
必ず余裕を持ったスケジュールを組みましょう。
修正などの差し戻しがあるのが通常なので、それを考慮しておかないと、期限までの納品ができなくなってしまいます。
ゆいスケジュールが詰めつめだと、クライアントも準備や確認で大変だったりします！
5. サイトマップ作成
サイトマップは、ウェブサイトの地図のようなものです。
サイトマップの例
サイトマップ作成段階では、情報を整理し、必要なページを洗い出します。
複雑な構造のサイトだとユーザーが離れていってしまうので、可能な限りシンプルなサイトマップにしましょう！
ゆいできれば2クリック以内でページに飛ぶようにできればいいですね
6. ワイヤーフレーム作成
ワイヤーフレームとは、Webサイトを作るときに、どこに何を置くかを簡単に描いた絵のことです。
たとえるなら、家を建てる前に図面を描くように、画面にボタンや写真、文章がどこにくるかを決めるためのものになります。
ゆいこれで、作るものの形がクライアントにも分かりやすくなります！
くま出戻りも少なくなるね！
ワイヤーフレームの例
7. コンテンツ作成
Webサイトを作るときのコンテンツ作成とは、Webサイトに載せる情報を集め、Web上に載せる内容を作成することです。
たとえば、お店のホームページなら、お店の紹介文やメニュー、お店の写真などがコンテンツになります。
このコンテンツを作ることで、ユーザーがホームページを見に来たときに、役立つ情報や楽しい話題を提供でき、ユーザーに興味を持ってホームページを見てもらえます。
ゆいコンテンツは、調査や企画段階で決めたことに沿って作成しましょう！
8. 素材の収集
コンテンツの内容に沿って、Webサイトに載せる文章を作成したり、写真・動画などの素材を作ったり集めたりします。
この部分はクライアントが担当することも多く、時間がかかる場合もあります。
ゆいこの部分もサポートできると、重宝されます！
ここまでが「企画・準備フェーズ」です。
実際は①のヒアリングから、⑧の素材の収集まで、ぐるぐる回ったり、行ったり来たりします。
制作・実装フェーズ
企画・準備ができて、ようやく「制作・実装フェーズ」に入ります。
くまここまででも、結構時間がかかるんだね！
制作・実装段階と並行して、クライアント側でコンテンツ作成や素材の収集をすることもよくあります。
この場合は仮でテキストや素材を入れて、Webサイト作成をします。
9. デザイン作成
ワイヤーフレームを参考にしながら、写真やイラストを配置したり、背景色を設定したり、あしらいを追加したり、フォントや文字サイズを整えたりしながら、完成イメージに近づけて、デザインを作成します。
ゆいここは必ずWebデザイナーが担当するよ！
ワイヤーフレームの段階ではイメージしにくかったWebサイト全体の雰囲気や、印象を左右する色味などの具体的なデザインをクライアントと共有します。
デザイン作成の流れとしては、まずはトップページのデザインを作成し、全体のトーン&マナー、世界観などを決めて、クライアントと話し合います。
トップページだけをクライアントに確認をしてもらい、OKが出たら、他のページを作成していくと、出戻りが少なく、スムーズに作成ができます。
ゆい全部のページを作成した後に、「色やフォントなど全部やり直し！」ってなったら効率も悪いし、大変だよ
ゆい気になる部分はちょくちょく確認していくのがオススメ！
デザインを作成するツールは、Adobe Photoshop、Adobe XD、Figmaなどがありますが、オススメはFigmaです。
ゆいFigmaは無料で使えるのに、クライアントと共有できるし、画像を編集できるし、CSSなどが表示されてコーディングもしやすいからオススメ！
ゆいコーダーさんにはFigmaが嬉しいとよく言われますね
一度の制作でOKとなることもありますが、大抵はデザイン案をもとに何度か打ち合わせと修正を繰り返し、徐々に完成イメージに近づけます。
ゆいここで修正地獄にならないためにも、最初のヒアリングや要件定義などがすごく大切なんです
くま伝える側も大変だよね…
10. サイト実装
デザインが確定したら、確定したデザインをもとに、Webサイトのコーディングやプログラミング、システム構築を進めます。
具体的には「HTML」や「CSS」、「JavaScript」「PHP」などの言語を使って、Webサイトを実装します。
大抵の場合は、テスト環境で実装を進めます。
Webサイト実装により、実際にWebブラウザ上でWebサイトを表示させることができるようになります。
Webデザイナーがサイト実装をすることもあれば、エンジニアやコーダーが担当することもあります。
ゆいコーディングもできるWebデザイナーは重宝されますね
Webデザイナーであっても、コーディングのことは知っておきましょう。
Webデザイナーがコーディングをしないにしても、コーディングしにくいデザインだとコーダーが戸惑いますし、コーディングが大変になることがあります。
くまコーダー泣かせのデザインもあるよね
たとえば、画像サイズや余白、配色、位置合わせといった基準にばらつきがあると、デザインミスなのか意図的なのか、判断に困ってしまうことがあります。
ゆいデザインの不備によって、コーディング作業の際に迷惑をかけるのはWebデザイナーとして避けたいところ！
紙媒体のデザイナーが印刷の知識を付けているのと同じように、Webデザイナーもコーディングをしないまでも、コーダーとコミュニケーションができる程度の知識は身につけておきましょう！
11. ドメインとサーバー
ドメインとサーバーのことについても押さえておきましょう。
Webサイトを作るときに、ドメインとサーバーはWebサイトの「住所」と「家」のようなものだからです。
ドメインはWebサイトの住所で、サーバーはWebサイトの情報を保管しておく家です。
Webデザイナーは、Webサイトがどのように見えるかだけでなく、人々がそのWebサイトをどうやって見つけて、情報をどこで保管するかも考える必要があります。
ゆいドメイン、サーバーを知っておかないと、手順通りに進まなかったり、公開直前に焦ったりします！
ドメインやサーバーの契約は、トラブルを避けるためにも、できればクライアントに契約してもらいましょう！
12. テスト
サイト表示や動作が問題ないかどうかをテストします。
コーディングとシステム開発が終わったページから、実際にWeb上で確認できるようになります。
テスト段階で問題がなければ、いよいよ公開です！
13. 公開
サーバーに本番アップロードし、公開になります！
公開することにより、誰でもサイトが見られるようになります。
くまここまで長かったー！
最終確認で問題がなければ、ここで納品完了となります。
ゆいここで終わり！と思いきや、実はまだ続きがあります！
くまえ！
保守・運用フェーズ
Webサイトは公開後が本当のスタートです！
Webサイトが完成したからといって、放っておいても目的が達成されることは、残念ながらほとんどありません。
どんなに質の高いWebサイトを制作しても、その後何もせずに放置していたら、残念ながら不具合が起こったり、廃れていったりしてしまうのです。
くまWebサイトを作るだけじゃダメなんだ！
目的を達成するには、土台となるWebサイトを完成させた後に、完成したWebサイトを活用して、サイト分析や運用などの適切なマーケティング戦略を実行することが必要です。
ゆいWebサイトを保守・運用し続けると、目的が達成されやすいよ！
Webサイト制作時の仕事の流れまとめ
Webサイト制作の流れを、「企画・準備フェーズ」「制作・実装フェーズ」「保守・運用フェーズ」の3つのフェーズに分けて説明してきました。
Webサイト制作は、単純にデザインを制作するだけのものではなく、デザインを制作するのは一部の工程であることにびっくりした人も多いのではないでしょうか。
Webデザイナーはどこからどこまでの工程を担うのか？については、クライアントの要望や依頼内容にもよりますし、WEBデザイナーのスキルにもよります。
デザインだけに携わることもあれば、3つのフェーズの全ての工程に携わることもあります。
Webデザイナーが全体の工程を知っていると、仕事がスムーズに進みます。
Webデザイナーの仕事に興味が湧いてきたら、以下の記事も参考になるかと思いますのでぜひ読んでみてくださいね！
ビジネスや副業・起業に関するご相談を承ります
1. 60分単発コンサル
事業相談、サイト制作方法、集客など、どんなご相談でもOKです。
60分間の個人セッションの中で、あなたの目的やお悩みごとに今やるべきことや解決につながる行動を一緒に導き出します。
困ったときや行き詰まったときなどにお気軽にご利用ください。
2. ノーコード / ローコードWeb制作 完全マスターコーチング
WebデザイナーとしてWeb制作で副業・起業したい方に向けての個別コーチングです。
ご案内は公式LINEで行なっています。
【公式LINE登録者限定】今なら有料級6大プレゼントを配布中。
- 「案件が獲得できるようになるためのスキルを身につける、超具体的な学習ロードマップ」
- 「6つのサイト制作ツールのメリット・デメリットをわかりやすく比較したスライド」
- 59枚の「Web制作に必須の画像素材サイトの紹介スライド」
- 42枚の「知らないとヤバい！ビジネスマナー35選のスライド」
- 学習に挫折しないための助けになる！「自分振り返りワークシート」
- 無料個別相談
3. ホームページ制作・リニューアル
訴求力が高いホームページを制作し、売上アップや採用効果アップ、ブランド力の向上など事業の活性化に繋げます。
アクセス解析などの数値やデータなどの分析に加え、女性ならではの感性と直感力を活かしたご提案や、女性向けデザインが得意です。
コメント