Webデザインを学ぼうと思った時に、次のようなことを感じたことはありませんか？
- Webデザイナーになるにはどんな勉強をしたらよいのか
- どのくらいの時間・期間をかけたらよいのか
- 何をどのような順番で勉強したらよいのか
- 自分の勉強の仕方が正しいのかわからない
そのような疑問や不安から、最初の一歩を踏み出せなかったり、遠回りした勉強になってしまう、なんてことにも…
モヤモヤしたまま進めていくのは精神衛生上よくありませんし、学習効率にも影響しますね。
知らない土地で目的の場所に辿り着くには地図が必要なように、Webデザイナーになるための正しい勉強方法とその全体像を知っておくことは大切です。
そこで今回は、Webデザイン学習のロードマップを解説します。
目次
Webデザインの2つの勉強方法
Webデザインの勉強方法は大きく分けて2つあります。
1つは、ネットや参考書を見ながら完全に独学で勉強する方法。
もう1つは、スクールを利用してプロに教えてもらいながら勉強する方法。
どちらのやり方でも、Webデザインを学ぶことはできます。
- わからないことがあっても自分で解決できる
- 自分のペースでコツコツとやりたい（自己管理は得意だ）
- 時間はかかってもよい（時間的な余裕がある）
- 将来的にWebデザイナーになれればよい
もし上記に当てはまる方なら、独学で勉強していくとよいでしょう。
反対に、以下のように考えているならスクールを利用する方がよいでしょう。
- 期間を決めて集中して勉強したい
- 効率的に勉強したい
- 途中で挫折したくない
- なるべく早くWebデザイナーになりたい
独学とスクールそれぞれのメリット・デメリットについて、詳しくは別記事にまとめてあるので参考にしてみてください。
→ 独学かスクールか？Webデザイン初心者のための比較ガイド
どれくらいの期間勉強すればよいのか？
Webデザイナーになるための勉強期間ですが、これは人それぞれの状況で変わってくるので、決まった期間はありません。
例えば、社会人で仕事しながら勉強をして転職するのか、学生など自由に使える時間があるのか、独学でやるのか、スクールを利用するのか、など条件によって全く変わってきます。
以下の表が参考値です。
| 独学 | スクール | |
|---|---|---|
| 2〜3時間の勉強／日 | 12ヶ月 | 6ヶ月 |
| 5〜8時間の勉強／日 | 6ヶ月 | 3ヶ月〜 |
1日2〜3時間程度の勉強時間なら、独学なら1年程度、スクールに通うなら半年程度の期間です。
毎日勉強できる時間が5〜8時間と多めにある方なら、独学で半年程度、スクールに通えば3ヶ月くらいの短期間も不可能ではありません。
もちろん、個人差はありますし、学んだことがしっかりと身についていることが前提ですので、一定の期間勉強したからそれでよいということではありません。
あくまで目安と考えてください。
何から勉強する？ おすすめの手順を解説
続いて、何をどのような順番で勉強をしていけばよいのか確認していきましょう。
Webデザイナーになるために勉強すべきことは次のとおりです。
- HTML・CSS
- Webデザインに使うソフトの操作
- デザインの基礎
- jQuery (JavaScript)
どれも基本レベルの習得でひとまずOKです。
順番に解説していきます。
HTML・CSSの基本を学ぶ
Webデザインと聞くと、「Photoshopを使ってサイトのデザインを考える仕事だから楽しそう！」というイメージを持つかもしれません。
それは間違いではないのですが、Webデザイナーが他のデザイナーと大きく違うところは、Web技術に対する理解やスキルも要求されるところです。
ブラウザにページを表示させる仕組みを先に勉強しておくと、Webデザインがどんな仕事なのか、イメージがつきやすくなると同時に、Webデザイナーとしての適性も見極めやすくなります。
もし勉強をしてみて、「Web技術に何ら興味はないし、HTML・CSSなんて全然面白くない！」と感じたのなら、Webデザイナーよりも、DTPデザイナーやグラフィックデザイナーなどを目指す方がよいかもしれません。
その意味で、HTML・CSSを勉強しながらコードを書いてブラウザに表示させることから始めてみるとよいでしょう。
Webデザインに必要なソフトの基本操作を学ぶ
HTML・CSSの基本を学んだら、Webデザインで使うソフトの勉強をしましょう。
Webデザイナーに必須なのは、Adobeの Photoshop と Illustrator の2つのグラフィックデザインソフトの操作スキルです。
Webデザインでメインで使うのはPhotoshopです。
Illustratorは、ロゴ・アイコン・イラストなどのオブジェクト（パーツ）を作成するために使います。
この2つのソフトの基本操作はできるようにしておきましょう。
Webサイト作成用のソフトで Adobe Dreamweaver がありますが、これは絶対に必要というわけではありません。
PhotoshopやIllustratorのように「Webデザイナーなら必ず使っている」わけではないからです。
勉強してもよいですが、ひとまず後回しにしてしまってかまいません。
→ プロ御用達！Webデザイナーの必須ソフトと業務効率化に役立つソフト
デザイン基礎を学ぶ
デザイン理論について勉強します。
レイアウト、カラー・配色、タイポグラフィ（フォント）などの基本ルールをおさえるだけでデザインの質は大きく向上します。
Webデザインは商業デザインなので、ほとんどの場合、アーティスティックなデザインやデザイナーの個性・独創性で勝負することはありません。
まずは、デザインの原則をおさえたユーザーに見やすいサイトを心がけてみましょう。
特別なセンスや才能などなくてもWebデザイナーになれますので安心してください。
→ 誰でもなれる？センスないとダメ？Webデザイナーの適性教えます
色々なWebサイトを日頃から見ておこう
良いデザインに触れることも、デザイナーの経験として大切なことです。
日頃から色々なWebサイトを見ておくようにしましょう。
良いと思ったサイトをブックマークやキャプチャしておくとよいです。
反対に、良くないと感じたサイトを記録しておくのもよいでしょう。
そして、何が良かったのか・何が良くなかったのか、ということを自分なりに分析してみましょう。
自分の趣味で見ている範囲のサイトだけだと、デザインの幅が拡がりにくいです。
ありがたいことに、素敵なWebデザインを収集してくれているサイトがあるので、そういったサイト定期的にチェックするとよいでしょう。
jQuery (JavaScript) の基本を学ぶ
JavaScript (ジャバスクリプト) はWebサイトに「振る舞い」を実装するプログラミング言語です。
イベントや変化を検知して何かしらの処理をさせたり、Webサイトに動きを与える役割を担います。
例えば、画像のスライダー、スマホなどの開閉メニュー、タブ切り替えパネル、アニメーションなどがよく使われる演出です。
JavaScriptはプログラミング言語なだけに、苦手に感じるデザイナーは少なくありません。
そんなWebデザイナーにも扱いやすいJavaScriptとして作られたのが、jQueryというライブラリです。
世界中のサイトでjQueryが広く使われてきた歴史があります。
そのため、Webデザイナーがまず勉強すべきプログラミングはjQueryの基本と言えます。
基本構文の理解から、シンプルな機能の実装やプラグインを使った実装くらいはできるとよいでしょう。
デザイン〜コーディングまで流れで作ってみる
Webデザインの基本スキルを学んだら、実際にサイトを1から作ってみましょう。
架空のサイトでかまいません。
流れとしては、次のようになります。
- どんなWebサイトを作るか設定する
- サイトのデザインをする
- デザインに従ってHTML・CSSでコーディングする
始めに、どんなサイトを作るのかを決めます。
コーポレートサイト（会社案内型サイト）、店舗のサイト、ネットショップなど、どんなタイプのWebサイトを作るのか具体的に設定します。
最初はシンプルなサイトにしておきましょう。
実際にあるWebサイトを参考に、構成等を分析してみるとよいでしょう。
作るものが決まったら、ワイヤフレームを作ります。
ワイヤーフレームとは設計図のことで、レイアウトや構成を表した骨組みだけのものです。
Web制作において、いきなり完成形のデザインを作り始めることはなく、実務でもワイヤーフレームを先に作成します。
ワイヤーフレームは、紙にペンで書いてもPhotoshop等で作成してもどちらでもかまいません。
ワイヤーフレームができたら、デザインカンプ（完成見本）を作成していきます。
デザインはトップページと下層ページを作ってみましょう。
下層ページとは、個々に独自のコンテンツを持つ詳細ページのことです。
「事業内容」「商品・サービス詳細」「会社沿革」「ご利用ガイド」「お問い合わせ」などの個別ページのことですね。
下層ページの基本デザインは共通しているので、2, 3ページ分作ればよいでしょう。
デザインが完成したら、HTML・CSSでコーディングしてWebページ化し、サイトの完成です。
このように、一連の流れで制作してみると、Web制作という仕事を体感できます。
ポートフォリオを作成する
一通りの学習を終えたら、後はどんどんサイトを作っていきます。
未経験者が制作スキルを磨くには数をある程度こなす、これにつきます。
そして、制作したものをポートフォリオにまとめていきます。
架空のサイトでかまいませんが、実際のサイトがいくつか含まれていると尚よいです。
友人や知り合いでホームページを必要としている人がいたら、ぜひ作らせてもらいましょう。
クラウドソーシング等を利用して案件を受注する方法もあります。
ポートフォリオには、サイト以外のバナーなどの作成物も含めてかまいません。
→ 未経験からWebデザイナーに転職するポートフォリオの作り方
デザイン力を上げるにはトレースがおすすめ
デザイン経験が全くない人にとって、最初のうちは「デザインがうまくできない」という悩みを持つかもしれません。
デザイン力を鍛えるのにおすすめの学習方法はトレースです。
トレースとは「写しをすること」で、要するにデザイン模写の作業です。
自分が素敵だと思うサイトでよいので、それをそっくりそのまま自分で作ってみます。
ページ全体のデザイントレース以外に、バナーなどの練習にもトレースはおすすめです。
Webデザインの正しい勉強方法まとめ
Webデザイン初心者の勉強の手順をおさらいしてみましょう。
- HTML・CSS、Adobeソフト、デザイン理論、jQuery (JavaScript)の基本を学ぶ
- 実務に近いフローで1からWebサイトを制作してみる
- 制作を繰り返してスキルを磨き定着させる（ポートフォリオに追加）
ポイントは、上記手順の3番のフェーズに注力することです。
先述のとおり、Webデザインは制作の数をこなすほど実践的な力が身についていきます。
ところが、初心者の場合、HTML・CSSやPhotoshopの使い方などの勉強に多くの時間を費やしてしまうことがあります。
これは、何をどれだけ勉強してよいのかわからずにやってしまいがちな「初心者あるある」な間違いです。
実際、HTML・CSSも、JavaScriptも、Photoshopも、それこそデザインも、それぞれに奥が深いので理解を深めようとするとキリがなくなります。
まずは、基本的なレベルに的を絞って勉強しましょう。
その意味でも、Webデザインスクールを利用した勉強は効率的と言えるでしょう。
スクールのカリキュラムに沿って学んでいけば、一人でサイトを制作できるまでのスキルは身につくので、「まだ勉強が足りないんじゃないか？」のような余計な不安や心配をすることもなくなります。
これはWebデザイン初心者にとってメリットと言えます。
後は、制作の練習を繰り返しながら、作った作品はポートフォリオに追加していけば転職活動でも使えます。
時間的な余裕がある分には独学でコツコツやっていくのもよいですが、無駄を省いて効率的に勉強したいとか、なるべく早くWebデザイナーの仕事に就きたいのなら、スクールに通うことも検討してみましょう。
→ 独学かスクールか？Webデザイン初心者のための比較ガイド
→ 勉強の質重視なら！ Webデザインスクールおすすめ4校と選び方
以上がWebデザイン初心者のための正しい勉強方法です。
コメント