未経験からフリーランスWebデザイナーになるための5ステップ

title

こんにちは!フリーランスWebデザイナーの香菜子です!

完全在宅で自由気ままに楽しくデザイン制作とデザイン講師をしています^ ^

この記事では、

  1. Webデザイナーが気になってるけど具体的にどうやってなるんだろう?
  2. どうやってデザインのスキルを身につけるの?
  3. どうやってお仕事を受注するの?どうやって稼ぐの?

こんな漠然とした不安を持っている方に

  • Webデザイナーになるための超!具体的なステップ
  • 自分に合った勉強方法
  • お仕事の受注方法

について、それぞれをわかりやすく解説していきます♪

この記事を見れば未経験からでもWebデザイナーになれる具体的な方法がわかるよ!

すぐに本題に入りたい方は下記のボタンから気になる項目をクリック(タップ)してください。

▼知りたいところから読みたい方はこちら▼

今でこそデザイン一筋で毎日楽しくお仕事をしていますが、Webデザイナーになる前は時給890円のパート主婦…。

在宅で稼ぎたい!と思い立ち、4人の子育てをしながら、

全くの未経験からフリーランスWebデザイナーになり、今は集客・営業活動ゼロでリピーター様やご紹介だけで安定した収入を得られるようになりました。

2023年1月からはWebデザイン講座でデザインの講師も担当し、Webデザイナー育成にも励んでいます♡

ではでは早速具体的なステップを紹介!します✨

その前に。そもそもWebデザイナーという職業のことがよくわからない〜!という方はまずは下の記事を見てみてね♪

目次

【STEP1】Webデザインをするために必要なものを用意する!

まずはデザインをするにはインターネットができる環境であることを前提として、

  1. パソコン
  2. デザインソフト
  3. HTMLエディタ

上記の3点が必要になります。

それぞれについてもう少し詳しく解説していきます✨

❶どんなパソコンが必要?!

今あるものでOK!最初から高スペックパソコンは必要ありません。

まずはお手持ちのパソコンでトライしてみましょう

パソコンが古すぎたり、パソコンを持っていない方で、いきなりパソコンを買うのはちょっと・・・。

という方は、パソコンをレンタルするのがおすすめです😊

まずチャレンジしてみて、Webデザイン楽しい!と思えたら、そこから購入でも遅くありません♪

デザイナーとして本気で頑張るぞー!となったら、そこそこのスペックのあるパソコンを用意しないといけないので、その時にベストなパソコンを買えばOKです!

デザインソフトは何を選ぶ?!

有料のデザインソフトになるのですが、プロのデザイナーも使用するAdobeの「Photoshop」というソフトを用意しましょう。

実は今、Photoshop以外にも多くのデザインツールやソフト、アプリがたくさんあります。

その代表格と言っていいのが「canva」というデザインアプリ。


無料で使えて、豊富なデザインテンプレートや素材が用意されていて、デザイナーじゃなくても簡単におしゃれで素敵なデザインが感覚的に作れます。

デザインのとっかかりとしてはとても魅力なデザインアプリであることは間違いありません。が、、、

CanvaではなくPhotoshopを使うことを絶対的にお勧めします!!

デザインは副業やお小遣い程度で・・という方であればcanvaでも良いかもしれませんが、、、

フリーランスのWebデザイナーとして本格的にデザインの仕事をしたい。と考えるのであれば、Photoshopが使えないのはぶっちゃけ厳しいです。。

それにPhotoshopでデザインができるようになればcanvaはめちゃくちゃ簡単で、

逆にcanvaしか使ってこなかった人がPhotoshopを使うのは難しいと感じるからです。

最初っからPhotoshopをしっかり使えるようになっておきましょう!ってことです。

世界中のプロデザイナーが使う
AdobeのPhotoshopは月額980円(税抜)から使えます♪

Photoshopのインストールはこちらから

canvaは無料でも使えますが、使える素材やフォント、機能が少なく物足りなくなります。

有料会員は月額1500円なのでPhotoshopよりちょっとお高め。

ちなみにこんなにcanvaとPhotoshopを比較してPhotoshopを推していますが、私はcanvaも超愛用しております!!笑


インスタの投稿画像やブログのアイキャッチ画像、プレゼンテーション資料などを作成しています。

なので、canvaを否定しているわけではなく、Photoshopは絶対使っておけるようになろうね~!!ってことでPhotoshopを全面押ししています!

CanvaはCanvaでめちゃサイコーです♪

HTMLエディタは何がいい?!

HTMLエディタというのはコーディングをする時に使用するソフトウエアです。

制作したデザインをブラウザ(safariやchromeなど)で見える形にすることをコーディングといいます。

WebデザインをするのであればコーディングをするためのHTML/CSSの基礎はしっかり学んでおきましょう!

最終的にコーディングは外注でも大丈夫ですが、やはりコーディングの基礎を知らないとコーダーさん泣かせのデザインを作ってしまうので、基礎はしっかり勉強しておきましょうね

おすすめのHTMLエディタは「ATOM(アトム)」

Atomは海外製のエディタですが、拡張機能を利用することで日本語表示も可能!作業を効率化してくれたり、サポートしてくれるようカスタマイズ可能なので、初心者でも安心して利用できます♪

様々なプログラミング言語に対応できるので、デザイナーはもちろんプログラマー、エンジニアなど多くの人が利用している人気のエディタなので、使い方がわからなくてもネットで検索すればすぐに解決策が見つかるのも初心者にはとっても有り難いところ!

【STEP2】Webデザインの勉強方法を決める!

パソコンとデザインソフト、HTMLエディタを用意したら、次はどうやって学ぶか。

どんな方法で学ぶ?

デザインやデザインソフトの使い方を身につけるには主に以下の3つの方法で学ぶことができます。

  1. 完全独学(書籍やYoutubeなどで)
  2. デザインスクールや講座に入会
  3. 独学+メンターをつける

大体の方が上記の方法でデザインを学んでいます。

私は上記全部をやりました!

そこで、体感としてそれぞれに向いてる人のパターンがわかったので簡単に紹介しますね!

独学が向いてる人
  • 自己管理力が高い人
  • 自分のペースで学びたい人
  • 最低限の費用で学びたい人
デザインスクール(講座)が向いてる人
  • 費用がかかっても最短で学びたい人
  • 自分で勉強の方針を考えるのが苦手な人
  • 一人じゃ頑張れない人
独学+メンターが向いてる人
  • 自分で勉強は進められるけどなんとなく不安な人
  • 自分のペースで頑張りたいけど一人だと挫折しそうな人
  • なるべく費用を抑えたい人

それぞれの具体的な内容についてはまた別記事で紹介しますね♪

個人的にお勧めなのは「デザインスクール」で学ぶ。理由は最短で最善であること。そして挫折しにくい!

コーディングの学習は「Progate(プロゲート)」をやってみる事をお勧めします

ゲーム感覚でHTML・CSSが学べるので楽しく学習できる最強の学習サイトです\(^^)/しかも初級は無料!

【STEP3】作品を作る!作る!作る!

STEP2でどの道を選んだ人も必ず以下のステップを踏んで、とにかく作品を作りまくります♪

作品を作るっていったって何もないところからどうやって作品を作るの?!

今から紹介する下記の3つのステップに沿って作りまくりましょう〜〜♪

❶最初はデザインのトレース(模写)練習から

トレース練習というのは、お手本デザインと全く同じものを作る練習です!

目的は3つ。

  1. デザインソフトに慣れるため
  2. プロのデザインの細部のこだわりを知るため
  3. デザインの引き出しを増やすため

最初の段階ではマネをしながらとにかく手を動かしてデザインソフトの操作に慣れ、使い方を覚えていきましょう。

トレース練習を繰り返すことで、デザインソフトに慣れるだけでなく、プロが作ったデザインが細部までとてもこだわって作られていることを知ると思います。

神は細部に宿るってのはこういうことか〜〜と納得すること間違いなし!

またこういう表現も面白いな〜という感じで、自分では思いつかないようなデザインを実際に作って身体に覚えさせることもできます^ ^

最初はバナーなど小さなものから始めて、徐々にランディングページやHPのトレースもトライしてみましょう

プロのデザインが上手に再現できるとめちゃ嬉しいよ〜

❷オリジナル作品を作る

トレースを何度か繰り返したら、今度はいよいよオリジナルの作品を作ります。

オリジナル作品は私は下記の2つの方法で製作していました!

  1. クラウドソーシングサイトを利用する
  2. 勝手に作る。笑

それぞれをさらに詳しく解説します!

クラウドソーシングサイトでどうやって作るの?

クラウドソーシングサイトというのは企業や個人事業主が、インターネットのサイト上で、不特定多数の人に業務を発注(アウトソーシング)する業務形態のひとつ。

クラウドソーシングサイトでは、さまざまなデザインを求めている企業さんや個人事業主の方がいます。

こんなチラシを作って欲しい! こんなHPを作って欲しい! こんなバナーを作って欲しい!と。凄まじい数の依頼が集まっています。

「クラウドワークス」ではデザインとWebデザインだけで700件近く案件がありました

その依頼ページにはどんなものを作って欲しいか、というのがすでにお題として出されているので それを元に作成していきます。

CroudWorksさんのバナー作成だとこんな感じで募集があります

作った作品がコンペ形式であれば実績は関係ないので、応募してみても良いと思います😊

コンペ形式というのはデザインの競技会のようなもの。たくさん集まった作品の中から依頼者が気に入った作品を買い取るシステム!自分の作品が採用された場合のみ、報酬をいただくことができます

コンペには多くの作品がエントリーされるので、当たり前ですが選ばれる方が稀!

落選するのが普通と考えて、落ちても気にしない!とにかく作品を作ることに専念しましょう〜!

勝手に作る

勝手に作るというのは、その名の通りデザインを勝手に作る。です笑

例えば、X(旧Twitter)やFacebook、youtubeなどのSNSにはヘッダー画像というのを設定できます。

画像元:リベラルアーツ大学さんのYoutubeのヘッダー

ヘッダーをただの写真にしていたり、作ってはいるもののイマイチなデザインだったり、そもそも設定していない方も。

はい。まさに私のヘッダーのように・・・笑 仕事で使ってないからね(汗)

そういう方のヘッダー画像を勝手に作り、そして勝手にプレゼントします。

作る際のポイントは自分の好きな人、もしくは「よく見ているアカウント」

良いものができたら、ファンである事を伝えつつ無料でプレゼントしましょう。

もちろん怖がられないように、ファンであることと、よかったらどうぞくらいのサラッとした感じでお渡ししましょうね

上記はバナーやヘッダーなど画像作品ですが、

Webサイトの場合はサンプルサイトとして架空のショップやサロンを想定して実際にHPを制作してみましょう。

テキストの部分はダミーテキストでもOK!

架空のなんて難しいよ〜という方は、こちらもクラウドソーシングサイトからヒントをいただくと良いですね💡

Webサイトのサンプルはデザインやコーディングのレベルを確認できるようになってれば十分です!

【STEP4】ポートフォリオ(作品集)を作る!

こうしてSTEP3で色々作ったものを、今度は一つにまとめてポートフォリオとして、クライアントに見ていただけるようにします。

ポートフォリオには色々な作り方があります

ポートフォリオの種類

  1. オリジナルのポートフォリオサイトを作る
  2. WordPressなどテンプレートを利用してポートフォリオサイトを作る
  3. ポートフォリオ作成ツールを利用する
  4. Instagramに投稿する
  5. PDF形式でまとめる

一つ一つを詳しく解説しているととっても長くなってしまうので、こちらの記事では細かく説明しませんがポートフォリオを作ると言っても色々な種類があるんです^^;

一体どれで作ればいいの〜〜〜〜と迷うと思うのですが、これは自分がデザイナーとしてどう働いていこうと思っているかによって変わってくるので、一概にどれがいいとかどれがダメとかはありません。

が、一番手取り早く作れるのは③のポートフォリオ作成ツールです!

迷ってる時間があるならまずはツールを利用して作ってみるのが一番かもしれないですね♪

ポートフォリオの作り方の細かい内容についてはまた別記事で紹介します😊

【STEP5】デザインを受注する!

さあここまで来れば、あなたは完全にWebデザイナーとしてお仕事受注が可能な状態です👏

いやいや受注なんて怖すぎる〜〜〜〜!!まだまだ右も左もわからない💦

そう不安になると思います。大半の人が怖いと感じます。。。

でも、怖いからと立ち止まっていても、先に進むことは絶対にできません!

せっかくここまで頑張ってきたのですから、怖がらず受注してみてください!自信を持って✨

実務案件から学ぶことはめちゃくちゃ自分の糧になります。失敗しても成功しても学びしかない😊

というわけで実際にどうやって案件を受けるようになるか!を紹介します!

実務案件を受ける方法5選

  • クラウドソーシングサイトで案件を探す
  • メールやDMなどの営業活動
  • SNSでモニター募集
  • お仕事サイトで仕事を探す
  • エージェントサイトで仕事を探してもらう

そのほかにも友人知人から受けれる方はそれも良いですね😊

まずはお客様を相手に実際にデザインを制作して納品するという一連の経験をすることが大切です!

はじめてなので・・・とつい弱気な発言をしたくなりますが、それは禁止。お客様を不安にさせないよう、不安な気持ちは見せないように自信を持って提案してください!

案ずるより産むが易し。実際にやってみたらそれほど難しくない!と感じますよ♪

仕事の大まかな流れ

大体どんな案件でも以下の流れで仕事が進行していきます

  1. お客様にヒアリングする
  2. お見積もりを出す
  3. 制作する
  4. 確定まで提案・修正を繰り返す
  5. 確定して納品

一つ一つの工程で意識しないといけない大切なことがあります!

これもまた別記事で紹介しますね😊

不安でわからないことも多くて、迷うこともたくさんあると思いますが、誠心誠意、丁寧にコミュニケーションをとることが最も大切な部分。

信頼してもらえると、次からもお仕事をいただけるようになり、そのうち営業活動しなくても紹介やリピーター様でいっぱいになります。そんなデザイナー目指して頑張りましょう

次に繋がるように。心を込めてデザインとコミュニケーションを💗

長くなりましたが、以上が未経験からフリーランスWebデザイナーになるための5つのステップでした😊

まとめ

この記事で大体の概要は理解してもらえたでしょうか?

つらつらと書きましたが、簡単に言ってしまえば、

必要な物を準備→勉強→作品を作る→案件を受ける

という単純なものです。ごくごく普通ですね笑

それでもやっぱり未経験なわけですから一つ一つのステップに迷いや不安があるのは当然のこと。

そんな方達に向けて、迷わずWebデザイナーにチャレンジできる環境を整えれるようこれからも記事を執筆していきますね!

最後までご拝読ありがとうございました♡

Follow me!

目次