こういった疑問に答えます。
本記事の内容
- 独学でwebデザイナーになる”4つの手順”
- デザイナーが付加価値をつける方法
- webデザイナー就職に向けて動き出そう!
- まとめ:未経験から独学でwebデザイナーは可能です。
この記事では前半に独学でwebデザイナーになる4つの手順を解説し、後半にデザイナーが付加価値をつける方法や就職に向けたステップを紹介しています。
記事を書いている私はフリーランス歴3年のwebデザイナーです。独学でデザインを学び、企業でアプリデザインに関わった後フリーランスとして独立しました。
まず結論から言うと、半年ほど独学すれば未経験からでもwebデザイナーになることは可能です。
具体的には今の仕事と並行しながら、平日1時間、土日3時間ほどは学習時間を確保する。これだけでOKです。
この記事では、さらに具体的な方法を深掘りしていきます。
記事を読めば、独学でwebデザイナーを目指すための具体的な手順を知ることができますよ!
目次
独学でwebデザイナーになる”4つの手順”

独学でwebデザイナーになる手順は下記の4つです。
- コーディングスキルを習得
- デザインツールの使い方を習得
- デザインの知識をつける
- 実際にwebサイトを公開する
最終目標は「一人でwebサイトを公開できるようになること」です。
この4つの手順をクリアすれば、webサイトを公開するまでの最低限のスキルが習得できるので、webデザイナーとしての就職が可能です。
ただ、より条件の良い企業へ就職したい場合や、付加価値をつけて今の仕事よりも給与を上げたい方は、さらに習得すべきスキルがあります。
それについても後述していきます。
手順①:コーディングスキルを習得
まず、webデザイナーとして仕事をするためにコーディングスキルを習得しましょう。
コーディングを習得すれば、好きなデザインで自由にwebサイト作れるようになりますよ。
webデザイナーの中には「コーディングを一切行わない。」という方もいますが、そういう人はデザイン能力が優れているか、低単価の仕事だけを受けているかのどちらかです。
これから独学でwebデザイナーを目指すのであれば、特例は無視してコーディングスキルはまず習得しておきましょう。
習得すべき言語は2つ
具体的にwebデザイナーは下記の2つの言語の習得を目指します。
- html:サイトデザインの基礎を作る言語
- css:デザインを整える言語

上記の2つの言語は、プログラミング初心者でも比較的簡単に習得できる言語なので「難しそう…」と尻込みしなくても大丈夫ですよ!
下記で紹介する「プラグラミング学習サービスを利用+簡単な模写」を行えば独学3ヶ月ほどで習得が可能です。
①progate

スライドを確認しながらhtmlやcssの使い方が学べる、初心者向けのプログラミング学習サービスです。

すでにサービス上で動作環境が作られているので、初心者でも簡単に学習をスタートできますよ。
htmlとcssのコースは基本的に無料で受けられるので、ここはサクッと終わらせて次に進みましょう。
②ドットインストール

初心者から中級者向けのプラグラミング学習サービス。
3分ほどの短い動画を見ながら、htmlとcssの基礎から応用までが学べます。
実際に自分のパソコン上でweb制作を行える環境を作りながら進められるので、先ほどのprogateよりもより実践的です。
こちらも初級レッスンは基本的に無料。必要な方は、月額1000円ほど支払えば全てのレッスンが受講できます。
③簡単なサイトを模写
さらに、上記の2つのサービスを利用してコーディングの基礎を習得できたら、今度は実在するサイトをhtmlとcssを使って模写していきます。

コーディングスキルの習得には、この模写コーディングのステップが必要不可欠です。
なぜなら、プログラミング学習サイトで練習するだけでは実践スキルは身につかないからです。
公開されているwebサイトを模写コーディングすることで、実際の現場で必要な実践スキルを身に着けることができますよ。
プログラミング初心者が模写コーディングをする場合は、以下の2つの条件を満たしているサイトを探せばOKです。
- デザインがシンプル
- アニメーションがほぼ無し
模写コーディングするサイトはPinterestなどのデザインギャラリーで検索しましょう。「”シンプル webサイト”」で検索すれば見つかります。
手順②:デザインツールの使い方を習得
次にデザインツールの使い方を習得します。
webデザイナーが最低限使えるようになっておくデザインツールは下記の2つです。
- Illustrator
- Photoshop
基本的に上記の2つのデザインツールを使いこなせていれば、webデザイナーとして文句を言われることはありません。
ただ、企業によっては他のデザインツール(SkechやXD)を利用している場合もあるので、その場合は実作業と並行して徐々に習得していけばOK。
無理に全てのツールの使い方を覚える必要はありません。
①:Illustrator(イラストレーター)

Illustratorではロゴやバナー、イラストなどを中心に作成が可能です。
②:Photoshop(フォトショップ)

写真の加工や合成を行います。webデザインではフォトショップの利用がメインになります。
手順③:デザインの知識をつける
最後に、デザインの基礎知識も忘れずに身につけておきましょう。
基礎デザイン知識は書籍がおすすめ
ここまではパソコンを使って学習してきましたが、デザイン知識の習得に関しては、書籍での学習がおすすめです。
なぜなら書籍にはデザインの実例が豊富に記載されており、なんども読み返すことでデザインの基礎が体に染み付くからです。
私が5回以上読んでいるwebデザイナーにおすすめの書籍は以下の3冊です。
- なるほどデザイン
- レイアウト、基本の「き」
- ノンデザイナーズ・デザインブック

どれを読めばいいかわからない方は、まずはこの3冊から手にとってみてください!
手順④:実際にwebサイトを公開してみよう!
webデザイナーに必要な知識を習得できれば、最後に実際にwebサイトを作って公開してみましょう。
このステップを行うことで、これまで断片的に習得していたスキルが繋がり、webサイトの公開までを一人で行えるようになりますよ。
webサイトの公開にはドメインやサーバーの知識が必要になりますが、webデザイナーとして仕事をしていく上で今後必ず必要になる道なので、まとめて学習しておきましょう。
webサイトの公開までの流れは以下の記事が参考になります。
»Webサイトの仕組みは?Webページの作成〜公開までの流れ
デザイナーが付加価値をつける方法

ここまでwebデザイナーに最低限必要なスキルの習得について解説してきました。
ただ「もっと良い条件の企業へ就職したい!」「付加価値をつけて今の仕事よりも給与を上げたい!」という方はさらに以下のスキルの習得を目指しましょう。
デザイナーの付加価値になるスキル
- jQuery
- SEO
上記のスキルを身につけているデザイナーは市場価値が高いため、就職を有利に進めることができますよ。

しかし企業で最も重視されるのはやはり実践経験なので、スキルの習得に執着しすぎず「まずは働いてみる。」といった心持ちで進みましょう!
①jQuery
jQueryというライブラリを習得することで、htmlやcssで作成したwebサイトにアニメーションやスライド機能をつけることができるようになります。
動きがあるサイトはクライアントから高単価で受注できるため、jQueryを使えるwebデザイナーはもれなく市場価値が高いです。

htmlやcssと比べると難易度が高いので、独学には根気が必要です!
習得方法はhtml,cssの時と同じく「プログラミング学習サイト+模写」がおすすめです。
例えば、ドットインストールでjQueryの基礎を理解しつつ、デザインギャラリーサイトでスライダーが設置されているサイトを模写していきましょう。
jQueryに関する情報はhtmlやcssに比べて見つけにくいです。その場合はエンジニア版知恵袋であるQiitaをのぞいてみてください。
②SEO
デザイン面だけでなくSEOの知識があるwebデザイナーもまた企業からのニーズは高いです。
なぜなら今は無料でwebサイトが作れる時代なので、ただおしゃれなだけのwebサイトに価値はなく、アクセスが集まる、集客できるwebサイトに価値があるからです。

SEOの知識があり、アクセスを集めるために適切な指摘ができるwebデザイナーは、企業にとってもクライアントにとっても重宝されますよ。
SEOの習得にはブログ運営が最適
webデザイナーがSEOを学ぶ方法は、ブログ運営が最適です。
なぜならブログ運営ではSEOに必要な以下の知識が身に付くからです。
- アクセスが集まるコンテンツの作り方
- キーワードの選び方
- 検索順位が上がる仕組み
少し難しいですが、ブログを運営していけば徐々に理解していくことができます。
webデザイナーの付加価値としてSEOを学びたい方は、ブログの開設から行動してみてください。
webデザイナー就職に向けて動き出す!

webデザイナーに必要なスキルを習得したら、就職に向けて動き出していきます。

webデザイナーとして働くのはまだ先かもしれませんが、事前に就職をイメージしておくことで学習モチベーションを保てるのでぜひ参考にしてみてください。
就職に向けては、具体的に以下の2つのステップを踏みます。
- ポートフォリオを作成する
- 転職エージェントに登録する
ステップ①:ポートフォリオを作成する
webデザイナーはクリエイター職種の中の1つなので、転職にはポートフォリオが必須です。
ただこの時点で実績がない方も多いと思うので、その場合は架空のカフェを元に作った”サンプルサイト”などをいくつか作成し掲載すればOKです。
最近では簡単にポートフォリオが作れるサービスもあるので、積極的に利用しつつ自分だけのポートフォリオを作成しましょう。
デザイナーのポートフォリオに関しての詳細は以下の記事からどうぞ。
ステップ②:転職エージェントに登録する
実際に就職先を見つける時は、複数のエージェントに登録しておくのがおすすめです。
なぜなら、エージェントがは総合型や特化型など複数のカテゴリーに分かれており、それぞれで探せる仕事が異なるからです。
特にwebデザイナーなどのクリエイターに特化した転職エージェントでは、専門性の高いスタッフが相談に乗ってくれるので、必ず登録しておきましょう。
デザイナー向けの転職エージェントは下記の記事で解説しています。
独学が不安な人はオンラインスクールもあり
ちなみに、この時点で「やっぱり独学できるか不安だな」と言う方はオンラインスクールの利用も考えてみましょう。
なぜなら、独学で挫折して「結局webデザイナーになれなかった。」となるくらいなら、お金を払ってでも挫折しない環境を作ることが大切だからです。
実際にオンラインスクールを利用することで以下のような効率的な学習が実現します。
- オンラインなのでどこにいても学習が可能
- プロの講師が具体的にアドバイスをくれる
- 疑問があればすぐに質問できる
- 就職サポートがあって安心
また、おすすめのオンラインプラグラミングスクールは2社で、どちらも10万円台から受講可能です。
- TeckAcademy
:webデザインに特化したコースあり。基礎から応用が139,000円から学べる - CodeCamp
:web制作に必要なスキルをマンツーマンで習得。課題の提出・添削が無制限
webデザイナーとして仕事を受けるようになればすぐに元は取れるので、自分に合ったベストな方法を選ぶようにしてください!
まとめ:未経験から独学でwebデザイナーは可能です。

この記事で紹介した独学でwebデザイナーになる”3つの手順”を実践すれば、未経験からでも独学でwebデザイナーになることができます。最後にもう一度確認しましょう。
独学でwebデザイナーになる手順は下記の3つです。
- コーディングスキルを習得
- デザインツールの使い方を習得
- デザインの知識をつける
ゴールとなる目標は「一人でwebサイトを公開できるようになること」です。
最低限のスキルを身につけ仕事につけば、あとは実戦経験の中でさらにスキルを伸ばしていくことができますよ。
webデザイナーになるために、まずはコーディングスキルの習得から、実際に行動を始めてみましょう!
ちなみに同じwebデザイナーでも「どうせならフリーランスwebデザイナーになりたい!」という方は以下の記事が参考になりますよ。
と、いうわけで本日は以上です。
独学でwebデザイナーになる方法を教えて。未経験だけど大丈夫?具体的な学習手順を知りたいです!