Webデザインの独学！36歳でWebデザイナーになった僕のWebデザイン独学論

色々と諸事情があり、僕は36歳という異例の遅さでWebデザイナーを目指しました。しかも、いきなりフリーランスを。

横浜のとあるWebデザインスクールの無料カウンセリングに行き、「36歳未経験だけど今すぐフリーランスになりたい！」と言い放ったときのカウンセラーの唖然とした顔を今でも覚えています。

あの日から数年経った今、そんな無謀だった僕も公言通りWebデザイナーで個人事業を営むまでになりました。

そんな稀有な道を辿った僕が、自ら実践した「Webデザインの独学の学習ステップ」を解説していきたいと思います。

30代後半でもWebデザイナーなれるよ！でも、良い子はマネしないで。

ウェブデザイナーに必要なスキルと知識

まずは、Webデザイナーになるために必要なスキルについてです。

一人でWebサイトを作れるようになるための4つのスキル

まずは以下のスキルの習得を目指しましょう。

各スキルの独学の順番

各スキルについてもう少し詳しくコメントすると、以下のような感じでしょうか。

学習の順番としては、③④は②の知識を必要とするので、②が先でその後に③または④です。①は②③④と切り分けられるので、どのタイミングでもいいです。

1つずつ完璧にしてから次に進む必要はないです（というか、完璧は無理です）。とりあえずは、「なんとか一人で全部できる」レベルを目指すのがいいですよ。

「一人でホームページ作れます！」と胸はって言えればかっこいいですよね。

中級者以上は専門性を深めよう

上の4つをマスターした上で、その先は自分が何をしたいかによって特定のスキルを伸ばしていくのがいいです。

と言った具合に、深掘りをしていくといいです。

以降で、Webデザイナーの基本となる上の4スキルの独学法について解説していきましょう。

① Webデザインスキル（Photoshop/Illustrator/XD）を独学する

ここから先はより具体的に解説していきます。

まずは、Webデザインスキルについて。個人的には、独学で一番難しいのがここだと思っています。

Webデザインスキルとは、Photoshop（フォトショップ）やIllustrator（イラストレーター）、Adobe XDなどのグラフィックツールを使ってWebサイトのUX/UI（レイアウトや配色、バナーやボタンなど各種パーツ）を設計する技術のことです。

Webデザインができれば楽しい＆間違いなく有利！

デザイン設計は目に見える作業なので、単純にいって「楽しい」です。自分で色んなテイストのデザインを作れるようになってくると、ハマります。

また、デザイン設計ができると、デザイン単品の仕事も請けられるのですごく有利です。特に独立・フリーランスを目指す人は、確実に仕事の幅が広がるので絶対損することはないでしょう。

逆にデザインができなければ、Webサイト制作の依頼を請けてもデザイン設計の部分は外注することになります。

まずは仕事道具「Adobe CC（Creative Cloud）」をゲット

WebデザインにはIllustrator、Photoshopが必須です。これからはAdobe XDも使いこなせたほうがいいでしょうね。これら全ツールを含んだパッケージ商品をAdobe CC（Adobe Creative Cloud）といいます。

デザイナーでAdobe CCを知らない人はいないです。年間数万円する決して安いツールではないですが、仕事道具なのでためらわず投資して下さい。

Adobe CCはヒューマンアカデミーの通販でライセンスを安く購入できます。しかもオンライン講義動画がセットになっていて、初心者の人はPhotoshopやIllustratorの使い方を通信講座で学べるので一石二鳥です。

アドビCC+通信講座 割引キャンペーン

Webデザインの独学方法 ー まずは「真似（トレース）をする」ことから

Webデザインの勉強は、他人の作品を真似することから始めます。これが上達の近道。

これはもう、デザインを学ぶ人全員が通る道。いいデザインをお手本にして、観察＆分析して自分の手で再現する。これをトレースといいます。

Webデザインスクールでもトレースはカリキュラムに組まれています。それくらい定石かつ重要。

色彩や配色、レイアウトなどの基礎理論を知ることも必要ですが、なにはともあれ、とにかくツールを使って自分の手でデザインを生み出すことが最も大事。

例えば、ネットで下のようなデザインをみつけて「お、いいな。こういうの作りたいな！」と思ったら、

即、右クリックで画像をコピーしてPhotoshopで開きます。そして分析をはじめます。

各構成要素の大きさやカラーコードを調べるところから始まって、フォントの種類、マージンのサイズ、余白の配置、背景画像のテイスト、グラデーションやシャドー効果の設定値まで細かく分解・分析します。

その後、そのオリジナル画像を下敷きにして、全く同じパーツを作って同じ場所に配置していきます。これがトレースという作業です。

こうしてトレースを何度も繰り返していくうちに、自然とツールを使いこなせるようなってスキルアップします。同時に、デザインを見る目が肥えていきます。「なぜそのデザインがいいか／悪いか」が理解できるようになり、言葉できちんと説明できるようになります。（←これすごく大事です）

結果、いいデザインを生み出すことができるようになります。

おすすめは「バナー」デザインから

トレースの練習をするなら、バナーデザインを材料にするのがおすすめです。理由は以下の通り。

最初からホームページ1ページを丸々トレースしようとすると、かなりしんどいです。時間がかかるので気持ちが折れます。

その点、バナーならサイズはせいぜい300x250px等なので、1つ作るのにそれほど時間はかからないです。その上、バナーはデザインスペースこそ小さいですが、その中にデザイナーのテクニックが凝縮されているので、とてもいいお手本になります。

僕の場合は、デザインの勉強を始めて半年間くらいは、実績作りもかねてLancersでバナーデザイン（上図のような）をひたすら作ってコンペに投げていました。

3ヶ月くらいで売れるバナーが作れるようになり、最終的には800個ほどの作品をつくりました。このときの実績は今でもポートフォリオに使っているくらい大切な財産です。

ネット上にはプロが作った洗練されたバナー広告が溢れているので、いいデザインはどんどん真似してテクニックを盗んで自分のスキルにしていくと良いです。バナーだと「1日1個トレースする」とかノルマを決めて継続もしやすいですし、おすすめです。

② HTML/CSSを独学する

HTML/CSSとはWebサイト作るための記述言語のことです。さすがに、これができないとWebデザイナーとは呼べないです。しっかりとマスターしておきましょう。

HTML/CSSは難しくない！まずは基本を押さえる

HTMLは<div>や<p>といったタグを使ってパーツを配置してWebサイトの構造を作る言語で、CSSは各パーツの配置や色など決めてWebサイトを装飾するための言語です。

いま右クリックして「ページのソースを表示」を選択すれば、このページのHTMLが表示されます。

HTML/CSSの学習はそれほど難しくないので、短期集中で基本を押さえてしまいましょう。HTML/CSSを勉強する方法はいくらでもあって、

などのオンライン学習を利用すれば、今すぐにでも無料で学習を始められます。

HTML／CSS入門書で独学もおすすめ

HTML/CSSを書籍で勉強したいという人は、入門書を1つ買って独学するのもいいです。こちらがおすすめ。完全初心者向け。

そして、次のステップがこちら。

HTML/CSSのタグやプロパティを全て完璧に暗記する必要はなくて、コアだけはきっちり押さえて、あとは『HTMLクイックリファレンス』のようなオンラインリファレンスを辞書的に使いながら、Webサイトを作れるようになれば良いです。

HTML/CSSを完全無料でプロに教わる手段もある！しかも就職サポート付き

未経験者・初心者におすすめのHTML/CSS学習サービスがあります。

オンラインスクール大手企業が提供する『TechAcademyキャリア』では、完全無料で現役のWebデザイナーの指導のもとでHTML/CSSを学ぶことができます。

このサービスはメンター（講師）がついているので、疑問もすぐ解決できて効率よくHTML/CSSが習得ができます。独学だとどうしても挫折してしまうという人は、完全無料なので利用してもいいでしょう。（HTML/CSS以外にもPHPも学べる。）

さらにもう一点メリット。TechAcademyキャリアはWebデザイナーとしての就職・転職支援までしてくれる。Webデザイン未経験者でももちろんOK。

スキルを学ぶと同時にWeb業界のコネクションを作りたい人、就職サポートを受けたい人には利用価値がとても高い良心的なサービスです。

【完全無料】TechAcademyキャリア

TechAcademyキャリアで未経験でもWebデザイナーに！

基本を押さえたら自分の手でWebサイトを作ろう

オンライン学習や書籍でHTML/CSSの基礎を身につけたあとは、実際にWebサイトを作ってみよう。

初心者が学習初期に「自分の手でゼロから実際にサイトを作る」経験をしておくのはとても大事なこと。まずは5ページくらいのWebサイトでいいのでやってみよう。

こちらの書籍を使えば、材料と解説は整っているので便利。

この本は中級者向けなので、これがクリアできればまずはWebデザイナーとしてOKです。

エディタはBracketsがイチオシ

HTML/CSSを記述するにはエディタというツールが必要です。メモ帳の強化版みたいなイメージ。

エディタも有料・無料色々あってSublime TextやAtom、Vimが有名。また、Adobe CCを購入すればDream Weaverが含まれているのでこれを使っている人も多い。

人によっておすすめも違うのだけれど、初心者ならとりあえずAdobeが無料で提供している『Brackets』で始めればいいと思います。初めから日本語環境だし無料、シンプルで機能も十分。初心者にやさしいし、なに不自由ないです。

③ WordPressを独学する

WordPressはWebサイトを簡単に作れるツールのこと。

今やIT専門外の素人でもWordPressを使ってブログやWebメディアを運営する時代です。世界中のウェブサイトの40％はWordPressで作られているという状況です。

WordPressを触れないWebデザイナーは「時代遅れ」と言われても仕方ないです。逆に言えばWordPressの仕事はとても多いので、できるとすごく有利です。

どれくらいWordPressができればいいのか？

WordPressは普及しすぎて、個人ブログを運営しているなら誰でも「WordPressができる」と言えてしまいます。でも、Webデザイナーとしては「WordPressができる＝WordPressでブログが作れる」ではダメです。

じゃどういうレベルのWordPressスキルが必要かというと、（HTML/CSSは理解していることは大前提の上で）少なくとも

最低限この2つができるレベルにあるべきでしょう。

つまり、WordPressの仕組みを理解していて、

くらいの専門レベル。もちろんPHP、MySQLもマスターしているに越したことはないですが、ひとまずはここを目指しましょう。

WordPressの勉強方法 ー 仕組みを理解しよう

まずは、WordPressってどういう仕組みで動いているの？という本質的な部分をきちんと理解しておくといいですね。全体のイメージがしっかりできていればブレないです。このページ『まず最初に学ぶべきWordPressの本質』なんかが参考になるでしょう。

初心者だと上記ページの内容は難しいかもしれないけれど、最初は気にせず、勉強を進めていく中で何度か読み返せば自ずと理解できるレベルになっていきます。

また、WordPressのテーマの作り方はこちら『WordPress オリジナルテーマの作り方 3.0+』が参考になります。

HTML/CSSの学習と同じで、実際にWordPressを使って自分でWebサイトを作ってみるといいです。Web制作の全体像が把握できて、とても良い練習になります。

そうはいっても、いきなりゼロからテーマ自作は難しいので、書籍を使うのも良いでしょう。以下がおすすめ。

④ JavaScript（jQuery）の独学

JavaScriptは「Webサイトに動きをつけてくれるもの」です（簡単に言うと）。プログラミング言語の一つです。

JavaScriptを使えばHTML/CSSを動的に変化させて、例えば、写真をサッとスライドさせたり、パッと飛び出させたり、画面をヌルッとスクロールさせたりといった感じのことができます。

とにかく、このJavaScriptが使いこなせればとても重宝がられることは確実です。

とりあえずはjQueryだけでもいい

JavaScriptは使いこなせればとにかく便利で楽しくて、仕事もたくさんありますが、HTML/CSSに比べると習得のハードルも高いのも事実です。Webデザイナーでもプログラミングが苦手な人はたくさんいるので、JavaScriptまではきない…という人も多いです。

そこで、せめて初心者が習得しておきたいのがjQueryです。jQueryはJavaScriptの簡易版で、色んな機能を手軽に実装できるようにしたもの。JavaScriptのコードが書けない人でも簡単に使えてしまいます。

jQueryでどんなことができるかは、以下にわかりやすくサンプルがまとめられているのでのぞいて見てください。

jQueryの勉強方法 ー ハマったらJavaScriptへステップアップ！

jQueryの勉強も、とにかく手を動かしてどんどん作っていくに限ります。

上述の通り、jQueryは色んなアニメーション効果を自分の手で実装できるので、勉強していて楽しいしハマっていく人も多いでしょう。「もっと深めたいな」と思ったら、ためらいなくJavaScriptへ進んでください。

とりあえずjQueryの書籍を1つ買って勉強するのもいいです。下の2つが有名どころです。

Webデザインを習うならスクールか？独学か？

ここでは、Webデザインの独学法について書いてきましたが、スクール・専門学校で学ぶという手段もあります。

僕は両方の経験者です。未経験から4ヶ月間はスクールに行きながら、家ではひたすら独学していました。よく「独学がいいか、スクールがいいか」という議論がされますので、これについて意見を書いておきます。

結論 ⇒ 独学は必須！スクールは予算次第

結論はもうこれで決定です。

独学は必須です。異論なし。

じゃぁスクールは！？

「スクールなんて高いだけ！意味ない！」という方もいますが、実際スクールに通った僕からすると「使い方によってはスクールはすごく有益になりますよ」といいたいですね。

独学は初期が地獄…でも実は

独学は教材探しから学習はもちろん、モチベーション維持まで全て自分次第です。

Webデザイン未経験の人間が実際これをやるのは本当に辛いです。僕も初めの3ヶ月〜半年は苦しかったですね。

まず、Webデザインに関する情報や知見をネットで探すところから始まりますよね。でも知識が足りないから、その情報が本当に最新で正しい情報か判断できないんです。書籍についても同じ、どれがいいか本なのか自分にあっているか自分で判断できない。

これで、すごく時間を浪費しました。
独学の初期はとにかく学習の効率が悪い。これが独学のデメリットです。スクールなら講師が軌道修正してくれますから。

でも、のちのち気づくのですが、「初期にのたうち回った苦い経験」が成長の糧になります。試行錯誤がスキルに繋がります。

Webデザインスクールで学ぶメリットとコツ

一方、スクールはカリキュラムがあり講師がつくので効率良くWebデザインの基礎が学べます。

独学初期の苦しみは味わう必要ありません。受け身体質の人でも挫折せず基本スキルが身につくでしょう。

スクールを利用するコツは、この2つです。

例えば半年間、週2、3日程度で一回1時間のレッスンをダラダラやっててもダメです。初めの3ヶ月はガッツリ集中して、キャパオーバーになるくらい詰め込んだ方がいいです。

そして、せっかく講師がいるので使える限り使い倒しましょう。スキル面はもちろんですが、それ以外にも、Web業界の話とか仕事・就職の話を聞いてみると、意外なところでコネクションができたりしますよ。これがスクールのメリット。

スクールの落とし穴

ただし、「スクールが全て教えてくれるから任せておけばいいや」という姿勢は絶対ダメです。

よくWebデザインスクールのネット広告で、

なんて記載がありますが、これ、信じちゃダメですよ。ある意味、お約束のセールスコピーですから。

現役のWebデザイナーさん全員から総ツッコミはいります。「なれるわけねーだろ」って。

上でも述べましたが、独学は絶対やりましょう。というか、ずっと勉強勉強です。Webの技術はどんどん進化していきます。

僕の意見ですが、最初のスタート地点で僕のように急いでいるなら、初期投資をしてスクール（良質な）で効率よく基礎を固めてもいいと思います。