Webデザインは独学でも習得できるの？
Webデザインの勉強をしたいけど、なにから始めればいいかわからない
この記事ではこのような疑問にお答えします。
Webデザインを独学で学ぶなら、挫折しないように効率よく学びたいですよね。そのために大切なのは、正しい方向性で学習することです。
そこで今回は、Webデザイン習得のためのロードマップを作りました。ロードマップに沿って必要な技術を身につければ、未経験からでもWebデザイナーとして活躍することも十分可能ですよ。
- Webデザイン学習はUI/UXなどの基礎知識から学ぶと良い
- 基礎を学習したらWebデザインツールの操作方法を学ぼう
- Webデザインは本や学習サイトで独学可能
なお、どのプログラミング言語を学べばいいのか、どう学習を進めればいいのかなどがあいまいな人は「プログラミング学習プラン診断」をお試しください。
かかる時間は1分ほど。4つの質問に答えるだけで、あなたにあう言語や学習プランを診断してもらえます。
これからプログラミングを学ぼうとしている人は、ぜひ一度お試しください。
本記事の解説内容に関する補足事項
本記事はプログラミングやWebデザインなど、100種類以上の教材を制作・提供する「侍テラコヤ」、4万5,000名以上の累計指導実績を持つプログラミングスクール「侍エンジニア」、を運営する株式会社SAMURAIが制作しています。
また、当メディア「侍エンジニアブログ」を運営する株式会社SAMURAIは「DX認定取得事業者」に選定されており、プログラミングを中心としたITに関する正確な情報提供に努めております。
記事制作の詳しい流れは「SAMURAI ENGINEER Blogのコンテンツ制作フロー」をご確認ください。
初心者でも独学で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あたりです。2つとも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サイトを紹介します。
無料で学べるサイトやわかりやすい動画教材など、自分に合った方法を選べるのがネットで学習するメリットです。自分が楽しく学べる方法を探してみましょう。
無料で学べる学習サイト
まずは無料で学べるサイトを紹介します。
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デザインの独学にかかる費用【スクール比較】
独学でWebデザインを学ぶ理由の1つとして「スクールだと費用がかかる」というのがあるでしょう。
そこで、独学にかかるおおよその費用とスクールの料金を比較してみましょう。
- デザインスキルの習得
- プログラミングスキルの習得（HTML/CSS）
- スクールと同じ12週間
- chot.design有料プランを利用する(月額:980円)
- プログラミング、デザイン、デザインツールの書籍をそれぞれ1冊ずつ購入（2,000円/冊）
上記の条件で、弊社が運営する侍エンジニアのWebデザインが学べるコースと比較してみます。
| 独学 | 8,940円 ※内訳 chot.design：2,940円 書籍：6,000円 |
| スクール | 16万5,000円（4,098円~/月） ※Webデザイン教養コース/4週間プラン |
スクールに比べ独学は学習期間がかかると考えられるものの、費用の面で大きなメリットがあります。
挫折せずに続けられれば、多少時間がかかっても独学のほうが安く学べるのは確かです。
なお、次の記事では独学とスクールのどちらがWebデザインスキルの習得におすすめなのかを詳しく解説しているので、良ければ参考にしてください。
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を用いたコードの記述はネックになる部分です。事実、弊社の調査では
- 不明点を聞ける環境になかった
- エラーが解決できなかった
- モチベーションが続かなかった
などの理由から、87.5%が「プログラミング学習で挫折や行き詰まりを感じた」と回答しています。
調査概要：プログラミング学習の挫折に関するアンケート
調査対象：10代〜80代の男女298名
調査期間：2019年8月13日~8月20日
調査方法：インターネット調査
掲載元：PR TIMES
また、こうした背景もあってか、弊社がプログラミングに興味がある人100名へ実施した別の調査では
- 確実にスキルを身につけられると思ったから
- 独学では不安がある
- 効率よく学べそう
などの理由から、61%が「プログラミングの勉強を始めるならスクールを選ぶ」と回答しています。
調査概要：プログラミングに興味がある方の意識調査
調査期間：2021/11/19~2021/12/3
対象者：プログラミング学習を検討している10代~50代の男女100名
調査媒体：クラウドワークス
掲載元：PR TIMES
上記から、1人でプログラミングスキルを習得できるか不安な人や短期間でスキルを習得したい人ほど確実性を求め、現役Webデザイナーといったプロの講師に質問できるスクールを利用する傾向にあるのがわかります。
いざ独学でWebデザインやプログラミングを学び始めても、勉強の最中に挫折しまっては学習にかけた時間を悔やむだけでなく「思っていたよりもスキルを身につけるのって難しいんだな…」とスキルの習得自体を諦めかねません。
仮にわからないことを飛ばしながら勉強を進めたとしても、Webデザイナーへの転職や副業での収入獲得を実現できる実践的なスキルが身につかなければ、結局後悔することになります。
そこで、おすすめしたいのが「SAMURAI ENGINEER（侍エンジニア）」です。
| 料金 | 月分割4.098円~ |
| 実績 | ・累計指導実績4万5,000名以上 ・受講生の学習完了率98% ・受講生の転職成功率99% |
侍エンジニアをおすすめする最大の理由は「挫折しづらい学習環境」にあります。
先ほど述べたとおり、独学者の多くは自力で不明点やエラーを解決できないためにプログラミング学習を挫折しています。そのため、未経験者が現役Webデザイナーのようなプロに質問や相談できない状況で、スキルを習得するのは非常に難易度が高いといえます。
しかし、侍エンジニアでは
- Webデザイナー講師によるマンツーマンレッスン
- Webデザイナーに質問できるオンラインでのQ&Aサービス
- 不安や悩み・勉強の進み具合を相談できる学習コーチ
といったサポート体制を整えているため、学習中に出てきたわからないことや不明点をいつでも相談可能です。「受講生の学習完了率98%」「転職成功率99%」という実績からも、侍エンジニアなら挫折しづらい環境で学習を進められるといえます。
侍エンジニアのサポート体制
また、侍エンジニアではカウンセリングにて受講生一人ひとりの目的をヒアリングしたうえでカリキュラムを作成するため、限られた受講期間でもWebデザイナーへの転職や副業での収入獲得に必要なスキルだけを効率的に習得可能です。
侍エンジニアのカリキュラム例
最短距離で目的を実現できるようカリキュラムが組まれているため、勉強する順番や内容を誤り非効率に時間や手間を費やす心配もありません。
なぜ侍エンジニアが挫折せずWebデザインスキルを習得できるのか気になる人はぜひ公式サイトをご覧ください。
公式サイトで詳細を見るまとめ
Webデザインは独学でも習得できますが、デザインの知識やプログラミングスキル、ツールの扱いなど、学ぶことは多くあります。
習得まで時間がかかるため、なるべく無駄のないように学習を進めたいところです。初心者の場合、何から始めたらいいかわからないことが多いので、今回紹介したロードマップを参考に始めてみるといいでしょう。
本や学習サイト、スクールなど、学ぶ方法はたくさんあるので、自分に合った方法を見つけて挫折しないように続けるのが大切です。
