こんにちは！ Webデザインスクール「デジLIG」運営担当の天（@10TEN10TAN10）です。
未経験からWebデザイナーへの転職を目指す場合、実際にクライアントからの依頼を受けておこなう制作（クライアントワーク）を経験しておくことは必須ともいえます。
当スクールのカリキュラムでも、学習の集大成として「Web制作をイチからおこなう」という課題が出され、多くの受講生さんがクライアントワークに挑んでいらっしゃいます。
しかしはじめてのクライアントワーク、なにからはじめたらよいのかわからない、という方も多いのではないでしょうか？
そこで今回は、卒業制作としてクライアントワークを経験したスクール卒業生さんに、はじめてのクライアントワークの進め方やコツを聞いてきました！
実績作りのためにこれからはじめてクライアントワークをおこなう方や、Web制作のクライアントワークの流れが知りたいという方のお役に立てれば幸いです！
目次
はじめに：Web制作テーマ選びのコツ
はじめてイチからサイトを構築するのであれば、サイトのターゲット層が自分自身と近いものや自分の知っている領域をテーマに選ぶのがおすすめです。
たとえば、以下のような業種やサービスです。
- 自分と同じ年代の人が利用するサービス
- 自分の趣味や知識がある業種
- 自分の身近な人が携わっている業種
- 前職で経験した業種
- ユーザー心理がわかる業種
ふだん自分が利用しないようなサービスや領域をテーマにすると、下調べに時間がかかったり、時間をかけていても的はずれな企画を立ててしまったりする可能性があります。あまりに的外れな企画を立ててしまうと、クライアントに迷惑をかけてしまうだけでなく、（自主制作であっても）実績としても使えません。いくらデザインがよくても、企画が破綻している作品は、採用面接での評価も大きく下がってしまいます。
もちろん将来的には、ご自身が詳しくない領域のサイト制作に携わることもあると思いますが、あえてはじめてのクライアントワークで、難易度の高いテーマを選ぶことはおすすめしません。スムーズに制作を進めるためには、自分に親しいテーマを選ぶことも大切です。
どうやってクライアントを探せばいい？
クライアントを見つけることは、はじめての方にとって一番の難関といえるかもしれません。クライアントの探し方について、当スクールの受講生に多いパターンをご紹介します。
身近な人から探す
当スクールではじめてクライアントワークに挑むという方の多くが、ご自分の知人や友人、親族など、自分に近しい存在からWebサイト制作が必要な方を探していらっしゃいます。
やはりはじめてのクライアントワークを進める上で、気軽にコミュニケーションを取れるというメリットは大きいです。制作に集中するためにも、まずは身近な存在から探してみてはいかがでしょうか。
SNSで探す
自分の近辺で見つからなかった場合、SNS上で探すという方法もあります。
なかにはご自身が好きなイラストレーターさんの個人サイトを制作した卒業生さんもいらっしゃいました。
未経験からここまで！？SNSで話題”強カワ”魔法少女Webサイト制作に至るまで
Haruna Okumura
もちろんWeb上の見ず知らずの方から了承を得るのは、かなりハードルの高い方法ですので、すべてのケースでうまくいくわけではありません。
それでも、上記の卒業生さんのように熱意を伝えることで受けてくださることもありえます。たとえば以下のようなことを上手に伝えられるとよいでしょう。
- なぜあなたを選んだのか
- 自分に依頼するとどんなメリットがあるのか
- どういうふうなWebサイトにしたいと考えているのか
ここで注意が必要なのは、いろいろな方へ闇雲に、テンプレートのようなDMを送らないことです。相手方の迷惑になるだけでなく、あなた自身（もしくは所属している組織）の信頼を失うことになりかねません。今後のクリエイター活動の足を引っ張ることのないようにしましょう。
お店に直接アタックする
なかには店舗に直接赴いてアタックする、という方法を取られた方もいらっしゃいました。
知り合いでなくとも、自分の行きつけのお店や知っているお店であれば、ターゲットも自分ごとで考えやすくサイト設計もしやすいですよね。
ただし、こちらもSNSでのDMと同様お店側の迷惑とならないよう注意が必要です。
クラウドソーシングに応募する
ホームページのTOP画デザインだけ募集しているものを見つけ、カフェサイト作成した時習った技を駆使して作って見ました。一日では終わらなかったよ…
意味を持たせるカラーリングが難しかった。
後、インフォグラフィック的な物もムズイっすね。 pic.twitter.com/YYJ5K2uLOr— kanakunVFX (@KabutomusiV) May 8, 2022
TOPのデザインのみ、などデザインの経験を積むのであれば、クラウドワークスなどのクラウドソーシングを活用する方法もあります。
「実績0件」だと選ばれづらいということもあり、単価を低くして選んでもらう方法を取るという方もいらっしゃいました。経験が浅いうちは稼ぎのことは考えず、自分の経験を積むためにおこなう、ということを意識して取り組みましょう。
Web制作の流れ
Web制作の流れは以下のようになります。
- 企画提案
- ヒアリング
- 情報設計
- デザイン
- コーディング
- ブラッシュアップ
- 公開
- ▼参考：制作スケジュール
- 受講生さんに聞いたスケジュール感は以下のとおり。
- 企画〜設計・・・4週間
- デザイン・・・2週間
- コーディング・・・2〜4週間
それぞれの工程でどんなことをしたらよいのかを、以下で簡単にご説明いたします。
1. 企画提案
企画提案フェーズでは、「企画提案書」という資料の作成をしていきます。「ぜひあなたにお願いしたいです」とクライアントに選んでもらうための資料が、企画提案書です。
身内の方から口頭でOKもらえているという場合でも、本気度を示すためにも制作したほうが良いでしょう。制作の期待度アップにも繋がり、協力を得られやすくなるでしょう。
企画提案書に盛り込む内容
| 概要説明 | なぜ企画するに至ったか、資料の目次など |
|---|---|
| 現状分析 | 目的を阻む課題やファクトを提示
|
| ご提案内容 | 課題に対するソリューションや制作のメリット
|
| アウトプットの具体例 |
|
| 制作スケジュール | 各工程の説明やどれだけ時間がかかるかの工数見積もり。ガントチャートなどがおすすめ。 |
| お見積り | 必要あれば。基本的には欲しい時給から算出。 |
概ね上記のような流れになります。自分なりのストーリーを考えて、提案しやすい順番にアレンジしても大丈夫です。
企画提案書を作る前にヒアリングの機会を設けられるのであれば、ぜひお願いしてください（ヒアリングの項目は以下を参照）。
気軽にコンタクトが取れないような場合には、クライアントとなる方の情報を自力で集めて、想定で作っていくことになります。その場合には、以降企画自体の方向修正が発生することもありえますので、企画提案書はあくまで選んでもらうための資料となります。このあと作る設計書に、ヒアリング内容を盛り込んでいきましょう。
企画提案書を作れるソフト
企画提案書など、資料づくりに役立つソフトをご紹介します。使い慣れたものがあればなんでも大丈夫です。
- Illustrator：Adobeのデザインソフト。デザインの自由度が高いが、複数ページ作成には向いていない。
- InDesign：本や複数ページを作るのに向いているAdobeのデザインソフト。操作性はIllustratorに似ている。
- Keynote：Macユーザー向け。
- PowerPoint：Windowsユーザー向け。
- Googleスライド：オンラインで使える無料のサービス。
- AdobeXD：Adobeのデザインソフト。直感的な操作でレイアウトができる。ワイヤーフレーム作りにもよく使われる。
【朗報】みんなまだXD使ってないの？私は企画書（提案書）もXDで作っています！
ノブ
企画提案書づくりの参考になる資料
資料を作る際に参考にしたい記事や書籍をご紹介します。
伝わる図解の作り方～レイアウトや配色のポイントを解説～
Saki Hanazawa
デザイン提案資料をつくるときに大切にしている5つのこと
Miya
2. ヒアリング
企画提案を受けてもらえたら、次はクライアントに詳細のヒアリングをしていきます。ヒアリングは、このあとの設計の段階で必要な情報を集めていきます。
ヒアリングの方法
ヒアリングは、クライアントの環境に合わせた方法を設定しましょう。
| 対面 | 紙の資料を提示できたり、表情を読み取りやすいので、コミュニケーションが取りやすい。録音を忘れずに。身内など距離が近い場合や、ITリテラシーが低いクライアント向き。 |
|---|---|
| オンライン通話（Zoom、Google Meetなど） | オンラインで顔を合わせてコミュニケーションが可能。録画機能が便利。ある程度リテラシーが高いクライアント向き。 |
| スプレッドシート | ヒアリング内容のまとめ用に。クライアントが内容を更新することも可能。オンラインで内容を共有できる。 |
ヒアリング項目の例
- クライアント調査（事業内容/会社の現状・強み・課題）
- 市場環境&競合（仕組みや関係者など）
- コンセプト・テイストの擦り合わせ（参考サイト探し/テイスト決め）
- 掲載コンテンツの策定（掲載したい内容の整理）
ヒアリングの参考になる資料
制作会社でおこなっているヒアリングの例です。参考にしてみてください。
【デザイナー向け※DL資料つき】コンセプト制作をスムーズにする5つのステップ LIGのWeb営業が考える「ヒアリング」のコツ①事前準備編 LIGの営業が考える「ヒアリング」のコツ②ヒアリング当日編
ずんこ
Ryotaro Hasegawa
Ryotaro Hasegawa
3. 情報設計
情報設計のフェーズでは、ヒアリング項目をもとに、あらためてサイトの目的やターゲット、Webサイトの全体の構造図（サイトマップ）、サイト内の各ページの設計図（ワイヤーフレーム）を確定していきます。企画提案で作った内容をあらためて確定していくイメージで良いと思います。
情報設計のフェーズでは、以下の内容を定めていきます。
- 制作のゴールを共有
- URL、サイトマップの確定
- ワイヤーフレームの作成
- 想定している機能の定義
サイトマップとワイヤーフレームの作り方については以下の記事を参考にしてみてください。
「STEP02. サイトマップとワイヤーフレーム」自分のブログをデザインするまでの流れ
まきこ
要件定義書にまとめる
制作会社では、「要件定義書」を作ってクライアントとすり合わせをおこない、制作するものを確定させていきます。以下がその例です。
この要件定義書を作って、クライアントとすり合わせをしていきましょう。
| 制作の目的 |
|
|---|---|
| 作業範囲（作業スコープ） |
|
| サイト要件 |
|
| システム要件 |
|
要件定義、要件定義、一体なにをどこまで定義すればいいんだ
さささん
4. デザイン
作成したワイヤーフレームをもとに、デザインを作っていきます。
まずは、ヒアリングした内容をもとに、配色、フォント、モチーフ、コピーなどを決めていきます。とくにサイト全体での統一感を持たせるためにも、トーン＆マナーを揃えるのは大切です。
トーン＆マナー
- 使用フォント
- 使用カラー
- UIパーツ（ボタンなど）
- デザインのあしらい
これらは手を動かす前に決めておくとデザインがスムーズに進みます。
その後、トップページ全体のデザイン（ヘッダー、メインビジュアル、フッター）、個別ページのデザインを作っていきます。
クライアントには一通りできたら確認するのではなく、可能な限りこまめに確認しながら進めることで、デザインの戻しも少なく済みます。
以下にデザインに役立つ記事を紹介しているので参考にしてみてください。
参考イメージ探しに役立つ記事
Webデザインの参考になるギャラリーサイト24選【2023年】 配色難民と化した新人デザイナーに捧ぐ。本当に役立つ配色サイトまとめ
ミライ
ミライ
素材探しに役立つ記事
フリーイラスト素材サイト39選【デザイナー厳選】 無料で商用利用可なフリーアイコン素材サイト13選【デザイナー厳選】 フリー画像・写真素材サイト15選【デザイナー厳選】
Saki Hanazawa
Saki Hanazawa
Saki Hanazawa
デザインTips
文字装飾デザイン基本の10パターンを参考例とともにご紹介します！ 【作例付き】グリッドで簡単レイアウト！垢抜けメインビジュアルの作り方 デザインの齟齬を防ぐためにやっている7つのこと 【意外と教わらない】Webデザイナーなら知っておくべき画面サイズのお話。 【ご意見ください】Webデザイナーが初めて作ったLP制作の裏側！学んだことと反省点
Saki Hanazawa
maimai
maimai
maimai
えびちゃん
5. コーディング
コーディングは、デザイン通りの見た目をWebブラウザ上で表示するための工程です。はじめてのWeb制作で、慣れていないと時間がかかってしまうこともあり、多くの方がつまずくポイントでもあります。
コーディングに関しては、思っている以上に時間がかかってしまうケースが多いので、多めに工数を考えておきましょう。
ここまで決めたものをWeb上で再現する段階なので、クライアントへの確認は減ります。
コーディングで参考になる記事
コーディングの第一歩！HTMLとCSSは怖くない コーディングが少し楽になる、意識したい命名規則とCSS設計。 簡単！CSSで日本語フォントの文字間隔調整【font-feature-settings】
Ryo Sasaki
Ryo Sasaki
モトキ
6. ブラッシュアップ
Webサイトとして表示確認ができるかのテストや修正をおこなっていきます。おもなテスト項目は以下のとおりです。
| デザイン再現テスト | PSDとブラウザを重ねてズレがないかチェックするテスト。全端末、全ブラウザに対しておこなうことは非現実的なので、ベストビューというものを定義して、限定したテストをおこなう。 |
|---|---|
| ブラウザ表示テスト | IE11やAndroidなど各ブラウザで崩れがないかの表示確認をするテスト。
サイト公開前のブラウザチェックを簡単に行う方法。不具合発見後の対応も解説 
Seita Hichiku
|
| 機能テスト | リンク先は間違っていないか、表示件数や期待する表示内容になっているか、CMSで入力した内容が正しく出力されているかを確認していくテスト。 |
Webディレクターが考える「テスト」の大事さについて
ともぞう
また、SEOを狙ったWebサイト制作をおこなう場合には、以下の記事が役立ちます。
Webサイトリリース前に確認すべきSEO内部施策10項目をご紹介！
Kenichiro Harashima
7. 納品
自身のチェックが終わったら、今度はクライアントの環境でも問題なく動作するかチェックをおこなっていただきます。
デザイン、クリックしたときの遷移先など、すり合わせした内容の通りになっているか確認できたら、無事納品となります。
8. 公開
クライアント含めすべての確認が済んだら、いよいよ本番環境での公開となります。事前にクライアントと公開日時のすり合わせをおこなっておくとよいでしょう。
今回は、公開までの流れをご紹介しましたが、Webサイトは作って終わりではありません。コンテンツの情報更新やサーバー代などのランニングコストなども考慮していかなければなりません。
Webサイトの保守運用については、以下の記事が参考になります。
導入時だけじゃない！Webサイト公開後に発生するランニングコストを考えよう
Yuka Inaba
Webサイトの保守運用を全て解説！【作って終わりではない】
Seita Hichiku
クライアントワークを上手に進めるためのコツや注意点
企画・コンセプト立案をしっかり立てる
企画書がダメだとサイトもダメになる、といわれるほど企画は大事です。
「なぜこのサイトが必要なのか」という目的や、「誰のためのサイトなのか」というターゲットをしっかりと設定し、それらをサイトの隅々にまで落とし込むことがうまく進めるポイントです。
また、最後まで方針をぶらさないことも大切です。デザインやコーディングの段階においても、いつでも最初に決めたコンセプトや方針に立ち返って考えるようにしましょう。
こまめに連絡を取る
先方都合でスケジュールに遅延が出ることもあるでしょう。なかには連絡が取れなくなってしまうケースもありえます。
このようなことを防ぐためにも、相手に確認が必要なときだけに連絡するのではなく、報告だけでもよいのでできるだけこまめにコミュニケーションを取りましょう。
納期（スケジュール）を守る
締め切りを守ることは、社会人としてもっとも大事なことです。どんなにデザインが上手で技術があっても、締切を守れないクリエイターには、仕事が来ません。Web制作はチームでおこなうことがほとんどですので、他のメンバーに迷惑をかけないためにも、納期は必ず守りましょう。
商用OKな素材を活用する
時間がなかったり、スキルがなかったりで、自分で写真やイラストなどの素材が準備できない場合は、商用OK・著作権フリーの素材を活用しましょう。
素材を使用する際には、間違っても著作権を侵害するような行為はしないように。クリエイターとしての信用を大きく傷つけてしまうことに繋がります。
クライアントのビジネスを否定しない
クライアントのビジネスに深く関わっていくと、「もっとこうしたらいいのに！」と思うこともあると思います。Webや広告に関する戦略の提案はどんどんしていくとよいですが、クライアントのビジネスそのものに関する提案には注意が必要です。
よかれと思って発言したことでもクライアントの気分を損ねてしまう可能性もあります。信頼関係が浅いうちは、あくまでクライアントのビジネスの考え方を尊重し、サポートするという役割に徹しましょう。
「提案型」のコミュニケーションを取る
こちらからの提案に対して、Yes/Noで答えられたり、選んでもらうだけだったりと、クライアントが判断しやすいような方法を取るとスムーズに進めやすくなります。
さいごに：大切なのは、最後までやりきること
はじめてのWeb制作。デザインに凝りすぎてコーディングでつまづいてしまったり、他と比較して落ち込んでしまったりすることもあると思います。
クライアントワークはもちろん、Web制作全般にいえることですが、大切なのはWebサイトを完成させることです。
完璧を目指したり、自分の実力以上のことをやろうとしなくとも、クライアントワークをやりきったという経験そのものが、就職活動においても評価ポイントとなります。
また、よいものを作りたい！ という本気度が伝われば、クライアントの信頼感も高まり、協力も得られやすいはずです。実力はあとからでも十分つけていけますので、まずは一つのプロジェクトを最後までやりきりましょう。
一人でやりきるのが不安、ある程度のクオリティを担保したいという方は、プロのフィードバックが受けられるスクールに通うのもおすすめです。現役デザイナーやカウンセラーのサポートが受けられるだけでなく、未経験からの就職を成功させた先輩たちのノウハウもあますことなく共有いたします。
無料で受けられる個別相談も承っていますので、気になる方はぜひ予約してみてください！
よくある質問
はじめてのクライアントワーク、報酬はもらった？
受講生さんにお話を伺ったところ、学習の一環ということもあり、やはりみなさん無償での制作をおこなっているようでした。クラウドソーシングなどで報酬をもらいながら実績を積むという方法もあります。
苦労した点を教えて！
掲載する文章の作成に苦労した、という声が挙がっていました。できるだけ先方に準備してもらうなど、こちらでかける工数を少なくする工夫が必要そうです。
