塚原 藍子全くの素人だけどWebデザイナーになりたい！どうすればなれるんだろう？
satoshi確かに。webデザイナーになるために独学でwebデザインを学ぼうと思っても、「何をどう勉強すればいいかわからない！」ってなりますよね。
この記事を読めば、「無駄なく、必要なものだけ、適切な順番で」webデザインの勉強ができます。彼と同じステップで勉強すれば、たった3か月でwebデザイナーになることが可能です。
完全未経験の人が三か月の独学でwebデザイナーになった体験談！
webデザイナーになるには、「そもそもどんなスキルがあれば良いの？」という疑問が生まれると思います。
それはズバリ「下手でもいいからwebサイトをひと通り作れるスキル」です。
デザインだけがwebデザイナーではない
よくある間違いは「めちゃくちゃおしゃれなデザイン」をできるようになろうとして、デザインばかりを勉強してしまうことです。
たしかにデザイン力はないよりあった方が良いですが、webデザイナーとしてまず就職することが目標なら、遠回りになってしまいます。
なぜなら、webデザイナーはデザインすることだけが仕事ではないからです。もちろん、会社によっては、「webデザインの流れを理解していなくても、デザインがめっちゃできるなら、その人が欲しい」というところもあります。ですが、それはかなり稀です。
なので、まずは「下手でもいいからwebサイトをひと通り作れるスキル」を習得することをゴールにしてください。
未経験者が習得すべき必須スキル３つ
具体的には、面接を受ける前に以下の3つは習得する必要があります。
- ①コーディングスキル
- ②デザインツールのスキル（使い方）
- ③デザインの知識・スキル
webデザイナーになる為の勉強手順とその流れ
では、ここからは具体的に未経験から3か月でwebデザイナーになった男の勉強方法を紹介していきます。
勉強する順番は以下の通りです。
- Step1.コーディング
- Step2.デザインツール
- Step3.デザイン
Step1.コーディング（参考書、オンライン学習ツール、模写）
「初めはデザインじゃないの？」と思ったかもしれませんが、最初にやるのはコーディングがおすすめです。
というのも、コーディングを初めにやると、「webサイトではどんなデザインができるか知れる」「webデザイナーとしての適性を見極められる」という２つの理由があるから。
特に、「webデザイナーとしての適性を見極められる」というのは重要で、コーディングが苦手で挫折してしまう人もいるんです。
また、デザインの勉強をするときにPhotoshop（フォトショップ）などのデザインツールを購入する必要もあるので、事前に適性を見極められると無駄なお金を払わずに勉強できるというメリットがあります。
webデザイナーの基本スキルとなるので、コーディングはしっかりと身につけておきましょう♪
コーディングの勉強方法
「コーディングというのは、具体的にどういうものなの？」と疑問に思った人もいるでしょう。
webデザイナーが担当するコーディングというのは、HTMLとCSSの２つがメインです。
HTMLとは、サイトの文章を記入したり、画像を挿入したり、リンクを貼ったり、webサイトの骨格を作るための言語です。
CSSは、HTMLで作ったコンテンツの色や形、向き、余白などを装飾する言語です。
言葉で説明されてもイメージできないと思いますので、今の時点で理解できなくても大丈夫です。学びながら理解できるようになるので。
HTMLとCSSの勉強法は、以下の手順で進めるのがおすすめです。
- 参考書とオンライン学習ツールで知識とスキルを高める
- webサイトを3～5つくらい模写する
参考書とオンライン学習ツールで知識とスキルを高め、最後に模写（今あるサイトを参考に、見た目通りにコーディングする）をやれば、働けるレベルまで上達できます。
最近は特にわかりやすい書籍や学習ツールがあるので、安心して始めてください。
HTMLとCSSの勉強におすすめの本
初心者がHTMLとCSSを勉強するときに本を使う場合は、「作りながら学べる」「基礎の基礎から学べる」ものを選ぶのがおすすめです。
以下の３つのうち1冊でも最後までやれば、基本的な知識とスキルは身につきます。
スラスラわかるHTML&CSSの基本
HTML、CSSの基礎中の基礎から学べる1冊です。
「HTML、CSSってなんやねん？」というレベルの人も勉強しやすい内容になっていますが、実際にカフェのサイトを作りながら学べるので、終わった時にはひと通りコーディングができるレベルになれます。
カラーページで作られているので、飽きずに勉強できますよ。
作りながら学ぶHTML/CSSデザインの教科書
1つのwebサイトを作り上げるのに必要な知識を網羅的に解説している1冊。
基礎から学べるだけでなく、現場で実際に使われているテクニックまで学べる内容になっています。
「なんでこのコードを使うの？」という部分まで知れるため、論理的に考える人におすすめです。
HTML5&CSS3標準デザイン講座
こちらも手を動かしながら学べる参考書です。
猫のサイトを作りながら学ぶのですが、説明がかなりわかりやすいです。
「なぜこのコーディングをするのか？」ということをしっかり理解できるので、自分でサイトを作る際にかなり役立ちます。
また、タグについても１つ１つ説明がついているので、いちいちネットで検索する必要がないのも便利です。
HTML＆CSSを学べるオンライン学習ツール
オンライン学習ツールは、実際に自分の手でコードを書きながら学べるので、効率的にスキルが身につきます。
「progate」「ドットインストール」のHTMLとCSSをやれば、本で学んだ内容をさらにブラッシュアップできるのでおすすめです。
もちろん、本より先にオンライン学習ツールからはじめてもOK！
progate（プロゲート）
progateは、必要な知識を簡潔に教えてくれるだけでなく、知識を学んですぐにコーディングできる学習ツールです。
1項目の解説が終わったら、すぐに学んだことをコードで書ける仕様になっていて、インプット→アウトプットを効率的に行えるので身につく速度が段違いです。
また、「どのコーディングが間違っているか」も教えてくれるので、「自分ができていないのはこれか！」とその場で気づかせてくれるのも学習効率が良いですね。
もちろん、同じレッスンを何度も受けられるので、身につくまで学習できます。
また、無料で始められるので初心者も勉強が始めやすいです。
勉強を進めていくと有料コースに変更する必要がありますが、月額1,000円以下なのも嬉しいところ。
HTMLとCSSのほかにも、webサイトに動きをつける「jQuery」「JavaScript」なんかも学べるので、とりあえず無料登録しておいて損はありません。
ドットインストール
ドットインストールは、HTMLやCSSなどを実際にコーディングしながらわかりやすく解説してくれる動画です。
コーディングのやり方を優しく教えてくれるだけでなく、プロのコーディングの入力画面を動画で見れるので、効率的にコーディングする方法まで盗めちゃいます（ショートカットキーの解説はないですが、どんな効率的なコーディング方法があるか学べます）。
動画1つが3分に短くまとめてあるので勉強しやすいですし、「これなんだっけ？」と忘れてしまった項目の復習にも便利♪
もちろん全て無料です。
テキストエディタをダウンロードしておこう！
コーディングを勉強するには、「テキストエディタ」というコードを書くツールが必要です。
テキストエディタは様々なツールがありますが、「Visual Studio Code（ヴィジュアルスタジオコード）」か「SUBLIME TEXT（サブライムテキスト）」、「ATOM（アトム）」が高機能で人気です。
無料なので、コーディングの勉強を始める際はダウンロードしておきましょう！
好きなものを使えばOKですが、日本語対応をしているのはVisual Studio Codeのみです。
Mac、Windowsのどちらにも対応しています。
Step2.デザインツール（Photoshopの使い方）
コーディングがひと通りできるようになったら、次は「デザインツール」の勉強を始めましょう！
デザインツールはとりあえず「Photoshop」だけでOKです。
というのも、Photoshopさえ使えればwebデザインができてしまうから。
実務では「illustrator」を使う機会もありますが、photoshopのほうが使う比率は高いですし、デザインツールにPhotoshopを採用している企業が圧倒的に多いです。
なので、初めはPhotoshopの使い方を学びましょう！
ただ、Photoshopには覚えきれないくらいたくさんの機能があるのですが、それらの機能をすべて使えるようにする必要はありません。
実は、webデザインで使うPhotoshopの機能は6つ限られているんです。
- 選択範囲と画像の操作
- レイヤー
- ブラシ・シェイプ・グラデーション
- テキストツール
- マスク
- 色調補正とレタッチ
この６つの機能が使えればwebデザインは大体できちゃうので、項目を絞って効率的に勉強しましょう！
正直、Photoshopの参考書を買う必要はありません。
ネットで検索すれば情報はヒットしますし、動画でわかりやすく解説しているもので十分だからです。
Adobe（アドビ）社が提供する「Photoshopチュートリアル」だけでも、使い方を十分マスターできるでしょう。
「Photoshopを体系的に学びたい！」という方は、「Udemy」というオンライン学習サービスで学べます。
あとは「使っていれば自然にできるようになる」というのが正直なところ。
ちなみに、Photoshopのショートカットキーを使えると、効率的に早くデザインできるようになるのでおすすめです。
photoshopは月額2,500円～（年間契約）使えるので、コーディングの勉強が終わったら購入してみましょう！
Step3.デザイン（本、プロのデザインを見る、実際に作る）
デザインの勉強の流れですが、以下の順序で勉強すると効率的です。
- ①基礎知識を得る
- ②プロの作ったサイトを見る
- ③自分で作る
なぜこの順序が効率的かというと、デザインには絶対的な正解がないためです。
基礎知識を勉強するだけでも上手くなりませんし、オリジナルの方法でデザインしても良いデザインにはならないんです。
そのため、デザイン全体の基礎を学び、プロの作ったサイトで「なぜこのデザインなのか？」を学び、実際に自分で作ってスキルアップするという手順しかありません。
「なんとなく難しそう…」と感じたかもしれませんが、大丈夫。
やっぱりデザインの勉強は楽しいですよ。
デザインの基礎知識を得るのにおすすめの本
デザインの基礎知識は、本から学びましょう！
写真でていねいに解説されていて、体系的に教えてもらえる以下の3冊がおすすめです。
ノンデザイナーズ・デザインブック
ノンデザイナーズ・デザインブックは、webデザイン専用の本ではありませんが、すべてに共通するレイアウトデザインの基礎中の基礎である「デザインの4原則」について教えてくれます。
「デザインの4原則」を守っていれば、「素人っぽいなぁ…」というデザインから脱却できます。
ほとんどのwebデザイナーは読んでいると思うので、「デザインの勉強をしよう！」と思ったら初めに読んでほしいです！
なるほどデザイン
なるほどデザインもwebデザイン専門の本ではありませんが、「目的に合わせたデザインの考え方」が身につく本なので、ぜひ読んでほしい一冊です。
デザインを考えていると、たぶん多くの人が「どういうデザインにすればいいんだろう？」と手が止まるか、「なんとなくでデザインして目的を達成できないデザイン」をしてしまいます。
原因は「デザインの考え方」がわかっていないからです。
「なんでここにこの要素を配置したの？」「なんでこの色なの？」「なんでこの文字の大きさなの？」という部分を、webサイトの目的に沿って論理的にデザインできないと、良いデザインは生まれません。
そして「なるほどデザイン」には、「デザインの考え方」から「デザインをつくる流れ」、「デザインを良くするためのポイント」などが書かれているので、初心者がぶつかる壁を解決することができます。
この1冊だけでも、webデザインにおける理論をマスターできると思うので、読んでみてくださいね。
ほんとに使えるユーザビリティ-より良いデザインへのシンプルなアプローチ-
こちらは、「UI（ユーザーインターフェイス）」というwebデザインの機能的な使いやすさについて書かれた本です。
UIについて知れば、デザインするときに「こっちのほうがユーザーは使いやすいし、理解できるだろう！」「こうすればユーザーが迷いにくい！」という機能面の判断ができるので、初めのうちから知っておくのがおすすめです。
UIと聞くと難しく聞こえるかもしれませんが、この本では身近にあるモノやサービス、もちろんwebサイトを引き合いに出して、「これはこうだから使いにくい」「ユーザーはこうやってwebサイトを使いたい」ということをユーモアたっぷりにわかりやすく紹介してくれているので、安心してくださいね！
ユーモアが多くて少し疲れますが、内容はわかりやすく、役に立ちます。
プロの作ったデザインを見て学ぼう！
デザインの知識がある程度ついた時点で、次は「プロが作ったデザインを見て学ぶ」ステップに移行しましょう！
なぜプロのデザインを見たほうが良いかというと、正解に近いデザインを学ぶことができるからです。
採用されているデザインは、企業の目的を叶えるためにプロが時間をかけて作ったものなので、学べることは本より多いと思います。
実際にプロのデザインを見て学ぶのは、「なぜこのデザインは良いデザインなのか？」を考えられたり、「こんなデザイン方法があるのか！」と新しい発見ができるので、webデザインの勉強に最適です。
主に学ぶ方法は以下になります。
- デザインギャラリーサイトで良いサイトを見つけて研究する
- そのサイトをトレースしてみる
ただ見るのではなく、ヘッダーや見出しのデザイン、文字のサイズ、色の使い方、フォントの種類、レイアウト、写真の使い方など、プロが作ったデザインのすべてを盗む気持ちで見ると良い勉強になりますよ。
あとは盗んだデザインを自分のデザインに反映させれば、プロっぽいデザインが完成します。
また、Photoshopを使って、実際のデザインをトレース（模写）するのも、おすすめの勉強法です。
自分でwebサイトをデザインしよう！
ここまで来たら、あとは自分で架空のサイトをデザインしていくだけです。
デザインからコーディングまでひと通りやってみましょう！
作るサイトは架空のものなので、テーマはなんでもいいです。
- 結果にコミットする整骨院のサイト
- 海外の野菜を日本で栽培する農家のサイト
- 不老不死になれる薬のサイト
楽しく作っていきましょう。ただ１つポイントがあります。
それは「目的を達成できるwebサイトにすること」です。
というのも、webサイトを作る個人や会社には、webサイトを作る理由があるから。
集客、販売、ブランディングなど、目的を達成するための手段としてwebサイトを作るんです。
なので、架空のサイトを作る際も目的を1つ決めて、それを達成できるようにデザインするのがコツです。
ここまでやってきたことを反映させれば、絶対にできます。
そして、ここで作ったwebサイトは、就職面接のときに採用担当者にアピールできる作品となるので、本気で作りましょう！
できれば２つか３つくらいコーディングまでやったサイトを作れると良いですね。
まとめ：チャレンジしてみよう
今回は、Webデザイナーになる為に独学で学習する方法をご紹介しました。
独学も良いですが、専門のオンラインスクールがあるので、学べる環境に飛び込む事でも学習速度が上がります。
Webデザイナーとしてスキルが身に付けば月収50万以上も狙えるようになります。
是非チャレンジしてみてください。
それでは。
