講座・スクール

初心者がWebデザインを独学【何から勉強すべきか】

初心者がWebデザインを独学で勉強する方法

 

Webデザインを独学で学びたいけど、何から勉強するとよいのだろう?

この記事では、こんな要望を持つ方に向けて、Webデザインを独学で学ぶ方法について解説していきます。

 

Webデザインで勉強すべきこと【何から始めるべきか】

Webデザインで最低限勉強すべきことは、以下の3つです。

  • デザインの基礎
  • HTMLとCSS
  • IllustratorとPhotoshop

それぞれ詳細を見ていきましょう。

デザインの基礎

デザインには配置や配色に関するルールがあります。

デザインセンスに優れた人は、ルールを覚えなくてもきれいにWebサイトを作ることができます。

しかし、Webサイトを作る目的はきれいに作ることではなく、訪問したユーザーが使いやすく、目的とする行動をとってもらうようにすることです。(たとえば、商品の購入や、問い合わせなど)

ルールを習得することで、単にきれいなWebサイトではなく、制作の目的に適したWebサイトを作れるようになっていきます。

HTMLとCSS

デザインをWeb上で表現する助けになるのが、プログラミングコードです。

Web制作における基本的なプログラミングコードは、HTMLとCSSです。

HTMLは、文字や表、リンクなどを表現するためのプログラミングコードで、CSSは、HTMLで書かれた要素をきれいに整えるためのプログラミングコードです。

さらに、JavaScript、jQuery、phpなどを扱えるようになると、Webサイト上の表現能力をさらに発展させることができます。

IllustratorとPhotoshop

イラストや写真などを作ったり、加工したりするのに使うのが、IllustratorPhotoshopです。

この2つもデザイナーとして最低限使えることが要求されるソフトです。

Adobe Dreamweaver、Adobe XD、FigumaなどのUI(ユーザーインタフェース)デザインのツールが使いこなせると、さらにやれることの幅が広がっていきます。

>>Adobe公式サイト

 

独学でWebデザインを勉強する方法

独学でWebマーケティングを勉強する方法は、3つあります。

  1. 自分でWebサイトを運営する
  2. 本で勉強する
  3. 講座で勉強する

それぞれにメリット・デメリットがあるので、独学で学ぶ場合には、複数の方法を組み合わせて、互いのデメリットを補うことをおすすめします。

独学1:自分でWebサイトを運営する

自分でWebサイトを運営すると、実践的なWebデザインの能力が身につきます。

費用1~2万円/年
メリット
  • 実践的かつ総合的なWebデザインの能力が身につく
  • 試行錯誤しながら経験を磨ける
  • Webデザイン以外のこと(マーケティングなど)も、合わせて経験できる
デメリット
  • 運営の目的が明確でないと挫折しやすい

Webサイトを運営する最大のメリットは、自分で試行錯誤しながら総合的なデザイン能力を鍛えられることです。

この後に紹介する本や動画で学んだことを実践する場としてうってつけです。

独学2:本で勉強する

Webデザインは、良書を選べば本でも勉強できます。

費用1~2万円程度
メリット
  • 良書を読めば、要点が網羅的にわかる
  • スキマ時間でも勉強できる
デメリット
  • 知識は身につくが、実践的な経験が身につかない

Webデザインの必要となる、

  • デザインの基礎
  • HTMLとCSS
  • IllustratorとPhotoshop

を学ぶのに適した本をそれぞれ1冊ずつ紹介します。

Webデザインでおすすめの本1:いちばんよくわかるWebデザインの基本きちんと入門

レイアウトや配色などWebデザインを考えるために欠かせない要素を解説している、文字通りWebデザインの基本を学べる本です。

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

HTMLとCSSの基本を学べる本です。

プログラミングコードは、実際に書きながらでないと習得が難しいですが、本書は手を動かしながら学べる構成になっているので、初心者が基礎を習得するのに向いています。

Webデザインでおすすめの本3:これからはじめる Illustrator & Photoshopの本

IllustratorとPhotoshopの基本操作について学べる本です。

独学3:オンライン動画講座で勉強する

オンライン講座でWebデザインを学ぶ方法もあります。

世界で15万以上の講座を展開しているUdemyだと、2022年2月現在でWebデザイン関連の講座は1,288件あります。

Udemyでは1つの講座を買いきって好きな時間に講義動画を見ながら学習できます。

費用1~4万円程度
メリット
  • 本よりもわかりやすく学べる
  • PCだけでなくスマホでも手軽に視聴できる
デメリット
  • 動画だと時間がかかる(1講座あたり4時間くらい)

Webデザインスクールと比べるサポートが弱く、自分で独学できる人向けではありますが、スクールよりは費用をかなり安くおさえることができます。

UdemyのWebデザインの講座を見る

 

独学が難しいならWebデザインスクールがおすすめ

独学なら安く済ませられるけど、少しハードルが高いかもしれない。。。

このように思う方には、Webデザインスクールに通うことをおすすめします。

できる限り安価にWebデザインを学びたいなら、以下3つのスクールがおすすめです。

スクール名受講料受講期間
デイトラ
Webデザインコース
94,800円無期限(サポートは1年)
Cucua
※無料説明会実施中
179,300~228,800円1~4ヶ月
CodeCamp
※無料カウンセリング実施中
198,000~363,000円2~6ヶ月

関連記事:【おすすめ】Webデザインスクール・講座10選【比較】未経験者にも安心のスクール

デイトラ

デイトラ webデザインコース
運営会社株式会社デイトラ
学習形式オンライン
価格(税込)94,800円(Webデザインコース)
※分割払いなし
学習期間無期限(講座買い切り)
※メンターサポート期間は1年
カリキュラム
  • Figma
  • Photoshop
サポート
  • 購入から1年間メンターサポート
  • デザインコンテスト
  • 講義資料のアップデートもタダで閲覧可能
  • 専用コミュニティ

デイトラのWebデザインコースは、UIを意識したサイトデザインをできるようにするためのコースで、Web制作コースと同様に初級編、中級編、上級編の3つに分かれています。

初級編では、Figmaの操作方法とLPデザインを学習、中級編では、中規模サイトのデザインとクライアントへ営業する方法を学習します。

上級編では、UIデザインの基礎とLPの改善を学習し、上級編まで修了することで、副業で月30万円を稼ぐレベルを目指しています。

1講座を買い切るタイプのスクールなので、コンテンツを無期限で視聴できます

1年間のメンタリングサポートや、専用チャットコミュニティがあるので、講座の内容を学習してわからない点を質問しながら学習を進めることができます。

価格が94,800円で、他と比べても群を抜いて安いのが特徴です。

こんな人におすすめ

  • 受講料を安くおさえたい人
  • 完全独学では学習できない人
  • とはいえ、誰かが付きっきりでなくても自発的に学習できる人
  • メンターを効果的に利用できる人
  • 難しい課題にも挫折せずに何とかしようとする人

\価格が魅力/

デイトラ 公式サイトへ

デイトラ メリット・デメリットは?
デイトラの評判・口コミ【徹底調査】 ネット上で人気のWeb・IT講座にデイトラがあります。 この記事では、こんな疑問を持っている人に向けて、デ...

Cucua(ククア)

Cucuaトップページ
運営会社株式会社free web hope
学習形式オンライン
価格(税込)入学金:162,800円
月額受講料:16,500円/月
学習期間受講料を払い続ける限り学習可能
カリキュラム受講生の希望・レベルに応じてカスタマイズ
サポート
  • 1人1人にあわせた専用のコース設計
  • 独自の副業案件の紹介

Cucuaは、月額制のオンラインWebスクールです。

入学時に入学金を払ったあとは、16,500円の月額料金だけで受講可能なので、長く受講すればするほど割安になります

受講生の希望やレベルにあわせて、完全カスタマイズでカリキュラムを構成するので、受講生のニーズに細かく対応できるようになっています。

また、独自の副業案件を紹介してくれるので、「副業からWebデザインを始めたい」という人に向いているスクールです。

こんな人におすすめ

  • 自分専用のカスタマイズコースを受講したい人
  • 副業からWebデザインを始めたい人

\無料説明会実施中/

Cucua 公式サイトへ

CodeCamp(コードキャンプ)

CodeCamp Webデザインマスターコース
運営会社コードキャンプ株式会社
学習形式オンライン
価格(税込)入学金33,000円
2ヶ月:165,000円
4ヶ月:275,000円
6ヶ月:330,000円
※分割払いあり最大36回
学習期間2ヶ月 / 4ヶ月 / 6ヶ月
カリキュラム
  • Illustrator
  • Photoshop
  • HTML・CSS
  • JavaScript
  • Bootstrap
サポート
  • マンツーマン、キャリア相談
  • 合格するまで受けられる添削サポート

CodeCampは、現役エンジニアが実践的なスキルを教えるオンライン特化型のプログラミングスクールです。

デザインマスターコースでは、Webデザインに必須となる基礎知識を網羅。

マンツーマンレッスンなので、個人のペース・弱点に合わせて指導を受けられます

マンツーマンでの指導でありながら、値段が安いのは1つの魅力です。

未経験からのキャリアアップを図るためのキャリア相談もあるので、「Webデザインのスキルを習得して、転職や独立したい」という方にもおすすめできるスクールです。

こんな人におすすめ

  • マンツーマンでサポートしてもらいたい人
  • 習得したスキルで、さらなるキャリアアップを図りたい人

\無料カウンセリング実施中/

CodeCamp 公式サイトへ

 

まとめ

以上、独学でWebデザインを勉強する方法でした。

  1. 自分でWebサイトを運営する
  2. 本で勉強する
  3. スクール・講座で勉強する

どうしても、独学は厳しいと思うなら、Webデザインスクールの受講を考えてみましょう。

おすすめのWebデザインスクールは、以下の記事にまとめています。

【おすすめ】Webデザインスクール【比較】
Webデザインスクール・講座【おすすめ】11校を徹底比較おすすめのWebデザインスクールを徹底比較。Webデザイナーとして仕事をしたいならスクール学ぶことも選択肢の一つ。未経験からプロを目指せるスクールです。...