全く未経験の人がゼロからWebデザインを学んで、Webデザイナーとして仕事を得るまでの具体的なステップと方法について書いてみる。
ここでは「独学」を前提で書いているけれど、Webデザインをスクールで学ぶ手段もある。コストはかかるけれどプロから効率よく学べるというメリットがある。
独学かスクールかで迷っている人には、以下で詳しく書いているのでこちらも参考に。
Webデザイナーに必要なスキルと知識
Webデザイナーに必要なスキルについて。
Webデザイン初心者向けに便利なツールや優良な情報は以下にまとめているので、こちらも参考に。
Webデザイナーとして飯を食っていくなら、以下の4つのスキルは抑えておきたい。
- Webデザイン
- HTML/CSS
- WordPress
- jQuery(Javascript)
これらを一通り学びベースにした上で、特定分野の専門性を伸ばしていくのがいい。
デザイン寄りのスペシャリストになりたいなら色彩や配色の理論などを学び実績をつみ、開発サイドのエンジニアを目指すならPHP、Rubyなどのプログラミング言語を、Webマーケターや集客に興味があるなら、Web解析やSEO等のスキルを深めていこう。
以降で上の4つを順に解説していく。
1. Webデザインを独学する
まずはデザインスキルについて。
デザインができなくてもWebデザイナーにはなれる。後述のHTML/CSSを使えるだけでも、いちおう「Webデザイナー」と呼ばれる。
でもデザインはできたらすごく有利。
Webデザインができれば間違いなく有利
「Webデザイン」とは、Photoshop（フォトショップ）やIllustrator（イラストレーター）、Adobe XDなどのグラフィックツールを使ってWebサイトのレイアウトや配色、バナーやボタンなど各種パーツを設計するスキルのこと。
Webデザインが少しでもできると、サイト設計の全体を見渡せる力がつくのでWebデザイナーとしての視野が広がる。
特に独立・フリーランスを目指す人は、確実に仕事の幅が広がるので損することはない。逆にデザインができなければWebサイト制作の依頼を請けても、デザイン部分は外注しなくてはいけなくなる。
なにはともあれ、グラフィックツール（Adobe CC）が必須！
WebデザインにはIllustrator、Photoshopが必須。これからはAdobe XDも使いこなせたほうがいい。これらを全ツールを含んだパッケージ商品をAdobe CC（Adobe Creative Cloud）という。
デザイナーでAdobe CCを知らない人はいない。決して安いツールではないけれど、必須の仕事道具なので、ためらわず投資しよう。
Adobe CCはヒューマンアカデミーの通販で安く手に入れることができる。しかもオンライン講義動画がセットになっているので、初心者の人はPhotoshopやIllustratorの使い方も学べるのでまさに一石二鳥でおすすめ。
Webデザインの独学方法 ー まずは「真似（トレース）をする」ことから
Webデザインの勉強は、他人の作品を真似することから始めよう。
これはもう、デザインを学ぶ人みんながやること。いいデザインをお手本にして、観察＆分析して自分の手で再現する。これをトレースという。
Webデザインスクールでもトレースはカリキュラムに組まれている。それくらい重要。
色彩や配色、レイアウトなどの理論を学ぶことも重要だけれど、お勉強はあとでいいので、とにかくツール（Photoshop/Illustrator）を使って手を動かすことが上達の近道。
例えば、ネットで下のようなデザインをみつけて「こういうの作りたいな！」と思ったら、即コピーしよう。
Photoshopで開いて、デザインの各構成要素の大きさやカラーコードを調べるところから始まって、フォントの種類、マージンのサイズ、余白の配置、背景画像のテイスト、グラデーションやシャドー効果の設定値などまで、一旦全てを細かく分解・分析して、その後、自分の手で全く同じものを作ってみる。
こうしてトレースを何度も繰り返していくと、デザインを見る目が肥えて「なぜそのデザインがいいか」が理解できるようになる。結果、いいデザインを生み出すことができるようになる。
おすすめは「バナー」デザインから
上で解説した「トレース」の練習をするなら、バナーデザインを材料にするのがおすすめ。理由は以下の通り。
- 制作時間が短いので練習が手軽
- プロのテクニックが凝縮されている
- 色んなテイストのデザインを学べる
- バナーデザインができれば、それだけで仕事がある
最初からホームページ1ページを丸々トレースしようとすると、かなりしんどい。時間が掛かってダレて気持ちが折れる。
その点、バナーならサイズはせいぜい300x250px等なので、1つ作るのにそれほど時間はかからない。その上、バナーはデザインスペースこそ小さいけれど、その中にデザイナーのテクニックが凝縮されているので、とてもいいお手本になる。
僕の場合はデザインの勉強を始めて半年間くらいは、実績作りもかねてLancersでバナーデザイン（上図のような）をひたすら作ってコンペに投げていた。
3ヶ月くらいで売れるバナーが作れるようになり、最終的には800個ほどになった。このときの作品実績は今でも大切な財産でポートフォリオにも使っている。
ネット上にはプロが作った洗練されたバナー広告が溢れているので、いいデザインはどんどん真似してテクニックを盗んで自分のスキルにしていくと良い。バナーだと「1日1個トレースする」とかノルマを決めて継続もしやすい。
バナーデザインについて詳しくは以下にもまとめている。
2. HTML/CSSを独学する
HTML/CSSとはWebサイト作るための言語のこと。Webデザイナーになるなら、しっかりとマスターしておこう。
さすがに、これができないとWebデザイナーとは言えない。
HTML/CSSは難しくない！まずは基本を押さえる
HTML/CSSはそれほど難しくないので、短期集中で基本を押さえてしまおう。
HTML/CSSを勉強する方法はいくらでもあって、
などのオンライン学習を利用すれば、今すぐにでも無料で学習を始められる。
HTMLは<div>や<p>といったタグを使ってWebサイトのパーツを構成するもの、CSSは各パーツの配置や色など決めてWebサイトを装飾するためのもの。
HTML/CSSの全てを完璧に暗記する必要はなくて、コアだけはきっちり押さえて、あとは以下のようなリファレンスを随時使いながらWebサイトを作れれば良い。
＞HTMLクイックリファレンス
HTML/CSSを書籍で勉強したいという人は、こちらがおすすめ。完全初心者向け。
次のステップがこちら。
【初心者・未経験者対象】完全無料でプロに教わるオンライン学習＆就職サポート
未経験者・初心者に超おすすめの学習サービスがある。ぜひ利用してほしい。
オンラインスクール大手企業が提供する「TechAcademyキャリア
」では、完全無料で現役のWebデザイナーの指導のもとでHTML/CSSを学ぶことができる。
オンラインや書籍での独学だとどうしても挫折しがちだけれど、このサービスはメンター（講師）がいるので途中で挫折することがない。いつでも講師に質問ができるので疑問もすぐ解決できて効率よくHTML/CSSが習得ができる。（HTML/CSS以外にもPHPも学べる。）
さらにもう一点大きな特長があって、TechAcademyキャリアはWebデザイナーとしての就職・転職支援までしてくれる。Webデザイン未経験者でももちろんOK。
スキルを学ぶと同時にWeb業界のコネクションを作りたい人、就職サポートを受けたい人には利用価値がとても高い。
TechAcademyキャリアで未経験でもWebデザイナーに！
基本を押さえたら自分の手でサイトを作ろう
オンライン学習や書籍でHTML/CSSの基礎を身につけたあとは、実際にWebサイトを作ってみよう。
初心者が学習初期に「自分の手でゼロから実際にサイトを作る」経験をしておくのはとても大事なこと。まずは5ページくらいのWebサイトでいいのでやってみよう。
こちらの書籍を使えば、材料と解説は整っているので便利。
この本は中級者向けなので、これがクリアできればまずはWebデザイナーとしてOK。
エディタはBracketsがイチオシ
HTML/CSSを記述するにはエディタというツールが必要。メモ帳の強化版みたいなイメージ。
エディタも有料・無料色々あってsublimeやAtom、Vimが有名。Adobe CCを購入すればDream Weaverが含まれているのでこれを使っている人も多い。
人によっておすすめも違うのだけれど、初心者ならとりあえずAdobeが無料で提供している「Brackets」で始めればいいと思う。
初めから日本語環境だし無料、シンプルで機能も十分。初心者にやさしいし、なに不自由ない。
3. WordPressを独学する
WordPressはWebサイトを簡単に作れるツールのこと。
今やIT専門外の素人でもWordPressを使ってブログを運営する時代。もちろんブログだけでなく、世界中のウェブサイトの40％はWordPressで作られているという状況にある。
WordPressを触れないWebデザイナーは「時代遅れ」かもしれないが、逆言えばWordPressの仕事はとても多いので、触れるとすごく有利になる。
どれくらいWordPressができればいいのか？
「WordPressでブログを作れます」というのはWordPressができるとは言えない。
HTML/CSSは理解していることは大前提の上で、Webデザイナーが「WordPressできます」というなら、少なくとも
- オリジナルテーマを作れる
- WordPressで企業サイトを作れる
最低限この2つができるレベルにあるべきだろう。
つまり、WordPress仕組みを理解していて
- クライアントの要望に応じてカスタマイズできる
- 不具合が生じたときに解決できる
くらいのレベル。もちろんPHP、MySQLもマスターしているに越したことはないけれど、まずはここを目指そう。
WordPressの勉強方法 ー 仕組みをまず理解しよう
まずは、WordPressってどういう仕組みで動いているの？という本質的な部分をきちんと理解しておくとよい。全体のイメージがしっかりできるとブレない。以下のページが参考になる。
まず最初に学ぶべきWordPressの本質 | hijiriworld Web
初心者だと上の解説は難しいかもしれないけれど、最初は気にせず、勉強を進めていく中で何度か読み返せば自ずと理解できるようになる。
テーマの作り方はこちらが参考になる。
WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス
HTML/CSSの学習と同様、実際に自分でWordPressでWebサイトを作ってみるといい。制作の全体像が把握できて、とても良い練習になる。上述した通り、自分でテーマを作って、ビジネスサイトを制作してみるのがベスト。
いきなりゼロからテーマ作成は難しいので、書籍を使うのも良い。以下がおすすめ。
3. JavaScript（jQuery）の独学
JavaScriptは「Webサイトに動きをつけてくれるもの」。（簡単に言うと）
HTML/CSSを動的に変化させて、例えば、写真をサッとスライドさせたり、パッと飛び出させたり、画面をヌルッとスクロールさせたりといった感じに。
とにかく、このJavaScriptが使いこなせればとても重宝がられることは確実。
とりあえずはjQueryだけでもいい
JavaScriptはプログラミング言語の一つで、使えればとにかく便利で楽しいけれど、HTML/CSSに比べると習得のハードルも高いのが事実。
Webデザイナーでもプログラミングは苦手な人はたくさんいるので、JavaScriptまではきない…という人も多い。そこで、せめて初心者が習得しておきたいのがjQuery。
jQueryはJavaScriptの簡易版で、色んな機能を手軽に実装できるようにしたもの。JavaScriptのコードが書けない人でも簡単に使えてしまう。
jQueryでどんなことができるかは、以下にわかりやすくサンプルがまとめられている。
jQueryの勉強方法 ー ハマったらJavaScriptへステップアップ！
jQueryの勉強も、とにかく手を動かしてどんどん作っていくに限る。
上述の通り、jQueryは色んなアニメーション効果を自分の手で実装できるので、勉強していて楽しいし、ハマっていく人も多いだろう。「もっと深めたいな」と思ったら、ためらいなくJavaScriptへ進もう。
とりあえず一つ書籍を買うといい。下の2つが有名どころ。
Webデザイナーの仕事を得る方法
仕事探しの前に、まずはポートフォリオを作ろう。
Webデザイナーのポートフォリオとは、これまでに自分が制作したWebサイトやバナーなどの作品集のこと。自信作をまとめてWeb上に公開しておくとよい。
ただ、職種や仕事の探し方によってはポートフォリオは不要なこともあるし、初心者がいきなりポートフォリオと言われても難しいかもしれない。ポートフォリオがなくてもWebデザインの仕事に就けないわけではないので、学びながら実績を積んでいけばよい。
Webデザイナーの仕事探し5つの方法
Webデザインの仕事を得る方法を5つ紹介してみる。
- スクールの就職サポートを利用する
- 転職エージェントを利用する
- インハウスデザイナーの求人を狙う
- クラウドソーシング、ココナラで仕事を請ける
- ブログを運営してスキルを売る
以降で一つずつ詳しく解説していこう。
1. Webデザインスクールの就職サポートを利用する
スクールでWebデザインを学ぶ人は、スクールが用意している就職・転職サポートを利用しよう。これを使わない手はない。
IT・WebスクールはたいていWeb業界と繋がっていて、企業がスクールの学生向けに求人案件を回していたり、講師が現役または元Webデザイナーというケースも少なくない。ツテや人脈が期待できる。
完全無料でHTML/CSSを学習＋就職サポート（未経験OK）
上でも紹介したけれど、「TechAcademyキャリア」では、完全無料で現役のWebデザイナーの指導のもとでHTML/CSS、PHPを学ぶことができる。
スクール費用が不要で、就職サポートも受けられるという超良心的なサービス。しかも未経験者・初心者を対象にしているので気軽に利用できる。
「TechAcademyキャリア」の母体はIT・Webのオンラインスクール。業界大手の「TechAcademy」を運営していて教育基盤もしっかりしている。人材養成の実績が豊富なこともあり、IT・Web業界で信頼性が高く人材派遣、転職エージェンとのコネクションも強力なので良質な求人案件がまわってくる。損することは一つもない。
転職サポートが充実しているWebデザインスクール
◆ WebCamp PRO｜転職保証付きプログラミングスクール
WEBCAMP PRO(ウェブキャンプ プロ)は、転職・就職保証型のIT・Webスクール。 「コース受講完了後、3ヶ月以内に転職・就職できない場合は全額返金」が保証されている。
◆ TECH::EXPERT｜未経験のITエンジニア転職なら 
TECH::EXPERT（テックエキスパート）は転職率97％を誇る即戦力エンジニア養成プログラム。こちらも「転職できなければ全額返金」を掲げている。
KENスクールの母体は、ITシステム開発・人材紹介の事業を行うIT企業で、IT・Web業界に強力なコネクションがある。受講生対象の非公開求人も多く、キャリアコンサルタントがコース受講中から相談にのってくれる。卒業生の就職率は83％。
2. IT・Web系の転職エージェントを利用する
IT企業やWeb制作会社、広告代理店などでWebデザイナー・エンジニアの仕事に就きたいなら、転職エージェントを利用するのが最も一般的で無難。
実力が伴えば、大手で条件の良い求人案件にも出会えるだろう。IT・Webの人材は不足の傾向にあるので現時点でやや実力が足りなくとも、エージェントに登録しておけばキャリアコンサルタントがキャリアパスを一緒に考えてくれる。チャンスは巡ってくる。 マッチング（採用）成功すればエージェント側は報酬が得られるので、どんどん案件を紹介してくれる。
IT・Web業界で優良な転職エージェント
IT・Webのクリエイター専門の転職エージェントは多数ある。それぞれ持っている案件も異なるので複数に登録しておくとよい。
レバテックキャリアは、IT・Web専門の転職エージェントで、エンジニア・クリエイターの就職・転職ならとりあえずはここ、というほどの知名度と信頼性の高さ。業界トップクラス4,000件超の求人登録数、非公開求人数も多数。職務経歴書の添削、模擬面談で事前準備も徹底サポートしてくれる。
GeeklyもIT・Web業界専門転職エージェント。大手を中心に非公開求人数は2000以上で独占求人案件も多数ある。転職希望者のスキルや経験、職種経験をもとに多角的に分析して優良なマッチングを提案してくれるのが魅力。
マイナビクリエイターは、Webデザイナー・クリエイター専門エージェント。業界専門のキャリアコンサルタントが転職をサポートしてくれる。会員には無料でポートフォリオ作成サービス「MATCHBOX」も提供している。
◆ WORKPORT
ワークポートは元々はIT・Web業界特化のエージェントで約2000社との取引実績が有る。非公開求人も豊富で、IT・Web系の専門性の高い転職サポートをしてくれる。
上のレバテックキャリアと同運営のフリーランス専門の転職エージェント。将来独立を考えている人は、こちらに登録しておくと良い。条件の良い良質な業務委託案件等を豊富に扱っている。
3. 「インハウスデザイナー」の求人を狙う
Webデザイナーにはインハウスデザイナーという選択肢もある。
インハウスデザイナーとは、他業種の事業主（例えば建築事務所や病院など）に勤めるWeb担当者のこと。中小企業ならたいてい一人。
「全てが自分の責任」という緊張感と貴重な経験が得られる
僕もインハウスデザイナーを2年経験した。
インハウスデザイナーのメリットはWeb周りを全て一人で担当できること。デザイン、Web開発、サーバー保守、SEO、マーケティング全てを担当し責任を負う。周りは専門外の人ばかりなので、当然助けてくれる人はいない。
Web周りの全責任を自分一人で負う緊張感は大きかったけれど、得られた自信も大きかったので良い経験だった。フリーランスを目指す人にはおすすめの選択肢。
仕事探しは一般的な求人サイトで
インハウスデザイナーの求人は、転職エージェント経由より一般的な求人サイトで地域の求人案件を探すといい。ハローワークでもある。
また、企業やブランドの自社サイトでWebデザイナーの求人を掲載していることもあるのでチェックしてみると良い。
最後に一点、インハウスデザイナーのデメリット。給与が安い。Webデザイナーは専門職という認識がなく、一般的な事務職やパートと同じレベルで給与設定されていることが多い。
4. クラウドソーシングやココナラで仕事を請け負う
クラウドソーシング大手のCrowdWorks（クラウドワークス） などでは、Webサイトやバナーデザイン制作の案件が毎日掲載されていて、誰でも応募できる。
クラウドソーシングの案件は単価が安いので、これだけで生計は立てることは難しいけれど、初心者デザイナーがとにかく実践をこなすにはいい練習場になる。下積み、または副業という位置付けで考えれば、利用価値はとても高い。
僕自身もスクールに通いながらアウプットの場として、半年間Lancers（ランサーズ）を使い実務経験をつんでいた。初めて自分のデザインが売れたときは嬉しかったし、この頃に作ったWebサイトやバナー作品は今でもポートフォリオに掲載している。
同様に、自分のスキルが売れる「ココナラ」というサービスもあるので、こちらを利用しても良いだろう。
5. ブログを運営してスキルを売る
ブログを通して自分のスキルを売るという選択肢もある。
Webデザイナーとしてセルフブランディングを行い、日々ブログでデザインに関する情報を発信することによってファンを集め、デザインカスタマイズ等の依頼を募集したりする。
ただ、この手段は短期間で成果を出すのは難しい。いきなり初心者がはじめても誰も依頼しないし、ネット上で露出してある程度認知度が高まるまではかなり時間もかかる。
趣味または、自分のアウトプットの場という位置付けでブログを継続的に更新して信頼を積んでいけば、徐々にデザインやWebサイト制作の依頼も増えてくる可能性はある。