学習

未経験から独学でWeb制作初案件を獲得するための逆算ロードマップ

2020年6月9日午前11時。

都内のIT企業から内定通知のメールをいただき、僕の新卒就活は終了しました。

僕はそのまま、Web制作について調べ出し、ProgateのHTML・CSSコース初級に取り組みはじめます。僕のWeb制作学習の始まりです。

そしてもくもくと勉強をし続ける毎日が続きます。

そして、内定通知が届いた日から81日後の朝。僕はWeb制作会社に向かいます。僕の営業メールに返信がきて、直接会おうというお話になったからです。そしてその数時間後、無事に案件をいただくことができました

その後も、デザイン案件やWordPressカスタマイズ案件など複数社様から案件をいただきます。そして、現在はその一部の会社様と継続してお付き合いをしております。 

コロナ禍での不景気の中で、プログラミング実務経験0、しかも、社会人経験0の平凡な大学院生である僕がなぜ81日で案件をいただくことができたのでしょうか。

この記事では、僕がリサーチをかけ、戦略を立て、行動した形跡を包み欠かさずお伝えいたします

さらにそれだけではなく、「今ならこうする」といった改善案までお伝えします。

ウソやコネを使った?もしかして裏技がある?

結論、ウソやコネは使っていません。

ウソをつくとバレてしまうし、リスクしかない世の中です。

また、現在大学院生である僕にたいしたコネはありません。

僕がやったことは単に、Web制作を行う先輩方の記事を読み漁り、動画を食い入るように見て、計画を立て、勉強し、実績を積み、営業活動をしていっただけです。

逆にいえば、裏技要素は0なので、一定量の作業量は求められます。

もし、努力・実績もなしで案件を獲得できる超裏技のようなものを期待している場合にはこの記事は役に立ちません。

起死回生の逆転的なものをご期待の場合には、そっとこの記事を閉じてブラウザバックすることをおすすめします…。

あなたにいらない情報を読ませ、時間を浪費させてしまうことが申し訳ないからです。

本記事をおすすめできない人
  • すでに案件を受注できていて、月10万円を超えている人
  • マンツーマンで見てくれるメンターがいる人
  • Web制作で稼ぎたくない人
  • この記事を読んだ後に行動できない人

上記に該当しない人のみ、ここから先をお読みください。

この記事のコンテンツ

下は、この記事のコンテンツを一部抜粋です。

この記事のコンテンツの一部抜粋
  • 大切な時間を1秒も無駄にしない”逆算戦略
  • 国立大学院生流 の”科学的に最強”なプログラミング独学方法
  • 最強の”思いやり”で案件を獲得するためのメール文作成術
  • 知らないと自分もお客様も損する”ミニマル思考”

この内容は未経験から独学でWeb制作案件を獲得するために僕が必要だと判断した情報です。

しかし、僕は「情報」だけではなく「ツール」も提供したいと考えています。

情報よりもツールの方が再現性が高く、より確実にあなたを初案件獲得まで導けるからです。

そこで、下記2つのツールもこの記事に追加いたしました。

この記事の特典ツール
  • 僕が考えるコスパ最強デザインカンプ2選
  • 返信率10%、成約率50%の、かきおオリジナルメールテンプレ

これらは一部抜粋になりますが、Web制作案件を獲得するために役に立つ情報・ツールを十分にご用意していますので、ご安心ください。

目指しているスケジュール感

僕の想定しているスケジュールは下記の通りです。

僕自身、研究をしながら下記くらいのペースでこなしました。

人によっては長くなったり短くなったりすると思いますが、平日2時間、休日6時間程度の作業時間を取れれば、下記くらいのペースで進めることが可能かと考えています。

初案件を獲得すると…

✔︎初案件を獲得すると起きる変化

  • マネタイズが始まる
  • 既存のクライアント様から継続案件につながる
  • 他の見込み客様からも信頼を獲得しやすいので案件を獲得しやすくなる

僕は初案件までに下記のような不安や悩みを抱えていました。

✔︎初案件を獲得できないと

  • 意味のない営業を延々と続けることになる…
  • 活かす場のないスキルを磨き続けることになる…
  • 投資したお金・時間を回収できない…
  • モチベーションが下がり、挫折してしまう…

考えたくないくらい怖いことですが、実際このようになってしまう可能性は十分考えられます…。

初案件を獲得すると見えるもの

実力があれば案件をいただき続けることで自分に自信がつきつつ、自分の好きなことに使えるお金を増やすことができるようになる

僕自身、初案件をいただき、「ありがとう」と言ってもらい、継続して案件をいただいた時には、必要とされている喜びに包まれました

ぜひこの感覚を味わっていただきたいと思っています。

この記事について

この記事を見るのがおすすめの人
  • 初案件までの行動のイメージがつかない
  • いまの勉強法に自信がもてない
  • どのように営業したらいいかわからない
  • CrowdWorksなどでの低単価の案件から抜け出したい

この記事を読むのがおすすめなのは上記に当てはまる人です。

きっといまのお悩みを解決に導く情報・経験をお伝えできますので、ぜひご覧ください。

この記事のモットー

この記事のモットーは「中学生でもわかるように丁寧に」です。

大切にしているのは、下の3つのことです。

  • わかりやすい表現
  • 具体例・実体験を豊富に
  • 再現性を高く

まだ社会を知らず、考える力もまだ育ちきっていない中学生でも理解できるようにこの記事は執筆しました(僕がいえたことではないですが…)。

というのも僕は将来的に中高生の支援も行っていきたいため、その練習といっては変ですが、中学生でもわかるコンテンツを心がけたのです。

この記事を読む上でのお願い

この記事は一度、すべて読み切ってからそれぞれのステップに着手してください。

全体像を把握してから行動すると、行動の目的が理解できるので、改善案などが閃きやすくなったりします。

そして、一度読むときには、音楽プレーヤーを消し、静かな部屋に移動し、集中できる環境を用意して読んでください

そして、イメージしてください

このロードマップの通りに自分が行動している姿を。行動できている自分を想像することで、リアリティが生まれ、挫折しにくくなります。

Contents
  1. 自己紹介
  2. このロードマップの4つの特徴
  3. はじめに
  4. Web制作初案件獲得までの全体像を知る
  5. 準備編STEP①:大切な3つの思考
  6. 準備編STEP②:Web制作を行う目的を明確にする
  7. 準備編STEP③:Web制作に必要なものを用意する
  8. 準備編STEP④:Web制作における必須スキル・差別化スキルを理解する
  9. 準備編STEP⑤:ポートフォリオサイトのデザインカンプを用意する
  10. 準備編ステップ⑥:”科学的に最強”なプログラミング学習を知る
  11. 準備編ステップ⑦:Twitterアカウントを開設する
  12. 学習編①:HTML・CSSの基礎を固める
  13. 学習編②:レスポンシブコーディングを身につける
  14. 学習編③:だんさんカンプを使用してコーディングする
  15. 学習編④:Sassを身につける
  16. 学習編⑤:jQueryを学習する
  17. 学習編⑥:コーディングの実力と持久力をつける
  18. 学習編⑦:ドメイン・サーバーを契約し、Web上にアップロードする
  19. 学習編⑧:差別化スキルを身につける
  20. 案件獲得編①:5つの案件獲得方法を知り、決める
  21. 案件獲得編②:強みを整理する
  22. 案件獲得編③:料金表を作成する
  23. 案件獲得編④:Web制作案件受注ページを作成する
  24. 案件獲得編⑤:提案文・メール文のテンプレを作成する
  25. 案件獲得編⑥:営業先リストを作成する
  26. 案件獲得編⑦:営業先に提案文章・メール文章を送付する
  27. 案件獲得編⑧:返信がきたらコミュニケーションコストを最大限下げる
  28. 案件獲得編⑨:リスクを回避するためにすべき4つのこと
  29. 案件獲得編⑩:継続案件をいただくための3つの行動
  30. 特別編:今後の発展の方向性4つの例
  31. おわりに

自己紹介

簡単な自己紹介

いつもTwitterでお世話になっております。僕は「かきお」と申します。Web制作を行う国立大学院生です。

しかし、新型コロナウイルス拡大の影響から研究続行が難しくなってしまったため、中退予定です(2021年1月初旬現在)。

ただ、問題なく新卒入社できそうなので、ご心配なさらないでください。エンジニアになります。

そのため、初案件獲得を獲得した9月ごろまでは研究しながらWeb制作をしていたのですが、コロナ禍で研究ができなくなったので、10月ごろからはWeb制作活動や情報発信活動にいっそう力を入れています。

現在の僕の日常は、週2フルタイムでインターンを行いつつ、残りの5日をブログ執筆や2つ3つの案件対応に使っているという形です。

そのため現在は、副業や育児をこなしながらWeb制作をなさっている方たちと比べたら時間的な余裕がある方です。

だからこそ、“僕が失敗してきた時間”や“無駄にしてきた行動”を記事にして、みなさまのお時間を守ることができたらと考えています。

環境格差をどうにかしたい

本題に入る前に簡単に僕の想いをお話ししたいです(短めに)。飛ばしていただいても全然問題ありません。笑

僕は大学の学部生から大学院生の6年間、ボランティア活動を行ってきました。ジャンルはいわゆる社会教育で、福祉やアクティブラーニングなどに関わるボランティアです。

とてもやりがいがあるもので、毎日が充実していたのですが、違和感がありました。

それはボランティアに参加する人たちは幸せそうな人たちばかりなんです。参加者やボランティア対象者は比較的学歴が高く、富裕層が多い。

この違和感を裏付けるかのように、ボランティアを行う人は高学歴・高収入の人が多いことが研究によって明らかになっています。

そして、本人が高学歴・高収入の場合、親が高学歴・高収入だったり、地域が恵まれていたりするんです。このことについてご興味がある方は、松岡亮二さん著の「教育格差:階層・地域・学歴」をご覧ください。

つまり、何が言いたいのかというと、その人の人生はその人の生まれた環境(家庭や地域など)に依存してしまうということです。

“生まれ”は選べない以上、その生まれで今後の人生の大枠が決まってしまうのはあんまりですよね。

僕はこのような、生まれた環境(地域・家族など)によって、将来の人生が決まってしまう「環境格差」をどうにかしたいと考えています

そのため、学歴も不要で、低資本で始められるプログラミングを広めたいと考え、現在のような活動を行っています。

この部分はこの記事の本題ではないので、詳しくは割愛させていただきますが「かきおはこんな人間だよ」っていうことを知っておいていただければと思います。

このロードマップの4つの特徴

このロードマップの4つの特徴についてお伝えします。他にもロードマップを書かれている方たちもいるなか、このロードマップがどのように違うのかをお伝えします。

特徴①:一貫した考え方で構築されたロードマップ

この記事は、学習準備から案件獲得までを25のSTEPに分けて解説しています。

「学習方法のみ」や「案件獲得方法のみ」のロードマップが多いなか、総合的にサポートできるロードマップを作成しました。

なぜなら、ロードマップをつくる人によって考え方が違うため、“Aさんの学習方法とCさんの案件獲得方法を採用する”といったことが難しいからです。

やはり、同じ人の考え方で、学習から案件獲得までのロードマップを計画した方がやりやすいです。

そのため、僕の考え方で構築されたロードマップをお伝えしたいと考えました。もちろん、読んでみてオリジナルの工夫を加えてもよいと思いますよ!

特徴②:案件獲得方法まで充実した解説を行っている

正直、過去にあるロードマップでは学習方法にフォーカスが置かれ過ぎていて、案件獲得まで手厚く解説されているロードマップは少ないです。

その理由は「多数がプログラミング学習時点で挫折してしまい、案件獲得についてはニーズが少ないからではないか」と僕は考えています。(※あくまで予想です)

僕も営業活動を行うときには、参考にする記事の少なさを目の当たりにしたので、補填する形で、この記事では案件獲得方法についても手厚く執筆しました。

特徴③:超具体的な記事で再現性を高めた

この記事は4万字を超えていて、ボリュームが少なくない方です。

もちろん「僕もボリュームが多ければ多いほどよい」なんて考えていません。むしろ少ない方がよいことは重々承知してます。

しかし、ロードマップというと特性上、初心者の方が成長できる“再現性”が最重要だと考えています。そのため、超具体的に執筆し、結果として、bpリューミーになってしました。

特徴④:再現性の高いツール(デザインカンプ・メールテンプレ)を搭載

この記事ではおすすめのデザインカンプを紹介し、僕が実際に使用したメールテンプレを無料で配布しています。

僕が探した以上、“デザインカンプ”と“メールテンプレ”が添付されているロードマップ記事は見当たりませんでした

でも、この2つのツールがあると、初案件獲得の確率がぐーんと高まるので、ぜひ入れたいと考え、コンテンツに追加しました。

はじめに

Web制作で案件を獲得したい場合には、「挫折する理由」と「継続するコツ」を知っておいて欲しいです。

これらを知っておくだけで、継続期間が延び、学習量が増え、成功確率がぐんと高まります。この章では、それらについてお伝えします。

初心者が挫折する7つの理由

よく耳にすると思いますが、初案件を獲得する前に挫折する人は少なくないです。

たまたまみんな挫折してしまうのでしょうか?

いえ、違います。挫折は「偶然するもの」ではありません。大きな壁にぶつかり、乗り越えられなかったときに挫折してしまうんです。

だから、どのタイミングで挫折する理由(大きな壁にぶつかるのか)について知っておけば、壁にぶつかった時に対処できるようになります。

僕の体験を交えつつ、周りを見ながら考えてみると挫折する理由は以下のいずれかです。

初心者が挫折する理由7つ
  1. 情報を集めないから
  2. 情報収集してても、必要十分な情報を集められていないから
  3. 必要十分な情報を集めていても、勉強しないから
  4. 勉強をしてても、正しい勉強ができず成果物をつくれないから
  5. 成果物を作っても、効果的な成果物ではないから
  6. 効果的な成果物はあるのに、アポ取りがうまくいかないから
  7. アポ取りがうまくいっても、営業がうまくいっていないから

ちょっとしたチェックリストみたいになっています。1〜7の項目を自分が乗り越えられるイメージがつくかどうか一度考えてみてみましょう。

この記事が初心者の挫折をなくせる理由

この記事を読むことで挫折はなくなるでしょう。なぜなら、上記の挫折理由を排除することを目的として十分なコンテンツ量の記事を書いているからです。

挫折理由と合わせて、見てみましょう。

  1. 情報を集めないから
    →この記事を見ている時点であなたは情報を集められていますよ!
  2. 情報収集してても、必要十分な情報を集められていないから
    →この記事は初心者から案件獲得までの行動を25STEPに分けて、網羅的に解説している!
  3. 必要十分な情報を集めていても、勉強しないから
    →行動しましょう!
  4. 勉強をしてても、正しい勉強ができず成果物をつくれないから
    →この記事では正しい勉強の方法を解説しています!
  5. 成果物を作っても、効果的な成果物ではないから
    →この記事では効果的な成果物の作り方も解説しています!
  6. 効果的な成果物はあるのに、アポ取りがうまくいかないから
    →アポ取りの方法も超絶詳しく解説しています!
  7. アポ取りがうまくいっても、営業がうまくいっていないから
    →アポ取りの後の行動も詳しく解説しています!

このような形で、すべての理由を潰せるように執筆したので、案件獲得まで突っ走ることができるはずです。

大切な”継続”の5つのコツ

必要な情報を入手しても、行動を継続しないと成果は出ません。そのため、継続力を身につけることが大切です。

僕も3日坊主だったことは何も成果を出すことができませんでした。しかし、このWeb制作をきっかけに継続力を身につけることができました。

そのおかげで、筋トレやTwitter運用なども少しずつ成果が現れ始めています。

そのため、成果につながる継続のコツをお伝えできると考えています。この節では、継続するコツを5つお伝えします。

コツ①:今後の動きを鮮明に頭の中で描いておく

人が継続をやめてしまう理由は、次やるべきことに自信をもてないからです。自信をもてないから、行動が無駄になることを恐れ、行動をやめてしまうんです。

そのため、成果が出るまでの行動を鮮明に頭のなかで描き、常に行動に自信満々の状態をつくります。

今後の動きを頭の中で鮮明に描き、行動に自信を持つことが1つ目のコツです。

コツ②:短期的な思考を捨てる

「2ヶ月で初案件獲得する」などの短期的な思考は捨てましょう。

短期的な思考をもつと、ムリな目標を設定し、達成できず、絶望し、挫折してしまいます

「4ヶ月くらいで案件を獲得したいけど、取れなくても仕方ない。もしできなかったら半年くらいを目指そう!」くらいの心持ちがよいと思います。

僕もそのように心がけていました。絶望して心が折れることがなによりも怖かったので…。

コツ③:仲間をつくる

自分の行動を見守ってくれる仲間がいると、継続しやすいです。リアルの知り合いでもいいですし、Twitterの仲間でもOKです!

僕はリアルとTwitterの両方に、仲間の存在があります。

もし、Twitterで仲間を作りたい場合には、「#駆け出しエンジニアと繋がりたい」や「#デイトラ」など、Web制作者が多くいるハッシュタグで検索し、リプライをたくさんしてみるとよいです。

そのリプライの中から継続的に話する人がでてくると思います!僕がいまよく話す仲間たちも、そのようにして仲よくなりました。

コツ④:他人と比較しない

他人と比較するのはやめましょう。「●ヶ月で案件獲得」とか「●日で収益化」などを実績として公開している人がいますが、気にしないようにしましょう。

他人と比較しだすと、より優れた人と比較するようになります。そういった方々のなかには、偶然、飛び抜けている実績を出せたケースもあるんですよね。

そういった偶然性と比べてしまうと、辛くなって、自分に自信を持てなくなってしまい。挫折するリスクを高めるだけです。

他人とは比較せず、常に昨日の自分に打ち勝ちつづけましょう。

コツ⑤:ムリをしない

ムリはしないようにしましょう

まれに「今日は夜勤で残業で眠い…。でも、帰ってからプログラミング学習する!」といったツイートを見ます。

そんなとき僕は、「寝た方がいいんじゃないかな」と思います。

そういったムリは、知らず知らずのうちに精神を蝕んでいきます。そして、いつか心を折ってしまう…。

継続することが何よりも大切なので、短期的な思考でムリをするようなことはせず、長期的な思考をもって、次の日に備えるのがよいのかなと考えています。

もちろん、なまけ過ぎるのはよくないですが…

無理せず、楽しくいきましょう! 

すでに7,000文字以上を読んでいただいています。やっとここで、ロードマップに入っていきましょう。

これからの内容も重要ですが、ここまでの内容も超重要ですので、内容を理解をしていただくようお願いいたします。

ではロードマップに入ります。

Web制作初案件獲得までの全体像を知る

初案件獲得までの行動25ステップの概要を見ていきましょう。

全体像を見ておくからこそ、一つひとつの行動に目的意識をもち、効果的な行動を取れます。

本章では全体像をざっと確認します。

学習準備の7つのSTEP

  1. 準備編STEP①:大切な3つの思考
    • 思考①:逆算思考
    • 思考②:クライアント思考
    • 思考③:感謝
  2. 準備編STEP②:Web制作を行う目的を明確にする
    • 目的を明確にするべき理由
    • 僕がWeb制作で稼ぎたい3つの理由
  3. 準備編STEP③:Web制作に必要なものを用意する
    • 必須の6つのアイテム
    • できれば用意したい2つのアイテム
  4. 準備編STEP④:Web制作における必須スキル・差別化スキルを理解する
    • 必須スキル6選
    • 差別化スキル3選
  5. 準備編STEP⑤:ポートフォリオサイトのデザインカンプを用意する
    • プログラミング学習前にデザインカンプを用意する2つの理由
    • 用意するデザインカンプの条件
    • 優良デザインカンプ(無料のもの)を紹介します
  6. 準備編ステップ⑥:”科学的に最強”なプログラミング学習を知る
    • 学習において科学的に重要な3つのことを知る
    • 今後の学習手順を頭の中に入れる
    • それぞれの段階の学習方法
  7. 準備編ステップ⑦:Twitterアカウントを開設する
    • Twitterアカウントを開設するべき3つの理由
    • 発信すべき3つの内容

学習の8つのSTEP

  1. 学習編①:HTML・CSSの基礎を固める
  2. 学習編②:レスポンシブコーディングを身につける
  3. 学習編③:だんさんカンプを使用してコーディングする
    • だんさんカンプとは?
    • なぜ“だんさんカンプ”なのか?
  4. 学習編④:Sassを身につける
  5. 学習編⑤:jQueryを学習する
    • jQueryとは
    • 学習方法
  6. 学習編⑥:コーディングの実力と持久力をつける
    • ねこポンさんカンプを使用してコーディングする
  7. 学習編⑦:ドメイン・サーバーを契約し、Web上にアップロードする
    • ドメインを契約する
    • レンタルサーバーを契約する
    • ドメインとサーバーをつなげる
    • FTPツールをインストール、設定する
  8. 学習編⑧:差別化スキルを身につける
    • 営業と並行して行うとよい
    • 僕はWordPressテーマ制作のスキルを身につけた
    • 僕のWordPress勉強方法

案件獲得の10つのSTEP

  1. 案件獲得編①:5つの案件獲得方法を知り、決める
    • 方法①:直営業
    • 方法②:紹介
    • 方法③:クラウドソーシングサービスの利用
    • 方法④:SNS・ブログでの集客
    • 方法⑤:Web制作会社への営業
  2. 案件獲得編②:強みを整理する
    • 強みを整理するべき3つの理由
    • 案件において強みになりうる3つのもの
  3. 案件獲得編③:料金表を作成する
    • 料金の決め方
    • 料金表作成の2つのポイント
  4. 案件獲得編④:Web制作案件受注ページを作成する
    • 受注ページをつくる2つの理由
    • 受注ページに載せる5つの項目
  5. 案件獲得編⑤:提案文・メール文のテンプレを作成する
    • テンプレを用意する3つの理由
    • オリジナルテンプレを作成することの重要性
    • メール文に入れるべき7つの項目
    • 僕のメール文テンプレ
  6. 案件獲得編⑥:営業先リストを作成する
    • リストのつくり方
    • リストをつくる時の3つの注意点
  7. 案件獲得編⑦:営業先に提案文章・メール文章を送付する
    • 僕の送付数と成約率について
    • 僕が送付するときに気をつけていた5つのこと
  8. 案件獲得編⑧:返信がきたらコミュニケーションコストを最大限下げる
    • コミュニケーションコストを下げる理由
    • コミュニケーションコストが低いと喜ばれる2つの理由
    • コミュニケーションコストを下げるためにできる2つのこと
  9. 案件獲得編⑨:リスクを回避するためにすべき4つのこと
    • リスク回避①:打ち合わせ時は議事録を取り、確認していただく
    • リスク回避②:契約書は基本的に一度持ち帰りじっくり読む
    • リスク回避③:契約書で気をつけるべき3つの項目
  10. 案件獲得編⑩:継続案件をいただくための3つの行動
    • 行動①:コミュニケーションコストを下げる行動をする
    • 行動②:自分から提案していく
    • 行動③:確認を怠らない

準備編STEP①:大切な3つの思考

思考①:逆算思考

逆算思考とは「ゴールを定めてからそれまでの道筋を決める考え方」です。

逆算することによって、無駄な行動をなくし、最短の時間・労力でゴールを目指すことが可能になります!

そのため、行動中は常に「この行動のゴールは何か」を問い続けながら行動してみてください。そうすると改善点が見つかったり、学習効率が高まったりします。

もちろん、この記事の戦略はすべて逆算しながら作られたものです。

思考②:クライアント思考

クライアント思考は、「クライアント様の立場に立って物事を捉える考え方」です。僕がネーミングしました。

現在、Web制作の勉強をしているあなたは、下のような考えになってしまってはいないですか?

  • どうしたら自分の実力を認めてもらえるか?
  • どんなスキルを身につけたら案件をもらえるのか?

少なくとも僕はこうなっていました。笑

一方、Web制作を発注する側であるクライアント様側の気持ちに立ってみましょう。

クライアント様の考え
  • 売り上げを上げられるデザインが欲しい
  • 何を言わずとも納品まで自走できるコーダーが欲しい
  • コミュニケーションコストが低くて、自分の仕事を減らしてくれる人と仕事したい

こう思いますよね。しかもここまで読めれば、何をするべきか見えてきます。

  • UI/UXデザインを勉強しよう
  • デザインカンプからサーバーへのアップロードまでできる人材になろう
  • 仕事の進め方を一通り学習しておこう

クライアント思考を身につけると、必要最低限のすべきことがポンポン出てきます。

思考③:感謝

もっとも重要なのが「感謝」です。

日頃から感謝できる人は、謙虚で行動力があります。そして、優しい人柄に溢れます。

そういった行動力、人柄はTwitter投稿やメール文章、クライアント様とのやりとりに滲み出てきます。

のちのちに紹介しますが、Twitterやメール文章も日頃のやりとりも案件獲得のために大切なものです。

日頃から感謝を忘れず、素敵な人柄になっていきましょう。

では、実務的な部分に入っていきます!

準備編STEP②:Web制作を行う目的を明確にする

目的を明確にするべき理由

まず、あなたがWeb制作で稼ぎたい理由をできるかぎり明確にしてください。

それが折れそうになる心を支えるエネルギーになるからです。

初案件を獲得するまではとても不安になります。

勉強が全部無駄に思えてきたりするし、自分自身が求められていないような気分にもなってきます。

実際、スキルがないと、職業人としては求められません。だから、スキルを身につけるまで自分を支えるために、自分のなかのエネルギーを見つけましょう。

理由の例
  • フリーランスとなって満員電車から卒業したいから
  • 現在の収入だけでは家計が回らないから
  • 副業をして普段の生活に余裕を持たせたいから
  • 自分に自信を持てるようになりたいから
  • 世界を旅しながら仕事をしたいから

などなんでもOKです。ただ、自分が心から思えるものにするのがポイントです。

次の節で、僕が自分自身を支え続けてきた「web制作で稼ぎたい理由」をお伝えします。参考になると幸いです。

僕がWeb制作で稼ぎたい3つの理由

僕がWeb制作で稼ぎたい理由は大きく3つあるので紹介します。

理由1:未経験から挑戦できて高単価な案件を振りやすいから

僕は「苦しい現在の環境を打破したい人」を応援したいです。

現状の打破には、スキルを身につけ、比較的高単価な案件ができるようなるのが理想です。

しかし、高単価な案件というのは就職した経験がないと手が出しにくいのが現実です。

そこで、ちょうどいいのがWeb制作だと僕は考えています。「未経験から任せてもらいつつ、できるだけ高単価である」という条件を満たしているからです。

私は自分自身がWeb制作ができるようになり、マネジメント側となり、上のような人を応援する立場になりたいと考え、Web制作者として稼ぎたいと考えました。

理由2:本業のリスクヘッジになるから

僕は2021年から新卒入社します。ただ、その会社が必ずしもいい会社とは限りません。

ハラスメントが横行しているかもしれませんし、成長しづらい環境かもしれません。あくまで可能性の話ですが、しっかりと可能性を考え抜かないと生きづらくなっていくのが今の世の中です。

こういった可能性を考え、転職や独立をしやすいようにWeb制作スキルや営業スキル、コミュニケーションスキルを身につけたかったというのが2つ目の理由です。

※念のためにお伝えしておくと、現在、退職・転職する予定はありません。しっかりと向き合って、価値提供していきたいと考えております。万が一に備えて、ということです。

挑戦することにワクワクし続けたいから

3つ目の理由がシンプルにワクワクし続けたいからです。

「自分で勉強してスキルを身につけて、お役に立つ」って誰でもできることではないですよね。

その難易度が多少あるものにチャレンジするワクワク感がたまらないんです。

子どもみたいですが、好奇心的なものが僕を突き動かしています。

準備編STEP③:Web制作に必要なものを用意する

必須の6つのアイテム

アイテム①:パソコン

なによりも大切なのが、PCです。自分の命ともいえる存在なので、高額ですが投資しておきたいです。

できれば上記のもの以上ではありたいです。

CPUはコンピュータの頭の回転の速さのようなものなので、性能が悪いと画像の書き出しや、ファイルの読込などが遅くなり、作業効率が下がってしまいます。

メモリは同時に処理できる計算能力のことで、簡単にいえば、マルチタスクをできる量のことです。この量が多いほど、同時にできる作業量は多くなります。

ハードディスク(SSD)は記憶力のよさです。案件をこなしてくると画像等を管理しなくてはいけないため、ある程度データを保存しておく必要があります。そのため、512GB程度は欲しい、といった形です。

★おすすめのPC

上記を総合して僕がおすすめしているのが、MacBook Airです。

MacBook Airをおすすめする理由
  • Mac系はディスプレイの発光の仕方がすべて同じなので、デザインでユーザー目線に立ちやすい
  • 固まりにくいユーザーインターフェースになっており、サクサク動く
  • IT系にはMacユーザーが多いので、問題に対応できる人が多いため、問題解決しやすい
  • ITソフトがWindows対応していないのにMac対応というものがよくある

アイテム②:インターネット環境

次にインターネット環境です。案件をこなすためには絶対にインターネットは必要不可欠です。

スターバックスやマクドナルドなどに行けば、Wi-Fiはありますが、オープンなWi-Fiは避けるようにしましょう。セキュリティ的なリスクが高すぎるからです。

家庭に置けるタイプの一般的なWi-Fiを利用するのがよいと考えています。

アイテム③:セキュリティソフト

セキュリティソフトも必ず用意しましょう。プログラミングを学習しているとさまざまなサイトにアクセスしたり、ソフトをインストールしたりします。

セキュリティソフトはその際のリスクを減らしてくれます。クライアント様の立場になって考えてみると、セキュリティリスクに対応していない人に、案件は任せたくないですよね…。

セキュリティソフトはお好みで良いと考えていますが、僕は“eset CYBER SECURITY PRO”を利用しています。

リーズナブルで、設定もしやすく、セキュリティ性に問題がなさそうだったので、このセキュリティソフトにしました。いまも使い続けています。

興味のある方は、下記のボタンより詳細をご覧ください。

アイテム④:学習サイト「Progate」

学習サイト「Progate」の有料会員になりましょう。無料でも利用できるコースもあるのですが、コスパよく実力をあげられるので、有料コースへの登録は必須級です。

2ヶ月間あれば必須部分が終わるので、980円(税抜)×2ヶ月=1,960円(税抜)程度の出費を想定しておくとよいです。本よりもコスパよく学べちゃいます。

アイテム⑤:超有用エディタ「Visual Studio Code」

Visual Studio Code(以下、VS Code)をインストールしましょう。無料とは思えないほどの機能が搭載されています。

下のURLからMicrosoftのサイトに入り、「今すぐダウンロード」を押して、ダウンロードします。

エディタのカスタマイズはまた別の機会にお伝えしたいと思いますが、最低限で紹介しておきたい拡張機能が2つあります。

  • Japanese Language Pack for Visual Studio Code
    エディタの英語表記を日本語表記にする拡張機能です。
  • Live Server
    セーブしたら自動的にブラウザが更新されて表示が変わる拡張機能です(“ホットリロード”といいます)。

★インストール方法

①の部分をクリックして機能拡張画面を開き、②の部分に上の拡張機能名を入れてあげてください。簡単にインストールすることができます。

インストールしたらエディタを再起動してあげてください。そうすると、拡張機能が適用されます。

アイテム⑥:ブラウザ「Google Chrome」

GoogleChromeは3つの理由から絶対にいれておくべきブラウザです。

  1. ユーザー数が多い
    ユーザー数が多いため、多くの人がどう見えているのかを確認できます。
  2. ディベロッパーツールの使い勝手がよい
    ディベロッパーツールとはブラウザからソースコードを確認できるツールです。自分がエディタに書いたコードがきちんと反映されているかなどを確認できます。
  3. Web制作に豊富な拡張機能が豊富
    色を取得したり、ピクセルパーフェクトでコーディングしたりするための拡張機能が豊富に揃っています。

できれば用意したい2つのアイテム

ここからはできれば購入をおすすめしたいものです。費用対効果は抜群なのですが、必須というわけではありません。お財布と相談して決めるとよいと思います。

アイテム①:モニター

画面が1つしかないと、1つの画面で、“デザインカンプ確認”&“コーディング”&“ブラウザ確認”の3つの作業をすることになるので、時間と精神力が持っていかれます。

画面が2つになれば、その時間と精神力をかなり節約することができます。

安いものだと1万円くらいです。大きめの方が汎用性が高いので、なるべく大きめをおすすめします。

ちなみに、僕はLGの27型モニターを使用しています。下の写真が僕のデスクです。

最安値とは言いませんが、大きさのに対しての低価格、高品質が気に入りました。

もう1年半くらい使用していますが、いまも満足し続けています。

アイテム②:Googleドライブ(容量拡張)

Googleドライブの容量拡張もおすすめしています。

Googleドライブ容量の拡張を行うと、クラウドに保存できるデータ量が多くなります。

案件で、自分のGoogleドライブにデータを保存し、URLを送付するということも少なくないので、Googleドライブ容量拡張は重宝します。

また、クラウドに保存しておくことによって、PCが壊れたときのリスクへの対処にもなります。

そのため、僕はPCが急に壊れてもデータという側面で困ることはありません。

(悲しいし、新しいPCを買わないといけないので辛いですが…)

Googleドライブ容量の拡張プランは一番安いプラン(250円/月)で問題ありません。

100GBもあればWeb制作では十分です。

【参考】Google のストレージを追加購入する|Googleドライブヘルプ

準備編STEP④:Web制作における必須スキル・差別化スキルを理解する

Web制作における必須スキルと差別化スキルを押さえておきましょう。

必須スキルとは、“身につけておかないとWeb制作案件中に支障が起きるので、全員が身につけておく必要があるスキル”です。

差別化スキルとは、“競合に差をつけられるスキル”です。このスキルがあることによって、競合が少ない領域で勝負できたり、競合に勝ちやすくなったりします。

学習するスキルを把握し、目的意識を持って学習するためにも、必須スキルと差別化スキルを理解しておきましょう。

必須スキル6選

必須スキル①:レスポンシブ・コーディングスキル

まず、レスポンシブ・コーディングです。画面幅によって異なるデザインを表示させるためのコーディングです。

PC版・スマホ版それぞれに適したデザインを表示させます。

必須スキル②:デザインカンプを取り扱うスキル

案件の多くはデザインカンプをもらい、コーディングをおこないます。

デザインカンプとは、Webサイトのデザインをまとめた仕様書のようなものです。

この記事内でおすすめのデザインカンプを紹介いたします。

必須スキル③:HTMLタグの正しい活用スキル

HTMLタグを正しく活用できるようにしましょう。

bodyタグやheadタグはもちろん、下記のようなものを正しく活用できるのが大切です。Googleからサイトの構造を理解してもらうために重要な役目を果たすからです。

【HTMLタグ主要なもの】

  • 構造に関するもの
    section/article/aside など
  • 文章の役割を定義するもの
    h2/h3/p など
  • 文章以外の要素を付け加えるもの
    img/a/br など

Progateを通して、重要なものは覚えられるはずなので、きちんと理解しておいてください。

必須スキル④:サーバーへのアップロードスキル

サーバーへのアップロードも必須スキルです。

Webサイトはサーバーにファイルをアップロードすることによって、表示されます。そのため、サーバーにアップロードできるようにしておきましょう。

この記事内で後ほど、ドメイン・サーバーで触れる部分で簡単に説明します。

必須スキル⑤:Sassを取り扱うスキル

Sassは「Syntactically Awesome StyleSheet」の略で、メンテナンス性を高めながら、スタイルシート(CSS)を素早く書けるようになる言語です。

使い方は、エディタにSassでコードを書く→コンパイル(翻訳)→CSSを出力、という形です。

簡単素早くCSSを記述できます。

メンテナンス性が高いので、Sassでの記述をマストにするクライアント様(主にWeb制作会社)も多いようです。

たとえ、Sassが要求されなくても、素早く記述するために便利なので、押さえておきましょう。

これはProgateで学習できます。

必須スキル⑥:jQueryを取り扱うスキル

jQueryは簡単にJavaScriptの動きを実装できるライブラリです。後ほど詳しく説明します。

差別化スキル3選

差別化スキルは正直無限にありますが、具体例として3つ紹介します。

差別化スキル①:WordPress

WordPressはブログ機能を簡単に実装できるオープンソースのソフトウェアです。

日頃から、情報発信をしたい事業者は少なくないため、WordPressの需要は高いです。

ちなみに、このサイトもWordPressでつくってあります。

PHPまで多少触れるようになる必要はありますが、ニーズが高いため、おすすめの差別化スキルです。

差別化スキル②:Shopify

Shopifyとは、Shopify社が運営するEC(ネット販売)用のプラットフォームです。

コロナ禍でECの需要が高まっており、Shopifyを利用したサイトの構築需要が高まっているようです。

差別化スキル③:UI/UXデザイン

UI/UXデザインとは、ユーザー体験を最適化し、理想の動きを促すためのデザインスキルです。

マーケティングと深い結びつきがあり、UI/UXデザインができると、企業の売り上げに直接的に関わることができるため、重宝されます。

準備編STEP⑤:ポートフォリオサイトのデザインカンプを用意する

先ほどもお伝えしたように、デザインカンプとは、Webサイトのデザインをまとめた仕様書のようなものです。

プログラミング学習前にデザインカンプを用意する2つの理由

プログラミング学習前にデザインカンプを用意する理由は2つあります。

理由①:ゴールまでの進捗確認をできるようにしてモチベーションを保つため

人は自分が成長していることに喜びを感じるため、自分の成長を可視化することはとても大切です。

スタート時はどうやって実装していけばいいのか検討もつかなかったのに、どんどん作れるようになっていく自分に自信を成長を感じられます。

とても楽しそうですよね!

理由②:無駄な学習をなくし、最短ルートで案件を獲得するため

ゴールが決まれば最短ルートもわかります。先にポートフォリオを決めておかなかったせいで無駄な勉強をしてしまいました。

今思うと無駄な勉強例
  • Ruby
  • Ruby on Rails
  • JavaScriptの難しいやつ
  • PHPの難しいやつ
  • Android studio

無駄とは言すぎですが、少なくとも、Web制作の案件のためには不要な学習でした…。

用意するデザインカンプの条件

ポートフォリオサイト用のデザインカンプには条件があります。

ポートフォリオサイトは実績として公開するため、必要最低限、実装しておくべき機能があるからです。あまりに簡素なポートフォリオサイトでは実力を示すことができないからです。

僕が考えるポートフォリオサイトの条件、並びに、選択するべきデザインカンプの条件は下記の通りです。

デザインカンプの必須条件
  • レスポンシブ・コーディングに対応している
  • 頻出の構造を抑えている
    ヘッダーメニュー/2カラム構造/セクションが複数ある/ボタンがある
  • 頻出のjQuery機能を実装している
    アコーディオン/クラスのつけ外し/スライドイン

優良デザインカンプをご紹介

この記事内で後ほど紹介しますが、僕が優良だと考えるデザインカンプは下記の2つです(無料のものを厳選)。

なぜ優良だと考えるのか、そしてどのタイミングで使えばよいのかは、学習ステップの中でお伝えします。

準備編ステップ⑥:”科学的に最強”なプログラミング学習を知る

この章では、効率的な学習方法についてお伝えします。

効率的な学習を行うためには、科学的に立証されている方法をうまく活用して、学習を進めていくことが大切です。

この章では、学習研究を先に紹介して、その後に具体的なプログラミング学習方法を紹介します。

学習において科学的に重要な3つのことを知る

学習には正しい方法と間違った方法があります

間違った方法で学習すると、「あれ?これってどうするんだけな?」「これでいいはずなんだけど、なぜか動かない…」というように、プログラミングがうまくいきません。

わかった気になるだけの「間違った学習」を行うと、このような状態になります。そのため、正しい学習を行うことが大切です。

①焦らず簡単なものから着々と学習する

簡単なものから学習しましょう。人には達成バイアスという性質があり、ものごとを達成すると喜びを感じ、集中力を増していく性質です。

そのため、一日の最初や学習の最初は簡単なものから着手し、達成バイアスを高めていきましょう。

集中力は学習効率も学習量も高めてくれるので、集中力を高める工夫をしましょう。

②インプットとアウトプットの比率は3:7を心がける

アウトプット中心の学習をしましょう。インプットとアウトプットの理想の比率は3:7が一番学習効率がよいということが脳科学の研究でわかっています。

【参考】記憶効率を上げる黄金比は「3:7」だ。勉強に脳科学を取り入れるべし。

勉強をしているとインプットとアウトプットの境目があいまいになってくることがありますが、シンプルに「できるだけたくさん”思い出す”」という心持ちで学習に望みましょう。

人間は覚えようと一生懸命になっている時ではなく、思い出した時に、記憶が定着するからです。

できるだけ思い出す回数を増やす学習方法については、勉強方法について記載した部分にて具体的にお伝えします。

③集中を阻害する原因を取り除く

集中を阻害する原因を取り除きましょう。

目に入るところにスマホがあるだけで、集中力が下がるという研究結果もあります。

  • 作業時の音楽は自然音or無音に
  • スマホは別の部屋に置く
  • PC学習中に他のサイトを開いておかない
  • LINEやTwitterの通知はOFF

などが具体的な対策としてあげられます。集中力を阻害する原因を取り除いていきましょう。

今後の学習手順を頭の中に入れる

今後の学習手順を頭に入れておきましょう。全体像が頭の中に描けていれば、自分の行動の目的がはっきりするので、改善などがしやすいです。

下記の順序で学習することを今一度、頭のなかに入れておきましょう。

  1. コーディング基礎を理解する
  2. PC版のみのページ模写をしてコーディングに慣れる
  3. レスポンシブコーディングを理解する
  4. 動きの付け方を学ぶ
  5. 難易度の高いページを模写してレスポンシブコーディングに慣れる
  6. デザインカンプからコーディングをする

それぞれの段階の学習方法

Progate

Progateは有用な学習サービスなのですが、自分を甘やかそうとするとどこまでも甘やかせてしまいます。

「やり方がわからず、すぐスライドや答えを見てしまって、自分でコーディングする実力がつかなかった」という人は少なくないはずです。

本来、Progateは、しっかりとこなせば、模写にスムーズに入れるくらいのコンテンツ量は含んでいます。

つまり、Progateは使い方が難しいということなんです。

そこでおすすめなのが下の学習方法です。

これは記憶の定着に重要な「思い出す」という工程に重きをいた学習方法です。

しかも、2周目は実質的に「自分で実装方法を考える」ことになるので、この後の模写にスムーズに入れるようになります。

デザインカンプからのコーディング

デザインカンプを利用しながら、コーディングをおこないます。

分からない時にはソースコードを見て、どういうふうに実装しているのかを覚えていきます。僕が紹介するデザインカンプは両者とも、コーディング済みのWebページが公開されているので、そこでソースコードを確認できます。

準備編ステップ⑦:Twitterアカウントを開設する

Twitterアカウントを開設しましょう。

Twitterアカウントを開設するべき3つの理由

理由①信頼獲得のため

案件獲得時の信頼獲得につながるためです。これは僕の仮説ですが割と効果があるものだと考えています。

案件を任せていただくためには、下2つの信頼が大切だと考えています。

  1. 技術への信頼
  2. 人間性への信頼

技術的な信頼とは、案件をこなす技術を持っているかどうかについての信頼です。

人間性への信頼とは、案件を最後までやりきり、対応にも丁寧に答えてくれるであろうなど、人としての信頼です。

この両者が揃ってはじめて案件を任せてもらえると思うんです。

クライアント様側の立場になって考えてみると、技術がなくて案件を最後までやりきってもらえなかったり、途中で逃げられてしまったりしたら、すごく困りますよね

そのため、信頼を獲得するためにTwitterは重要だということです。

理由②継続のモチベーションにするため

Twitterでできた繋がりは、学習継続のためのモチベーションになります

プログラミング学習はとても孤独です。多くの人の場合は一緒に学習する仲間はいないでしょう。なぜなら、プログラミングに着手する人は希少だからです。

一緒に苦労をする人がいないと、人は継続が難しくなってしまいます。

そこでTwitterの出番です。Twitterを発信していると、仲間ができます。その仲間と不安を共有したり、励ましあったり、時には問題を解決したりすることによって、プログラミング学習を継続しやすくなります。

先ほどもお伝えしたことになりますが、ハッシュタグを利用して繋がるのがおすすめです

#駆け出しエンジニアと繋がりたい
#プログラミング初心者
#デイトラ

などここら辺がおすすめです。

どんどん検索して、どんどんリプして仲よくなっちゃいましょう!逆に言えば、リプしないと仲いい人はなかなかできないので注意です!

理由③学習効率を高めるため

自分が学んだ内容を言語化して発信する事で学習効率が高まるからです。

プログラミング言語はなんとなくコードを書いてしまいますが、言語化するのはなかなか難しいです。

ですが、その言語化することで学習効率を高めることができます。自分の学習内容を具体化し、要約する必要があるからです。

「paddingは脂肪のようなもので、marginは隣の人までの距離」みたいなゆるい感じでもOKなので、発信していきましょう!

発信すべき3つの内容

では上のメリットを享受するためには、どのような発信をすればよいのでしょうか。

僕は下の3つの発信が大切だと考えています。

内容①:プログラミングの技術的な内容

まずは技術的な発信です。プロパティの設定方法やタグの使い方など、学んだことを発信していきましょう。

これをどんどん続けていけば、この人はプログラミングについての知識がある人なんだという印象をもってもらいやすくなります。

そして、他人に役立つ情報をgiveすることができる人間性の持ち主であることも伝えることができます。

そのため、プログラミングの技術的な内容の発信はとても重要になります。

内容②:Web制作者としての内容

次にWeb制作者としての内容です。Web制作者は技術以外のこともできなくてはいけません。

  • Web制作に関するこだわり
  • 自分がWeb制作をする理由
  • 営業のトライアンドエラーについて
  • ビジネスマンとしてのスキル

などです。Web制作の仕事はプログラミングをすることだけではありません。ビジネスの総合力も発信しておくことが、信頼獲得に繋がると僕は考えています。

内容③:人間らしい内容

人間らしい内容も大切です。あなたはいつもお役立ち情報のみを発信している人に親しみを感じ、信頼を寄せることができますか。

頑張っている姿や日常を楽しんでいる姿をみれるからこそ、人間らしさを感じ、信頼できるのではないでしょうか。

  • 今日の勉強内容
  • お出かけの様子
  • おはようツイート

など人間らしい内容を発信することもとても大切です。

学習編①:HTML・CSSの基礎を固める

まずProgateでHTMLタグやCSSの基礎を学びます。

具体的には

  • HTML&CSS 初級編
  • HTML&CSS 中級編
  • HTML&CSS 初級編 道場コース
  • HTML&CSS 中級編 道場コース

を行います。

ここでの勉強法は先ほどお伝えしたように、ひとつのコースを2周やってから次のコースに進むようにしてください。

定着率が変わってきます。

学習編②:レスポンシブコーディングを身につける

次は、レスポンシブコーディングを身につけます。レスポンシブコーディングとは端末ごとに適切にWebページを表示させる技術です。主に、画面のサイズによって表示を切り替えます。

こちらもProgateで学習可能です。

  • HTML&CSS 上級編
  • HTML&CSS Flexbox編

を学習してください。上級編の道場コースはやらなくてOKかなと思います。自由度が高い課題のわりに、高い正確性を求められるので、正直コスパが悪いからです。

上の2つのコースを2周程度して、学習が定着したら次の学習段階に進んでOKです。

学習編③:だんさんカンプを使用してコーディングする

だんさんカンプとは?

だんさんカンプとは、Web制作を行う大学生のだんさん(@dan03301)が制作したデザインカンプのことです。僕が“だんさんカンプ”と呼んでいます。

なぜ“だんさんカンプ”なのか?

だんさんカンプを見てコーディングする理由は下記の4つです。

だんさんカンプをおすすめする理由
  1. 基本的なHTMLタグを網羅している
  2. 構造を把握しやすい
  3. 簡単なレスポンシブ対応
  4. シンプルなコーポレートサイト設計を学べる

上記の理由からHTML&CSSの学習の後に、コーディングすることをおすすめしています。

無料で配布されていますので、ぜひ見てみてください。

学習編④:Sassを身につける

ProgateでSassを学習しましょう。コースもひとつしかないし、短いものなので、すぐに終わります。

これをやっておくと、今後のコーディング効率が飛躍的に高まるので、しっかりこなしておきましょう。

学習編⑤:jQueryを学習する

Web制作で頻出の技術であるjQueryを学習しましょう。

jQueryとは

jQueryとはJavaScriptを簡単に使えるようにしたJavaScriptのライブラリです。

簡単にいうと、ミートソースパスタのレトルトタイプですね。玉ねぎやトマト、バジルなどからミートソースパスタを作るのがJavaScriptです。一方、細かな調整は効かないけど、簡単にミートソースパスタを作れてしまうのが、jQueryです(正確性には欠ける表現だと思います)。

学習方法

学習方法はインプットとしてProgateを、アウトプットとしてデザインカンプを行います。

ひとまずこの段階では、ProgateのjQueryコースをこなしましょう。

  • jQuery 初級編
  • jQuery 中級編
  • jQuery 中級編 道場コース
  • jQuery 上級編

上のすべてを一気にやっちゃいましょう。最低でも2周はこなしてださい。

ここら辺をこなすことによって、

  • アコーディオン
  • スライダー

などの頻出技術を身につけることができます。

JavaScriptは学習するべきか

「jQueryがJavaScriptのライブラリなら、JavaScriptをこなすべきかな」という疑問が浮かぶでしょうが、この段階ではやらなくてOKです。

細かいJavaScriptの話に入るよりも、Web制作の全体像をつかむ方が優先度が高いからです。優先度が低いのに難しい部分をやって挫折してしまうのも、もったいないですしね…。

もちろん、Web制作で頻出の技術を身につけた時点でJavaScriptを勉強するのはよいことだと思います!

学習編⑥:コーディングの実力と持久力をつける

次にコーディングの実力と持久力を身につけます。

重要なのが持久力という点です。現時点ではコーディングがとても疲れるものだと思います。

そこへの抵抗感を減らすことが、コーディングの実務を行う上で大切です。

ねこポンさんカンプを使用してコーディングする

実力と持久力をつける上でおすすめしているのが、ねこポンさん(@webdesigner_go)のデザインカンプです。

ねこポンさんカンプをおすすめする理由
  1. 頻出機能“ハンバーガーメニュー”の実装があるから
  2. 頻出のjQuery機能“スライダー”の実装があるから
  3. 固定ヘッダーを使用
  4. 少しだけ構造が複雑

上記の理由から僕は、ねこポンさんカンプをおすすめしています。ねこポンさんカンプも無料で配布していただけているので、ぜひご覧ください。

学習編⑦:ドメイン・サーバーを契約し、Web上にアップロードする

ドメインを購入し、レンタルサーバーと契約しましょう。そして、制作物をWeb上にアップロードします。

  • ドメイン購入
  • サーバー契約
  • FTPツール設定
  • データのアップロード方法

までを図解にした記事を執筆しました。ぜひ下記の記事を参考にポートフォリオサイトを作成し、公開しましょう。

https://kaki-lab.org/how-to-portfolio/

「サーバーって絶対に必要なの?」「サーバーの使い道は何?」となる方は下の記事もおすすめです。

https://kaki-lab.org/webproduction-server/

学習編⑧:差別化スキルを身につける

差別化をスキルを身につけましょう。

営業と並行して行うとよい

差別化スキルは営業と並行していくとよいです。Web制作で使用する最低限のスキルは身についているはずなので、営業を始めつつ、さらに勉強していきましょう。

何が身につけば、案件をいただけるのかを考えながら営業し、スキルを身につけるのが一番早い成長方法だからです。

僕はWordPressテーマ制作のスキルを身につけた

僕はWordPressテーマ制作のスキルを身につけました。理由は3つあります。

理由①:自分に合っていたから

デザインのスキルとかでもよかったのですが、いろいろやってみた上で、プログラミング感が一番合って、楽しかったのでWordPressを選択しました。

楽しければ、勉強で苦しまないし、スキルの向上を目指すので、クライアント様により高い価値を提供することたできます。

理由②:競合が少ないから

デザイン方面はとっつきやすいので、競合が多いので、競合の少なそうなWordPressを選択したのも理由のひとつです。

デザイン系は直感的に操作しやすいので、着手する人が多いです。自分は供給が少ない方を選択します。

理由③:実績を積みやすいから

デザインで重要なのは、売り上げを伸ばすUI/UXデザインを身につけることです。

しかし、売り上げを伸ばすことを証明する実績を作るのが大変です。

一方、WordPressの構築の場合には、機能を実装することで必要性最低限の実績の証明ができてしまいます。そういった実績の作りやすさ、という意味でもWordPressを選択しました。

※とはいってもひとりのWeb制作者として売り上げを伸ばすスキルは絶対に必要だと思っていますので、並行して勉強していくつもりです。

僕のWordPress勉強方法

僕のWordPress勉強方法をお伝えします。

使用した教材

基本的には下の教材を学習し、自分でサイトを作っみた形です。

HTML・CSSの基礎がしっかりできている状態で、これらのサービス・本をクリアすれば、十分WordPressテーマ制作はできるようになるはずです。

ローカルに開発環境をインストールする

WordPressの勉強をするために、ローカルにWordPressのテーマ開発環境を用意することは必須です。

そこでおすすめしているのが「Local by wheel」です。簡単に開発環境を用意することができるので、ぜひ活用してみてください。

下の記事で使い方が詳細にまとめられています。

【参考】超簡単にローカル環境が構築できるLocalbyFlywheelの使い方

案件獲得編①:5つの案件獲得方法を知り、決める

案件獲得方法を知っておきましょう。ここでは5つ紹介します。

人によって適した案件獲得方法が違うので、自分が行う案件獲得方法を考えてみましょう。

方法①:直営業

ひとつ目の案件獲得方法は直営業です。直営業は、決裁権を持った人に対して、直接営業を行う方法です。

メリット

  • メリットは高単価になりやすい

自分で価格の設定でき、なおかつ、間に仲介業者などが入りらないため、マージンを取られないためです。

デメリット

  • 人脈がすでに形成されている必要になる
  • 人脈を形成する能力が必要

世の中、決裁権を持つ人は多くいません。経営者やWebマーケティング部門の部長などでしょうか。

そういった人たちとの人脈を持っていないと、直案件は難しいため、難易度が高いです。

方法②:紹介

次が紹介です。Web制作を依頼したいという人に繋いでもらう方法です。

メリット

  • 高単価になりやすい
  • 新規の開拓の必要性が低い

制作費用を自分で決めることができるため、高単価になりやすいです。なおかつ、紹介をいただける場合には、自分から新しい人に会いまくる必要も低くなります。

デメリット

  • 失う信頼が自分のものだけではない
  • 自分も紹介しないと紹介をもらいにくくなっていく

デメリットに書きましたが、デメリットとは言えないほど当然のことだと思います。

紹介する側は、紹介した人がトラブルを起こしてしまったら、信頼を失うことになります。つまり、紹介する時点ででリスクを負っているということです。

だから、紹介していただいた以上完璧にこなすことが求められます。しかも、完璧にこなしただけでは、自分は利益を得られても、紹介した人は利益0です。

だから、自分の周りに紹介してくれた人が行うビジネスの見込み客がいた場合には、紹介してあげることが大切になっていくでしょう。

方法③:クラウドソーシングサービスの利用

クラウドソーシングサービスも有用な案件獲得方法の一つです。

有名どころでいうと、CrowdWorksやココナラなどがあげられます。

メリット

  • 見込み客のニーズを汲み取りやすい
  • 自分にぴったりの案件を選ぶことができる

クラウドソーシングサービスには案件がたくさんあります。しかも、募集文を見れば、何が求められているのかが一目瞭然です。

ニーズを汲み取りやすく、なおかつ、たくさんの案件の中から自分にぴったりの案件を選ぶことができるのが大きなメリットです。

デメリット

  • 競合が多い
  • 低単価になりやすい
  • 無茶な要求をされるケースがある

クラウドソーシングサービスは応募しやすい分、競合が多くなりやすいというデメリットがあります。そのためその中で選んでもらうだけの魅力的な提案分・実績が必要になります。

また、競合が多いため、価格圧力が働くため、価格競争にもなりやすいです。

ちなみに、これは聞いた話ですが、無茶な要求をされるケースが比較的多いそうです。

クラウドソーシングサービスを依頼するのは、ITに精通していない人が多いです。

そのため、知っていれば、かなり工数がかかるとわかるようなことをわからず、要求が高度化していくことがある模様です。

方法④:SNS・ブログでの集客

4つ目がSNS・ブログでの集客です。SNSにDMをいただいたり、ブログのお問い合わせフォームから依頼をいただいたりする方法です。

メリット

  • 直案件になることが多いため、高単価になりやすい
  • すでに信頼してもらえているので仕事に移りやすい

高単価になりやすく、なおかつ、初めから信頼を寄せていただけているので、仕事がしやすいです。

デメリット

  • Webマーケティングの知識が必要になる
  • 安定までの道のりは遠い

情報発信で見込み客から信頼を寄せてもらう必要があるため、Webマーケティングの実力が必要になります。難易度としては高めです。

また、営業とは違い、自分のことをみてもらう回数を増やすのが難しいため、少し安定力にかけます。

方法⑤:Web制作会社への営業

最後がWeb制作会社への営業です。この方法は僕も使っていますし、一番おすすめしています。

Web制作会社は、さまざまな企業からHPやLPの制作を依頼されているます。僕らがその一部の制作をお手伝いする形です。

メリット

  • 安定して仕事をいただきやすい
  • 競合が多くはない

Web制作会社と信頼関係が構築できれば、安定して仕事をいただける可能性があります。

しかも、CrowdWorksと違い、案件の募集を公に対してしているわけではないので、競合が多くはありません。

デメリット

  • 営業力が必要になる
  • 比較的高い技術レベルが求められる

Web制作会社は公に対して、パートナーの募集をしているわけではないので、営業で自分を売り込む必要があります。

そのため、営業力が求められます。

また、比較的高い技術レベルが必要です。Web制作会社は会社の信頼をかけてWeb制作を行なっています。

当然ですが、Web制作会社は”Web制作”の看板を掲げている以上、低いレベルの制作物は他の会社からの信頼を損ねるため、絶対にNGします。

そのため、受注する僕らにも高い技術レベルが求められます。

もちろん、どんな案件でもいただく以上は最高クオリティで制作する必要はありますが、Web制作会社は特に高い制作レベルである必要があります。

案件獲得編②:強みを整理する

営業のときに使用するメール文や提案文を作成するために、自身の強みやスキルを明確にすることは必須です。

このタイミングで強みやスキルを整理しておきましょう。

強みを整理すべき3つの理由

強みを整理する理由は3つあります

理由①:受注率を高めるため

1つ目の理由は受注率を高めるためです。あなたは以下の二人のうちのどちらに発注したいですか?

Aさん

基本的にweb制作ならなんでもいけます。WordPressも作れますよ!

Bさん

WordPressが得意で、特にユーザー目線で使いやすいテーマを構築するのが得意です。

Bさんの方が発注したいと思うはずです。なぜなら、Bさんは具体的にどんなことで高いパフォーマンスを発揮できるのかが明確だからです。

一方、Aさんの場合は「悪くはないけど、他に得意な人がいたらその人に任せたいな」となってしまうのです、

だから、受注率を高めるためにも、強みを整理しましょう。

理由②:炎上を避けるため

2つ目の理由が炎上を避けるためです。得意でないことに手を出すと、クライアントが期待するパフォーマンスを下回るケースがあります。最悪の場合、要件すら満たせない可能性があります。

こうなると、下記のリスクが発生します。

  • クライアントからの信頼を失い、単発で案件が終了する
  • 報酬の減額を請求される
  • いつまでも修正が終わらない
  • 納期を守れず、損害賠償請求される

だからこそ、自分の強みを明確にする必要があるんです。

僕は過去に「一応スキルは持っているから」とデザインの案件を請けたことがあります。しかし、クライアント様の期待値を下回ってしまい、継続案件をいただくことはできませんでした。

このことを僕は大変後悔しており、自分の強みを徹底的に理解し、強みを伸ばすように努めています。

理由③:時給を高めるため

3つ目の理由が時給を高めるためです。人間は苦手なものは時間がかかり、得意なものは短時間で終わります。

そのため、自分の強みで仕事をすることによって時給を高めることができます。

目先のお金欲しさに苦手な仕事に着手し、時間をかけてしまうといつまでも低賃金のままになってしまいます。

案件において強みになりうる3つのもの

未経験初心者ですと、どんなものが強みとなるかわかりません。そこで、どんなものが強みとしてアピールできるのかをお伝えします。

強み候補①:Web制作スキル

当然、Web制作スキルは強みになります。この記事で紹介している必須スキルは強みにはなりにくいですが、それ以外のスキルは強みになりえます。

具体例は下記の通りです。

  • ピクセルパーフェクトでのコーディング
  • WordPress
  • Shopify
  • UI/UXデザイン
  • ディレクションスキル
  • SEO知識

強み候補②:ビジネススキル

ビジネススキルも強みになり得ます。

具体例は下記の通りです。

  • スプレッドシートやドキュメントなどのGoogleサービス活用スキル
  • マーケティングスキル
  • コピーライティング能力

Web制作はビジネスの一つなので、そのなかで必ず生きてくるでしょう。

強み候補③:自分の経歴/専門知識

自分の経歴や専門知識が強みとして生きてくる場合があります。

ぼくが参考にしているWeb制作者の方で、20代女子で旅行好きの方がいらっしゃいます。

その方はブログからWeb制作の依頼が来て、その案件のターゲットが自分と同じ「20代女子で旅行好き」だったそうです。

自分の経歴や専門知識も強みとして発揮される場合もあるようです。

※強み候補④:稼働時間

余談ですが稼働時間も強みになる場合があります。

一般的なサラリーマンが副業でWeb制作を行う場合、連絡や修正対応できるタイミングは、平日の早朝・夜と休日でしょう。

このタイミングはクライアントさんは業務時間がいなことが多いと考えられます。

そうなるとなかなかコンタクト取りにくいですよね。

一方、稼働時間が平日の9〜18時という方がいたとしたらどうでしょうか?とてもコンタクトが取りやすいし、稼働時間もたっぷりあるので、案件を任せやすいですよね。

このように、稼働時間の量・タイミングは強みになります。

案件獲得編③:料金表を作成する

料金表を作成しましょう。料金を設定しないと、見込み客側が、依頼するかどうかを決められないからです。

料金の決め方

料金の決め方はシンプルでいろいろな方々の料金を参考にして設定するといいと思います。

  • CrowdWorksの募集ページ
  • ココナラの案件募集ページ
  • 駆け出しWeb制作者の料金ページ
  • Web制作会社の料金ページ

など、料金設定で参考になるものはたくさんあると思うので、ぜひ参考にしてみてください。

料金表作成の2つのポイント

ポイント①:料金の下限のみを記載する

「TOPページ 1ページ 15,000円〜」というように料金の下限を記載しましょう。

案件の複雑さによって料金を変えられるように、下限のみを設定しておくようにするのがおすすめです。

また、交渉時に自分から低い金額を提示してしまわないためのストッパーとしても有用です。

ポイント②:低く設定しすぎない

料金が低すぎると、任せる側が逆に怖いし、ご自身も低賃金労働にハマっていくので、低く設定しすぎないようにしましょう。

また、売上は今後の信頼の目安にもなるので、料金が低いと長期的に見た時、不都合が生じる可能性があります。

もし、料金を高く設定するのが怖い場合には、作業量を多くして料金をちょっと高めにする、などして料金を高く設定するのがおすすめです。

料金表の具体例

下記が僕の初期の設定金額です。

周りを見て調整したので、高くもなく低くもないといった形です。

案件獲得編④:Web制作案件受注ページを作成する

Web制作受注ページを作成しましょう。参考までに僕が当時作成した受注ページをここえで紹介しておきます。

https://kaki-lab.org/web-production-request/

受注ページをつくる2つの理由

受注ページをつくる理由は2つあります。

理由①:わかりやすさを高めるため

1つ目の理由がわかりやすさを高めるためです。

メール文や応募文だけだと、文字だけになってしまうため、見にくいですよね。

ところが、受注ページを用意して、そのリンクを送るだけで、わかりやすさがぐんと上がるんです。

  • 表・図解
  • 画像

など、装飾を施せばわかりやすさが高まりまくりです。

わかりやすさを高めることができれば、伝わりやすくなることはもちろん、相手の立場に立つことができる人であることをアピールできます。

こういった小さな工夫が受注につながります。

理由②:社内伝達のため

2つ目の理由が社内伝達のためです。

お問い合わせフォームなどに営業文章を送ったととしましょう。誰が見るでしょうか?

おそらく、お問い合わせ担当者や一般的な社員さんなどです。この方々は発注権限を持っていない可能性が高いです。

そして、きっとこの方々は、応募があったことを発注権限を持つ上司に伝えるはずです。

その時のことを考えてみましょう。

受注ページがないと、上司のもとには文字だけの営業文章が届くわけです。そんなの見る気もしないですよね。

受注ページがあれば、URLのみが送られてきて、開いてみると、見やすくまとめられているんです。

このように、URLでまとめられていれば、社内での伝達が容易になります。

そして、上司に読み込んでもらえる可能性が高める、ということですね。

受注ページに載せる5つの項目

受注ページに載せるべき項目をお伝えします。

項目①:強み

先ほど整理したと思うので、強みを整理して載せておきましょう。

あなたに頼む理由づくりです

項目②:全スキル

強み以外のスキルも載せましょう。この記事で整理した「必須スキル」も載せておきましょう。

あなたに頼まない理由を潰すためです。

項目③:ポートフォリオサイト一覧

実績を提示して、自分の実力を示すためです。

一定のクオリティがあるもののみを掲載するようにしましょう。

項目④:料金について

先ほど作った料金表を掲載しましょう。

項目⑤:納品について

納品方法などについても掲載します。

納期や進行方向などについてお伝えしてあげるとよいでしょう。

案件獲得編⑤:提案文・メール文のテンプレを作成する

提案文・メール文を作成しましょう。

テンプレを用意する3つの理由

理由①:自分の時間を節約するため

1つ目の理由が、自分の時間を節約するためです。メール文は少なくとも50社には送ることになります。

そのために、毎回文章を作成していたらいくら時間があっても足りません。そのため、時間節約のために、文章のテンプレを作成します。

理由②:営業先の方の時間を節約するため

2つ目の理由は、営業先の方が閲覧する時間を節約するためです。洗練された文章は読み手の負担も減らすことができるからです。

必要な内容を盛り込みつつ、無駄を削ぎ落とした文章が相手の負担を減らします。

理由③:自分のコミュニケーションコストの低さをアピールするため

3つ目の理由が、あなたとのコミュニケーションコストの低さをアピールすためです。

クライアント様はできるだけ自走してくれるコミュニケーションコストの低い人に制作を依頼したいものです。

営業文章が内容がまとまっていれば、日頃のやりとりもまとまっていると考えるものです。

このようにして、コミュニケーションコストを下げることが受注につながります。

内容だけが受注につながる要素ではないです。

オリジナルテンプレを作成することの重要性

もっとも重要なことですが、テンプレはオリジナルものを作成しましょう

最近ではメール文章のテンプレが配布されているため、どの人も同じテンプレを使っているそうです。僕のクライアント様がおっしゃっていました。

だからこそ、差別化のためにオリジナルのテンプレを作成する必要があるんです。僕も複数のテンプレを見て、オリジナルのメール文を作成しました。

僕のテンプレをそのまま利用するのでもよいのですが、オリジナルの文章にするとさらに受注率が高くなると思うので、ぜひオリジナルテンプレを作ってみてください!

メール文に入れるべき7つの項目

僕がメール文に入れていた項目が7つあります。

項目①自分の強み

自分の強みを箇条書きでまとめていました。

項目②自分のスキル

自分ができることすべてを箇条書きでまとめて言いました。

項目③できないこと

逆にできないことも記載します。パフォーマンスも発揮できないし、時給も低くなるので、書いておいた方が吉です。

そして「できないことはできないと言える人なんだな」と信頼を寄せていただくことにもつながります。

項目④実績

ポートフォリオの一覧を載せます。

項目⑤料金表

受注ページほど詳細に記載しなくてOKですが、簡単にまとめておきましょう。

項目⑥稼働時間

  • 何時間働けるのか
  • いつ働いているのか

を簡単にまとめます。連絡の取りやすさをアピールします。

もし、働く時間帯が悪い場合には、リスクヘッジになります。平日の昼間に返信できないことをあらかじめ伝えておくことでトラブルを未然に防ぎます。

項目⑦意気込み

意気込みも超重要です。

  • なぜ貴社と組みたいのか
  • 自分は何をしていきたいのか

など、人間性が見えることを伝えるのは重要です。相手も人間なので、一緒に仕事してて心地いい人と仕事したいですよね。

また、余談なのですが、「リアルで会うこともできます」と伝えるのはかなり有力そうです。

オフラインで何事も済んでしまう現在に「リアルで会うというコストを払える人」には信頼が寄せられます。

僕のメール文テンプレ

僕が当時使用したメールテンプレを紹介します。下のページで紹介していますので、ぜひご覧ください。解説もしております。

https://kaki-lab.org/sales-mail/

案件獲得編⑥:営業先リストを作成する

都度、検索して送信していると時間がかかるので、まずは営業先リストを作成します。

リストのつくり方

HP制作 (地域名)」で検索をかけます。そして、出てきた会社をまとめます。エクセルやスプレッドシートにまとめておきましょう。

まとめる項目は、下記の項目がよいでしょう

  • 会社名
  • 会社URL
  • お問い合わせフォームURL
  • 所在地域

リストをつくる時の3つの注意点

リストを作成するときには注意点があります。

注意点①:外部パートナーを拒否している会社には送らない

Web制作会社にフォームを送り、案件をいただく場合、僕らの立場は「外部パートナー」となります。

会社によっては、お問い合わせフォームなどに、「外部パートナーは募集していません」という注意書きをしている場合があります。

その場合には、絶対に営業文章を送らないようにしましょう。理由はシンプルに迷惑がかかってしまうからです。

注意点②:地域はできるだけ自分の近所にする

検索する地域はできるだけ近所にしましょう。近所の方が受注確率が高まると考えています。

もし問題が起きた時などに直接会ってお話しすることができるからです。

それに先ほど、お伝えしたように、直接会うことができる人は現代では強いんです。その強みを生かすためにも近場の会社に営業をかけるとよいですね。

注意点③:先方がどんな会社か概要を理解する

先方がどんな会社か概要を理解するようにしましょう。どんな会社か理解しないで送ると、ミスマッチがおきますし、何よりも失礼です。

どのような会社なのかを軽く押さえてからリストに追加するようにしましょう。

案件獲得編⑦:営業先に提案文章・メール文章を送付する

リストができたらメールを送付しましょう。

僕の送付数と成約率について

ここで僕の送付数と返信率をお伝えします。

  • 送付数60社
  • 返信数6社
  • 成約数3社

ネットでは「400件送って4件からしか返信が来なかった」などの情報があったので、僕的には思ったより確率が高くてよかったなという感じでした、

僕が送付するときに気をつけていた5つのこと

①窓口が複数あるならメールを選択

窓口がフォームかメールの両方がある場合があります。僕はこの場合、メールを選択していました

メールを選択すれば、メール文の中にあるURLにハイパーリンクがつくので、ワンボタンでポートフォリオや受注ページを見てもらうことができるからです。

逆にフォームだと、ハイパーリンクがつかないので、「URLをコピー→ブラウザにペースト→検索」という手間をかけさせてしまうため、見てもらいにくくなります。

相手の行動を予測した上で、メールを選択するようにしていました。

②返信がなくても落胆しない

返信がなくても落胆しないでください。むしろ返信がない方が普通です。

コロナ禍で副業がブームになり、営業が頻繁に行われているそうです。僕のクライアント様がおっしゃっていました。

そのため、営業先の会社様もすべてのメールに目を通し、検討する時間は取れないため、返信率は低くなります。

むしろ、読んでいただいた会社様には感謝するくらいの気持ちでいきましょう。

③メール文を改善し続ける

メール文を改善し続けましょう。

常にメール文を読み直し、もっと短くできないか?読みやすくできないか?など自問自答するようにしましょう。

案外、一度完璧だと思ったものでも、改善する余地はたくさんあるものです。

相手の立場に立って改善し続けて下さい。

④メール文のチェックを怠らない

メール送信時にはメール文のチェックを怠らないようにしましょう。

宛先の名前がテンプレの「●●様」のままだったり、意気込みの部分がその営業先に合わないものだったりはよくあります。

そのようなズレがあった時点で、営業は確実に失敗します。メール文一つでミスを発生させる人に仕事は任せられないからです。

メール送信時にはチェックを欠かさないようにしましょう。

⑤月曜午前と金曜午後は送付を避ける

メールの送付は月曜午前と金曜午後以外にしましょう。

月曜午前と金曜午後は比較的みんな忙しいものです。

この時間に営業メールを送付したところで読んでもらいにくいです。

忙しい時間帯に送っても迷惑をかけてしまうだけなので、この時間帯は避けるようにしましょう。

案件獲得編⑧:返信がきたらコミュニケーションコストを最大限下げる

コミュニケーションコストとは、コミュニケーションにかける労力・時間・思考のことです。

クライアント様があなたとコミュニケーションをとる時間や労力が少なければ少ないほど、コミュニケーションコストは低いです。

また、クライアント様があなたの案件についての行う思考量が少なければ少ないほどコミュニケーションコストは低いです。

コミュニケーションコストを下げる理由

案件までの期間でもコミュニケーションコストを下げることを意識するべき理由は、あなた自身のコミュケーションコストの低さを体験してもらうためです。

案件を依頼する前に、コミュニケーションコストが低いことがわかれば、よりいっそう案件を任せたくなりますよね。その状態をつくるんです。

逆にここでコミュニケーションコストが高いと思われてしまったら、「案件ができたら声かけますね」と言って流される可能性は高いです。

コミュニケーションコストが低いと喜ばれる2つの理由

理由①:利益につながるから

先方の利益につながるからです。任せていただいた案件に残業代が減れば、先方の利益が大きくなります。

コミュニケーションコストを下げることは相手の利益につながるんです。

理由②:楽させられるから

あなたがコミュニケーションコストが低い人ならば、クライアント様は楽することができます。

無駄に働きたい人はいないので、人間は楽をさせてくれる人は大好きです。

楽させてくれる人は信頼され、お仕事を任せてもらいやすくなります。

コミュニケーションコストを下げるためにできる3つのこと

この節では、コミュニケーションコストを下げるためにできることについてお伝えします。

①打ち合わせ日程を早めに提出する

営業メールに対して返信をいただけたら、できればその返信時点で打ち合わせ日程を提出してしまいましょう。

きっと営業メールへの返信には「一度来週あたりに打ち合わせでも」といった内容が記載されているはずです。

そこで、自分が打ち合わせ可能な日程を送ってしまいましょう。オフラインとオンラインの両方をそれぞれ5通り程度記載しておくとよいです。オフラインの場合には先方の会社で会うことを前提に、提出してOKです。

【オンラインの場合】
・12/13(月)13-18時
・12/15(水)13-18時
・12/16(木)17-21時
・12/20(月)9-13時
・12/21(月)11-15時

【御社にお伺いする場合】
・12/13(月)16-18時
・12/15(水)16-18時
・12/16(木)18-20時
・12/20(月)10-12時
・12/21(月)12-14時

②メール文章は短く簡潔にする

先方から返信が来たら、こちらも返信するのですが、メール文章は決して長くならないように注意しましょう。

返信をいただけたのが嬉しすぎて、超丁寧に長文を送りたくなる気持ちはわかりますが、逆効果なのでやめましょう。

③メールは即レスする

メールを即レスすると、向こうがこちらのことを気にする時間を減らすことができます。

こちらについて頭を割く時間を減らすことも立派なコミュニケーションコストの削減方法です。

案件獲得編⑨:リスクを回避するためにすべき4つのこと

案件獲得までもう一歩になってきました。しかし、ここで油断してはいけません。

ここまでくると自分一人だけの問題ではなくなってくるので、リスクも増してきます。

そのため、きちんとリスクヘッジをしていくことが大切です。

この章ではリスクヘッジについてお伝えしていきます。

リスク回避①:打ち合わせ時は議事録を取り、確認していただく

打ち合わせ時には必ず議事録を取り、打ち合わせ終了後に確認してもらいましょう。

議事録を取って自分用のメモにするだけではなく、相手に承認をもらうのがポイントです。

打ち合わせ時に決まった重要事項が後からひっくり返るととても面倒なことになるからです。

  • 納期
  • 料金
  • 著作権の関係
  • 案件の業務範囲

上記のものは最低でも議事録を取って、確認をいただきましょう。

リスク回避②:契約書は基本的に一度持ち帰りじっくり読む

契約書は一度自宅に持ち帰り、後日郵送などで送るようにしましょう。

というのも、その場で契約書をいただき、契約書を提出するとなると、じっくり読むことができません。仮に読むことができても詳細まで意味を理解することができないでしょう。

そのため、一度自宅に持ち帰り、じっくり読むことを推奨します。

そして、気になる点があったら、絶対に質問・相談し、内容を修正できないか尋ねましょう。

リスク回避③:契約書で気をつけるべき3つの項目

個人的に契約書で特に気をつけるべきだと考えている箇所は3箇所あります。

①損害賠償請求

まず、損害賠償請求です。基本的にWeb制作案件は業務委託契約です。そのため、納期や制作物に不備があった場合に損害賠償請求をされる可能性があります。

この損害賠償請求の金額の上限を定めた方がよいと僕は考えています。僕は基本的に損害賠償請求の金額は受注額を上限とさせていただいています。

そこまで多いケースではないと思いますが、悪どい企業が受注金額以上のお金をフリーランスに損害賠償金として請求していたという記事をネットで見ました。

そのため、僕は損害賠償請求の金額を案件の受注額を上限とさせていただいています。

②納品方法/業務範囲/修正期限

次に納品方法/業務範囲/修正期限です。これらは要するに、いつまでにどこまでやるのかを設定しようという話です。

Webサイトを運営していれば改善したくなるのがビジネスマンなので、上記を決めないといつまでも修正が発生してしまいます。

そのため、事前に納品方法/業務範囲/修正期限を決めるのが良いと考えています。

僕は基本的に下記のようにしています。

  • 納品方法→先方の希望通り
  • 業務範囲→打ち合わせで決める
  • 修正期限→納品から2週間以内

③:著作権移行時期

3つ目が著作権移行時期です。お金を支払わないで逃げられるのを防ごうということです。

僕は著作権移行時期を「報酬を全額振り込んでいただいたタイミング」にしています。

これで特に問題はないでしょう。

④:正確に見積書(請求書)を作成する

見積書や請求書を正確につくりましょう。外税や内税、サービス項目数など、場合によって複雑になります。

エクセルやスプレッドシートなどで自作の見積書・請求書を作ってもよいのですが、どこかでミスが起きる可能性が高いです。

そのため、僕は初めからfreeeの会計サービスを使っていました。

雛形ができているので、簡単に見積書・請求書を作ることができるのでおすすめです。

小計の算出はもちろん、消費税も漏れなく処理してくれるので、間違いも起きません。

しかも、freeeは簡単に確定申告の書類も作れるので、いいことづくしです。これで月額980円はお得すぎます。

最初の月は無料なので、よければ、お試しで使ってみてください。登録方法や使い方について、下記の記事でまとめました。

https://kaki-lab.org/howto-quotation/

案件獲得編⑩:継続案件をいただくための3つの行動

いよいよ最後です。初案件獲得までのロードマップではないのですが、継続案件は収入を安定させるために重要なことなのでお伝えします。

行動①:コミュニケーションコストを下げる行動をする

行動例①:自分での解決能力を高める

自分で解決能力を高めましょう。

  • 技術的な問題が生じたならばググる
  • サイトのリニューアルなら既存のサイトを見て、問題を解決できないか試みる
  • もらった情報に不備があるなら自分で補填できないか調べる

上記のようにすると自分で解決できたりします。そうすると、クライアント様側からすると「自分で解決してくれるので放っても安心できる人」という認識になります。

そうなると、次からも安心して案件を任せてもらいやすくなります。

行動例②:【報告】なのか【相談・質問】なのかを文頭に明記する

チャットなどを送る時、件名に【報告】か【相談・質問】をつけるようにしましょう。

【報告】会社概要のコーディングが終了しました。明日は商品ページを2ページ進めます。

【相談・質問】商品ページに明日から着手する予定です。しかし、商品画像が見当たりません。お手隙の際にいただくことはできますでしょうか?

会社概要のコーディングが終了しました。明日は商品ページを2ページ進めます。

商品ページに明日から着手する予定です。しかし、商品画像が見当たりません。お手隙の際にいただくことはできますでしょうか?

報告なら急いで返信する必要はないし、相談ならばなるべく早く返信しないと案件の進行に影響が出ることがわかってもらえます。

件名に一手間加えるだけで、先方の負担は大きく軽減されます。

行動例③:自分から進捗を報告する

自分から積極的に進捗を報告しましょう。

  • やったこと
  • これから着手すること

上記を箇条書きにして送ってあげるとクライアント様も簡単に把握することができます。

行動②:自分から提案していく

先方も案件を隅から隅まで理解しているわけではないし、技術的な部分などに詳しいわけではありません。

そのため、よりよい方法があれば提案してあげましょう。そのことによってあなたの価値がぐんと高まります。

提案をするためには、Web制作業務の全体像を把握しているのが好ましいです。全体を俯瞰し見れるからこそ、よいアイデアができるからです。

【Web制作案件のフロー】案件・業務の流れ18STEPを丁寧に解説にて詳しく解説しているので、ぜひご覧ください。

行動③:確認を怠らない

制作物に不備がないか、よく確認するようにしましょう。不備があると指摘する手間をかけさせてしまうので、こちらで最大限確認して、その手間を鳴せるように努めます。

不備が起きがちなポイント
  • 遷移先のURL
  • target設定
  • スマホ版の挙動
  • ハンバーガーメニュー内の画像

上記の箇所は不備がでがちです。こういった場所まできちんと確認を怠らないようにしましょう。

特別編:今後の発展の方向性4つの例

さて、継続案件の獲得方法までお伝えしてきました。ではWeb制作者は案件を獲得して行った後にどのように変貌を遂げていくのでしょうか。

正直、いつまでもコーダーのままだと低単価の労働者になりがちなので、次のステージにはいきたいところです。

私はここで紹介する4つのいずれかになるのかなと考えています。

例①:エンジニア路線

一つ目がエンジニア路線です。エンジニア路線では、HTML・CSSといったマークアップ言語だけではなく、PHPやJavaScriptなどのプログラミング言語まで着手して、難しい案件をこなしていく道です。

WordPressやShopifyに向かう人たちはこの路線でしょう。

例②:デザイナー路線

デザイナーとして活躍する道もありです。UI/UXデザイナーになれば売り上げに直結した動きができるので高単価になりやすいです。

そのため、コーダーの次はデザイナーを目指すのもありです。しかも、デザインとコーディングの両方ができるようになれば、一つの案件を最初から最後までできるようになるので、高単価案件を獲得しやすいでしょう。

例③:ディレクター路線

次がディレクター路線です。案件を複数獲得し、コーディングやデザインなどを人に任せます。

この方法は、案件の一部のみを自分の収入とするため、一件あたりの単価は高くなりにくいです。しかし、大量の案件を回し、その大量の案件のマージン分をもらうことで稼げます。

細かいところまで見えるだけの経験値がないと難しいので、コーダーの後に目指すべきでしょう。

例④:情報発信路線

最後が情報発信路線です。案件獲得方法やWeb制作の情報などの情報を発信する路線です。

その発信の中でコンテンツを売ったり、便利なツールをアフィリエイトで販売してその紹介料をいただいたりします。

僕自身は新卒入社するとクライアントワークをしにくくなってしまうので、このルートを選択する予定です。

また、新卒ではエンジニアになる予定なので、そこで得た技術的な知見と、Web制作で得てきたノウハウをボリューミーに展開していく予定です。

情報発信に磨きをかけて、Web制作で自立する人を増やしていきます。

おわりに

この記事を最後までご覧いただきありがとうございます。4万字を超えるこの記事を最後まで…。感謝の極みです…!

僕は今後も引き続き、Web制作で自立したい人を応援する情報や言葉を発信し続けます。

一緒にがんばりましょう!

また、この記事にはモラルを欠いた表現や内容が含まれていたかもしれません。決して悪意はなく、僕自身の未熟さから気づけなかった部分です。

厚かましいお願いなのですが、もし、そういった部分を見かけた場合、声をかけてくださると幸いです。

では、最後までお読みいただき、ありがとうございました。今後ともよろしくお願いします!