マニュアル/テンプレート無料ノウハウ

今すぐ動ける!駆け出しWEBデザイナーが初案件が取れてからの【超】具体的手順書

マニュアル/テンプレート
この記事は約29分で読めます。

※本ページにあるテンプレート・書式を利用し発生したいかなる損害についても、責任を負いかねます。自己責任でご利用ください。

クライアントワークの前の注意

当サイトでは、有料/無料で色々営業ノウハウをお伝えしていますが、自分のデザインスキルをしっかり上げていくのは、言わずもかなの大前提です。

まずは「誰に出しても恥ずかしくない、自分の最高のデザイン」の実績のサイトを作っておきましょう。
サンプルであれば3点程度で十分です。実案件のほうがなおいいですが、サンプルであっても、サイトのデザインのクオリティがわかれば十分。
お客様の立場にたてばわかりますが、そのデザインが素敵なら、サンプルだろうが実案件だろうがあまり気にしません。良いものは良い。

で、ここまでは普通のデザイナーの多くがやることですが、ここからがこのAWPを読んでる方だけの付加価値になります。

とにかく「サイト設計ファーストウェビナー」でお伝えしている「販売導線」、それからお客様に先にギブをする「返報性の法則」を何度も復習して理解し、着実に効率的に営業を展開していきましょう。

本ノウハウでは、実際に案件を取れたあとで、具体的に何をどうしていく必要があるのかの手順書を、駆け出しでも迷わないように、細部にあたり詳しく解説させていただきます。

このページをブックマークして、ぜひ何度も確認しながら進めて下さい。

案件が取れてからの手順書

案件を取れた後は、下記の手順で進んでください。

まず全体像。

1.問合せ

2.要件ヒアリング(ヒアリングシートを使用)

3.見積書

4.発注書・発注請書(メールなどで代替可能だが、必ず口頭ではなく、お互いの記録に残すこと)

5.契約書(特別な理由がない限りは、基本的に業務委託契約書をまく)

6.制作

7.納品

8.検収

9.(修正)

10.検収完了

11.請求書

12.着金

13.求められたら領収書(ペーパーレスの場合は印紙不要)

GOAL!


やり取りする書面については、必ず案件を取る前に揃えておきましょう。
案件を取ってから慌てて用意してたら、お客様に不信感を与えかねません。折角のチャンスを棒に振ることのないように、しっかり準備すること。

最低限用意するものは、

・見積書の書式
・請求書の書式
・ヒアリングシート

この3点です。領収書などは最後でいいが、これら3点は、案件が取れる際にすぐに必要になる可能性があります。

これらのテンプレートもこのページで全てお渡しします。

ヒアリングシート

さて、最初にやるべきことは、ヒアリングシートを埋めることです。

これは、シートの書式を渡して相手に書かせてもいいし、zoomや対面で、相手の話を聞きながらこちらで記入していってもいいです。相手の状況やITリテラシーに応じて、柔軟に対応しましょう。

今回僕からヒアリングシートの書式を配布させてもらいます。

ヒアリングシート書式(ver.1.01)
https://bit.ly/3YjaYBP

複製を保存していただければ、自由に使っていただいて構いません。

以前、限定LINEの方で紹介したシートを補完・改良し、更に使いやすくしました。
また、Wordファイルであったものを、Excel(Googleスプレッドシート)でも使えるようにしたので、今後はこちらをご利用いただければより便利かと思います。

クライアントに聞くべき情報は、ほぼ網羅しているはずです。
最初のミーティングの際に、こちらのシートを見ながら上から聞いていき、その都度埋めていけば、聞き忘れもなくスムーズでしょう。
よかったらぜひご活用ください。

見積書

ヒアリングシートを埋めることができたら、次はその要件に沿った見積もりを出していきます。

見積書の書式については、下記のサービスが使いやすいのでおすすめです。

見積は「WEBサイト 一式 10万円」とか書きがちですが、これはNGです。

ちゃんと作業を細かく細分化して書く必要があります。なぜなら、「WEBサイト 一式」という言葉の定義が、人によって全く違うからです。
例えば、こちらはあくまでもHTMLの静的サイト4ページの金額のつもりで出しても、お客様がもし、自分がそのうち欲しいと思っていたショッピングカートやブログ機能までを「WEBサイト 一式」と定義したら、そこまで含めて10万円でやってもらえると思い込みます。

人間は言葉を、自分の都合のいいように解釈するクセがあるのです。

一度こういう誤解が発生したら、誤解が解けても必ずお客様に「がっかり」されます。それは避けたいですよね。だから、必ず誤解や齟齬が生じないように、細かく具体的に記述しましょう。

見積書の書き方

見積書の書き方の具体例も教えておきます。

見積書の項目の一例としては

TOPページデザイン:1
下層ページデザイン:5
HTML・CSSコーディング:1
レスポンシブデザイン(スマホ対応):1
ディレクション:1


ディレクションというのは、「打ち合わせを行い、クライアントの要望と、実装するための予算やスキル・人的リソースを擦り合わせて、実際の仕様を決めていく工程」と説明して下さい。

絶対に、自分が意味がわからない工程を書いてはダメです。

項目について、「これはどういう作業なのか」ということと、「これはなぜこの値段なのか」ということは、聞かれたら必ずすぐに説明できるようにしましょう。

見積もりを取るのに慣れてる人は必ず聞いてきます。そこで値段の根拠や作業内容が答えられなければ、「自分で意味もわからず見積を書いてるのか」と思われ、間違いなく失注するでしょう。

必要に応じて下記などが加わります。

CMS機能(WPテーマ組込・設定)
お問い合わせフォーム
予約機能
ショッピングカート
決済機能

misocaを使った見積書の記入例

https://bit.ly/3ZLtP9Y

これは本当に最低限の形ですが、WPを使ったりCMS機能が入ったりしたら、その都度こちらに追記して下さい。

それぞれの価格の決め方

それぞれの金額で迷うと思うのですが、これは「工数」というもので算出して下さい。

自分の時給単価を例えば2000円とし、その作業にかかる時間を掛ければいい。

僕ら専門職は、通常時給3,000-5,000円くらいはとってもいいのですが、経験が少ないうちはその金額は現実的に考えて取れないので、1,500円程度から始めるのがいいと思います。

なぜ時給をあまりあげられないかというと、1時間で処理できる作業量が少ないため、普通にかかる時間で算出したら、とんでもなく高額になってしまうからです。

かと言って時給300円とかにはならないように、最低でも1,000円は取るようにして下さい。
そして金額の根拠を問われたら、「この作業にはこれだけの時間がかかり、私の時給は◯円で計算させていただいております」と言えばいい。


一度練習で作ってみて下さい。

自分がその作業にどのくらい時間がかかるかわからない

時給で算出したくても、自分がその作業をするのに、どのくらいの時間がかかるかが分からないという質問をいただきました。

これは経験を積んでいけば自ずと分かるのですが、最初は分からなくて当然です。
なので、最初は「この作業はこの時間内に終わらせる!」という目標時間にして下さい。

そして、見積を印刷して壁などに貼っておき、常にその項目にかけられる時間を意識しながら作業をしていく。

こうすることで、「コスト意識」が身につきます。そしてスピードアップできるようになり、自分の単価を上げ、かつ余暇を増やすことができます。

例えば、TOPページデザインに10時間の見積金額を出した場合。時給1500円だと15,000円ですよね。
であればTOPページデザインには10時間しか使えないということになる。時間を計測し、その時間内に必ず終わらせるようにすること。

時間を決めずにダラダラやると、いつまでも終わらず、自分の時給はどんどん下がります。
時給で自分を雇っていると考えて下さい。

自分の仕事時間も、人を雇ったと考える

僕は今常に、自分自身の人件費を意識して仕事をしています。

人件費って、マネジメントを知らない労働者のうちは意識しないと思います。あなたは今、「外注をせず、自分がやればタダだ」と思ってませんか?

僕もこの考え方がずっと抜けなかったんですが、自分の実力が付き、自分の単価が上がるにつれてわかってきました。

自分が作業しても、全然タダじゃないんですよ。例えば、自分の時給を3000円と設定して、その時間自分自身を働かせると、それだけの人件費=お金を失うと考えていく。

外注しろとはいいません。最初のうちは外注費を失うことが怖いし、その浮いた時間でそれ以上のお金を生み出せる自信が持てないでしょうから。

でも、自分の時給を意識することは、今日からできます。この考え方や仕事スタイルに慣れると、「よし、10時間でこのデザインをやらないと自分の時給が減るばかりだぞ」と思って、気合い入れて集中してやれます。

結果、予定通り定時で仕事を完了できて、余暇はゆっくり好きなことができる。
プライベートで家族の相手をしてもいいし、趣味に没頭してもいい。

備考欄

備考欄に記載するべき文言を箇条書きにしておきます。是非参考にして下さい。

※デザインに使用する写真およびテキストについてはお客様から提供いただくものとし、それ以外の画像やあしらいはフリー素材などからこちらで選定いたします。もし動画や画像などの有料素材が必要になったら、そちらについては実費を別途請求させていただきます。

※デザインカンプの修正は無制限ですが、カンプが決定してコーディングに進んでからの修正は追加費用となり、別途見積もりとなります

※デザインの修正には大きなコストがかかるため、度重なる修正については「なぜその修正が必要か」とお伺いすることがあります。その際は恐れ入りますが明確な理由を述べていただき、理由が明確でない修正依頼についてはお断りする場合がございます。

※お客様の都合による納品後のテキスト部分の変更など、私が◯分以内に修正できる軽微な修正については◯回まで承りますが、◯分を上回るものについては、別途お見積りとなります。

※こちらに記載されている内容以外の作業は、原則として別途お見積りとさせていただきます。

あなたはもしかすると、「ここまで書く必要があるのかな?」と思うかも知れません。

しつこいくらい書いてますが、これは受注後に余計なトラブルにならないよう、自衛のために可能な限り記載することをおすすめします。

ご自分で「これは不要だな」と思うものは消してもいいですが、こういう予防線を張っておかないと、お客様によっては大きなトラブルに発展するケースも生じます。

最初はいい人に見えているお客様も、やり取りが進んでいくと理不尽な要求をしてきたり、見積もりに書いてあること以外のことを強引に頼んでくることなどもあります。

自分は大丈夫、と思わず、是非参考にしてください。

発注書・発注請書

普通のBtoB商取引においては原則的に必要ですが、別に法律で決まっているわけではなく、これを取らなくても現場は割と回っています。

発注書は「正式にこの見積もりの内容で注文をお願いします」という、クライアントからWEBデザイナーに出す書類。

発注請書は「正式にその依頼を引き受けました」として、WEBデザイナーがクライアントに対して発行する書類になります。

そもそも、契約自体は口頭でも成立するので、「お互い、もしくは片方がこの書類が必要なら、作って交わす」ということになります。

僕はWEBデザイン案件において、発注書や発注請書は作っていません。 ただ、クライアントによってはこちらが無いと契約が成立しないという会社もありますので、クライアントに従って柔軟に対応して下さい。

こちらも「misoca」で発行することができます。見積書を作ったら、右上の「その他」からDLしてください。PDFですぐに取得できます。

業務委託契約書

単発案件で、それほど高額でない(10万円以下くらい)案件の場合は契約書は必ずしも必須ではないですが、10万円以上の高額になってきたら、契約書をまいたほうが安全です。

20240126追記:後述のクラウドサインを使うことで、オンラインで手軽に契約書の締結はできるので、10万円以下の低単価であっても、業務委託契約書は必ずまくようにしましょう。契約書は万が一のトラブルに発展した際、あなたのことを守ります。

契約書もオンラインでまくことができますので、今までの郵送して署名捺印などが不要になりました。

僕が使っているサービスはクラウドサインです。
https://www.cloudsign.jp/

月5件まで無料で契約書の締結がオンライン上でできる。

使ってみるまではなんだか難しそうだなと思っていたのですが、いざ使ったらめちゃくちゃ簡単。

1.契約書の書式をアップロードする(PDFでOK)
2.相手のメールアドレスと氏名を入力
3.冒頭の相手の名前の入力欄、最後の日付と住所、氏名記入欄に、それぞれ記入枠を作る
4.先方に送る
5.先方にメールが届き、記入枠に入力してもらう。
6.契約締結

これだけです。

クラウドサインには契約書の雛形もあり、何も用意せずとも契約書が送れます。
ただこの契約書は簡略的すぎるので、僕が作った雛形をお渡しします。

業務委託契約書の書式(20240125 update)

僕が使っていた業務委託契約書の雛形をプレゼント。複製を保存していただければ、あとは案件に応じて自由に書き換えてご利用下さい。

gyoumuitaku_keiyakusho_ver_2024_1

この契約書は、以下の特徴があります。

1.高単価用です。WEBサイトだけでなく、LPなどもセットで訴求できます。
2.前半金・後半金を取ることができます。
3.知的財産権について工夫があります。

知的財産権や所有権は、通常の雛形では「すべて譲渡」と書かれているものが多いです。
しかし、僕が配るものは下記の条文を加えました。

本件成果物に含まれるプログラム、スクリプト、HTMLデータ、モジュール等であって、本件ウェブサイトと同種のウェブサイトの作成において汎用的に用いられるものの著作権その他一切の知的財産権は、乙に留保されるものとし、乙は、これらを本件ウェブサイトと同種の他のウェブサイトの作成に利用することができる。

必要に応じてお使いください。

※本ページにあるテンプレート・書式を利用し発生したいかなる損害についても、責任を負いかねます。自己責任でご利用ください。

業務委託契約書雛形の更新履歴

20240125更新
  • エクセルファイルから、Googleドキュメントの共有ファイルに変更。
  • 現行法に合わせて、「瑕疵担保責任」を「契約不適合責任」に修正。
  • 支払期限についての項目を追記。
  • 支払いの条文を修正。

契約書をまかないことによるリスク

契約は口頭で交わされたものも有効ですが、口頭のみで一切記録がないと、あとになって揉めた際、「言った/言わない」のトラブルになります。

契約書で重要なポイントは、下記の項目です。

  • 今回の委託業務の業務範囲(受託側がこの金額で何をやり、何をやらないか)
  • 納期(いつまでにその業務を完了するか)
  • 委託料(いくらでその業務を受託するか)
  • 検収(納品物が契約不適合となっていないか委託側がチェックする期間と条件/項目)
  • 契約不適合が発生したときの修正条件(どんな場合に無償で修正し、どんな場合有償となるかのセグメント)
  • 契約の解除(どんな条件、どんなタイミングで解除し、継続課金なら最後の支払いはいつになるか)

すべて大切ですが、これらをしっかり押さえておくことで、クライアントワークで起こり得るトラブルを事前に防ぐことができます。

今僕のコンサルでは、クラウドソーシングを使わない直接契約の場合は、どんなに小さな案件でも基本的に契約書はまくように指導しています。

やはり、トラブルになるのが最も怖いですからね。

あと、契約書を面倒がる相手とは、そもそも取引をしないほうがいい。 相手が面倒がってもし契約が流れるようなら、「そんな相手と取引をせずに済んで良かった」と考えるべきです。そういう人ほど理不尽なクレームや、こちらを奴隷のように扱う無茶な要求をしてくるものですから。

収入印紙について

紙の契約書については割印や製本、売買契約の取引金額に応じた収入印紙の貼付などが必要になりますが、クラウドサインなどでの電子取引の場合は印紙の貼付は必要ありません。

参考:電子契約で収入印紙が不要になるのはなぜか?
https://www.cloudsign.jp/media/20170224-basics-of-e-contract-02/

もし、先方の要望でどうしても紙で契約書が必要になるときは、改めてしっかり調べて対応するようにしましょう。

制作

ここはケースが多岐に分かれすぎるので、ここでは最も基本的かつ、ざっくりとした解説に留めます。

ムードボードを制作

ムードボードというのは、「参考サイトの一覧」のようなものです。制作会社のチーム開発の現場で主に使用されますが、僕はお客様に対するトンマナ確認にも使用していました。

自分でサンプルサイトを作ってたら時間がかかりすぎるので、他人のサイトをピンタレストなどから並べるのです。

ピンタレスト
http://bit.ly/48OxMz8

まず、ヒアリングしたあと、そのヒアリングに基づいた「参考サイト」を3-5点ほどピックアップして、そのFVや全体をスクリーンキャプチャします。全体のキャプチャは下記のChromeプラグインが最も扱いやすくおすすめ。

GoFullPage
https://happynewlife.info/entry/2023/06/25/chrome_gofullpage/

最もイメージが近いのはどれかということを聞いていく。どれも違うと言われたら、再度参考サイトを選定してやりなおし。そしてお客様とイメージをすり合わせていく。

サイトマップを作成

ムードボードと並行して決めなければならないのは、この「サイトマップ」です。

今回作るサイトに、どんなコンテンツが必要なのか。これを他の同業他社、ライバルのサイトを見ながら決めて提案します。もしくは、お客様から「こういうページが欲しい」とリストを出してくる場合もある。

サイトを作ることが決まっていても、お客様の方で中のコンテンツや原稿が具体的に決まっていない場合は、そこから決めていかなければならない。

ただ、原稿を作るにしても、「サイトの中にどんなコンテンツが必要なのか」を決めることが最も優先してやるべきことです。

サイトマップの決め方としては、

・ヒアリングシートの情報を元に、必要なコンテンツを洗い出す
・ライバルサイトのコンテンツを調査
・マインドマップにツリー状でコンテンツの内容を埋めていく
・1ページに収まる分量かをチェックし、多すぎる場合は分ける
・逆に「コンテンツがない」場合は、別のページと統合する

この流れで作っていくといい。これでサイトマップと同時に、サイトの設計図までできる。

原稿

次はサイトのコンテンツごとに、原稿(テキスト/コピー)を書きます。

これはクライアントにもらうことになるでしょうが、経験値をためていくと「この原稿までも巻き取って高単価で制作する」ということもできていきます。

原稿まで任せてもらえれば、単価は最低でも30万、高ければ100万以上も十分取れるようになっていきます。

よく、デザインが先か、原稿が先かという議論になるのですが、僕は圧倒的に「原稿が先」派です。

なぜなら、サイトの目的を果たすための重要度は、明らかに「デザイン<ライティング」だと考えているからです。いいですか、大事なことを言います。

人を動かすのはデザインではなく、言葉であり文章である。

デザインは、あくまでも「文章をわかりやすく/伝わりやすくするための演出」であるというのが、僕のデザイナーとしての強い信念です。

これは絶対に揺らぐことはありません。反論はいくらでも受け付けますが、僕はこれを絶対のものとして主張し続けるでしょう。

デザインが先、原稿は後は間違い

ただ世の中は「デザインが先、原稿は後」という制作フローが多いです。

なので、クライアントや先輩デザイナーに「原稿もらう前にデザインを組め」と言われることが、今後も多々出てくると思います。

僕が「原稿が先」と強く主張する理由を解説しておきましょう。

例えば、「お客様の会社の事業が3つあり、その3つの事業のサービスの説明をTOPページに並べる」という場合。

デザインを先に作ると、3つの事業の解説について、そこに入る文章がわからないままで「文字の分量」を先に決めることになります。
例えば200文字とかですね。

こうなると、「本当はこのサービスについては500文字ないと伝えきれないのに、無理やり200文字に縮めて入れる」ということが、様々なところで発生します。

WEB製作なら、

・テンプレートで安く製作可
・完全オリジナルでオーダーメイド製作可
・CMSでテーマ化・ブログ機能追加可
・ライターがいるので原稿から製作可
・イラストレーターがいるのでオリジナルイラスト製作可

このくらいの強みがあっても、デザインに合わせるために、上から3つ目までしかTOPに入らないってことになるんです。

「伝えたほうが明らかに訴求力が上がる情報があるのに、デザインが崩れるからテキストを削る」という本末転倒の行動を引き起こすのが「デザイン先」の制作フローです。
まさに、「手段と目的が入れ替わる」というものです。

「デザインが先、原稿が後」という制作フローで作るということは、自覚無自覚はあるにせよ、デザイナーが自分のエゴを優先し、お客様の目的を蔑ろにして、自分のデザインを見せることを目的としているということです。

これほど愚かなことはない。

HPは、デザイナーが「自分はこんなに素敵なデザインができる」という自己顕示欲を満たすためにあるのではない。
あくまでも「お客様の事業のため」、「お客様の目的を果たすため」に存在しているのです。

僕はそういう意味で、「デザインが先」を主張するデザイナーとは仲良くできないと思っています。

ただ、クライアントが「デザインを先に組んでくれ」というケースも実は少なくなくて、「デザインを組んでもらったらそこに合わせて文章を書く」と言って譲らない場合もあります。
そういう場合は仕方がない。

クライアントが「デザイン先」を要望した場合

この場合は、それによって生じる前述したようなリスクをしっかりと説明したうえで、どうしてもということであればやらざるを得ない。

ただし、「デザインを固めたあとに、レイアウトが大幅に変わるようなテキストの変更があった場合は、その分追加で見積もりが必要になります」としっかり口頭でも説明し、見積書などにも記載するべきです。

デザインが完成したあとに、文章を追加したいとか、文章をもっと長くしたいとか言ってこられたら、構成の作り直しやデザインのやり直しもありえますので。

お客様ご自身が、今回のHPを作る目的がはっきりしていない場合、また、「名刺代わりのサイト」や、「見た目を重視したブランディングサイト」の案件の場合に、お客様からこういう要望が起こりやすいです。

特に目的がはっきりしていない場合は、そこのところのヒアリングや、悩みの洗い出し、問題提起のフェーズにいったん巻き戻って、そこからしっかり固めていくほうがいいでしょう。解決したい悩み、HPによって得たいメリットの言語化です。

ワイヤーフレーム/デザインカンプ

ムードボードでトンマナの確認、サイトマップでお客様と一緒にコンテンツの大枠や内容をある程度具体的に固めたら、次はいよいよ実際のサイトの構成や「デザイン」の構築に入ります。

制作会社ではここで、「ワイヤーフレーム」というプロセスが入ります。

ワイヤーフレームとは、デザインに入る前に、「文字とレイアウト(構図)を決める」枠組みのようなものです。

実際に見たほうが早いでしょう。

引用:https://sairu.co.jp/method/2683/

この例のワイヤーフレームは「テキスト」が仮のものになっていますが、前述の通り、この段階で可能な限りテキストを固めたほうがいいです。「テキストが固まった状態でWFを組むほうがベターである」ということですね。

ワイヤーフレームは必須ではない

先に「制作会社では」とあえて前置きしましたが、このワイヤーフレームを作らない制作フローも存在します。

制作会社でこのWFを作る理由は、「ディレクターとデザイナー、コーダーなど、複数人が関わってひとつのサイトを作る」というときに、このような設計図がなければ、情報や認識の共有がうまくできないからです。

「あくまでも複数人のスタッフが関わる現場にて必要」ということだから、ディレクション、デザイン、コーディングや構築をすべてひとりでやる「フリーランスデザイナー」において、このWFは必ずしも必須ではありません。

特に、WordPressのテーマやHTMLテンプレートなどを元にしてサイトを制作する場合は、このWFというプロセスがかえって遠回りになるケースも往々にして有ります。

「ワイヤーフレームを作らないなんてありえない」みたいに言う人もいますが、手段と目的を履き違えています。

最も大切なのは「お客様の目的を叶えるためのWEBサイトが、期日までに完成すること」のみであり、WFなしの方が効率が良ければ、別になくてもいいのです。

ワイヤーフレームを理解しないクライアント

ワイヤーフレームを作らないか、作ってもクライアントに見せない理由がもうひとつあります。

それは、前述のようなWFをクライアントに見せても、その用途や意図が理解されず、「なんでこんな灰色の面白みのないデザインなのか」「写真が入っていない」「こんなデザインを頼んでいない」「全然私の要望が反映されていない」などと、このWFに対してデザイン面の要望を出してくるクライアントが多いからです。

「これはあくまでも構成であって、デザインはこれから組むので、構成がこれでいいかご確認下さい」と、いくらWFの制作意図について解説しても、この意図を正確に理解してくれるクライアントは少ないです。

結局、我々フリーランスの顧客の中心である中小企業/個人事業主のお客様の場合、「デザインや色が入ってなければ、その良し悪しは判断できない」というクライアントがほとんどなので、WFの状態では見せず、次の「デザインカンプ」から見せるケースの方が多かったです。

もちろん、WFの意図をしっかり理解して、WFの段階で構成やテキストをしっかりチェックしてくれるお客様もいるので、そこは打ち合わせをしながらお客様のリテラシーを慎重に測って、「このお客様はWFから見せられるか、デザインカンプやデモサイトの形まで作ってから見せるべきか」をその都度ジャッジする必要があります。

デザインカンプ

デザインカンプとは、「ボタンやメニュー、リンクなどは押せないが、サイトの見た目をページごとに1枚の画像にして完成させたもの」のことです。

効率の悪い制作現場だと、このデザインカンプを3種類とか作る場合もありますが、ひとりですべてを行わなければならないフリーランスがそんなことをしていては、自分の時給は下がる一方です。

そこで、前述したムードボードでしっかりトンマナをビジュアルで確認し、すり合わせをしておくことで、デザインカンプは1種類でも良くなります。

可能な限り時短する必要があり、そのために、デザインの方向性の確認は「他人のデザイン/既存の自分の実績のデザイン」の中から行うべきで、デザインカンプを制作する段階では、少なくても8割位のお客様の希望を具体化して把握しておくことが大切です。

これができていれば、デザインカンプにかける工数は非常に少なくて良くなる。僕は常に1種類しか出さず、それですんなりOKをもらうか、微調整をするだけでそのまま構築のフェーズに進めることができました。

コーディング・構築・実装

HTMLなのかCMS(WordPress)なのか、Studioなのか、あるいはそれ以外なのか、それぞれによって構築方法は異なりますので、本項ではこちらの解説は割愛します。

納品

契約書に記載した要件をすべて満たし、納品物が完成したら「納品」を行います。ここまでくれば作業は完了したということになりますが、納品後も大切な仕事がいくつか残っています。気を緩ませずに、最後までやりきりましょう。

この納品についても、要件によっていくつかのパターンに分けられます。

  • WEBサイトの新規開発の場合、開発環境から本番環境へ移行
  • リニューアルの場合は、旧サイトから新サイトへのデザイン反映のためのメンテナンス
  • サムネやバナー等であれば、ファイルを送って完了
  • 名刺やチラシなどは、印刷会社に入稿して、実際の印刷物を納品して完了

このように、「どこまでやれば納品なのか」ということも、業務委託契約書にはしっかり具体的に記載してください。

納品後は「検収」というフェーズになります。

検収

これはお客様が行うフェーズです。

契約書の業務内容や見積書の要件をひとつずつチェックし、「要件通りに納品物が制作されているか/要件通りに機能するか」をしっかり確認していきます。

WEBサイトであれば、通常は1週間から2週間程度の猶予が与えられ、もし不具合や不備、制作ミス、要件と違って制作された「契約不適合」が発見されれば、お客様はWEBデザイナーにそれを指摘します。WEBデザイナーはそれを確認し、確かに不適合である場合、速やかに修正していきます。

検収に合格となれば、次の請求書の発行となります。

請求書

請求書もmisocaを使えば、見積書からそのまま変換して発行することができます。

請求書サンプルDL
https://bit.ly/3LfidYA

請求書番号:そのままでOK
請求日:請求書を発行した日
お支払い期限:発行月の末日もしくは、お客様と合意をした日

misocaでは、備考欄にお振込先の口座情報が入ります。
お振込先口座情報は項目がある請求書もあります。ここは伝わればいい。

支払日について

請求書の出し方については3パターンあります。

1.納品・検収完了後に入金
2.前入金
3.前半金・後半金

順に説明しましょう。

1は、最もオーソドックスなパターンです。単価が低い場合は大体が後入金となります。
これは、「商品が問題なく納品されたらお金を払う」という最も自然な形ですので、特に解説はいらないかと思います。

2は、着手前、もしくは着手後でも完成前に全額を振り込むというパターンです。
資金的に余裕がある方、信頼関係ができている場合などは、このパターンになることがあります。
後は「決算前で前年の経費に入れたいから払わせて欲しい」「補助金の申請のために振込の事実が早めに欲しい」などの経理上の理由でそうなることもあります。
(でも商品が納品される前では、経理的には「仮払金」計上となり、費用にはならない気も)

問題は3です。

これは、まだお互いに信頼関係が構築できてない状態、つまり「お互いに”飛ぶ”(連絡がつかなくなる)可能性がある」という状況で、両者が同等のリスクを負い合う形の支払い方法です。

前半金・後半金にする理由

前半金、あるいは「着手金」という名目で一部の金額を入金してもらうことで、お互いの信頼を担保する形は、「初回、あるいは最初の2,3回の取引」に行われることが多いです。

ビジネスのシーンでは「飛ばれたらまずい」などと「飛ぶ」という言葉が良く使われますが、これは外注先と連絡がつかなくなる、取引先が突然夜逃げをするなどの状況を指します。

発注側の立場だけでなく、受注側でも突然相手と連絡がつかなくなることはあります。

クラウドソーシングで受注して、サイトを作ったのはいいけど、何を連絡しても相手からの返事が完全に途絶えてしまうなどですね。
この状況では、そのクラウドソーシングの企業が「預り金(デポジット)」をこちらに支払ってくれるので問題はないのですが、SNSなどで直接お客様とやり取りをしていたら、相手と連絡が取れなった時点でその案件は「未回収案件」となります。

例えば30万の制作案件が取れて、1ヶ月かけてサイトを作ったのに、最後の最後でお客様と連絡がつかなくなったら、その30万はもう回収できません。

前半金請求書書式

少額ならともかく、30万の案件が未回収に終わったら、それこそ生活に関わります。

これは発注者側にも言えることで、お金を払ったのに途中でデザイナーと連絡がつかなくなったら、そのサイトの完成を待ってビジネスを展開しようと考えている会社にとっては、やはりかなり大きな痛手となります。

そのため、信頼関係がお互いに充分でないうちは、「前半金、納品後半金」ということでお願いできますか?と提案をするのがいいです。

30万の案件なら、まずは受注時に15万の請求書を作り、それを払ってもらってから制作に入る。

納品・検収が行われ、「確かに受け取った」となったら残りの半金の請求書を新たに発行するわけです。

その場合の前半金請求書の書き方は下記に倣ってください。
https://bit.ly/3yx7n8Z

前半金の請求書も、基本的に後払いの請求書と同じですが、最後に「納品後の半金分」をマイナスを入れて引きます。

ちなみに、納品後に送る後半金の請求書も、「前半金お支払済み分」として、同額をマイナスで引けばOKです。

クレカ決済を持つ

支払いは基本的に銀行振込が多いと思いますが、中にはクレジットカードでの支払いを希望するお客様もいるかも知れません。

高額な場合、分割払いなどの選択ができるクレジットカードは、お客様にとってメリットがあります。
また、一括払いであっても、実際の口座からの引き落としは2ヶ月後くらいになることが多く(カードの締め日によって前後します)、キャッシュフローの意味でも有益です。

ビジネスの原則として「支払いは可能な限り遅く、回収は可能な限り早くして、キャッシュ(現金)をなるべく長く手元に置く」というものがあります。経営者が資金繰りをする際の考え方です。

そして、あなたのWEB制作サービスも、クレジットカード支払いを手段として持つことができます。
個人のやり取りではPayPalが古くからありますが、僕はStripeを使っています。

こちらの方法では、WEBサイトがなくても決済リンクを出せるのでおすすめです。

クレカの分割決済を持つ

クレカ支払いは更に、任意の分割回数の決済URLを発行することもできます。

僕はクレカの分割払いにはAppsというサービスを使っていますので、もし「分割支払を持ちたい」という方は、Stripeと一緒に登録してみるといいと思います。

個人が分割決済を持つなんて、昔は審査がめちゃくちゃ大変だったのですが、今はStripeと合わせてこのサービスを使えば、即日利用可能です。

決済手数料は、Stripeが3.6%、Appsが2%なので、5.6%で分割決済が持てます。

先日発売した僕のライティング商材も、この分割決済を導入して使っておりますが、問題なく利用できています。

参考:ライティング教材の5回払いの決済URL
https://bit.ly/3yFBXNs

高単価でサイト制作を訴求しても、銀行振込一括のみでは予算的に難しいケースもあります。

でも「私は分割決済も持ってますから、ご希望でしたら回数も柔軟に対応しますよ」と言えると強いですね。

インボイス制度について

相手が企業の場合、「インボイス登録を行っているかどうか」は、取引を始める最初で利かれる可能性があります。インボイス登録を行ったら、請求書にはインボイス番号を記載しなければなりません。

あなたがインボイス登録を行うかどうかについては、下記の記事を参照のこと。

領収書

領収書も用意しておきましょう。

今回は、インボイス適用のやつではなく、普通の書式をお渡しします。

領収書書式テンプレート
https://bit.ly/3TvAUcI

Googleスプレッドシートなので、「ファイル>コピーを作成」をして複製して使用してください。

紙の領収書には5万円を超えると「収入印紙」を貼らないといけないのですが、これはあくまでも「紙」の場合です。つまり、オンラインのデータの領収書であれば、この印紙は省略することができます。

上記のファイルをpdfで保存して、それをメールやメッセージで発行すればいいでしょう。

なお、右下に印鑑(角印)がありますが、実はこの押印は義務ではありませんので、不要であれば削除していただいて大丈夫です。

日本の文化というか慣習上、このように印鑑を押すことにはなっておりますが、法的な取り決めは特にありません。お客様に押印を求められたら対応すればいいです。

【領収書に必要な項目】

領収書の宛名
取引年月日
取引内容
税率ごとの合計金額
領収書の作成者・会社名

収入印紙

5万円以上の領収書には必ず「収入印紙」を貼付する必要があります。

ただし、この収入印紙による納税の義務はあくまでも「紙の領収書」に限られていますので、デジタルで発行する場合においては印紙が貼られていなくても問題はありません。

今後どうなるかはわかりませんが、2024年現在においてもデジタル発行の領収書については印紙を貼る必要はないようです。

参考:電子契約で収入印紙が不要になるのはなぜか?
https://www.cloudsign.jp/media/20170224-basics-of-e-contract-02/

まとめ

以上、WEBデザイナーがクライアントワークを行う流れについて、最低限とはなりますが、必ず知っておくべき/知っておいたほうが便利であることを網羅的に解説させていただきました。

なお、この情報はすべて無料で開示します。

なぜなら、クラウドソーシングを使わずに、直契約で案件を取得すれば、高い手数料を払うことも、クラウドソーシング外の直契約を制限されることもなく、より自由なクライアントワークや商取引ができるため、僕は直契約を推奨しています。

推奨するからには、例え未経験の全くの初心者であっても、この「手順書」通りに行っていけば、安心して最後まで案件を完遂できるマニュアルを出すのも義務だろうと思ったからです。

この手順書について、「こういうときはどうするの?」という疑問/質問などがありましたら、お気軽にXのDMやLINEで送ってください。適宜追記・更新して、長くあなたの手引になるように努めたいと思います。

※本ページにあるテンプレート・書式を利用し発生したいかなる損害についても、責任を負いかねます。自己責任でご利用ください。

告知用公式LINE
イチの新作コンテンツをお知らせするLINEです。 登録で非公開コンテンツプレゼント ▼▼
この記事を書いた人
イチ

WEBデザイナー&ディレクターとして、東京青山のブラック制作会社にて地べたを這いつくばり12年、フリーランス4年、計16年のクリエイター。キラキラWEBデザイナーとは対極のサバイバー。

昨今は一般製造メーカーのWEB&EC&システム&マーケ担当を行いながら、駆け出しWEBデザイナーの完全個別コンサルを行い、多くの”稼げる”フリーランスを排出。

制作会社の事情、フリーランスの事情のどちらも語れる稀有なマルチプレイヤー。

イチは小6から4年間不登校児だったのですが、その半生についてはnoteで書いてます。

読んだ方からは「めちゃくちゃ泣いた」「続きが気になって最後まで目が離せなかった」と大好評の恥も外聞もないノンフィクションエロ小説。お暇ならご一読ください。

イチをフォローする
イチをフォローする
A.W.P 年収1000万WEBデザイナー養成プロジェクト AtelierRiche|アトリエリッシュ
タイトルとURLをコピーしました