【初心者向け】Webデザインの独学って何からやる？【徹底解説】
#本記事はプロモーションを含みます。
あなた
「Webデザインを独学で勉強したいけど、何から始めればいいんだろう？一番いい方法を知りたいな。」
そんな疑問を、この記事で全て解決します。
この記事で分かること
- Webデザイン独学の最短ルート
- Webデザインに必要なスキル
- Webデザイン独学の注意点
- Webデザイン独学のQ&A
目次
Webデザインの独学って何からやればいいの？
Webデザインに必要なスキルは、この3つです。
- HTML/CSS（必須）
- JavaScript（できると強い）
- PhotoshopとIllustrator（必須）
それぞれの役割はこんな感じ。
HTML/CSSって何？
-> Webページを作るために使うのがHTML、そして、そのWebページをキレイに装飾するために使うのがCSS。
JavaScriptって何？
-> ChromeやSafariといったWebブラウザ上で動くプログラミング。Webサイトに動きをつけたりするために使う。
Photoshopって何？
-> プロも使用する画像編集ソフト。精度の高い写真の編集などができる。
Illustratorって何？
-> イラストや、こだわりの文字デザインなどを作成できるソフト。
そして、この3つの基礎スキルを一気に独学する方法は、この2つの無料オンライン講座をこなすだけ。
この2つの講座だけで、全ての知識とスキルが完璧に身につくわけではありません。でも、基礎が身につきます。
すなわち、今後Webデザインの勉強を重ねていく中で、何を言っているのか分からない！なんてことが無くなります。他の初心者の人よりも確実に一歩リード。
あなた
「Webデザインの独学って何からやればいいの？」
そんなあなたの疑問の最強の答えであること間違いなし。一つずつ深掘りします。
ステップ1：無料のWeb系スキル基礎講座
あなた
「そもそもWebサイトってどういう仕組み？HTML/CSSって何？JavaScriptって何？」
というあなた、どうかご安心を。無料のWeb系スキル基礎講座は、こんな流れで勉強します。
- Webサイトの仕組み
- HTMLとは
- CSSとは
- JavaScriptとは
- …
ちゃんと一つずつ理解していくので、まずは無料の講座で基礎知識と基礎スキルを獲得しちゃいましょう。しかも無料で。さらにメンター付き。
メンターって何？
-> 分からないことを気軽に聞ける人。挫折しないサポートをしてくれます。
もし途中で分からないことがあっても、メンターに聞いて音速で解決。他の人が挫折してる間にリードしちゃいましょう。
こういうオンライン講座って大体10万円以上するんですけど、この無料講座は今だけ無料（本記事執筆時点）。やっとかないと損です。
もちろん初心者でも本で独学してオッケー。でも、こんな状況になる人が多いんです。
- 独学のために本を読み進める
- 分からなくなる
- テンション下がって挫折
せっかくWebデザインの独学を始めたのに、ちょっと分からなかったという理由で挫折してしまうのは、あまりにもったいないです。
基礎が分かっている状態で本を読むのと、分かっていない状態で読むのとでは、内容の理解度が段違い。
だから、せめて最初の基礎だけは、メンターのいる環境（しかも無料）で独学をスタートしておきましょう。
分からないことが出てきたら、分かる人に聞くのが一番手っ取り早い。最初だからこそ、分からない状況になってもすぐ抜け出せる環境が超大切。
プログラミングの独学は難しい？【結論：みんな難しい】
プログラミングの独学って難しいのかな？そんな疑問にお答えします。結論、プログラミングの独学は誰にとっても難しいので安心してください。プログラミングの独学が難しいと感じてしまう理由を理解して、その上でちゃんと対策をしてプログラミング独学に取り組めば、あなたも必ずプログラミングのスキルを習得できます。
ステップ2：無料のAdobeマスター講座
Webデザインには、Photoshop（フォトショップ）とIllustrator（イラストレーター）が必須。
この大事なPhotoshopとIllustratorの2つの基礎スキルを一気に学べるのが、実質無料のAdobeマスター講座。
あ、PhotoshopとかIllustratorを使うには、Adobe Creative Cloudというサービスに支払いが必要です。これはWebデザインの必須ツールなので、絶対に必要。
費用はこんな感じです。
- 年額：39,980円
- 日額：109円
1日1回コーヒーとか買っちゃう人は、その1回だけ我慢ですね。1日100円ちょい我慢するだけで、Webデザインの必須ツールが使えます。
このAdobeマスター講座だと、Adobe Creative Cloudの費用だけで、こんな無料講座がついてきます。
- PhotoshopやIllustratorの動画教材（46時間）
- 2ヶ月間、課題の添削
PhotoshopとIllustratorは、Webデザインの必須ツール。どうせ必要なお金を払うんだったら、オンライン講座も受けとかないと損ですよね。
無料で基礎スキルまで身につけちゃう方が圧倒的にお得。
携帯ショップの販売員みたいな言い方ですが、オンライン講座がついてくるから実質無料、というわけです。
たった2つのステップ、あなたはやる？やらない？
この2つのオンライン講座を活用すれば、間違いなく他のどの初心者の人たちよりもあなたは一歩リードです。しかも無料で。
…と、ここまで書いても、この記事を読んだ100人のうち2-3人しかやらないんですよね。だからチャンス。
- HTML/CSS
- JavaScript
- PhotoshopとIllustrator
この3つの基礎スキルがある初心者 vs 全く何も知らない初心者。
Webデザインの独学を始める初心者同士、どっちが有利か？なんて聞くまでもないですよね。この記事を読んでいるあなたは負け組になっちゃダメですよ。
Webデザインの基礎スキルを身につけた次にやること
おさらいです。Webデザインに必要なスキルはこの3つ。
- HTML/CSS
- JavaScript
- PhotoshopとIllustrator（デザインスキル）
そして、その基礎スキルを学ぶには、この2つの無料のオンライン講座。
この時点で、必要なスキルとその基礎は理解済。その上で、次のステップは実際に自分でWebデザインをしてみることですね。
あなた
「でも、何をどうやって作れば良いのさ？」
答えはこの2つ。
- Webデザインのストックを貯める
- 最低一つ、Webサイトを模写する
模写って何？
-> あるWebページを参考にして、全く同じものを実際に自分で作ってみること。
一つずつ深掘りします。
Webデザインのストックを貯める
あなたの思う最高に素敵なWebサイトってどれですか？
日頃から色々なWebサイトをみている中で、コレいいな！と思えるWebサイト、1つや2つありませんか。
もし思いつかなくても大丈夫。これから探す気持ちで、いろんなWebサイトを回って見つけてみてください。
デザインやそのアイデアをストックする作業は、Webデザインを仕事とする上で一生続きます。Webデザイナーに一番求められるのがデザインセンスなので。
- 綺麗なWebサイトを見る
- あなたが実現したいデザインを想像する
デザインすることが好きになってくると、この辺の勉強にはまったく苦労しません。だって好きだから。
デザインに関わる勉強ってとても芸術的。刺激があるものを見るたびに色々なセンスが蓄えられていきます。それこそ日頃の生活からでも。美術館とかも。
今までも、これからも、世の中には新しいデザインが増え続けます。だから、コレいいな！と思ったWebサイトの工夫は、どんどんあなたのアイデアストックにしたいですね。
Webサイトを模写する
最低1つか2つ、これいいな！と思ったデザインが見つかったら、まずはそれを模写しましょう。
こんなメリットがあります。
- HTML/CSSのコツが分かる
- プロの真似ができる
- 実際のWebデザインの仕事を体験する
参考にしたいWebサイトを模写していたら、気づくと勉強したスキルを確実に使えるようになってます。
最初は苦しいかもしれないです。でも、それを乗り越えた2回目以降は、かなりスムーズに模写作業ができるようになります。
まずは最低一つ。そして、模写を繰り返すほどコツが分かってきて、自由にWebデザインできるスキルを身につけていきましょう。
Webデザインを独学したら何か作ろう
当たり前のことなんですが、独学で勉強しただけでは何も意味がないです。
知識やスキルをインプットしただけで、何もアウトプットしないのは、ただの自己満足。
Webサイトを作ることで、自分のスキルを実際に試してみないとダメ。シンプルな事実なんですが、一番効率が良くて、確実に効果が高いです。
- 知識をインプットする
- 自分でWebサイトを作ってアウトプットする
- 出来上がったものをポートフォリオに使える
ポートフォリオって何？
-> スキルを証明できる実績。あなたが実際に作ったWebサイト。
まずは、自分で何か1つのWebサイトを作りあげれば、それを作ったという自信につながります。
そして、作ったWebサイトは、あなたのスキルを証明できるポートフォリオにもなります。
さらにさらに、作ったWebサイトはあなたの将来のデザインのストックにもなります。それを元にして、また次のWebサイトの作成に応用したりもできますね。
勉強しただけスキルが身についた気になってしまいがちですが、それだとめちゃくちゃ危ない。スキルを使ってないのでほぼ身についていません。
勉強した知識やスキルのインプットを、あなた自身の手でアウトプットに変えないと、何もしていないのと同然。
Webデザイン独学後の基礎スキルをさらに発展させる
- 基礎スキルを無料のオンライン講座で習得
- デザインのストックを貯めた
- 参考にしたいWebサイトを模写した
この時点で、かなり軌道に乗ってきました。もはや初心者なんて言う必要なし。
今後、さらにその力を発展させる方法はこの2つ。
- ブログでWebデザイン独学を継続（飛ばしてOK）
- Webサイト作成を仕事にしてしまう（少し稼ぐ）
一つずつ深掘りしてみます。
ブログでWebデザインの独学を継続
あなた
「ブログって記事を書くためのものでしょ？」
その通り。そしてそれ以上に、あなた自身が自由にWebサイトをデザインできる場所でもあります。
ブログを立ち上げると、Webデザインの独学以外にもこんなメリットがあります。
- 自由に改変できる（失敗し放題）
- ポートフォリオ（あなたの実績）になる
- Webマーケティングを学べる
実は、私がこのブログを運営しているのも全く同じ理由。Wordpress（ワードプレス）ブログは、たった10分で簡単に開設できますよ。
エックスサーバーの申し込み（公式サイト）
10分でできるワードプレス設定（公式サイト）
ワードプレスって何？
-> ブログを作成＆管理できるソフトウェア。全世界のサイトの4分の1はWordpressでできている、と言われるほどのスタンダード。
ここ最近、Webサイトを作るためのサービスは色々とありますが、必ずWordpress（ワードプレス）を選んでください。
WordPress（ワードプレス）は世界スタンダード。ということは、それだけその知識やスキルにも価値があるということです。専門スキルとして身につけるのもアリ。
メンター付きWordPressスクール（TechAcademy公式サイト）
ブログでWebデザインと同時にWebマーケティングまで学べば、もはやただのWebデザイナーじゃないですね。フルスタックWebデザイナーと呼べます。
フルスタックって何？
-> 色々な仕事を一通り全てこなすことのできる、たくさんの知識やスキルを持っていること。
Webサイトがある理由って、そのWebサイトで得られる効果が欲しいからです。売り上げをあげたいとか、ブランディングしたいとか。
どんなに綺麗なWebサイトでも、他の誰かに満足してもらえなかったり、期待通りの効果が出ていなかったら意味ないですよね。
だから、ブログでWebマーケティングの知識も学んでいくと、何故このWebサイトが必要なんだろう？という意味を考えながら作れるようになります。
ある意味、ブログを立ち上げて運営していくこと自体が、Webデザインと同時にWebマーケティングも学べる最強の方法ですね。
【必見】Webデザイナーに必要なスキルはこの5つ
Webデザイナーに必要なスキルって何だろう？そんな疑問にお答えします。Webデザインを依頼する側の視点を交えて、Webデザイナーとしてその要望に答えるために必要な最低限のスキル、そして将来的な需要にも耐えられるスキルをまとめて解説します。このスキルがあれば、あなたも最強のWebデザイナーです。
Webサイト作成で仕事してしまおう
身につけた基礎スキルを使って、いきなりWebサイト作成で仕事もできちゃいます。
すでに仕事をしている人でも、副業としてお金も入ってくるので、責任とモチベーションの維持もできますね。
例えば、仕事を探せるランサーズというサイトでLP（ランディングページ）と検索すると、たくさんの仕事があります。
LP（ランディングページ）って何？
-> 商品を購入してもらったり、問い合わせてもらうための目的に特化したWebページ。SNSや広告経由で使ったりします。
実際に仕事としてWebデザインのスキルを使えるので、お金を稼ぎながらスキルアップ＆キャリアアップできちゃいます。
最初は不安かもしれません。でも、最初のWebデザインの仕事をこなしてしまえば、あなたも立派にWebデザイナーの仲間入り！
あなたの勇気次第で、いつでもWebデザインの仕事スタートです。
仕事をたくさんこなしていけば、将来はフリーランスWebデザイナーにもなれますね。
Webデザイナーの将来性を心配するあなたが知るべき2つの情報
Webデザイナーに将来性ってあるのかな？そんな疑問にお答えします。Webデザイン業界の需要と供給のバランスを意識しつつ、将来を見据えて必要になるスキルの対策を理解しておけば、Webデザイナーの将来性について納得度を高めることができます。
Webデザイン独学に向けたQ&A集
最後に、Webデザイン独学に関するQ&A集を作ってみました。
- 独学にはどのくらいの期間が必要？
- モチベーションを維持するコツってある？
- どんなパソコンを使えばいい？
- Webデザインの仕事ってなくならない？
- Webデザインで転職できる？
- Webデザインってどんな仕事するの？？
一つずつ、解説します。
独学にはどのくらいの期間が必要？
人にもよりますが、2-3ヶ月もあれば脱初心者は楽勝です。
もちろん、もっと集中して勉強したり、センスがあればさらに短期間で習得できます。
モチベーションを維持するコツってある？
シンプルな答えですが、目的を持って独学すれば大丈夫です。
- 短期的：このWebサイトを完璧に模写する！
- 長期的：将来フリーランスで稼ぐ！
といった具合に、何でWebデザインを独学するのか、ちゃんと目的を決めておくとモチベーションを維持できます。
目的がないと、何でWebデザインを独学しているのか分からないですよね。
意味がないと、独学する必要もない。必要ないことはやっててもつまらないので、結局モチベーションダウン、という感じ。
以下の記事はプログラミング勉強に関するものですが、モチベーション維持のコツをまとめています。
プログラミング勉強のモチベーションを維持するただ1つの方法
プログラミング勉強のモチベーションが続かない！というあなたへ、挫折も経験した現役エンジニアが理由と対策を解説します。プログラミング勉強のモチベーションを維持する大事なポイントって、実は1つだけ。このポイントさえ理解しておけば、勉強するモチベーションは必ず維持できます。
Webデザインも、プログラミングも、モチベーションを維持するポイントは目的を明確にすること。
どんなパソコンを使えばいい？
選べるパソコンはWindowsかMacですが、ぶっちゃけどっちでもいいです。
どっちのパソコンでも勉強できるし、どっちを使うから独学に有利！なんてことはありません。
- 安く済ませたいからWindowsにしよう
- みんな使ってるからMacにしよう
といった感じで、あなたのお財布事情とか直感で選んでしまってOK。ただ、参考までですが、Webデザイン系は何故かMacを使う人が多いです。
先を見据えてMacを買うのであれば、まずは一番安くて使いやすいMacBook Pro 13インチ一択。軽いのでどこでも勉強できるのがメリット。
Webデザインで稼ぐ！という目的を立てて、先に投資しちゃうのもアリですね。
Webデザインの仕事ってなくならない？
結論、なくなりません。なぜなら、これからWebデザインの需要が増えていくから。
日頃からAmazonとか楽天でお買い物している通り、今後も当然ながらオンライン購買が主流。それに伴って、Webデザインの需要が増えていきます。
ちゃんとスキルの対策をしていけば、十分に仕事をこなしていけますよ。詳しい理由は、以下の記事にまとめてあります。
【必見】Webデザイナーは需要なくなる？将来必須な3つの対策
Webデザイナーって需要なくなる？そんな不安を解消しつつ、将来への対策をまとめます。ECとの関係、需要と供給の関係、そして時代の変化にあわせて必須の対策。これらをまとめて理解することで、将来を掴むWebデザイナーとして進化できること間違いなし。
Webデザインで転職できる？
結論、できます。ただ、スキルを身につけたから大丈夫！なんて思ってたら大間違い。ちゃんと対策が必要です。
答えを言っておくと、ポートフォリオ（あなたが実際に作ったWebサイト）を持っておくとかなり有利。
なぜなら、スキルがあります！と言うよりも、こんなものを作れます！と見せる方が、採用する側も判断しやすいから。
詳しい対策とその理由は、以下の記事にまとめました。
【初心者向け】Webデザイナーの就職って厳しい？2つの理由と対策
Webデザイナーの就職って厳しいのかな？そんな疑問にお答えします。Webデザイナーの需要の動向を理解して、その上で採用する側の視点で考えれば、厳しい就職戦線であっても有利に戦うことができます。どうせならフリーランスWebデザイナーを狙ってもいいかも！？
Webデザインってどんな仕事するの？
大まかな流れはこんな感じです。
- 作りたいイメージを考える
- ワイヤーフレームでラフ作成
- デザインカンプで完成イメージを見える化
- デザインカンプを元にHTML/CSSで作る
ワイヤーフレームって何？
-> Webページのレイアウトを理解するための設計図。ざっくり完成イメージを見える化するためのもの。
デザインカンプって何？
-> 完成見本。最終的にできあがる完成デザインを確認するためのもの。
この全てを一人でやることもあれば、何人かで分担することもあります。フリーランスなら基本全部、インハウスでの仕事なら分担が多いですね。
インハウスって何？
-> ある企業の中のWeb制作部門で仕事をすること。企業によって、Webデザインを社内で全て作るケースもあります。
詳しい説明は以下の記事にまとめました。Webデザインとプログラマーの仕事の違いを比較して説明しています。
【初心者向け】Webデザイナーとプログラマーってどっちがいいの？
Webデザイナーとプログラマーってどっちがいいんだろう？イマイチ分からないあなたへ、現役エンジニアがWebデザイナーとプログラマーの違いを徹底的に解説します。仕事内容、難易度、年収、将来の需要、資格。その全てを理解して、Webデザイナーとプログラマーのどっちがあなたに向いているか決めちゃいましょう。
まとめ
Webデザインの独学って何からはじめればいいんだろう？そんな疑問全てに答える無料の最短ルートをまとめました。
この記事の流れに沿ってWebデザインを独学して、まずは無料で、最短で、確実に、Webデザインの基礎スキルを身につけちゃいましょう。
Webデザインを独学して、3ヶ月後はスタバで優雅に仕事しませんか？
スタートするかどうかは、あなた次第。やる気の出ている今スタートしないと、周りの初心者に置いていかれちゃいますよ。
【無料あり】エンジニアがおすすめするプログラミングスクール3選【初心者向け】
プログラミングスクールに行きたいけど、多すぎでどこがいいのか分からない！そんな疑問にお答えします。現役エンジニアが、オンラインのプログラミングスクールの全プランをチェックしました。コースは豊富か？将来性は分かりやすいか？無料か、あるいは安いか？3つのポイントを元に、最強のプログラミングスクールを3つに絞ります。