昨今は働き方の多様化により、在宅で働けて副業にもしやすいWEBデザイナーを目指す人が急増しています。
しかし、いざWEBデザイナーを目指そうとすると、何から始めればよいか分からない方も多いのではないでしょうか。
本記事では、未経験からWEBデザイナーになりたいと考える方に向けて、最短でWEBデザイナーになるための方法を紹介していきます。
必要な知識から最低限覚えなければいけないデザインツールの使い方まで、初心者の方が疑問に思うことに全て答えていくので、WEBデザイナーを目指す方はぜひ最後までご覧ください。
WEBデザインのスキルを身につけることで、未経験からでも大手制作会社への転職や、副業での成功を実現できる可能性が広がります。
実際に、私たち日本デザインスクールの受講生の中には、30代未経験からスキルを磨き、卒業1ヶ月で制作会社に転職。さらに副業でも成功し、収入を2倍にした方もいます！
「未経験だけど挑戦してみたい」「新しいキャリアに踏み出したい」というあなた。まずは、その一歩を踏み出すためのヒントを手に入れませんか？
以下の記事では、未経験から制作会社に転職を果たした方のインタビューを通じて、成功の秘訣を詳しくご紹介。未経験から転職するうえでのヒントを得られるのでぜひ読んでみてくださいね。
【お知らせ】
2000名以上の人生を変えるキッカケになった「好きなことで生きていく！WEBデザイナーという働き方セミナー」では、
などをお伝えしています。今だけ無料で開催しているので「WEBデザインの学び方がわからない」「WEBデザイン業界について知りたい」という方はぜひご参加ください。
＞＞詳しくはこちら
未経験からWEBデザイナーにはなれるのか
まずは初歩的な疑問として「未経験の状態で、現職で働きながらWEBデザイナーを目指すなんて本当に可能なのか」という部分が気になる方も多いのではないでしょうか。
結論から言うと、未経験でも働きながらデザインを学んでWEBデザイナーになることは可能です。次からの項目でその根拠を説明します。
未経験からwebデザイナーになっている人が多い
実は、WEB業界は未経験・第二新卒で転職する人が多いのが現状です。
大手求人サイトを見ても、Webデザイナーの求人には「未経験歓迎」「第二新卒可」と書かれたものが多く見られます。
未経験歓迎・WEBデザイナーの求人数(2025年1月現在)
| 媒体名 | 求人数 |
| doda | 104件 |
| マイナビ転職 | 63件 |
| indeed | 7,000件以上 |
| 求人ボックス | 77,660件 |
特に20代の未経験者は、吸収力や学習能力の高さから企業からの需要が高く、デジタルネイティブ世代として日常的にWEBに触れている強みもあります。なので、未経験でも必要とする企業が多いのです。
副業・フリーランスとしても働けるのでキャリアを柔軟に築きやすい
在宅環境で副業として始めたり、フリーランスとして自由にキャリアを築くことができるのもWEBデザイナーの魅力です。
特に今はクラウドソーシングサイトなど案件単位で仕事を取れるサイトが増えたため、業界未経験でツテが無い状態でもすぐに仕事を取ることができます。
また、WEBデザインはパソコンが1つあれば全ての業務がおこなえるため、働く場所も固定されず自由に働けることもWEBデザイナーになりやすい理由の1つです。
クラウドソーシングサイトでも未経験で仕事を取るのは難しい？
「とはいえ、未経験だとクラウドソーシングサイトでもすぐに仕事は取れないんじゃ？」
そう考えるのは自然なことですが、実はあることを徹底すれば業種・職種未経験のWEBデザイナーでも仕事を取ることができます。それは「ポートフォリオ(作品集)」を作り込むことです。
経験として売り込めるものがない新人WEBデザイナーは、実力を見てもらうしか判断基準がありません。
WEBデザイナー業界は特に実力主義なので、自身のある作品をまとめたポートフォリオをプロフィール情報に掲載したり、SNSで公開すればそれだけで格段に案件が取りやすくなるはずです。
そうして取れた案件に真剣に取り組み、少しずつ実績を積み重ねれば数年以内にはあなたも十分に経験を積んだ熟練のWEBデザイナーになれるでしょう。
WEBデザイナーになるために必要な3つの基礎スキル
ここからは、未経験からWEBデザイナーになるために必要な3つの基礎スキルを解説します。
このスキルは現役のWEBデザイナーが今も業務で重宝しているスキルなので、特に未経験の方はここを絶対に忘れないように何度も反復してスキルを定着させることを心がけてください。
WEBデザイナーの基礎1：デザインの基礎知識
未経験の人にまず知っておいて欲しいのが、WEBデザインは「センス」ではなく「知識」が重要だということです。まずWEBデザインには「デザインの4大原則」というものがあります。
- 近接（関連がある情報は近付ける）
- 整列（要素を整列させる）
- 強弱（情報の優先度によって強弱をつける）
- 反復（同じ要素を使って一貫性を持たせる）
こういった基礎の知識を持ってデザインをおこなうだけで、実はSNSに掲載されているようなバナー広告などは簡単に作れるようになります。
他にも「配色のセンス」は配色パターンをどれだけ知っているか、「フォントのセンス」もどれだけの種類のフォントを知っているかと言い換えることができます。初心者のうちは、こういった基礎知識や原則をとにかく覚えて忠実に守ることを心がけましょう。
WEBデザイナーの基礎2：Photoshopを使いこなせるスキル
次に必要なのが、デザインツールを使いこなせるスキルです。
デザインツールについて調べるとIllustratorやPhotoshop、Adobe XDなど複数のソフトが出てきますが、最初はPhotoshopだけに絞って学習しましょう。
制作現場でもメインで使うツールはPhotoshopであり、デザインに必要な大抵のものはこのPhotoshopだけで作ることができます。
他にも学ばなければならないことが多いからこそ、まずはPhotoshopに絞って使いこなせるようにしておきましょう。
WEBデザイナーの基礎3：コーディングスキル（HTML/CSS）
最後に必要になるのが、基本的なコーディングスキルです。
制作会社に勤める前提であれば、コーディングはコーダーが担うことが多いので必要ないと言われることもあるかもしれません。
しかし、WEBデザイナーが作成するものは最終的にコーダーによってWEB上に反映されるデザインなので、コーディングで実現しづらいデザインばかり作っているとコーダーから「実用的ではない」とお叱りを受けることもあるかもしれません。
最低限HTMLとCSSの知識を持っておけばチームでWEBサイトを作成する際などにコーダーと連携も取りやすくなるので、余裕があれば覚えておきましょう。
【お知らせ】
まずは無料でWEBデザインを学びませんか？
デザインに少しだけ興味がある方に向けて、豪華な無料プレゼントを用意しました。
✔️ WEBデザイン20レッスン
✔️ WEBデザイナータイプ診断
✔️ 60分でバナーが作れるレッスン動画
✔️ 月収3万円が叶う！副業ロードマップ
✔️月100万稼いだデザイナーによる特別動画講座
未経験からWebデザイナーになるためのロードマップ
本項目では、未経験からWEBデザイナーになるための具体的な学習のロードマップを紹介します。
6つのステップに分けて解説するので、順番に理解していきましょう。
Step1.デザインの基礎を学ぶ
前述の通り、まずはデザインの原則やルールなどの基礎知識を学びましょう。
WEBデザインの教科書や動画教材を購入すれば、大抵は最初の項目にデザインの原則やルールが載っているので、それに沿って学習をおこなえば問題ありません。
何度も言いますが、デザインはセンスではなくルールや原則を覚えることが何より重要です。ここの基礎を疎かにしないようにしましょう。このままWEBデザインの基礎・基本を知りたい方は、以下の記事を読んでみてください。
Step2.Photoshopでトレース（模写）をする
デザインの基礎を学んだあとは、Photoshopでプロの作品をトレースしてみましょう。
トレースとは、プロのデザインを手本として、全く同じになるようにデザインの模写をすることです。トレースには次のメリットがあります。
- プロのデザインのコツを身体で覚えることができる
- 上手なデザインがどのようにできているか学べる
- Photoshopの使い方を同時に学べる
「なぜここはこのようなデザインになっているのか」を考えて分析することでプロの視点を学びながら、同時にPhotoshopの使い方も学べるので、トレースは王道的な学習方法として今も広くおこなわれています。
ただしトレースはプロの作品を完全にマネすることなので、あくまで学習の一環としておこない、決して自作発言などはしないようにしましょう。
トレースのやり方は以下の記事で詳しく解説しています。
Step3.オリジナルの作品を作る
トレースをある程度こなせたら、これまで身につけたデザインの知識やテクニックを駆使してオリジナル作品を作っていきましょう。
難易度の関係上、最初はバナーやYouTubeのサムネイルなどの簡単なものから作り始め、徐々にWEBサイトのデザインに移っていくことをおすすめします。
まずは知り合いのお店の宣伝用バナーを作成したり、既存のバナーを「自分ならこうデザインする」と作り変えてみると良いでしょう。既存のデザインを用いるときは、元のデザインに引っ張られないように注意しましょう。
Step4.プロのデザイナーに添削してもらう
オリジナル作品を作ったら、必ずプロのデザイナーに添削してもらうようにしましょう。
プロに添削してもらうと、自分では気づかなかった改善点や悪癖に気づくことができ、デザインのスキルを大きく伸ばすことができます。
WEBデザインスクールに通う方は講師に確認してもらい、独学でWEBデザインを学ぶ方はSNSやYouTubeなどで「あなたのデザインを添削します！」とうたっている企画に投稿したり、ワークショップに参加して添削してもらいましょう。
Step5.HTML/CSSの基礎を学ぶ
最後に、余裕があればHTML/CSSの基礎を学んでおきましょう。
理由は前述の通りですが、実はコーディングを学ぶとコーダーとの連携を取る以外にも役に立つことがあります。
それは、もし学習を終えた後すぐに副業やフリーランスとしての活動を始める場合、すぐに単価の高いWEBサイト作成の案件が取れることです。
本格的なWEBサイトを作成する場合はJavaScriptやJQuelyの知識も必要ですが、今はWEB上にHTMLとCSSだけで組まれた無料テンプレートも豊富にあるため、それをうまく活用するだけでWEBサイト制作がおこなえるのです。
学んで損になることは絶対にないため、余裕があればコーディングも学習しておきましょう。
WEBデザイナーになるための学習方法3選
本項目では、WEBデザイナーを目指すための学習方法を3つ紹介します。
自身の環境や予算の都合によって学び方は変わってくるので、自身に適した学習方法をさがしてみてください。
WEBデザインの学習方法1：独学
まずは最も一般的な独学について解説します。独学は、以下のような方におすすめしたい学習方法です。
- 会社員として働きながら、空いた時間でしっかり自己管理しながら学習できる方
- 費用を抑えて学習したい方
独学のメリットは「空いた時間に自分のペースでおこなえること」と「費用を抑えられること」ですが、独学でWEBデザイナーを目指すのはいばらの道です。
YouTubeやUdemyなどの動画を活用した教材が増えて学習がしやすくなったとはいえ、本来なら休むための時間で学習するためには高い自己管理能力が必要になります。
なので、自信がある方は学習の期限をしっかりと決め、困ったら質問できる人（オンライン教材であれば講師への質問もセットで販売されているものもある）を見つけてから勉強を開始しましょう。
WEBデザインの学習方法2：WEBデザインスクール
費用や時間に余裕のある方は、WEBデザインスクールを検討してみましょう。
WEBデザインスクールであればカリキュラムや教材があり、プロの講師が指導にあたってくれるので学習効率は独学に比べ何倍にも跳ね上がるでしょう。
ただし、WEBデザインスクールは「WEBデザインだけが学べるスクール」や「ツールの使い方しか教われないスクール」など千差万別です。
他にもオンライン・オフラインなど受講形式も多様にあるので、自分の学びたい環境に近いスクールを選べるように事前の情報収集は充分におこなってください。
おすすめのWEBデザインスクールは以下の記事で解説しています。
WEBデザインの学習方法3：職業訓練校に通う
既に仕事を退職して失業中の方は、職業訓練校でWEBデザインを学ぶ選択肢もあります。
職業訓練校のWEBデザイナー科に入れば無料でWEBデザインの授業を受けられ、条件に当てはまっている場合は給付金を受け取りながら学習することも可能です。
ただし職業訓練校は学校ごとの学習内容の差がWEBデザインスクールよりも顕著なため、通う場合はせっかくの期間を無駄にしないためにも、説明会などで積極的に質問してイメージとのギャップがないかを十分に吟味しましょう。
また、職業訓練校は筆記試験や面接に合格しなければ通うこともできないため、難易度は充分に高いことを理解した上で挑戦してみてください。
未経験には最も重要なポートフォリオの作り方を解説
未経験からWEBデザイナーとして転職するか、もしくは副業・フリーランスとして案件を受ける際に最も重要なのがポートフォリオの質です。
特に転職の場合、面接官はポートフォリオを見て応募者の実力を判断します。ポートフォリオに掲載している作品の質が高ければ、未経験でも採用される可能性は十分にあるでしょう。
現に、私たちが運営する日本デザインスクールを卒業した田中さんは、質の高い作品とポートフォリオを用意したことによって、勉強を始めてから3ヶ月で制作会社に転職しました。
このようにクオリティの高い作品が載ったポートフォリオは就職・転職活動において武器になります。なのでここからは、クオリティの高いポートフォリオの作り方を解説します。
▼参考
ポートフォリオ作成のStep1：テキストエディタを用意する
ポートフォリオを作成する場合、まずはコーディング用のテキストエディタを用意します。
現在無料で使用できるコーディング用のテキストエディタはVisual Studio Code(VScode)が主流のため、事前にPCにインストールしておいてください。
※全くコーディングがわからない方は紙媒体のポートフォリオのみで問題ありませんが、目指す職種がWEBデザイナーのため、可能であればWEB版のポートフォリオも用意しておきたいところです。
ポートフォリオ作成のStep2：テンプレートを用意し組み直す
続いて、ポートフォリオのテンプレートを用意します。「ポートフォリオ テンプレート」と検索すればSTUDIOなどのテンプレートサイトがヒットするので、そこから基となるテンプレートを探してダウンロードします。
その際、テンプレートを全く変更することなく使用することは避けましょう。面接官は当然プロのWEBデザイナーなので、有名なテンプレート提供サイトはある程度チェックしています。
あくまで効率的にポートフォリオを作成するための補助としてテンプレートは使用し、しっかり自分なりのデザインを反映させることをおすすめします。
すでに組まれているHTMLやCSSを上手く活用して、最低限学んだHTMLやCSSの知識で自分が作成したポートフォリオデザインを反映していきます。
ポートフォリオ作成のStep3：必要事項や作品を反映させる
テンプレートを活用してポートフォリオの大枠が完成したら、いよいよ作品と必要事項を反映させていきます。ポートフォリオに必要な事項は以下の4つです。
- プロフィール
- 有しているスキル
- 制作した作品
- 作品についての説明
ポートフォリオの魅せ方は人それぞれですが、上記の4項目は絶対に外せない内容です。特に「作品についての説明」は、自身のデザインスキルを披露するまたとないチャンスであり、面接官もそこを重点的にチェックして質問してくるので具体的に記載しましょう。
- 設定したターゲット層やペルソナ
- 上記を踏まえてこのデザインにした理由
- 制作にかかった時間
これらを記載しておくと、面接官も「想定ターゲットに刺さるデザインができているか」「このクオリティのデザインを何時間で作ることができるか」という実践的な観点であなたのスキルを確認することができます。
番外編：定期的にブラッシュアップする
ポートフォリオの作成は以上で終了ですが、ポートフォリオはそのままにせず定期的にブラッシュアップしましょう。
転職活動をしていると最初にポートフォリオを作成した時から何週間、何ヶ月と時間が経つことがほとんどです。その間にも新しいデザインは作成しているはずなので、それらは常に反映させ、その都度ポートフォリオの気になった部分を修正するようにしましょう。
そうすることでポートフォリオがどんどんブラッシュアップされ、転職活動の後半になるにつれてクオリティがどんどん上がっていきます。
まとめ｜未経験からでもWEBデザイナーにはなれる
本記事では、未経験からWEBデザイナーになるための方法をお伝えしてきました。
とにかく大切なことは「基礎知識・原則を大事にすること」と「ポートフォリオのクオリティを高めること」です。
ここを疎かにしなければWEBデザイナーになった後も困ることはないでしょう。
未経験からWEBデザイナーになることは難しいですが、今はプロとして働いているWEBデザイナーにも未経験の時期はありました。
あなたのチャレンジもきっと遅くはないので、本記事で紹介したロードマップを参考にして最短距離でWEBデザイナーになれることを祈っています。
