Webデザイン入門者必見!最速で一人前になるための学習方法とは?

Webデザイン入門者必見!最速で一人前になるための学習方法とは?

在宅でのお仕事を目指したい方や、スキルアップのために、Webデザインの学習をこれから始めたい、学んでみたいという方は多いと思います。しかし、Webデザインに取り組むためにはさまざまな分野の知識が必要なため、入門者の方の多くが、いったいどこから手をつけていいやら分からなくなってしまいがちです。

そこで今回は、Webデザインの入門者の方向けにおすすめの、効率的な学習方法を紹介してみようと思います。

目次
  1. Webデザインとは?
  2. Webデザイナーとして働く際に必要なスキルとは?
  3. 1.デザインのスキル
  4. 2.プログラムスキル
  5. 3.Webの仕組みへの知識
  6. 4.コミュニケーションスキル
  7. 学習方法
  8. 独学
  9. 有料サービス
  10. 参考になるサイト
  11. 81-web.com
  12. Webクリエイターボックス
  13. Tech2GO
  14. まとめ

Webデザインとは?

image ドラマ、車、お菓子、化粧品、服など、いいな!と思った時にネットでそのブランドについて調べることも多いと思います。ところが、見に行ったWebサイトが古臭く見づらかったら、がっかりして商品自体の印象も悪くなってしまった・・・ということはありませんか?逆に、Webサイトが見やすく、おしゃれだったブランドは、ますます好きになったりもします。このように、現在はWebページも、もう一つの商品の顔として機能しています。

そんな重要なWebサイトについて、見た目の美しさ、情報のわかりやすさ、使いやすさを設計、構築するのがWebデザインと呼ばれるものです。

 

Webデザイナーとして働く際に必要なスキルとは?

image

1.デザインのスキル

  • 色彩や文字、コンテンツの配置など、デザインのスキル
  • Photoshop,illustratorなど画像処理ソフトやツールを使うスキル
  • 流行のデザインや技術などキャッチするスキル

2.プログラムスキル

  • HTML、CSSなどのWebサイトを記述するためのスキル
  • JavaScript、JQueryなどの動的(動きのある)Webサイトを構築するスキル

3.Webの仕組みへの知識

  • WebサーバへWebサイトを掲載、メンテナンスするスキル

4.コミュニケーションスキル

  • お客様へヒアリングするスキル

Webデザインの技術を身につけるには、おもに上記4つのスキルや知識をまんべんなく持つことが理想です。次の章から、これら4つのスキルを身につけられる、入門者向けの本やサービスを紹介して行きたいと思います。どのスキルが身につくかも書いているので、参考にしてくださいね。

 

学習方法

独学

まずは独学でWebデザインの勉強を進めたい入門者の方に、おすすめの書籍とWebサービスです。


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

image

  • Amazonリンク
  • 著者:Robin Williams
  • 出版社:マイナビ出版
  • 出版年月日:2016/6/30
  • 単行本価格:2,354円
  • Kindle価格:2,180円

 

1.デザインのスキル が身につく
デザインの基礎の基礎がわかりやすく網羅されているベストセラーとなっている書籍です。何から学習をはじめればいいの?という方にまずはオススメです。


いちばんよくわかるHTML5&CSS3デザインきちんと入門

image

  • Amazonリンク
  • 著者:狩野祐東
  • 出版社:SBクリエイティブ
  • 出版年月日:2016/10/27
  • 単行本価格:2,678円
  • Kindle価格:2,678円

 

2.プログラムスキル が身につく
初心者向けのやさしい構成や平易な言葉づかいがうれしく、初めての方にも敷居が低い本です。スマートフォンでの閲覧が増えている昨今の現状に合わせたflex-boxのコーディングなどレスポンシブなWebデザインについて、基礎からきちんと学べるようになっている、意外と骨太な本でもあります。


雑誌 Web Designing

image

  • Amazonリンク
  • 出版社:マイナビ出版
  • 雑誌価格:1,500円
  • Kindle価格:1,200円
  • 月刊誌

 

1,2,3,4全て が身につく
実際に業務を開始すると、お客様は「XX社が導入していた、新しい技術ってどういうもの?」「うちもやってみたい」などと、相談してこられます。そのときに、詳細が説明できたり、お客様に向いている方法かどうかを考えたりするためには、最新技術や他社事例のキャッチアップが欠かせません。専門雑誌はなにより、最新の流行をきちんと解説、まとめてくれているという、とてもよい利点があります。バックナンバーはKindleUnlimited対象ですよ。まずはパラパラと立ち読みしてみましょう。

 

Webサービス


Codeprep

image

画像出典:Codeprep

2.プログラムスキル が身につく

デザインや画像処理には興味はあるけれど、HTMLなどのプログラムはまったく分からない!と苦手意識のある方も多いかと思います。そんな方は、Codeprepをぜひ、試してみてください。穴埋め式の練習画面で、クイズのようにテンポよくHTMLやCSSが学べます。プログラムの醍醐味である、「手を動かしながら試してみる」が味わえるので、これなら「楽しい!」と思えるかもしれませんよ。


Adobe ラーニング

image

画像出典:Adobeラーニング

1.デザインのスキル が身につく

「レイヤー」や「ベクター」など知らない概念が出てくるため、全くの独学でPhotoshopやillustratorを使いこなすのは、なかなか難しいですよね。実は、Adobe製品は、公式サイトのチュートリアルも充実しているんです。Photoshop,illustratorについても、画像処理やロゴを作るなどの基本の各工程が、動画にて説明されていますのでわかりやすいですよ。ひとまず、基本の使い方をマスターしたい方はぜひ読みながら機能を確かめてみてください。


ドットインストール

image

画像出典:ドットインストール

2.プログラムスキル が身につく

講義動画が3分にまとまっており、隙間時間での学習にもぴったりな、学習講座サイトです。HTML,CSS,JavaScriptなどの入門講座が無料となっているので、学習を続けられるか不安がある方も、気軽に始めることができますよ。

入門者におすすめなのは、HTML入門CSS入門 の2講座。こちらを受講し終えたら、自分で一からWebサイトを作る実践!ウェブサイトを作ろうにも取り組んでみてください。

 

有料サービス


Webデザインの勉強におすすめの有料サービスです。

デジハリオンラインスクール

image

画像出典:デジハリオンラインスクール

在宅・副業スタートプラン

  • 受講期間:7ヶ月
  • 授業形式:131時間(うち動画126時間、ライブ授業5時間)
  • 受講料:386,640円(税込)
  • 課題添削:あり(9回)
  • テキスト:なし(映像のみ)
  • 質問:無制限
  • 対象言語・ソフト:Illustrator,Photoshop, HTML,CSS,Javascript,Dreamweaver,Flash,

 

1.デザイン、2.プログラム、3.Web知識 が身につく
Webデザイン、CGなどに強い専門学校「デジタルハリウッド」の運営する通信講座「デジハリオンライン」です。比較的授業料は高額ではありますが、ツールの使い方からHTML,CSSなどのプログラム技法、確定申告の方法などのお金の話までの多岐にわたる親切なカリキュラムで、本気でフリーランスを目指す方にはとても役に立つ講座だと言えます。

 

Schoo

image

画像出典:Schoo

デザインコース Webデザイナー

  • 受講期間:2ヶ月間(60日間)
  • 授業形式:動画(44.5時間)
  • 受講料:99,800円(税込)(学割あり)
  • 課題添削:あり(7回)
  • テキスト:なし
  • 質問:無制限(メール)
  • 対象言語:HTML,CSS,JavaScript

 

2.プログラム、3.Web知識 が身につく
有名講師による生放送授業が開講されていることで有名なSchoo。こちらのWebデザイナーコースは、動画に合わせて自分で課題をこなしていき、添削してもらえるという講座です。独学で勉強することに不安がある人は、安心のスタイルですね。初心者が詰まりがちなレンタルサーバーの使い方もコンテンツに含まれているので、Web制作の全体についてまんべんなく学べる安心の講座です。

 

Codecamp

image

画像出典:Codecamp

デザインマスターコース

  • 受講期間:6ヶ月(安心プラン)
  • 授業形式:マンツーマン個人レッスン(毎日朝7時~23時40分まで)
  • 受講料:298,000円(税抜)
  • 課題添削:随時
  • テキスト:あり
  • 質問:レッスン中、随時
  • 対象言語:Photoshop,illustrator,HTML5,CSS3,JavaScript/jQuery,Bootstrap

 

1,2,3,4 全てが身につく
Webデザインのスキルを身につけるには、やはり自分で作ってみるのが一番です。しかし、動画やテキストを見ながら作ってお手本通りには作れても、オリジナルでつくろうとすると細かな部分で詰まってしまって先に進めない・・・ということが起こりがちです。

Codecampでは、現役エンジニアがマンツーマンで個人レッスンをしてくれるという変わった形式をとっています。自分にあった内容を細かく指導してもらえるので、作りたいサイトを実現するための手法を一緒に考えてもらえたりなど、無駄なくスキルアップすることができますよ。

現在、1コマの無料体験レッスンが受けられるようになっています。個人レッスンってどんなもの?と思われている方や、自分にあった具体的なアドバイスが欲しい方は、いちど試しに受講してみてはいかがでしょうか。

 

参考になるサイト

Webデザインを学習するのにおすすめの、参考になるサイトです。

81-web.com

image

画像出典:81-web.com

スキルアップできるのは 1.デザインスキル

眺めているだけでテンションがあがる、素敵なデザインのサイトを集めたギャラリー&リンク集です。最新のデザインや、流行がわかりますし、自分の目指すデザインもイメージできてくるのではないでしょうか。デザインに関して目を肥やすのにも、色使いやテクニックの参考にするのにも役立ちます。

 

Webクリエイターボックス

image

画像出典:Webクリエイターボックス

スキルアップできるのは:1,2,3,4 特に3

プロのWebデザイナーであるMana氏が日々デザインのコツや流行のデザインについての解説などを綴っているブログです。最新技術の解説やセンスよく見せるための小技は上級者でも役に立ちますし、初心者向けの記事も充実しています。

特におすすめしたいのは、Web制作のながれを、ひととおりやさしく解説してくれているこちらの記事。実践で学ぶWebサイト制作ガイドすこし昔の記事ですが、Web制作を俯瞰したい方にとても役立つ記事です。ぜひ読んでみてください。

 

Tech2GO

image

画像出典:Tech2GO Webデザインカテゴリ記事

スキルアップできるのは1,2,3,4 特に2

初心者にもわかりやすい入門記事が充実しているTech2GO。最新技術の記事に加えて、入門者向けのHTML、CSSなどが学べる記事が多数掲載されています。HTMLが文字化けする理由と対処法とは?や、知らなきゃ損する!画像ファイルの種類と違いとは?初心者必見!Photoshopで背景を透明にする方法を解説!など、 初心者が困りがちな内容についてスポットを当てた記事が多いです。

 

まとめ

image Webサイトの作成はバグやミスがないことはもちろんですが、流行やニーズの変動が大きい昨今、なによりもスピード感が求められています。入門者は、最初に壮大なイメージを作ってしまいがちですが、理想が高すぎて挫折するよりも、小さい規模から、どんどん作って、動かしてみるという方法で最初は作ってみましょう。小さい規模から、徐々に機能を取り入れてアップデートしていくという考え方を初期から身につけておくと、実際の仕事でも役に立つでしょう。

ある程度できるようになったら、こんどは憧れのサイトを真似して作ってみましょう。プロの作ったWebサイトを細部まで観察することで、プロならではの気遣いや工夫、テクニックに触れることができ、さらなるスキルアップになることと思います。

のりぴよ
ライター
のりぴよ

関連記事