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

Webデザインとは？

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

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

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

1.デザインのスキル

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

2.プログラムスキル

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

3.Webの仕組みへの知識

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

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

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

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

学習方法

独学

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

本

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

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

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

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

雑誌 Web Designing

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

Webサービス

Codeprep

画像出典：Codeprep

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

Adobe ラーニング

画像出典：Adobeラーニング

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

ドットインストール

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

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

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

有料サービス

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

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

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

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

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

Schoo

画像出典：Schoo

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

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

Codecamp

画像出典：Codecamp

デザインマスターコース

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

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

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

参考になるサイト

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

81-web.com

画像出典：81-web.com

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

Webクリエイターボックス

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

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

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

Tech2GO

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

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

まとめ

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

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