Webデザインは独学でも習得できるの？
Webデザインの勉強をしたいけど、なにから始めればいいかわからない
この記事ではこのような疑問にお答えします。
Webデザインを独学で学ぶなら、挫折しないように効率よく学びたいですよね。そのために大切なのは、正しい方向性で学習することです。
そこで今回は、Webデザイン習得のためのロードマップを作りました。ロードマップに沿って必要な技術を身につければ、未経験からでもWebデザイナーとして活躍することも十分可能ですよ。
この記事の目次
初心者でも独学でWebデザインを学べる？
結論から言うと、現代ではさまざまな学習方法が選べるため、独学でもWebデザインは学べます。
ただし正しい手順や明確なゴールを決めておかないと、効率よく習得できません。まずはしっかりと学習の準備をしましょう。
自分のレベルに合った学習方法を選ぶ
Webデザインの学習方法は、本や学習サイト、動画教材などがありますが、自分に合った方法を選ぶのが大切です。
どの学習方法でもWebデザインの基本は学べます。しかし自分に合わない方法だと、学習が苦痛になって続けられなくなるかもしれません。
自分が楽しいと思える方法を見つけましょう。
学習環境を整える
Webデザインを勉強するためには、まとまった時間を確保したり質問できる相手を探したりなど、学習しやすい環境作りも大切です。
とくに始めのうちはわからないこともたくさん出てくるため、身近に質問できる人がいるとスムーズに学習を進められます。
しかし、身近にWebデザイナーをしている人がいないという方も多いでしょう。その場合は、オンラインサロンのようなコミュニティに入ったり、SNSなどで同じように勉強している仲間を見つけるだけでも、モチベーションを保つ励みになります。
初心者向けWebデザイン独学のロードマップ「基礎編」
初心者の方が独学する場合、何から始めたらいいかわからない、という疑問があるのではないでしょうか。
そこでここからは、Webデザイン独学のために何を勉強していけばいいのか順番に紹介していきます。まずはWebデザインに必須となる、基礎の部分から学んでいきましょう。
ステップ1：Webデザインの独学にかかる時間・期間を把握しよう
まずは学習にかかる期間を把握し、計画を立てるところから始めます。
独学でWebデザインのスキルを習得する場合、半年～1年ほどの期間は見ておいた方が良いでしょう。
Webデザイナーとして転職する場合、最低600時間は必要と言われています。1日に学習できる時間を考えて、どれくらいで600時間ほど勉強できるか計算してみてください。
とくに社会人の場合は平日にあまり時間をとれない方も多いと思いますが、少ない時間でもいいので、なるべく毎日学習時間を取るのが理想です。
ステップ2：Webデザインを学ぶ目的を明確にしよう
なぜWebデザインを勉強するのか、Webデザインのスキルを習得して何がしたいのかを明確にしましょう。
たとえば、Webデザインを勉強する理由としては以下のようなものがあります。
- 転職してWebデザイナーになりたい
- 副業で稼ぎたい
- 自分のサイト、ブログを作りたい
目的によって必要な技術レベルや、学習にかかる期間も変わってきます。とくに転職する場合はポートフォリオとして見せられる作品も必要になるため、制作期間も含めると期間はさらにかかります。
また、目的をはっきりさせたほうがモチベーションを保てるので、ゴールを設定しておくことは大切です。
ステップ3：Webデザインの独学に必要なものを準備しよう
Webデザインを勉強するにあたって、必要な物は以下の通りです。
- PC
- ネット環境
- デザインソフト
- テキストエディタ
テキストエディタは無料でも実用性の高いものがあるため、とりあえずは無料のものでも大丈夫です。有名なものだとAtomやVisual Studio Codeなど。
ただしデザインソフトはPhotoshopやIllustratorが必要なので、その分の費用が必要です。Photoshopは少し動作が重いので、あまりスペックの低いPCだと作業にあたってストレスになるかもしれません。
PCもこれから購入するのであれば、ある程度のスペックのPCをおすすめします。Webデザインに必要なPCのスペックについては、以下の記事で詳しく解説しているので参考にしてください。
ステップ4：基本のデザインスキルを身につけよう
続いて、必須となるデザインの基礎スキルを身につけましょう。
レイアウト・構成を作り、各所にボタンなどの素材を配置するには、UX/UIの知識が必要です。UX/UIについて学ぶことで、ただキレイなだけのサイトではなく、ユーザーにとって使いやすいサイトの設計ができます。
また、配色パターンや色使いについての色彩知識も必要です。色使いによって、人に与える心理的効果なども知っておかなければいけません。
こういったデザインスキルについて「センスがないとできない」と思う方もいるかもしれません。
しかしUX/UIデザインや配色などは、理論に基づいてできています。そのため自分のセンスや感覚だけでなく、理論や原則もしっかりと学ぶ必要があるのです。
ステップ5：デザインツールの使い方を学ぼう
デザインのためのツールはいくつかありますが、定番はPhotoshop、Illustrator、Adobe XDあたりです。3つともAdobe社が提供しているので、連携して使いやすいのもメリット。
Photoshop、Illustratorは、画像やイラストの作成・加工に使われ、Adobe XDはUIデザインに使われています。
他にも有名なUIツールはいくつかあります。
- Figma
- Sketch（mac専用）
- InVision Studio
とくにPhotoshopとIllustratorは、定番のソフトとしてよく使われています。多機能で便利なソフトですが、機能をフルに発揮するためには勉強と慣れが必要です。
本格的にWebデザインをするのであれば、早いうちに導入して慣れておきましょう。
ステップ6：プログラミングの基礎を学ぼう
Webデザイナーの仕事は幅広く、デザインだけでなくコーディングまで含む場合があります。そのため、HTML/CSSについての知識も必要です。
HTML/CSSの知識があれば、自分のデザインが実際に実現できるのかがわかるようになります。自分でコーディングまでしない場合でも、コーダーにとって易しいデザインがわかるのはメリットです。
デザイナーとはいえ、簡単なコーディング程度はできるくらいのプログラミング知識は身につける必要があります。
ステップ7：既存のWebサイトを模写してみよう
基礎的な部分の学習が終わったら、既存のサイトを模写してみましょう。実際にプロが作ったサイトを模写してみると、学べるところがたくさんあります。
デザインもコーディングも、実際に手を動かさなければ覚えられません。基礎を勉強したら、どんどん手を動かして作っていくのが習得への近道です。
まずはシンプルなサイトから始めて、少しずつ複雑なサイトへレベルアップしていくのがおすすめです。
初心者向けWebデザイン独学のロードマップ「応用編」
基礎の学習が終わり、簡単なサイトの模写ができるようになったら次のステップに進みましょう。
ここまでで基本的なWebデザインスキルはついているので、ここからは転職や副業案件の獲得も考えて作業を進めます。
ステップ1：オリジナルデザインでサイトを作ろう
既存のサイトを模写したときの応用で、オリジナルサイトを作ってみましょう。
実際に案件を取ったと仮定して、一から通して作業を進めるシミュレーションをしてみます。
- 企画・設計
- ワイヤーフレーム作成
- デザイン作成
- コーディング
サイトの目的やターゲット、コンセプトなど、クライアントから要望があったときを想像して詳しく設定していきます。
次に、ワイヤーフレームと呼ばれるレイアウトのラフのようなものを作成。その後、細かいデザインを作っていき、最後にコーディングをして完成です。
これまでに勉強したUX/UIデザインや色彩の知識を活用して、クオリティの高いサイトを目指しましょう。
ステップ2：ポートフォリオを作成しよう
転職・副業いずれにしても、ポートフォリオが必要です。
まだ実績がない場合は、練習で作ったオリジナルサイトをポートフォリオとして提示することになります。そのため練習でオリジナルサイトを作る場合は、ポートフォリオとして見せることを想定して作ってみてください。
その際、ただキレイなサイトを作っただけでなく、コンセプトやサイトの想定やなぜこのデザインにしたかなどを詳しく説明できたほうが良いでしょう。そのためオリジナルサイトを作るときは、細かく設計してから作っていくのがおすすめです。
ポートフォリオの作り方は、以下の記事で詳しく紹介しています。
ステップ3：クラウドソーシングで案件を受注しよう
ポートフォリオができたら、まずはクラウドソーシングで案件を獲得してみましょう。
クラウドソーシングは簡単な案件も多く、初心者でも仕事を取りやすいためおすすめです。
とはいえ簡単な案件は競争率も高いので、最初はなかなか受注できません。できそうな仕事があったら、どんどん応募していくのがコツです。
転職が目的の場合でも、実際に案件をとって仕事をこなした実績があれば評価されます。そのためクラウドソーシングで実績を作ってから、企業に応募するのも一つの方法です。
Webデザインの独学におすすめの本
Webデザインの独学ステップをひととおり説明したところで、続いては独学におすすめの教材を紹介していきます。
まずは、Webデザインの独学におすすめの本。本は必要な情報が体系的にまとめられているので「何から始めたらいいかわからない」という方におすすめです。
【デザイン】
【HTML/CSS】
デザインは流行りなどもあるため、なるべく新しい本をおすすめします。HTML/CSSに関しても、古い本だとバージョンが違ったり現在使われている機能の説明がなかったりするので、あまり古いものは選ばないほうがいいでしょう。
こちらの記事でも、Webデザインの学習におすすめの本を紹介しているので参考にしてみてください。
Webデザインの独学におすすめの学習サイト
次は独学に使えるWebサイトを紹介します。
無料で学べるサイトやわかりやすい動画教材など、自分に合った方法を選べるのがネットで学習するメリットです。自分が楽しく学べる方法を探してみましょう。
無料で学べる学習サイト
まずは無料で学べるサイトを2つ紹介します。
Cocoda
CocodaはUIデザインを学べるサイトです。課題が出題されるため、毎日コツコツとこなしていけば自然と力がついて行きます。
課題で作った制作物はCocodaにまとめておけるため、ポートフォリオとしても使用可能。
ほかのデザイナーが作った作品や課題に対する解説などもあるため、初心者で課題の進め方がわからない方でも理解を深めながら学習を進められます。
chot.design
chot.designは、デザインの基本からPhotoshopやIllustratorなど各種デザインツールの使い方、HTML/CSS、実践で使えるテクニックまで、網羅的に学べるサイトです。
それぞれレッスン形式で項目が分かれており、全部で500以上のレッスンが受けられます。無料で学べる部分は限られていますが、月額 ¥1,100ですべてのレッスンが見られるプランも用意されています。
以下の記事でも、無料で学べるサイトなどを紹介しているので参考にしてみてください。
コーディングの学習アプリ
コーディングを学べるアプリも出ているため、スマホでも勉強ができます。
たとえばプログラミング学習サイトとして有名なProgateも、アプリ版があるためスマホから学習可能です。
ただしコードはキーボードの方が打ち込みやすいため、本格的にコードを書くのにスマホは向いていません。あくまでサブとして、外出時の空き時間などを活用して勉強するのにおすすめします。
以下の記事でも、コーディングが学べるアプリを紹介しているので参考にしてみてください。
Webデザインが学べる動画教材
Webデザインが学べる動画教材としておすすめなのは、ドットインストールとUdemyです。
ドットインストールはプログラミング学習サイトのため、HTML/CSSを学べます。3分程度の動画で順番にレッスンを進めていくため、無理なく少しづつ学習できるのが特徴です。
Udemyではさまざまな動画教材を販売しています。デザインやプログラミング、Photoshopなどツールの扱いまで、豊富な教材から選べるのが特徴。
動画はテキストよりもわかりやすいため、本や学習サイトで勉強するのが苦手な方におすすめです。
Webデザインの独学勉強法を発信するブログ
Webデザインの学習方法を発信している人のブログも参考に見てみましょう。
実際に独学で習得するまでの学習内容を発信しているので、何を勉強すればいいか、どれくらいの期間がかかるかなど、参考にできる部分がたくさんあります。たとえばこちらの個人ブログは、Webデザインの勉強方法や転職について、実践的なノウハウなどをわかりやすく発信しています。
未経験からWebデザイナーになった人の個人ブログを見ると、モチベーションアップにもつながるのでおすすめです。
Webデザインを独学する方におすすめの資格
Webデザインをするのに資格は必要ありませんが、転職するのであれば資格があると有利になります。
まずおすすめなのが「ウェブデザイン技能検定」です。ウェブデザイン技能検定は、Web関連で唯一の国家資格。
デザインを中心に、サイトの構築・運用などの内容が出題されます。未経験の場合は3級しか受けられませんが、Web制作に直結した資格です。
他にも以下のような資格があります。
- Webデザイナー検定
- 色彩検定
- Webクリエイター能力認定試験
- アドビ認定アソシエイト(ACA)
- Photoshopクリエイター能力試験
副業で案件を取る際にも、資格があるとアピールしやすいので役に立ちます。
以下記事でも、Webデザインにおすすめの資格を紹介しているので参考にしてみてください。
Webデザインの独学にかかる費用【スクールと比較】
独学でWebデザインを学ぶ理由の1つとして「スクールだと費用がかかる」というのがあるでしょう。
そこで、独学にかかるおおよその費用とスクールの料金を比較してみましょう。
- デザインスキルの習得
- プログラミングスキルの習得（HTML/CSS）
- スクールと同じ12週間
- chot.design有料プランを利用する(月額:980円)
- プログラミング、デザイン、デザインツールの書籍をそれぞれ1冊ずつ購入（2,000円/冊）
上記の条件で、弊社が運営する侍エンジニアのWebデザインが学べるコースと比較してみます。
| 独学 | スクール |
| 8,940円 ※内訳 chot.design：2,940円 書籍：6,000円 | 231,000円（9,625円/月） ※教養コース/12週間プラン |
実際には、独学の場合もっと期間がかかるでしょう。とはいえ費用の面で大きなメリットがあります。
挫折せずに続けられれば、多少時間がかかっても独学のほうが安く学べるのは確かです。
Webデザインの独学を挫折しないためには
独学は費用が安いというメリットはありますが、挫折しやすいというデメリットもあります。
挫折して辞めてしまったら時間も費用も無駄になってしまうので、挫折せずに続ける工夫をするのも独学のポイントです。そこでここでは、挫折せず独学を成功させるためのコツを紹介します。
※以下記事の内容をもとにピックアップしていますので、併せてお読みいただくことをおすすめします。
時間を決めて毎日取り組む
なるべく毎日時間を確保して、1日のうちに少しでもWebデザインに触れる時間を作りましょう。毎日勉強することを習慣化してしまえば、学習を無理なく続けられます。
専門的なスキルはすぐに覚えられないため、時間がたつと忘れてしまいます。週末のみでガッツリ勉強するよりも、毎日コツコツ進めるのがおすすめです。
プロのデザインを真似する
Webデザインの勉強を続けていると、行き詰ってなかなか進まなくなることが出てきます。
そんなときはプロのデザインを見たり、トレースしてみたりすると行き詰まりを解消できるかもしれません。
プロのデザインを真似すると、デザイン感覚や思考力を身につけられます。他の人のデザインを見てみるだけでも、自分とは違うやり方を知れて勉強になるのでおすすめです。
自分の作品を公開して意見をもらう
練習で作ったサイトやロゴデザインなどは、SNSや投稿できるサイトで公開してみましょう。他の人に見せて意見をもらうことで、自分では気づかない弱みに気づける場合があります。
SNSに投稿したり学習内容を発信すると、同じようにWebデザインを勉強している仲間と繋がれるのもメリットです。
また、褒められたり感想をもらったりするだけでも、モチベーションアップにつながります。
いずれは人に見られるものを作るので、早いうちから人に見てもらうことを意識して作るのも大事です。
Webデザインを独学して上手くいった例
ここからは、実際にWebデザインを独学した例を紹介します。
実際にWebデザイナーとして就職した人や副業として仕事をしている人など、独学でも上手くいった人はたくさんいます。そういった人の活動を見てみるのも、参考になるのでおすすめです。
Webデザインを独学して就職・転職した例
こちらのブログの方は、広告業→接客業を経験した後に、独学でWebデザイナーとして転職に成功しています。
もともと広告業で働いていたのでPhotoshopとIllustratorは扱えたようです。そのためHTML/CSSの勉強から始め、6か月で転職に成功。
この記事でも紹介した、Progate、ドットインストール、Udemyを利用して勉強をしました。
仕事をしながら学習を進め、平日は1日1～2時間ほど勉強していたようです。PhotoshopとIllustratorが扱えて6か月ほどかかっているので、やはり未経験の場合は半年以上かかると考えておいたほうが良さそうですね。
Webデザインを独学してフリーランス・独立した例
こちらの方は子育てをしながら独学で勉強し、一度就職してから、現在はフリーランスとして活動しています。
はじめはWeb制作会社に事務の仕事で就職し、その間も勉強を続け3か月後にWeb担当に変わるというパターンのようです。
家事や子育てで時間がない中でも、隙間時間を活用して学習を進めています。Progateやドットインストール、YouTubeなどは空いた時間に自分のペースで進められるので、時間が限られていても使いやすいようですね。
Webデザインを独学して副業で稼げた例
こちらの方は、本業はネットショップを運営しながら、副業でWeb制作の案件も請け負っています。もとはネットショップ運営のためにデザインツールの勉強を始めたようですが、その後デザインや写真にハマっていったようです。
会社員時代の上司からホームページ制作の依頼がきたことから、副業をスタートさせています。
実際に副業やフリーランスで仕事をしていると、知り合い経由で仕事がくることは珍しくありません。副業というとクラウドソーシングが入り口としておすすめですが、知り合いのお店のホームページを作るなどして実績を積むのも方法の1つです。
こちらの記事では、Webデザイナーの副業に関して紹介しているので参考にしてみてください。
「Webの独学は難しい」と感じたらスクールを活用しよう
ここまで、独学でもWebデザインは学べると紹介してきましたが、実際のところ挫折してしまう人も少なくありません。
とくにデザインをしたい人にとって、HTML/CSSのようなコードの記述はネックになる部分です。
独学でできるか不安な方は、スクールも選択肢に入れてみてはいかがでしょうか。
弊社が運営するスクール「侍エンジニア」でも、Webデザインを学べる専門のコースをご用意しています。
プロのWebデザイナーやエンジニアを務める講師によるマンツーマン指導、専用のオーダーメイドカリキュラムを作成することで、挫折せずに続けられる環境を整えています。
また、オリジナルサイトの制作を重視したカリキュラムのため、実践的なスキルを身につけながら、転職や案件獲得につなげられるでしょう。
スクールで勉強しようか迷っている方は、まずは完全オンラインで受講できる無料カウンセリングをご利用ください。当スクールのコンサルタントに、学習方法やキャリアなど何でもご相談ください！
ちなみに、Webデザインをスクールで学ぶことについて、以下の記事でも紹介しているので参考にしてみてください。
まとめ
Webデザインは独学でも習得できますが、デザインの知識やプログラミングスキル、ツールの扱いなど、学ぶことは多くあります。
習得まで時間がかかるため、なるべく無駄のないように学習を進めたいところです。初心者の場合、何から始めたらいいかわからないことが多いので、今回紹介したロードマップを参考に始めてみるといいでしょう。
本や学習サイト、スクールなど、学ぶ方法はたくさんあるので、自分に合った方法を見つけて挫折しないように続けるのが大切です。
