未経験から独学でWebデザイナーになるためのロードマップ

本ページはプロモーション(PR)を含みます。

この記事では、未経験からWebデザイナーになりたい人向けの効率的な学習方法を、ロードマップ形式で解説しています。

  • 着実にスキルアップしながらWebデザイナーになりたい人
  • 子育てしながら在宅で稼げるようになりたい人

こんな人向けです。

Webデザイナーは、通勤、在宅ワーク、副業などの様々なスタイルで仕事ができるのが魅力です。

そのため、子育てママさんやはじめて副業に挑戦する人に人気の職業です。

一方、初心者~ライトワーカーの層が厚いため、おこづかい程度ではなく、きちんと家計を支えられる額(月5万円以上)を稼ぐためには、スキルアップと仕事の取り組み方を真剣に考える必要があります。

帽子ねこ

それぞれの生活に合った仕事スタイルを見つけていかないと、
長期的に続けるのは難しくなります…

このロードマップでは、主に子育てママさんを対象に、Webデザイナーとして堅実に稼ぎ、スキルアップする方法を解説していきます。

  • どのような学習をすれば、無駄なく効率的に稼げるのか分からない…
  • 1日にどのくらいの時間を確保できれば、Webデザイナーとして仕事ができるようになるの…?

こんな悩みを抱えている人は、ぜひ参考にしてください!

目次 Contents

Webデザイナーになるためのロードマップ

はじめに、Webデザイナーとして収入を上げていくための大まかな手順を載せます。

帽子ねこ

各STEPは、それぞれ後ほど詳しく解説します!

STEP
仕事の時間と目標金額を決める
仕事の時間と金額

はじめに、以下の3つについて考え、自分の目標を明確にしましょう。

  • 1日の中で、昼間(9時~17時)に仕事をできる時間
  • 1か月に稼げる金額
  • どんなスキルが必要か?

Webデザイナーとしてデビューする人は、バナー作成、LPデザイナー、ロゴデザイナーなど様々な専門性を持っています。

1日に仕事に使える時間を元に、自分に合ったスキルを選びましょう!

STEP
バナー作成ができるレベルまでPhptpshopとIllustratorスキルを磨く
webデザインスキル

Webデザイナーとして最初のステップは、バナー作成が実務レベルでできるようになることです。

デザインツールの基本

Webデザイナーであれば、必ず使えるようにしておきたい基本ツールの使い方から学んでいきましょう。

Photoshop(フォトショプ)、Illustrator(イラストレーター)とは?
※クリックで開きます

とは、

画像編集ソフトの代名詞ともいえる、プロも愛用する高機能なソフトです。

写真編集だけでなく、イラスト制作、Webデザイン、印刷物制作など、様々な分野で幅広く使用されています。

現役Webデザイナーは、写真加工バナー作成Webページ全体のデザインの作成に使う人が多いです。

\ 公式サイトはこちら! /


とは、

ベクター画像編集に特化したグラフィックデザインソフトです。

ロゴ、イラスト、アイコン、Webデザインポスターなどの印刷物の制作に幅広く使用されています。

ベクター画像とは?

ベクター画像は、点と線で構成された画像で、拡大縮小しても画質が劣化しないという特徴があります。

そのため、ロゴやイラストなど、解像度に依存しないデザイン制作に適しています。

\ 公式サイトはこちら! /

~ここまでできれば月5万円以内は稼ぐことが可能!~
※専業Webデザイナー志望の人は、もう少しスキルアップの必要あり!

STEP
LP(ランディングページ)をデザイン・実装できるようにする
ランディングページ
LP(ランディングページ)とは?
※クリックで開きます

LPは、広告やSNSなどからユーザーが最初に訪れる1枚切りのWebページです。
(対照的なのは、企業のコーポレートサイトなどの複数枚からなるWebページ)

商品の購入や、資料請求、メルマガ登録などの特定の目的をユーザーに起こさせるために作られています。

求められるLPの特徴として、ターゲット層に合わせたデザインや、読みやすい文章で書かれていること、「商品購入」ボタンなどがクリックされやすいデザインであることが挙げられます。

LPをデザインし、インターネット上に公開するには、Photoshop、Illustratorの他に、Webデザインツールの使い方を覚えたり、コーディング(プログラミング)の知識が必要になります。

Webデザインツール

  • Figma
  • Sketch
  • STUDIO
  • Adobe XD

※Adobe XDは2023年以降Adobe CCコンプリートプランのみで使えます。

コーディングに必要

  • HTML/CSS
  • JavaScript
  • jQuery など

※jQueryはJavaScriptのライブラリです。
シンプルで分かりやすく、Webブラウザやスマートフォンなどの様々なデバイスで動作することから、Web制作の現場ではよく利用されています。

~ここまでできれば月10万円以上稼ぐことが可能~
※最近Webデザイナーデビューする人は、このレベルの人が多い

STEP
仕事を探す
ポートフォリオ

副業希望の人や、在宅ママワーカーさんがWebデザインの仕事を獲得するには、以下の方法があります。

  • アルバイト(フルリモート等で企業と雇用契約)
  • クラウドソーシングサイト(単発請負・個人事業主スタイル)
  • SNS等で営業(請負・個人事業主スタイル)

このうち初めて在宅ワークデビューする人におすすめなのは、①のアルバイト等で企業と契約する方法です。

仕事と雇用関係が一番安定しているため、上記3つのうちでは一番トラブルが少ないというのが個人的な印象です。

~未経験からWebデザイナーデビューした人は、ここからさらにツールの使い方を学んでいく~

STEP
(発展編)WordPressやロゴデザインのスキルを磨いて収入を上げる
※仕事に慣れてきてからで良し!
ロゴデザイン

LPの仕事に慣れてきたら、より専門性が求められるスキルを獲得していくのも良いでしょう。

WordPressのオリジナルテーマを作成する人、ロゴデザインのスキルを磨く人、動画編集のスキルを磨く人など、スキルの取り方はそれぞれです。

個人的には、今請け負っている仕事のクライアントさんに喜ばれるようなスキルから獲得していくことをおすすめしています。

いぬ

意外と大変そう…

帽子ねこ

大丈夫!
順番に丁寧に解説していくよ!

途中でつまづくことが無いように、丁寧に解説しているため、文字数が多くなっています。

このページをブックマークしておいて、その都度必要な部分だけ読んでみてください…!

STEP1:仕事の時間と目標金額を決める

Webデザイナーの働き方は、実は人それぞれ違います。

  • 在宅で仕事をする or 出勤して仕事をする
  • お金重視? or 時間にゆとりのある働き方

在宅ワークと出勤の比較

リモートワーク

①の「在宅で仕事をするか、会社に出勤して仕事をするか」という仕事スタイルの部分については、同じママさんでも最適解が違います。

小学生以下の小さいお子さんがいる場合、在宅で仕事をするか、家の近所にある仕事場で働く方が家庭と仕事の両立がしやすいです。

お子さんが小さい場合は、家庭に使う時間を多めにとる必要があり、出勤してフルタイムで仕事をするのは、相当な体力がいるからです。

一方、お子さんが中学生以上で自分の面倒をある程度見れる年齢だった場合、「デザイン事務所などに出勤して働く」という選択肢を取りやすくなります。

在宅ワークのメリット
  • 子供の急な欠席に対応しやすい
  • 出勤に比べ体力を消耗しにくい
出勤のメリット
  • 仕事が探しやすい
    (在宅ワークは人気のため、競争が激しい)
  • スキルアップやキャリアアップがしやすい

「家庭と仕事、どちらも大切にしたい」VS「大きな金額を稼げるようになりたい」

悩むお母さん

一口にWebデザイナーと言っても、受けている仕事は人それぞれです。

  • バナー制作
    スキルが習得しやすい。単価は低め。
  • LP制作
    バナーよりも問われるスキルが多い。単価はそこそこ。
  • WordPress・ECサイト設計
    デザインスキルだけでなく、コーディング(プログラミング)の知識が問われる。
    より専門的な知識が問われるが、単価は高い。

代表例として上記の3つを挙げていますが、Webデザインと並行して、ポスターや看板などのデザインも手掛けるデザイナーさんもいます。

お子さんが小さい場合は、まずはバナー制作を中心に受けていくことをおすすめします。

仕事に使える時間を多く取れる人は、バナー制作の他にLP制作やWordPress(ワードプレス)を使ったサイト制作も視野に入れて学習しても良いでしょう。

それぞれの特徴を挙げていきます。

バナー制作

バナー制作

スキル0の未経験からWebデザイナーになるなら、バナー制作から始めることをおすすめしています。

学習から仕事を受けるまでのハードルが低いため、1日に仕事の時間を4時間前後しか取れない人に向いています。

お子さんが小さいうちは、急な休みなどに対応する必要があります。

仕事のウェイトを軽くしつつ、堅実に稼げるバナー制作で培ったデザインスキルは、次のLP制作やサイト制作にも活かすことができます。

単価は2,000円~5,000円/件ほどになります。

LP(ランディングページ)制作

ランディングページ

LP制作は1ページ分のWebページを制作する仕事です。

Illustratorなどの画像制作スキルに加え、Figmaなどを使ったサイト設計スキルも問われます。

また近年では、サイトのデザインだけでなく、Webページとして実装するためのコーディングも行うWebデザイナーも増えています。

コーディングにはプログラミングの知識・技術も問われるため、デザインのみの仕事よりも、デザイン+実装の仕事の方が単価が高くなる傾向があります。

単価は10万円~30万円/件ほどになることが多いです。

WordPress・ECサイト設計

web制作

WordPress(ワードプレス)は企業のコーポレートサイトなどに利用されています

ECサイトは、ネットショップサイトとも言われ、商品をオンラインで取引するためのサイトです。

ECサイトの代表例はAmazon、楽天、Yahoo!ショッピング、BASEなどがあります。

また大企業では、独自のシステムのECサイトを持っている場合があります。

WordPressもECサイトも、サイトを構築するための「ある程度の型」を持っています。

その型をそれぞれの企業の雰囲気に合ったデザインにしていくのがWebデザイナーの仕事になります。

最近では、コーディングの知識が無くても洗練されたデザインのページを作ることが可能になってきていますが、細かいデザインの変更をするにはコーディングの知識が必要になってきます。

サイト設計は、単価は20万~50万円/件以上となることが多いです。

しかしその代わり、Webデザイナーの中でもある程度以上の経験や知識が問われるため、経験者向きの仕事です。

未経験からWebデザイナーを目指す人は、LP制作で実績を積みながらWordPressやECサイトの勉強をしていくと良いでしょう。

いぬ

なんとなく、
どんなWebデザイナーになりたいか、イメージが湧いてきたかも!

帽子ねこ

次は未経験者の第一歩「バナー制作」の学習方法について見ていこう!

STEP2:バナー作成ができるレベルまでPhotoshopとIllustratorを磨く

どんなWebデザイナーになりたいか、イメージはつきましたか?

LP制作をメインに仕事をするにしても、まずはバナーを作れるようになりましょう。

LPデザイナー希望者がバナー制作をするメリット

  • IllustratorやPhotoshopの使い方が分かる
  • バナーデザイン設計の考え方は、LP設計に応用が利く

バナーの学習方法や仕事の受注方法については、以下のページで詳しく解説しています。

バナー制作のお仕事は、品質だけでなく納品スピードも要求されます。

時間節約のためには、良質な素材を活用することもテクニックの1つです。

最初に必ずブックマークしておきたい高品質素材サイトも知っておきましょう!

Webデザイン用にパソコンを買う必要はある?

パソコン

Webデザインには、ある程度以上の機能がそろったパソコンが求められます。

今持っているパソコンが2~3年以内に購入したものであれば、基本的に改めて購入する必要はありません。

ただし、

  • 5年以上前に購入したパソコン
  • 10万円以下の低価格で購入したパソコン

こうしたパソコンについては、Adobeソフト(IllustratorやPhotoshopなど)をストレスなく使うには不便かもしれません。

Webデザイン用に求められるパソコンのスペックや、おすすめパソコンの選び方は以下で解説しています。

独学でバナー制作を学ぶ方法

独学

バナー制作やAdobeソフトの使い方については、で学ぶことができます。

Udemy(ユーデミー)は、スクールよりも断然コスパ良く学習できます。

バナー制作メインで稼ぎたいと考えている人は、で学習した後、ポートフォリオサイトを作成して営業をしましょう。

独学でバナー制作を学ぶ人におすすめの
買い切りWeb講座

いぬ

学習から営業まで、一人でやるのは大変そう…

  • 何から学習すればいいか分からない…
  • ポートフォリオをどうやって作成すればいいか分からない…
  • Webデザイン業界についてのリアルな情報がもっと欲しい!
  • 初めての仕事には、サポートがあると嬉しい!

こんな人には、学習から初めてのお仕事サポートまで受けられる、オンラインスクールで学ぶことをおすすめします。

STEP3:LP(ランディングページ)をデザイン・実装できるようにする

ランディングページ

クライアント(依頼者)の要望に応えられるレベルのバナーを10~15件以上作ることができれば、IllustratorとPhotoshopの使い方の基本はOKです。

単価を上げていきたい場合は、次のLP制作の学習に進みましょう。

LP制作には、Adobeソフトの他に、Webページをデザインするためのツールが必要になります。

Webページのデザインによく使われるツール

  • Figma(フィグマ)
    知名度&求人数が多い。Webデザインやアプリデザインに使われる。
  • STUDIO(スタジオ)
    直感的に使いやすく、日本語のサポートが充実。
  • Sketch(スケッチ)
    知名度&求人数が多い。対応OSはMacのみ。
  • Adobe XD(アドビエクスディー)
    Adobeソフトの1つ。直感的に使え、他のAdobeソフトとの連携が抜群。

FigmaとSketchは世界中で親しまれているデザインツールです。

STUDIOは日本発祥のデザインツールで、直感的に使えるUIと日本語サポートが豊富にある点がメリットです。

2023年まではAdobe XDも主流でしたが、現在はほとんどサポートされていません。

実際の求人で求められるスキルとして多く挙げられていることから、LPデザインの学習は、まずFigmaの使い方から始めてみることをおすすめします。

Figmaの独学に最適!

LPをより深く学びたい人へ

Figmaを使ったデザインは、年々主流になってきています。

加えて、2023年以降はAIを使ったWebデザイン方法も開発されています。

は、できるだけコスパ良く独学で進めつつ、

  • 最新スキルが学べる
  • Webデザイナーの営業・要件定義方法が学べる
  • コミュニティーやコンテストが活発

というメリットも欲しい人に最適のカリキュラムを組んでいます。

「今の現場で使えるWebデザインスキル」を学びたい人は、こちらもチェックしてみてください。

STEP4:仕事を探す

探す

Webデザイナーの仕事を探す場合、いくつかの方法があります。

  • クラウドソーシングサイトで応募・仕事を募集する
    (フリーランス)
  • SNSを利用して仕事を直接受注する
    (フリーランス)
  • 求人サイトから応募して企業で働く
    (正社員、アルバイト、フリーランス)

①②クラウドソーシングサイトを中心に仕事をする場合

ポートフォリオ

一般的に行われているのは、①②のクラウドソーシングサイト+SNSでの営業を通じて仕事を獲得する方法です。

この方法では、フリーランス(個人事業主)として働くため、時間の都合をつけやすいのがメリットになります。

一方、デメリットは、仕事や収入が安定しにくく、特に未経験からWebデザイナーになりたい人にとってはハードルが高いことです。

未経験からフリーランスになりたい人は、十分な制作スキルを持っていることをポートフォリオなどでアピールし、TwitterなどのSNSを通じて積極的に仕事を獲得しに行く姿勢が求められます。

Webデザイナーが登録しておきたい
クラウドソーシングサイト

スクロールできます
特徴サービスの種類ワーカー手数料クライアント手数料
知名度抜群、利用者が多いスキルシェアサービス。スキル販売22%5.5%
ワーカー手数料3~15%の業界低水準のスキルシェアサービス。スキル販売
公開依頼
直接依頼
3~15%0円
つなぐワーカー手数料が業界最安値。スキル販売
公開依頼
直接依頼
2.8%~0円
利用者数最大のクラウドソーシングサイト。未経験者向き。プロジェクト形式
タスク形式
コンペ形式
5~20%0円
(オプション有)
ランサーズ専門職ワーカーの登録が多いクラウドソーシングサイト。プロジェクト形式
タスク形式
コンペ形式
16.5%5.5%

特定の企業と契約して働く場合(パート・アルバイト・業務委託など)

企業と契約して働く

個人的におすすめなのは、③の特定の企業と契約して働く方法です。

企業では専属のWebデザイナーを欲しがっている会社も多く、IT系の求人サイトを中心にWebデザイナーの募集をかけています。

そうした求人に応募して、正社員やパート・アルバイト、もしくはフリーランスとして業務委託で仕事をいただくようにしていきます。

ママさんの生活に合ったスタイルは、

パート・アルバイトもしくはフリーランスとして在宅(フルリモート)で働く

という方法です。

とは言え、昨今のリモートワーク人気により、在宅ワークでのWebデザイナー求人にも人気が高まっています。

ポートフォリオを充実させることはもちろん、未経験Webデザイナーでも他の求職者に埋もれない求人サイトを選ぶことが大切です。

未経験のWebデザイナーが登録しておきたい
転職サイト

STEP5(発展編):WordPressやロゴデザインのスキルを磨いて収入を上げる

キャリアアップ

ここからは仕事がある程度軌道に乗ってきた人向けの、スキルアップの考え方に関する記事になります。

まだこれから仕事を始める人も、ご自身のキャリアパスについて参考になるかと思いますので、ぜひチェックしていってください。

Webデザイナーのキャリアアップの選択肢

序盤に、Webデザイナーの仕事は種類が多いことに触れましたが、ここからはよりスキルが求められる仕事について紹介していきます。

よりスキルが求められるWebデザイナーの仕事

  • Web制作(WordPressやECサイトのデザイン・実装)
  • ロゴ作成(Illustrator上級者になる)
  • イラスト・ライティングなどの他のスキルと掛け合わせて営業する
  • Webデザインの講師になる

金額や自分の市場価値を高めるのが目的(のちに転職活動をする)のであれば、①のWeb制作について学ぶのが最適です。

①Web制作(WordPress、ECサイト等)

Web制作

最近では、STUDIOやShopifyなどのノーコードツールの台頭により、コードが書けなくても洗練されたデザインのサイトを実装できるようになりました。

これらのノーコードツールを使えることができれば、受けられる仕事の幅はより広がります。

さらに、コーディングができるようであれば、WordPressページのちょっとしたデザイン改修や、WordPressのオリジナルテーマの開発も可能になります。

WordPressのテーマ開発まで習得するのであれば、デザインスキルだけでなく、コーディングやサーバー、セキュリティについての知識も必要になってきます。

そのため、学習は最新の教材を利用するか、現役Webデザイナー向けのデザインスクールでしっかりと学び直すことをおすすめします。

お子さんの年齢がある程度大きい場合は、在宅ワークだけでなく、通勤することも考えてみると良いでしょう。

働ける企業の選択肢を広げることで、より自分に合った仕事に出会いやすくなります。

②ロゴ作成

ロゴ作成

ロゴ作成はIllustratorの機能をより多彩に使いこなしてロゴを作成する仕事です。

バナー制作などのWebデザインが、ある程度の「型」があるのに対し、ロゴ作成はよりデザインセンスが問われる仕事です。

「デザインセンスを磨きたい」「Illustratorをもっと使いこなしたい」という人に向いています。

需要はありますが、プロのロゴデザイナーが少ないので、単価が高くなる傾向があります。

③イラストやライティングと掛け合わせる

Webライティング

現在ココナラなどのクラウドソーシングサイトを利用して仕事をしている人は、バナー制作やLP制作と並行して、イラスト制作Webライティングの提案もできると仕事の幅が広がります。

バナー制作などを発注するクライアントさんは、顧客を呼び込むために様々な方法を使っています。

バナーやLPもその1つですが、Webマーケティングでは並行して自社コンテンツ(商品紹介のためのブログ・SNS運用)を運用することが推奨されています。

Webマーケティング分野の他のスキルをアピールすることで、よりクライアントから仕事を受注しやすくなります。

また、クライアント側もすでに仕事の信頼関係ができている人に発注できるメリットがあります。

アピールできるスキルができたら、新規に仕事を獲得するよりも、まず既存のクライアントさんに提案してみることをおすすめします。

コラム:WordPressやnoteで他の人に役立つ情報を発信する

ライティング力を磨く方法として、実際にWorPressサイトやnoteで文章を書いて発信する方法があります。

WordPressのメリット・デメリット
  • WordPressを自分で実際に運用することで、WordPressのデザインや運用に活かすことができる
  • WordPressで情報発信をするには、レンタルサーバー代やドメイン代がかかる
noteのメリット・デメリット
  • 無料で情報発信を始めることができる
  • 後に有料コンテンツを制作したくなったときも簡単にできる
  • note内に書かれたコンテンツの所有権はnoteにある
    (突然記事が非公開になることもある)

この「からふるweb」も、自分の学習記録としてつけている一面もあります。

自分の好きな時間で仕事ができるため、クライアント業務と並行してできる点が魅力的です。

④Webデザイン講師になる

Webデザイン講師

スキルや実績が貯まってきたら、

  • Webデザインスクールの講師に応募する
  • YouTubeやUdemyで独自に教材を発信する

ということも可能になります。

他にもWebディレクターなどの、他の人を監督する立場にキャリアアップできると、稼げる金額や市場価値をより高めることができます。

まとめ

未経験からWebデザイナーになる場合に必須なのは、以下の3点です。

  • Webデザイナーに必須のスキルを身につける
  • バナーやLPの制作を継続して、ポートフォリオを充実させる
  • 仕事を獲得するための場所(プラットフォーム)を間違えない

AdobeソフトのIlluistratorとPhotoshopはWebデザインの仕事をする上では必須のツールです。

\ 公式サイトはこちら! /

\ 公式サイトはこちら! /

Udemyなどの動画教材を通して、基礎をしっかり身につけましょう。

基礎学習を終えたら、実際のバナーやLPを手本にして、自主的に制作物を作り、ポートフォリオを充実させます。

バナー制作のコツは、はじめの1~2枚は写真や文字の単純な組み合わせで作り、その後PhotoshopやIllustratorでよく使われる機能を使用したバナーを作っていくと良いでしょう。

何枚もバナーを見ていく内に、よく使われるテクニックが段々と分かってくるので、検索エンジンで方法を検索しながら作っていきます。

1枚のバナーにつき1~2つほど新しいテクニックを使っていくと、バナー制作のスキルがより身につきます。

LPも同じく、まず単純な構成のLPを完成させた後で、デザインテクニックが必要なLPを作成していきます。

学習と自主制作のサイクルをまわして企業にアピールできそうなバナー・LPが10枚程度できたら、求人サイトやクラウドソーシングサイトを利用して積極的に応募していきましょう。

この段階では、高い評価を受けているWebデザイナーさんが、どんなポートフォリオを作っているのか研究するのも大切です。

この記事が、これからWebデザイナーとして働くあなたのお役に立てれば幸いです。

Webデザイナーが登録しておきたい
クラウドソーシングサイト

スクロールできます
特徴サービスの種類ワーカー手数料クライアント手数料
知名度抜群、利用者が多いスキルシェアサービス。スキル販売22%5.5%
ワーカー手数料3~15%の業界低水準のスキルシェアサービス。スキル販売
公開依頼
直接依頼
3~15%0円
つなぐワーカー手数料が業界最安値。スキル販売
公開依頼
直接依頼
2.8%~0円
利用者数最大のクラウドソーシングサイト。未経験者向き。プロジェクト形式
タスク形式
コンペ形式
5~20%0円
(オプション有)
ランサーズ専門職ワーカーの登録が多いクラウドソーシングサイト。プロジェクト形式
タスク形式
コンペ形式
16.5%5.5%
未経験のWebデザイナーが登録しておきたい
転職サイト
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次 Contents