Webデザインを独学で学ぶには?6つの勉強方法や学習手順を解説

CATEGORY

dejamブログ運営局

dejamブログ運営局

    目次

無料で改善案も入手できるLPOツール「dejam」。ヒートマップ、Web接客、プロジェクト管理、改善ナレッジなど盛りだくさん!

独学でもWebデザインを学ぶことはできる


優秀なWebデザイナーは引く手あまたで、高収入が得られる場合もあります。そのようなWebデザインを学んでみたいという人も少なくありません。

しかし、専門のスクールに通わなければ学べないのではと考えている人も多くいるでしょう。その心配は無用で、Webデザインは独学でも十分学べます。

Webデザインの基礎を習得するまでの期間

Webデザインの基礎を習得するまでの期間は、スクールに通うか独学かで変わってきます。スクールの場合、2~3ヶ月が一つのカリキュラムになっていて、この期間内に習得するのが一般的です。

独学の場合は、そのようなカリキュラムはなく試行錯誤しながらの展開になるため、基礎習得までの期間がかなり長くなり、6か月から1年くらいかかるでしょう。そのため、最後までやり抜く粘りが必要です。

Webデザインを勉強する6つの方法

Webデザイナーを目指している人は、どのようにWebデザインを学んでいけばいいのか、あれこれ考えることでしょう。そこでいくつかの勉強方法を紹介します。どれも効果的な学習方法のため、取り入れてみてください。

1:書籍で勉強する

Webデザインの勉強は書籍でもできます。ただし、一つ注意点があります。それは、できるだけ新しい書籍を購入して、学んでほしいということです。発売されてから1~2年以内のものがおすすめです。

その理由は、Webデザインの世界は非常に進歩が速く、次々に新しい技術や様式が生まれていくからです。そのような新技術は古い書籍では学べません。特に発売から3年以上も経った書籍では、最新の情報は載っていませんから、参考にはならないでしょう。

Webデザインに関する書籍を購入するときは、発売年を必ずチェックしましょう。

2:動画をみて勉強する

動画でWebデザインを学ぶこともできます。YouTubeや「ドットインストール」には、Webデザインに関する動画がたくさん用意されていますから、それらを利用するといいでしょう。

YouTubeや「ドットインストール」には、実際の作業画面を収めた動画も多いため、参考になり、Webデザインの学習もはかどるようになります。

3:学習サイトで勉強する

Webデザインの学習サイトもあります。いろいろなサイトがありますが、画像や動画付きサイト、実際にコードが書けるサイト、プログラミングが学べるサイト、HTMLやCSSを図解説明したサイドなど、使いやすいものを選ぶことができます。
複数サイトの兼用もおすすめです。

4:スクールに通って勉強する

Webデザインを効率的に学ぼうと思ったら、スクールに通うのもおすすめです。スクールにはカリキュラムがあり、そのカリキュラムにのっとっていけば、覚えるべきことを順番に学べます。無駄な遠回りをしなくて済むのがいいところです。

また、スクールには心強い講師の存在もあります。勉強途中でわからないことや疑問点を講師に質問できるのは大きなメリットです。

5:副業として実務をこなしながら勉強する

Webデザインの基礎を学ぶことができれば、副業にすることもできます。その方法はいくつかあります。

1.副業求人を扱っているサイトに登録
2.クラウドソーシングに登録
3.知り合いの紹介など

このような方法でWebデザインの副業をしながら、実務経験を積み、さらに勉強して、スキルアップアップを図ることもできるでしょう。

6:就職や転職をして実務をしながら勉強する

Webデザインについてはスクールや独学で学べることもありますが、それがすべてではありません。実践を通して学ぶべきこともたくさんあります。実務を積んでこそ、優秀なWebデザイナーに育っていきます。

そういう意味では、ある段階が来たら、思い切ってWeb制作会社に就職や転職してみるのもおすすめの方法です。このような環境に身を置いて、実務をこなしていくうちに、自然と高度な技術も勉強できるようになるでしょう。

独学でWebデザインを学ぶメリット3つ

Webデザインをスクールではなく、独学で学ぶことにはどのようなメリットがあるでしょうか。ここでは3つのメリットを紹介しているため、独学にしようかスクールで学ぼうか迷っている人は、そのメリットもよく考えてみましょう。

1:勉強するタイミングを選べる

スクールでWebデザインを学ぼうとすると、授業に参加しなければいけない時間があり、その時間はほかのことには使えません。一方、独学の場合は、そのような制約はないため、自由に勉強するタイミングを選べます。

自分のペースで勉強を進められれば、気分も楽でリラックスしながら続けられます。しかし、自由に勉強するタイミングが選べるということになると、時間ばかりが過ぎていき、身のある勉強ができなくなることもあるため、しっかり計画を作っていくことが大切です。

2:コストが抑えられる

スクールでWebデザインを学べば、体系的に短期間で基礎を習得できるというメリットはあるものの、授業料が高くなります。数十万円は必要でしょう。

その点、独学なら、授業料は必要なく、書籍代などの最低限の出費で済みます。パソコン代は要りますが、パソコンを持っていない人がWebデザインの勉強をするということはないため、これは織り込み済みでしょう。

したがって、実際に必要なコストは大きく抑えられるため、経済的に苦しい人でも取り組みやすくなります。

3:普段から勉強をするという癖をつけられる

具体的な目標を持っていない人は、空いた時間を無駄に過ごしてしまうことがあります。それに対して、WebデザインならWebデザインで習得しようという気のある人は、空いている時間を勉強のために費やすようになるでしょう。

つまり、普段から勉強をするという癖がついてきて、隙間時間を有効活用するようになります。スマホに入れておいた動画教材を見る、本で勉強するなど、少しでも時間があれば、Webデザインのスキルアップに活かせるでしょう。

勉強する習慣がつくことがいい理由は、その後も必要に応じて調べる力が身につくことです。Webデザインは基礎を学んで終わりではありません。その後も勉強すべきことはたくさんあり、その習慣が身についていれば、さらに進歩するでしょう。

独学でWebデザインを学ぶデメリット3つ

独学でWebデザインを学ぶメリットをいくつか紹介しましたが、メリットの裏にはデメリットもあります。デメリットについてもよく考慮して、独学を選ぶかどうか決める必要があるでしょう。そのデメリットを3つ挙げます。

1:続けるためのモチベーション維持がしづらい

独学でのWebデザインの勉強は孤独です。励ましてくれる友人もいない場合があり、相談に乗ってくれる講師もいません。また、勉強途中で難しいことに出くわすと、続ける意欲が失せてしまう場合もあるでしょう。

そのため、モチベーションが維持できなくなって、挫折してしまうこともよくあります。最初は気合十分で勉強していても、時間の経過とともに、気持ちがなえてしまいます。したがって、独学ではいかにモチベーションを維持していったらいいかが課題となります。

2:わからない部分も自力で解決する必要がある

独学でWebデザインを学んでいて困るのはわからないことが出てきたときです。質問できる講師もいないため、自力で解決する必要があります。

しかし、本や関係サイトを見ても、解決しない場合もあります。そのまま解決できずにいると、勉強を続ける意欲にも影響が生じるでしょう。これが挫折の原因にもなります。

この問題を解消するには、相談できる友人を作るかWebデザインを学ぶ人たちのコミュニティに参加するなどの方法があります。孤独でいるよりも、支え合う仲間がいるほうがいいでしょう。

3:実務に移るタイミングが判断しづらい

スクールでWebデザインを学ぶメリットに卒業後のキャリア支援があります。転職希望者に求人紹介や転職サポートをしてくれるスクールも多いでしょう。そのため、勉強から実務に移るタイミングが図りやすくなっています。

しかし、独学の場合、今の自分の実力を判断する方法がありません。仕事で通用するレベルなのかまだ無理なのか簡単にはわからないため、どのタイミングで実務に移ればいいのか決めにくいというデメリットがあります。

Webデザインを学ぶときに押さえておきたいポイント5つ

Webデザインを学ぶうえで、これだけは押さえておきたいという基本的なポイントがあります。そのポイントを5つに分けて解説しているため、よくチェックして実践しましょう。

1:明確な目標を定める

これからWebデザインを学ぼうという人は、仕事や学業の傍らということになるでしょう。全日制の学校もありますが、通える人は限られています。

仕事や学業の傍らということになると、明確に目標がないとモチベーションが続きません。しかし、Webデザイナーになりたいというだけでは、勉強が持続しなくなる可能性があります。そのため、自分なりの目標と到達イメージをはっきりさせておくことが大事です。

2:きちんと学習時間を設ける

Webデザインを少しずつ学ぼうと思っていても、忙しくて時間が取れない、疲れたから翌日にしようということはよく起こります。しかし、これでは進歩がありません。

そこで、きちんと学習時間を設けるようにしましょう。早起きして出勤の前の30分間、休日は丸々、電車の移動時間を充てるなどのように決めておけば、しっかりと学べます。

3:集中できる学習環境を作る

Webデザインを学ぶうえで大事なことの一つに集中できる学習環境作りがあります。自宅で学ぶ場合、自由に時間が取れるのはいいですが、ややもするとスマホアプリなどに気がそれてしまい、Webデザインの勉強にひたむきに取り組めないこともあるでしょう。

それでは、学習効果も出にくいため、スマホの誘惑に負けず、ほかの楽しみ事も我慢して、一点に集中できるように工夫しましょう。

4:実際に手を動かして制作する

Webデザインの技術は知識習得だけでは身につきません。動画を見ただけでも、できるようにはならないでしょう。実際に自分で手を動かして制作するという手順を踏んで、初めて上達していきます。学んだ知識を使い、実践をしてみましょう。

その方法としては、次のようなものがあります。

・テーマを決めて自主制作
・コンペに参加
・実際に仕事をしてみる

いずれの方法でもいいですから、手を使って制作してみてください。

5:勉強用のコミュニティを作る

Webデザインの勉強を独学でしていると、孤独に陥るでしょう。それが単に精神的な面にだけ影響するのではなく、実際の学習面にも不便なことが生じてくるでしょう。

そこで、勉強用のコミュニティを作ることをおすすめします。コミュニティサイトなどを利用して作れば、励ましあう仲間もできますし、わからないことを仲間に聞いて、解決することもできる場合があります。

独学でのWebデザイン学習に向いている人

独学でのWebデザイン学習に向いている人は、自分で学び方の設計ができる人です。計画から目標、目的までしっかり作れる人こそが独学というやり方が合っていると言えるでしょう。

次に、自分で時間を作り出せることも大切なポイントです。忙しいことや疲れたことなどを言い訳にせず、できるだけ毎日時間を設けて学習を続けられるタイプの人が独学に向いています。

自分で自分をモチベートしていけるタイプも独学向きです。途中で挫折することなく学習を続けていくためには、常にやる気を維持していく必要があるでしょう。

独学でWebデザインを勉強するときに必要なもの4つ

独学でWebデザインを学ぶときに揃えておかなければいけないものがあります。これだけは最低限必要というもので、揃えないと勉強に支障が生じるでしょう。

それらを4つ紹介しているため、ぜひ参考にしてください。

1:必要スペックを満たしたパソコン

独学でWebデザインを勉強するにはパソコンが必要ですが、パソコンなら何でもいいというわけにはいきません。Webデザイン学習にふさわしいスペックがあります。どのようなスペックが必要なのか以下に整理しました。

1.CPU:Intel Core i5以上推奨
2.メモリ:8GB以上、できれば16GB
3.ハードディスクorSSD:500GB以上
4.OS:Windows10もしくはiOS最新版
5.モニター:20インチ以上、フルHD(1920×1080)

特にポイントになるのがメモリです。様々な作業を同時進行で行うため、メモリが不足気味だと、パソコンの動作が遅くなってしまいます。

2:Webデザインに必須なデザインソフト

Webデザインに必須なデザインソフトは、使用している会社が多いAdobe社製のものです。

Adobe社の「Photoshop」や「Illustrator」「dreamweaver」はインストールしておきたいところで、この3つのソフトがあれば、特に困ることはないでしょう。

3:あると便利なマウス

トラックパッドでもパソコンの操作はできますが、マウスがあるのとないのとでは、スピード感が違います。Webデザイン学習をスムーズに進めるためにもマウスは準備しておきたいところです。その際は、便利なコードレスマウスを購入しておくといいでしょう。

4:サイト公開時に必要なドメインとサーバー

制作したWebサイトをインターネット上に公開するときは、ドメインとサーバーがないとできません。したがって、Webデザインスクールでも、カリキュラムにドメイン取得とサーバー設定などの科目が入っていることが多いでしょう。

独学でも最終的に制作したWebサイトをインターネットに公開するため、ドメインとサーバーは必要です。

Webデザインを独学で学ぶ手順6ステップ


Webデザインを独学で学ぶ場合、踏むべきステップがあります。そのステップを順番に追っていくことで、学習が順調に進むようになりますが、具体的にどのようなステップを踏めばいいのかを解説します。

1:Webデザインに関する情報や知識を収集する

Webデザインを独学で学ぶ第一のステップは、基本的な情報や知識を収集することです。どうしたら美しいWebサイトを作れるのか、どうしたら注目を集めるサイトができるのかについて、基本的なことをまず学びます。

その方法としては、Webデザインに関する書籍を読んだり、関連するWebサイトを閲覧したりなどです。おすすめの書籍やWebサイトについては後ほど紹介しますが、まずは基本作りでしょう。

2:HTMLとCSSの勉強をする

次のステップは、コーディングを学ぶということです。コーディングとは、マークアップ言語を使って、Webサイトの構造や装飾を行うことで、見える形に表現していくことを意味します。Webデザイナーはデザインだけをするのではなく、構造も作っていくのです。

コーディングで使うマークアップ言語の種類はHTMLとCSSです。HTMLはコンピューターが文章を分析できるようにするマークアップ言語で、CSSではHTML文章にデザインを指定します。この二つを学ぶことは、Webデザイン独学において欠かせないステップです。

3:IllustratorとPhotoshopの使い方を身につける

続いて、IllustratorとPhotoshopの使い方を身につける必要があります。Webデザイナーとしての活動をしてくためには、この二つのソフトを使いこなせることが重要です。

Illustratorでできることは以下のようなものです。

・形を描く
・形状を編集する
・複数のオブジェを整列させる
・テキストをレイアウトする
・イラストを描くなど

簡単に言うと、Webデザインのパーツを作ることができるソフトです。

Photoshopはデジタル画像編集ソフトで、様々な画像の作成、編集ができます。

4:実際にサイトを作る

Webデザインの基本的な知識やスキルを身につけるだけでは十分ではありません。実際にWebサイトを作ってみないと、習得した知識やスキルをどう活かしていくのかがつかめないでしょう。手を使って、デザインからコーディングまでやってみることが大切です。

その際に気を付けたいのがコンセプトと目的を明確にしておくことです。Webデザインをクライアントから依頼された場合は、このようにしてほしいというコンセプトや目的を示されるため、その線に沿って制作していく必要があります。

クライアントの要望通りのWebサイトを作るにはどのようにすればいいかと考えながら作業を進めることは、いい練習にもなるでしょう。

5:ポートフォリオを作る

自分でWebサイトを制作して、作品ができたら、ポートフォリオを作ってみましょう。ポートフォリオは、企業やクライアントに提出して、自分のスキルや技術をアピールするものです。いいポートフォリオができれば、企業やクライアントから採用される可能性も大きくなります。

企業もクライアントもWebデザイナーのポートフォリオを重要な参考情報としているため、素敵な作品を載せておきたいところです。

6:慣れてきたらWebマーケティングについても学ぶ

Webサイトは制作した時点で終わりではなく、その後いかにアクセス数を増やし、集客していくかがポイントになります。そこで、Webデザインを学んでいる人は、慣れてきた段階でWebマーケティングについても学ぶことをおすすめします。

WebデザインとWebマーケティングのスキルを両方持っていると、Webデザイナーとしての将来性が大きく広がるでしょう。

独学でWebデザインを学ぶときにおすすめの書籍6選

独学でWebデザインを学ぶときに活用したいのが書籍ですが、どのようなおすすめ書籍があるでしょうか。ここでは6種類ほど取り上げているため、ぜひ読んでいただき、今後の学習に弾みをつけてください。

1:ノンデザイナーズ・デザインブック

「ノンデザイナーズ・デザインブック」は、ロングセラーになっているデザインの基本書です。デザインについて、4つの基本原則から説明しています。「近接」「整列」「反復」「コントラスト」の4原則です。この4原則に従いながらの、いい例、悪い例を紹介しています。

作例も多数掲載され、活字を用いたデザインについての解説もあります。本書は翻訳本ですが、日本語版では、日本語を使った4つの基本原則に基づいた作例も取り上げて、解説しています。

2:スラスラわかるHTML&CSSのきほん

「スラスラわかるHTML&CSSのきほん」では、HTMLとCSSについての知識がゼロから学べるようになっています。急に難易度が上がるようなこともなく、きちんと基礎を理解しながら作業を進められます。

サイトの制作から公開まで89ほどの実習に分けられているため、ステップごとの習得が可能です。必要なアプリも紹介されています。本書と自分のパソコンを見比べながら、着実に作業ができるでしょう。

3:なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉

「なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉」では、デザインのルールをほかのものに例えて紹介したり、図解やイラスト、写真などを豊富に用いたりして、わかりやすい解説をしています。デザインの楽しさが味わえる書籍です。

4:いちばんよくわかるWebデザインの基本きちんと入門

「いちばんよくわかるWebデザインの基本きちんと入門」は、Webデザイン初級者向けの書籍です。レイアウト・配色・写真図版・書体などのWebデザインの基本からHTML5とCSS3・インタラクション・運用とマーケティングなどのWeb技術を一気に学べます。

本書の説明は、理論から実例という順番になっていて、基礎から実際の使用法まで習得ができるようになっています。

5:1冊ですべて身につくHTML & CSSとWebデザイン入門講座

「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」は、HTML、CSS、Webデザインの基本がゼロから学べる書籍です。レスポンシブ、Flexbox、CSSグリッドなど最新の技術にも対応しています。

プロの現場で役立つテクニックを実際に手を動かしながら学べるようにもなっています。コーディングからデザインの知識、実践まで網羅した書籍です。

6:簡単だけど、すごく良くなる77のルール デザイン力の基本

「簡単だけど、すごく良くなる77のルール デザイン力の基本」はWebデザインを学んでいる人はもちろん、ノンデザイナーも習得できるデザインの基本を解説した書籍です。チラシ、ポスター、プレゼン資料、Webサイト、年賀状などの例を挙げながら、説明しています。

独学でWebデザインを学ぶときにおすすめのサイト3選

今度は、独学でWebデザインを学ぶときにおすすめのサイトをいくつか選んでみましょう。サイトには無料のものと有料のものがありますが、効果的にWebデザインの基礎が学べる便利な手段です。

1:Udemy

「Udemy」には、150,000以上ものオンラインビデオコースが用意されています。その中にデザインコースがあります。

「未経験からプロのWebデザイナーになる!」「Illustrator 基礎からプロレベルまで 完全ですべてをゼロから最短で学べる標準Illustratorコース」「未経験からプロを目指す!実践PhotoshopCC講座」など、コースの種類は様々です。

2:ドットインストール

「ドットインストール」の特徴は、3分動画で無理なく学習できることです。これなら隙間時間を利用しての視聴も可能です。スマートフォンからも見ることができるため、外出中でも勉強ができます。

動画は462レッスン、本数は6,935本で、多数取り揃えています。実戦ですぐに活かせる知識や技術の習得も可能です。月額1,080円(税込)のプレミアム会員になると、わからないことを先生に質問できます。

出典:3分動画でマスターできるプログラミング学習サービス|ドットインストール
参照:https://dotinstall.com/

3:Schoo

「Schoo」の生放送授業への参加は無料でできます。20秒ほどで会員登録すれば、だれでも利用可能です。しかも、先生に質問ができます。有料のプレミアム会員になると、5,000本以上の動画が見放題というサービス付きです。

「Schoo」のWebデザイン授業の代表的なものをいくつか挙げてみると、「UXデザインのはじめ方」「JavaScript入門」「HTML入門」「プロの技を見て学ぶデザイン」「CSS入門」などいろいろあります。

独学でWebデザインを学ぶときにおすすめのYouTubeチャンネル

YouTubeも独学でWebデザインを学ぶときに有効な手段です。そこで、おすすめのYouTubeチャンネルも二つ取り上げました。ともにWebデザイナー自らWebデザインについて教授してくれるチャンネルのため、非常に勉強になります。

ゼロイチWEBデザイン:未経験からWEBデザイナーへ

「ゼロイチWEBデザイン:未経験からWEBデザイナーへ」は、現役Webデザイナーの久保なつ美さんによるWebデザイン授業チャンネルです。LINE登録すると、最短でWebデザイナーになるためのレッスンを無料でプレゼントしてくれます。

mikimiki web スクール

「mikimiki web スクール」は、フリーランスのWebデザイナー、ミキミキさんによる講座です。Webデザイン、フリーランス、働き方などについて配信しています。はきはきとしたリズムでミキミキさんが解説をしてくれるため、テンポよく学べるでしょう。

Webデザインを独学で学んでみよう

Webデザイナーを目指している人は、どのように勉強をしていったらいいか、あれこれ考えることでしょう。1つの方法はスクールに通うことですが、時間や費用の問題があります。そこで、もう一つの方法として独学で学ぶこともできます。

独学の場合、目標を見定め、モチベーションを高く維持しながら進めていく必要はありますが、決してできないことではありませんから、ぜひチャレンジしてみてください。
LPやWebデザインを効率的に検索するには
たくさんのサイトを検索して参考になるデザインを探すのは時間がかかって大変です。
そこでおすすめなのが、LeanGoの提供する「Dejam」です。

https://leango.co.jp/dejam/

「Dejam」は、豊富なデザインデータベースを無料で公開している、LP・Webデザインの参考事例サイトです。
業種や画面名などでデザインを検索することができます。
デザインを検索したい方は活用してみましょう。

無料で改善案も入手できるLPOツール「dejam」。ヒートマップ、Web接客、プロジェクト管理、改善ナレッジなど盛りだくさん!

関連記事も読む