はじめまして。 新卒でフリーランスWEBデザイナーになったカナです! 今回は、「入社経験のない新卒フリーランスがどうやって月収50万円以上にできたのか」のロードマップをご紹介します!
この記事おすすめの人
- WEBデザインの勉強がわからない人
- 営業方法がわからない人
- フリーランスでどうやって稼ぐのかイメージできない人
私はこれから話す4つのステップで月収50万円を達成しました! 誰でも継続することで達成できる流れになっているので、ぜひ参考にしてください!
目次
STEP1 WEBデザインの勉強法
![](https://kana-designer.com/wp-content/uploads/2023/06/名称未設定のデザイン-4-150x150.png)
WEBデザイナーになりたいけどどうやって勉強すればいいのかわからない!
これがまず目指す上で当たる壁ですよね!今回は独学でWEBデザインを勉強する流れをお伝えします!
ただ、それを踏まえた上でも私はオンラインスクールをお勧めします!!
オンラインスクールがおすすめ「環境」の話
勉強をする上で「環境」はものすごく大事です!独学で勉強し毎日5時間以上は必ず自分で勉強できる!と言う人は少ないと思います。
例えば、大学受験や高校受験のための勉強をしないといけない時あなたはどうしていましたか?
一人で勉強していた方もいれば、塾や予備校・家庭教師などを使われていた方も多いかと思います!
大学受験で一人で勉強するよりは家庭教師や塾・予備校に行くと勉強が捗りますよね。
それは塾や家庭教師の時間が「勉強しないといけない環境」になっているからです。
自分を「やらなければいけない環境に身を置く」ことは全ての物事に対して大事だと思っています!
早く案件へ着手したい方や、自分で継続して勉強できるかに不安な方はオンラインスクールで学ばれることをおすすめします
独学にかかる初期費用
![](https://kana-designer.com/wp-content/uploads/2023/06/名称未設定のデザイン-4-150x150.png)
![](https://kana-designer.com/wp-content/uploads/2023/06/名称未設定のデザイン-4-150x150.png)
![](https://kana-designer.com/wp-content/uploads/2023/06/名称未設定のデザイン-4-150x150.png)
WEBデザインを勉強したいけどあまりお金をかけたくない
新しいことを挑戦する際に、最初にお金をかけて投資するのって不安ですよね。わかります! もしあなたが将来フリーランスになりたいと思っているなら、ここでお金と時間をかけないといつまでもフリーランスにはなれません! 自分の将来のために是非先行投資してください!!!
【合計金額】最低20万円(推定)
- PC 18万円〜25万円
- Adobeツール 6,480円/月 学生・教員1,980円/月
- 本 1万〜
PCは最初からスペックの高いものをご購入されるのをおすすめします! 最初に買うことで、このPC代だけでも稼げるようになるぞ!とモチベーションの1つにもなりますよ!
独学によるWEBデザイン勉強の流れ
WEBデザイン勉強の流れ
- デザインの基礎学習(1ヶ月)
- バナー模写(2週間)
- バナー作成(2週間)
- LP・HPの模写(2週間)
- 自分でテーマを考えてLP・HP作成(1ヶ月)
※期間は目安となっています
❶デザインの基礎学習
- レイアウト・配色・フォント・余白等のデザインの基礎学習
- 並行でprogateのHTML/CSSの勉強
まずはデザインやプログラミングの知識に触れることから始めましょう! デザインを勉強する上では、手を動かすことが一番の近道なので、本からインプットし、次の模写でアウトプットしていきましょう!
おすすめの本
デザインの基礎を勉強したいなら「なるほどデザイン」
デザインの余白を勉強したいなら「けっきょく、よはく。」
デザインのレイアウトを勉強したいなら「最強構図 知ってたらデザイン上手くなる」
デザインのフォントを勉強したいなら「ほんとに、フォント。」
デザインの配色を勉強したいなら「見てわかる、迷わず決まる配色アイデア」
本以外にもYouTubeから学んだり、街中のデザインを意識してみるだけでも得られる知識があります! ご自身に合った勉強法を探りながら見つけてください!
❷バナー模写(5枚以上)
デザインの基礎を勉強した後は、実際にプロのデザイナーさんが制作したバナーをお手本に見た目通りに模写をすることをおすすめします!ジャンル別のバナーを5つ以上模写することで制作の幅が広がります!
BANNER LIBRARY![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://design-library.jp/wp-content/themes/original-banner/assets/img/og_image.png)
![](https://design-library.jp/wp-content/themes/original-banner/assets/img/og_image.png)
![](https://design-library.jp/wp-content/themes/original-banner/assets/img/og_image.png)
【総数6581件】BANNER LIBRARY | デザインの参考に!おしゃれなバナーだけを集めたギャラリーサイト バナーデザインの参考になる、おしゃれで良質なバナーデザインをまとめたギャラリーサイト、BANNER LIBRARYです。バナー広告から特集バナーまで、幅広いジャンルから収集し…
【バナー模写のやり方】 ・フォトショップかfigmaで制作 ・徹底的にバナーを模写する(余白・フォント・背景・あしらい)
Photoshopとfigmaを学ぶおすすめ教材
こちらのサイトは基本無料で高品質なカリキュラムを学べるのでおすすめです! デザインの基礎から各ツールの基礎を勉強できます!
Photoshopの基礎的な学び
「フォトショの5分ドリル 練習して身につけるPhotoshopの基本」は、手を動かしながら短時間でPhotoshopの使い方を勉強できます!
❸バナー作成(2枚以上)
ここでバナー模写したことを応用してバナーを作成しましょう! バナー作成するのにおすすめの本「思わずクリックしたくなるバナーデザインのきほん」
この本はデザインの基本からバナーの作り方をわかりやすく書いているのでお勧めです! 見るだけでもデザインの引き出しが多くなりますよ!
【課題バナー作成の手順】 ①「バナー課題」とGoogleで検索 -おすすめサイト:うぇぶたん ②出てきた課題でバナー作成 ③どこでつまずくかを確認 ④つまずく箇所をひたすら深掘りしてできるようになる ⑤3〜4を繰り返して完成させる
Web鍛(うぇぶたん)
無料のWebデザイン課題一覧 – Web鍛(うぇぶたん) 当サイトの課題は、どなたでも活用いただけます。 ・ポートフォリオに掲載OK ・Webデザイン講師の方が授業に利用いただくことOK ・企業内の研修にご利用いただくことOK ※転…
完成したらTwitterに載せましょう!初めてのあなたの実績になります!! Twitterに載せることで、反応や意見をもらうことで自分では気付けない改善点や一緒に頑張っている人が見つかりますよ!
❹LP・HPの模写(3枚以上)
バナー作成を終えたらLPとHPの模写に移りましょう! バナーよりも制作する量が多く、悩むことが多いLP・HPだからこそ吸収できる部分は多いです!
▼LPおすすめ参考サイト
▼HPおすすめ参考サイト
SANKOU!![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://sankoudesign.com/wp-content/themes/clip/images/ogp.png)
![](https://sankoudesign.com/wp-content/themes/clip/images/ogp.png)
![](https://sankoudesign.com/wp-content/themes/clip/images/ogp.png)
SANKOU! | Webデザインギャラリー・参考サイト集 Webデザイン制作の参考になるステキなWebサイト・LPを集めたギャラリー。業種・テイストなどで絞込検索可能。最新トレンドをチェック!
【LP・HPの模写の手順】 ⓪Google拡張機能をダウンロード サイト全体をスクリーンショットしてくれる サイトが使っているフォントがわかる サイトの色がわかる ①サイトを全て写真として読み込んでサイトの模写をする ②サイトのレビューを模写と同時にする ③フォント、余白全てを模写する
模写をするサイトは実際に将来自分が「こんなデザインを作りたい!」と思えるサイトを模写するとやる気が出ておすすめです! それ以外にも、ジャンル別・テイスト別・カテゴリー別などを模写することで、格段とスキルアップできます!
❺自分でテーマを考えてLP・HP作成(2つ以上)
自分でテーマやターゲットを決めてサイトデザインを作成するか検索して課題を見つけましょう!(課題は多くの人がやっているため、同じような実績で埋もれる可能性あり) それに合わせて参考サイトを3つ以上選び、見出しはどのサイト、余白感、配色、などを決めて、そこからデザイン制作を始めましょう!
【課題LP・HP制作の手順】 ①「サイトデザイン課題」とGoogleで検索 -おすすめサイト:サイトリニューアル課題 ②参考サイトを集める -余白・配色・セクション・見出し・あしらい -どの部分を参考にしたいのかを各集める ③デザイン作成 ④つまずく箇所をひたすら深掘りしてできるようになる ⑤4の作業を繰り返して完成させる
【サイトレビューのやり方】
①参考したいサイトを選ぶ(好みではなく一番上を見るなど先入観なしに選びましょう) ②そのサイトのフォント、余白、雰囲気、配色、全部確認する。 ③確認した後に見たままでの感想ではなく、仮説を立てる 「文字が赤い」のではなく、「購買意欲を掻き立てるために文字を赤くしているのではないか」と仮説をたて、なぜそのデザインにしたのか?の先を考える ④デザインをストックする マウスオーバーの動き、パンくず、サブナビゲーション、グロナビ、 見出し、ボタン、問い合わせ、フッター、スライダー、SP対応、スマホメニュー、PCとSPのデザイン変更点、など気になったデザインをストックする
STEP2 営業準備
下調べ
TwitteとGooglerでCWの営業のことを調べましょう! 例)「CW 営業分」「CW提案分」「CW営業方法」 何もわからなかったからこそ下調べをすごくしていました。 空いている時間はほとんど検索していたほど心配で行動できずにいました。 ただ、ここで行動しなかったら今まで勉強してきたことの意味がなくなる!と思って営業を始めました! 営業に対して怖さがある方もいると思いますが、行動してみると案外簡単だったりします! 行動してみましょう!!
営業文を書く
先人の方が、CWの営業の仕方や提案文をまとめてくださっているので、そちらを参考に書いてみま しょう!
【おすすめの書き方】 ・誤字脱字に気をつける ・相手のご要望について「相手の文章」+「自分の回答」を書く ・仕事に対する姿勢を書く ・相手のご要望に対して自分の提案も入れるとさらにGOOD
「屋号」の話
屋号とは、個人事業者の方が使用する商業上の名のことです。 フリーランスデザイナーの〇〇です。と紹介するよりも、〇〇 Design代表の〇〇です。と言った方がプロ感が出ますよね? 屋号はfreeeで簡単に開業届を出すことで作れるので、今後フリーランスとして活動していきたい方は屋号を作ることをおすすめします!
スモールビジネスを世界の主役に …![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://www.freee.co.jp/assets/image/img_freee_201908.png)
![](https://www.freee.co.jp/assets/image/img_freee_201908.png)
![](https://www.freee.co.jp/assets/image/img_freee_201908.png)
freee開業 – 個人事業の開業届を簡単・正確に 個人事業・フリーランスを始める方必見!開業に必要な開業届や青色申告承認申請書などの書類を、無料で、簡単に、一括作成できます。
ポートフォリオ作成
今まで勉強したものでポートフォリオを作成しましょう! こちらでサイト制作を行っても良いのですが、すぐに営業を行いたい方は、Notionやforiioなどを使ってポートフォリオを作ることをおすすめします! 私はNotionのテンプレートのものを使用しています。 この自分バージョンを作成してみましょう!
STEP3 営業開始(0円〜20万円/月)
私は、クラウドソーシングサイトの主にココナラで月20万円を達成しました! 0→1を達成したい方には、クラウドソーシングサイトで営業して達成することをおすすめします! クラウドソーシングサイトで営業をしながら勉強もおこない、スキルをアップしながら案件に取り組みましょう!!
質より量を求めていく
実績がない方から提案文を送られてすぐに返信する方はなかなかいないと思います! だからこそ、量をたくさん送ることで勝負しましょう! 最初は毎日10通送るのを目標にしましょう! そうすると平日だけでも一週間で50通送ったことになります。 そこから返信数がどのくらいきたのかを割り出し、返信率を求めましょう! 返信率の求め方:返信数÷送信数 返信率が5%以下の方は改善の余地があります!
・案件の悩みに対して全て回答できているか? ・提案できる部分を提案できているか? ・誤字脱字がないか?
返信率を求めて、改善を繰り返すことで、案件獲得へと進んでいきましょう!
ココナラでの案件獲得法
営業を開始するとともに、ココナラとランサーズでスキルを出品しましょう! 営業する窓口が多いほど案件獲得はしやすくなります! 私はココナラでリッチメニュー制作で0→1達成しました! 最初に実績0で勝てる要素があると思ったのは
- 納品の速さ
- 丁寧な対応・即レス
- 低価格
だと思ったので、そこをサービスに盛り込み出品しました! どういう方に案件を頼みたいと思うか?ということをベースにスキルを出品しましょう!
STEP4 制作会社の営業方法(20万円〜/月)
私は、クラウドソーシングサイトと制作会社さんの案件をいただくことで月50万円を達成しました! クラウドソーシングサイトで、
- 実績を増やしていく
- 案件に慣れていく
- デザインのスキルアップをする
これらの経験ができたうえで、制作会社さんに営業を行うことで、結果的に1ヶ月で7社の企業さんと業務提携をすることができました!
案件の時に気を付けておくべきポイント
- 即レス、即対応、かつ丁寧に
即レスだけでも相手の信頼は勝ち取れます! 即返信できない時は「〇〇時までにご提案する」旨を話しましょう! また、ご提案するときは「◯日の◯時までにデザインをご提案する」と話すことで、相手がこちらにデザインできていますか?と確認する手間が省けます! こういう小さい積み重ねで「この人は時間を守れる人=信頼できる人」となります! 小さいことを積み重ねることで相手の信頼を得ていきましょう! 信頼を得ることで継続案件にも繋がります。案件をいただいたら、全力でご対応しましょう!
制作会社向けの営業文を書く
こちらが実際に送った営業文です。是非自分流に直してみてください! ※本名と個人情報の部分は隠してあります
![](https://kana-designer.com/wp-content/uploads/2023/07/Group-2149-1024x418.png)
![](https://kana-designer.com/wp-content/uploads/2023/07/Group-2149-1024x418.png)
ポートフォリオのアップデート
ココナラやCSなどで積んだ実績をもとにポートフォリオをアップデートしましょう! 実績を載せてもいいのかどうかは企業様に許可をとるのを忘れないようにしましょう。
面談用の自己紹介スライドの作成
こちらが私が実際に面談の時に使用していた「自己紹介スライド」です。 ここに面談する企業様用のスライドも差し込めるとさらにGOODです! ・なぜ応募したのか? の理由を言葉で伝えるのが心配の方は、スライドを使って伝えましょう!
面談の練習法
自己紹介スライドを用いながら自己紹介の練習をしましょう! どうやって自分を伝えるのかを練習するとしないとでは面談の時の緊張具合が違いますよ! また、私は心配性×緊張しやすい性格なので面談30分前には毎回練習をしていました! 面談を重ねるほど、慣れてきてすらすら言えるようになるので、ゆっくり相手に伝えることを意識して話せるようにしましょう!
面談の質問対策リスト
実際に面談の時に言われた「質問リスト」です! 複製ができるので、こちらを実際に埋めて面談に挑みましょう!
カナ's Notion on Notion![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://aster-design.notion.site/image/https%3A%2F%2Faster-design.notion.site%2Fimages%2Fpage-cover%2Fgradients_3.png?table=collection&id=8229fa72-c386-4767-a415-912cc40ec44c&spaceId=50035d3c-1085-4fd9-b093-0ad49feaaacf&width=2000&userId=&cache=v2)
![](https://aster-design.notion.site/image/https%3A%2F%2Faster-design.notion.site%2Fimages%2Fpage-cover%2Fgradients_3.png?table=collection&id=8229fa72-c386-4767-a415-912cc40ec44c&spaceId=50035d3c-1085-4fd9-b093-0ad49feaaacf&width=2000&userId=&cache=v2)
![](https://aster-design.notion.site/image/https%3A%2F%2Faster-design.notion.site%2Fimages%2Fpage-cover%2Fgradients_3.png?table=collection&id=8229fa72-c386-4767-a415-912cc40ec44c&spaceId=50035d3c-1085-4fd9-b093-0ad49feaaacf&width=2000&userId=&cache=v2)
質問リスト | Notion Built with Notion, the all-in-one connected workspace with publishing capabilities.
最後に
デザインの勉強を続けて、クラウドソーシングサイトで月20万円達成→制作会社さんに営業という流れで私は月50万円を達成しました! この流れを継続してこなすことで必ず50万円は達成することができると思っています! 最初は誰もきついです。だからこそ継続した方には結果がついてきます! 私も最初の案件はLP4,000円でした。そこから、継続して営業を行い今があります! 私自身最初は何もわからずにわからないことを調べて行動をしていたので、同じような悩みを持っている方の助けになれればと思います! 最後まで読んでくださりありがとうございました!!!