未経験からWebデザイナーを目指す5step【歴14年の現役Webデザイナーが解説】
未経験ですがWebデザイナーになりたいと思っています。
何からはじめればよいですか？
どうすればWebデザイナーになれますか？
この記事は上記のようなお悩みを解決する記事です。
私はWeb制作会社で10年間Webデザイナーとして勤務し、現在はフリーランスとして活動しています。（Webデザイナー歴14年・フリーランス5年目）
会社員時代はWebデザイナーの採用担当もしていました。
未経験からWebデザイナーになるのは難しいことではありますが、今活躍しているWebデザイナーはみんな未経験からのスタートです。
私もスクールでスキルを学んだ上で、未経験からWebデザイナーになりました！
この記事では、採用担当もしていた現役Webデザイナーが5stepに分けて未経験から活躍できるWebデザイナーになるまでの道のりを詳しくご紹介！
当ブログではフリーランスという働き方をメインに発信していてそれを目指している方も多いと思いますが、将来的にフリーランスとして働くとしてもまずはWebデザイナーになるところからスタートです。
転職するにしてもフリーランスになるにしても、未経験からWebデザイナーを目指す方は今からご紹介する5stepから始めていきましょう！
- 歴14年のWebデザイナー
- 10年間Web制作会社に勤務 → 独立
- フリーランス5年目
- デザイナーの採用担当してました！
- 娘6歳・息子2歳のワーママ
- 地域情報ブログ「福知Navi」運営
- SNS総フォロワー2.2万人
step.0｜Webデザイナーの基礎知識
【step.1】の前に、Webデザイナーとは具体的にどんな仕事をするのかどんな働き方があるのかをご紹介します。
早くWebデザイナーのなり方を教えてよ！という方は【step.1】に飛んでください。
Webデザイナーの仕事内容
Webデザイナーとは、その名の通りWebサイトのデザイン制作をする職業のこと。
見た目をキレイに整え、わかりやすく使い勝手の良いWebサイトを作る（デザインする）ことがメインの仕事内容です。
めっちゃざっくりですが、Webサイト制作は下記のような流れで進みます。
- ヒアリング
クライアントの要望をヒアリングする - デザイン制作（←メインの仕事）
ヒアリングした内容を元にデザインを作る - コーディング
デザイン案を元にコーディングをする - アフターサポート
Webデザイナーは②のデザイン制作がメインの仕事となります。
③のコーディングとはWeb上に表示させるためにプログラミングをすることで、コーディングもWebデザイナーの仕事に入りますが、実際にはコーディングをしないWebデザイナーもいます。
会社では分業になっていることが多く、②のデザイン業務のみ担当することが多いと思います。
ですが会社によってはコーディングを担当することもあります。
私が勤めていた会社では完全分業制で私はデザイン制作担当でした。
実務でコーディングをしたことはほとんどありません。
フリーランスになると基本的には①～④を全て自分で行う方が多いです。
ただ、コーディングは外注する方もいますし、フリーランスでも企業と業務提携して働いている方は実際の制作（②③またはどちらかのみ）だけを行ったりもしています。
フリーランスによっても働き方は様々ですが、会社員とは違ってやることは格段に増えます。
外注するにしても、その指示は出さないといけないですしね～。
私はフリーランスになってからは基本的には全て自分で行っています。たまに外注でコーディングをお願いすることもあります。
Webデザイナーの働き方
Webデザイナーには主に下記3種類の働き方があります。
- Web制作会社で働く
- インハウスデザイナーとして働く
- フリーランスで働く
私はインハウス→Web制作会社→フリーランスで全部経験してます！（※インハウスはグラフィック担当）
1つずつご紹介していきますね。
① Web制作会社
Web制作会社とはWeb制作を行うことをメイン事業とする会社で、様々な業種・テイストのホームページをひたすら作っていきます。
（特定の業種限定の制作会社もありますが一部です）
ディレクター・デザイナー・コーダーなど業務によって担当が分かれていることが一般的。
チームで働くので専門的な知識や経験を共有しやすく、様々なデザインに挑戦できるのでスキルの幅が広がります。
その代わり、やっぱり大変！
私は10年間Web制作会社に勤務し、ホームページのトップページデザインを週2～3件ずっと作り続けてきました。
毎回依頼元が代わり、作る業種も求められるデザインも本当様々。
その度に違うデザインを作る必要がありイメージが湧かない時・なかなかお客様の求めるデザインが作れない時は苦しかったです。
作業量が多く常に仕事に追われていて、残業しないと間に合わないことも多々ありました。
でもその経験によってかなり鍛えられました！
制作会社での経験があってこそ、今フリーランスとして順調に活動できていることは間違いありません。
② インハウスデザイナー
インハウスデザイナーとは、一般的な事業会社内でデザイン業務を行うデザイナーのこと。
（社内デザイナー・企業内デザイナーとも呼ばれます）
制作会社は「外部の企業から依頼された制作物」を作りますが、インハウスデザイナーは「自社ブランドの制作物」を担当します。
自社のHP・ECサイト・チラシ・ポスターなど。
Webとグラフィック、どちらも求められる場合も多いです。
私は制作会社の前に、一般事務兼インハウスデザイナーとして働いていました。
住宅関係の会社で、取引先に向けた会社のサービス案内やキャンペーンのチラシを作るというのが主なデザイン業務でした！
加えて、総務や経理等の一般事務の仕事もしていました。
インハウスではその会社＝特定の業種のデザインしか作らず、デザインを依頼する人も会社の人なので、経験を積むとどんどんやりやすくなると思います。
基本的には制作会社ほど仕事量は多くなく、求められるスキルのハードルも制作会社に比べると低いので、デザインの経験を積みたい方や無理をしない働き方をしたい方にはインハウスデザイナーも良い選択肢だと思います。
私もインハウス時代は住宅関係のチラシを大体同じテイストで作っていて、そこまで仕事量も多くなかったので、慣れてくると割と余裕を持って働けていたと感じます。
ただし基本的に同じテイストのデザインしか作らないので幅は広がらず、スキルアップを目指す場合には様々なデザインが求められて精鋭なチームで仕事をする制作会社の方がおすすめです。
③ フリーランス
このブログでメインに発信している、フリーランスという働き方。
時間や場所に縛られず働けるので近年どんどん人気が高まってきています。
子どもができて働き方を見直した結果フリーランスになった（目指すようになった）、という方も最近多くなっていると感じます。
育児をしながら会社で働くって本当大変…！
私も「余裕を持って笑顔で子育てをしたい」というのがフリーランスになった一番大きな理由です。
フリーランスは「組織や団体に所属せず個人で仕事を請け負う人や働き方」のことを指しますが、フリーランスでも働き方はそれぞれ。
私は個人で活動していてお客様と直接やりとりして仕事を進めていますが、企業と業務提携し企業からデザインの仕事を依頼されたり、またチームに所属して働いている方もいます。
「フリーランス＝完全に1人で活動する」と思っている方が多いかもしれませんがそうではありません。
ただしどの働き方でも雇用契約ではないので、責任は全て自分にあります。
責任があり大変なこともありますが、私はフリーランスになってよかったです！
このブログではそれを伝えていきたいと思っています。
Webデザイナーの仕事内容・働き方を説明したところで、ようやく未経験からWebデザイナーになるためstepを1からご紹介していきます！
step.1｜Webデザイナーに必要なスキルを知る
Webサイト制作は大きく「デザイン」と「コーディング」という作業に分かれます。
デザインスキル
まずはデザインスキルからご紹介します。
デザイン制作では主に下記のツールを使用します。
- Photoshop【Adobe】（有料）
- Illustrator【Adobe】（有料）
- Figma（無料からスタートできる）
- Canva（無料からスタートできる）
デザイナーによって使うツールは違い、全て必要なわけではありません。
Webデザイナーを本業としてしっかり収入を得ていきたい方は、高度なデザイン制作ができるAdobeのPhotoshop・Illustratorの習得がおすすめ。
基本的に、活躍しているWebデザイナーはこの2つを使いこなしています。
私はWebデザイン制作ではPhotoshopをメインで使っています！
Illustratorは細かい図形を作ったり、素材の編集をする時に使います。
ただこの2つは有料ソフトで、けっこう高額です。
（→【関連】Adobeを安く購入する方法）
まずは無料で自分にできるかどうか試してみたい方や、副業からはじめたい方は、Figma・Canvaからはじめてみるのがいいと思います。
Canvaの方がより初心者向きです！
コーディングスキル
次にコーディングスキルをご紹介。
主に下記のツールを使用します。
- html/css（無料）
- WordPress（無料）
- STUDIOなどのノーコードツール（無料からスタートできる）
step.0の仕事内容の箇所で説明したように、デザインは必須ですがコーディングに関しては必ずしも必須ではありません。
コーディングとはWebサイトを画面上に表示させたり、動きを付けたりする作業のことですが、制作会社によってはコーディング専門のコーダーが全てを担当したり、コーディングのみを外注する場合もあります。
フリーランスの場合でも、コーディングは外注されている方もいます。私は基本的にコーディングは自分でしていますが、外注したこともあります。
ただ、コーディングの基本的な知識（①html/css）は必須！
コーディングの知識がないとコーディングしづらい（もしくはできない）デザインを作ってしまって、外注するコーダーや後々更新するお客様などに迷惑をかけてしまいます…。
最低限①は必須として、更に自分でコーディングをする場合は、②WordPress・③ノーコードツールのどちらか（またはどちらも）を習得する必要があります。
全てを習得する必要はない
色々ご紹介してきましたが全てを習得する必要はなく、どんな働き方をしたいか、どんなデザインを作りたいかなどを考えて、自分に合ったスキルを選ぶことが大事です。
Webデザイナーに必要なスキルの知識・自分に合ったスキルの選び方については、下記の記事で解説しています。
step.2｜勉強方法を決める
主な勉強方法は下記の3つ。
- スクールに通う
- 職業訓練校に通う
- 独学で勉強する
① スクールに通う
一番のおすすめはやっぱりスクール！
Webデザインの勉強は範囲が広い上に奥が深く、難しいです。
お金はかかってしまいますが、プロに順序立てて教えてもらって、わからないところは質問できるという環境がベストだと思います。
私も実際にスクールに通って勉強しました！
Webデザインスクールはたくさんあるのですが、その中で厳選したおすすめのスクールを下記それぞれの記事でご紹介しています。
＼ 目的や学習スタイル別にスクールを紹介中 ／
② 職業訓練校に通う
会社員を辞めてWebデザイナーを目指す場合は職業訓練校で学ぶという方法もあります。
（ハローワークで求職申込みをしている人限定）
メリットはなんと言っても受講料無料（テキスト代は必要）かつ、失業保険等のお金ももらえること！
有料のスクールほどのレベルではありませんが、「全くの初心者で、基礎的なソフトの使い方や知識を学びたい」という方にはおすすめです。
ただし申込み時期が決まっていたり、倍率が高かったりするので、誰でも好きな時に受講できるわけではありません。気になる方はお近くのハローワークで聞いてみてください。
③ 独学で勉強する
Webデザインのスキル習得は簡単ではなく、正直私は独学では難しいと思っています。
学ぶことが多すぎて、更に独学だと視野の狭い勉強しかできないと思うので。。
独学でやってみたい方は、Webサイト・本・YouTubeなど勉強できるものはたくさんあるので、まずはそれらで勉強してみましょう。
もしそのまま独学でいけそうなら、極めていく手もあります。
もし難しそうと思ったらスクールを検討するなど、他の方法を考えるのがおすすめです。
学習方法についてもっと詳しくは、下記の記事内でスキルの解説と合わせて紹介しています。
step.3｜必要なツールを揃えて勉強スタート
独学やオンラインスクールの場合は全て自分で揃える必要があります。
スクールや職業訓練校に通学する場合は、スクールのPC・ソフトを使うことができるので、はじめから揃える必要はありません。
そのため、勉強方法を先に決めましょう！
必要なソフトも変わってきます。
ただし、通学する場合でも、家で復習できる環境を用意しておいた方がよりスキルアップになります。
家で学習するために、最低限必要なものをご紹介します。
パソコン
まずはパソコン！
AdobeのPhotoshop・Illustratorを使う場合、低スペックなパソコンだと動作が固まってしまうのである程度高スペックなパソコンがおすすめです。
私はあまり詳しくないのですが、今のパソコンはこちらの記事を参考に選びました。
ちなみにWindowsのDELLのパソコンです。
- CPU：Corei7（第13世代）
- メモリ：16GB
- ストレージ：1TB
- グラフィックカード：GeForce RTX 3050
購入して1年以上経ちますが、Photoshopが快適にサクサク使えています。参考までに。
Adobeソフト
オンラインスクールでAdobeソフトを学ぶカリキュラムがある場合は、Adobeソフトは自分で用意する必要があります。
職業訓練校に通う方は最安の学生・教職員版が購入できます。
これがめっちゃお得で正規料金の約70％OFF！
（初年度のみ・少し高くなりますが2年目も割引あり）
→ Adobe公式サイトの「学生・教職員版」をご確認ください。
スクールに通う方は残念ながらその学生の対象ではなく…
下記のいずれかの方法で購入することになります。（独学の方も）
- Adobe公式サイト
- Amazon
- ヒューマンアカデミーの通信講座
★Adobeを学ぶ講座を申し込むとAdobeソフトも使えるようになる
Adobeにはたくさんのソフトがありますが、基本的に使うのはPhotoshop・Illustratorの2つか、それに加えてXDを学ぶスクールもあります。
「コンプリートプラン」というAdobeソフトが全て使い放題になるプランがあり、それが2024年11月まではリーズナブルに買えていたので今まではそちらをおすすめしていたのですが、12月より大幅値上げになってしまいました…。
そのため現在はコンプリートプランより、単体プランを購入した方がお得になるかもしれません。
自分が学ぶスクールで何のAdobeソフトが必要かを確認して、どのプランで購入するのが一番最安か見極めましょう！
月々払いができるのは公式サイトのみです。
Adobeを安く購入する方法については、別記事で詳しくまとめる予定です！
その他はスクールの指示に従えばOK
その他、デザイン制作でFigmaや、コーディングでWordPress・STUDIOが必要になるスクールもあります。
これらは無料でスタートでき、始め方はスクールで学べるので予め用意する必要はありません。
また、コーディングする際に、サーバー・ドメインを用意する必要があると思います。
ですがこちらもデザインを学んだ後スクールで教えてもらえます。
独学の方は全て自分で調べて用意する必要があります！
step.4｜ポートフォリオサイトを作る
スキルを身に付けたらポートフォリオを作りましょう！
転職するにしてもフリーランスになるにしても、Webデザイナーとして働くならポートフォリオは一番重要と言っても過言ではありません。
Webデザイナーに仕事を頼む側としては、「あなたがどんなデザインを作れるのか」「希望するデザインを作ってくれるのか」「どんな技術があるのか」ということが一番知りたいのです。
ポートフォリオはそれを証明するツール。
プロフィール・制作実績・使えるソフトなどをまとめた、仕事をいただく方へ向けてのプレゼン資料です。
ポートフォリオの重要性・作り方については下記の記事で詳しく説明してます。
ポートフォリオの中で一番見られるのが制作実績！
どんなデザインを作れるのかわからなければ、依頼してもらえることはありません。
本来は実際の仕事で作ったデザイン実績を掲載していくものですが、最初はそんなものないと思います。それでもOK。
スクールの卒業制作・自分の名刺・自分のサイトなど、まずはお客様がいなくても作れるデザインを作って載せていきます。
▼ 詳しくは下記の記事にまとめています。
step.5｜転職またはフリーランス
スキルを学んでポートフォリオを作ったら、転職活動をするかフリーランスになるかのどちらかになります。
転職する場合、未経験で雇ってくれる会社は少ないですが【step.4】で紹介したように魅力的なポートフォリオがあれば採用される確率はグンと上がります！
私も未経験からWebデザイナーに転職しました！
30社落ちましたが、熱意と行動力で何とか1社に採用していただけました。
下記の転職エージェントではキャリア相談ができる上、ポートフォリオの添削もしてくれます。
いずれも未経験でも登録可です！
一度エージェントに相談してみるのもおすすめです。
フリーランスを目指す方はそのために準備を進めていきます。
将来的にフリーランスになるにしても、転職に挑戦できるならまずは転職の方がおすすめなのですが（会社で働くと実際の仕事で求められることや流れがわかり、また人脈も作れるので、フリーランスとして活動する上で大きな財産になります）、「小さな子どもがいてフルタイムで働くのは難しい」「フリーランスの方が挑戦しやすい」といった声もよく聞きます。
当ブログは「フリーランスWebデザイナーとして安定的に働く」ことを目指すブログなので、未経験からフリーランスに挑戦する人も全力で応援したいと思っています。
簡単な道ではありませんが、未経験からのスタートで実際に活躍されている方もいますし、絶対に無理なことではありません。
「転職じゃなくフリーランスになりたい」という方向けに、フリーランスになるstepをまとめました。
フリーランスを目指す方は続いて下記の記事をご覧ください。
上記記事のstep.0に書いていますが、フリーランスに挑戦するには副業から、または生活資金を貯めてからのスタートがおすすめです！
まとめ
未経験から活躍できるWebデザイナーになるためのステップを本音を交えながらご紹介しました。
- step.0｜Webデザイナーの基礎知識
- step.1｜Webデザイナーに必要なスキルを知る
- step.2｜勉強方法を決める
- step.3｜必要なツールを揃えて勉強スタート
- step.4｜ポートフォリオサイトを作る
- step.5｜転職またはフリーランス
未経験からのスタートは簡単ではありませんが、必要なスキルを身に付け、魅力的なポートフォリオを作ることができればWebデザイナーへと近づきます！
＼ Follow Me! ／
質問・相談はDMでお気軽にどうぞ♩
▽ オンライン相談会も実施しています ▽
