Webデザインを勉強したい！と思う人は多いかもしれませんが、学校で習う勉強と違って正解が1つではないため、決まった勉強法が無く独学で勉強することが比較的難しいです。
しかし、その難しいと言われる理由は何を勉強すれば良いのかが分かっていないことが理由である場合が多く、順序立てて必要な知識やスキルを身につけていけば誰でも独学でWebデザインを勉強することができます。
今回は多くの現役Webデザイナーに実際に話を聞いてみて、効率よく独学でWebデザインを勉強するための方法をまとめました。
INDEX
独学でWebデザインの勉強は可能か
独学でWebデザインを勉強することができるのか、という質問をされることがよくありますが、結論から言うと、独学でWebデザインを身に付けることはできます。
しかし、それには失敗しないための方法があり、下記の内容を頭に入れておかなければなりません。
- どういうWebデザイナーになりたいのかゴールを最初に決める
- 勉強するための時間をしっかりと確保する
- 勉強する順序を間違えない
まず、ゴールを決めるということが大切です。漠然とWebデザインの勉強をしようと思っていても、ゴールが決まっていなければ何を学べばいいのかが定まりませんし、モチベーションにも大きく影響します。そのため、なんとなくWebデザインを勉強したいなーと考えている方は、独学での勉強だと途中で挫折してしまう可能性が高くなってしまいます。
また、しっかりと時間を確保しなければ、いつまで経ってもスキルが身につかず、なんとなく惰性で続けているような状態になってしまいます。覚悟を決めたら、しっかりとそれに向き合い、集中して学んでいくことが、独学でのWebデザインの学習を成功させるための秘訣です。
もちろん、時間にも金銭面にも余裕のある方は、Webデザインをオンラインスクールなどで勉強した方が、短期間で確実にスキルを身に付けることができるため、失敗しにくいというメリットはあります。
最後に、勉強する順序を間違えないという点ですが、HTMLやCSSがわからない状態でいきなりJavaScriptの勉強から始めても、分からないことだらけでほとんど知識が身につきません。
本記事で紹介する順番に勉強をすることで、独学でも効率よくWebデザインの学習を進めることができます。
Webデザインに必要なスキル
Webデザインと一概に言っても、実はWebデザイナーによってそれぞれ得意とする領域や、できること、できないことは様々です。そのため、どういったWebデザイナーになりたいのかを始めに決めて、自分の中での「ゴール」を決めておきましょう。
一般的にWebデザイナーと呼ばれる人たちは、下記のすべてを一定レベル使いこなすことができます。
- HTMLとCSS
- JavaScript, jQuery
- デザインの基本スキル
- UI/UXデザインのスキル
- デザインツールのスキル
- SEOとアクセス解析
SEOまでWebデザインの仕事なの？と思うかもしれませんが、SEO対策を行うためにはコーディングやデザインの段階から考慮しておく必要があるので、そういった知識をWebデザイナーが持っていると、公開された後もアクセスされるWebサイトを作ることができます。
Web制作はただかっこいいサイトを作ることが目的ではなく、公開された後に役に立つWebデザインやWebサイトを作る必要があります。そこまでできるようになって、始めてWebデザイナーとして名乗れるようになります。
そのためには、HTMLやCSSのような基本的なスキルはもちろんのこと、UIデザインやUXデザインと呼ばれる領域までできることを広げていかなければなりません。
独学ですべて身に付けることはそう簡単ではありませんが、どれも努力すれば必ず身に付けることができます。
では、それぞれの項目ごとに詳しくご紹介していきます。
1. HTMLとCSSを独学で身につける
HTML、CSSはWebデザインの基本中の基本です。これが扱えなければ、Webサイトを作ることはできません。
しかし、HTMLとCSSは他の言語と比べると独学でも学習を行いやすく、必要な時間は人それぞれかもしれませんが、比較的短期間で基本を覚えることができます。
HTMLはWebサイトの骨格を作る部分で、サイトに表示する内容は基本的にHTMLで記述されています。
CSSはWebサイトのデザインを整えるための部分で、サイトのレイアウト、文字の色、マージンなどはCSSで記述されています。
オンラインサービスで勉強する – HTMLとCSS
最近ではプログラミングやコーディングを覚えるためのオンライン学習サービスが充実してきており、応用分野まで無料でしっかりと学習できるものも増えてきました。
オンライン学習サービスを使うことによって、知識のインプットを行いながら同時にアウトプットも行っていくことができるので、効率よくWebデザインの学習を進めることができます。
Progate
Progateはブラウザ上で実際にコーディングやプログラミングを行いながら、学習を進められるオンライン学習サービスです。
実際にコーディングを行うことで、効率よく学習を進めることができます。
Codecademy
Codecademyは、Progateと同じようにブラウザ上でコーディングやプログラミングを行いながら学ぶことができるサービスです。
こちらは海外のサイトなので日本語対応はしていませんが、有名なサービスなのでコンテンツが充実しており、しっかりと知識を身につけることができます。
使われている英語もあまり難しいものではないので、英語に抵抗の無い方はこちらがおすすめです。
ドットインストール
ドットインストールは色々なプログラミング言語を3分動画で学ぶことができる有名なサービスです。
実際にコーディングしている画面を見ながら説明を聞くことができるため、実際にコーディングのレッスンを受けているような感覚になります。
これだけ優れた内容を無料で視聴できるということで、利用しない手はありません。
その他のオンライン学習サービスはこちらの記事をご覧ください
本で勉強する – HTMLとCSS
本は1冊に必要な内容がしっかりとまとめてあるので、オンラインの学習サービスよりもしっかりと知識を身につけることができます。
オンライン学習サービスでなんとなくコツを掴んだら、本を購入して実際にサイト全体を作るプロセスを身につけるようにすると効率良くHTMLとCSSを学習することができます。
下記におすすめの本をご紹介しておきます。
スラスラわかるHTML&CSSのきほん
HTMLとCSSの基本が分かりやすく書かれている本です。内容が初心者向けになっているので、初めて勉強を始める方にも分かりやすく、
HTML5&CSS3デザインブック
こちらは上記の本よりも少し応用レベルの技術を身につけることができる本です。この本に書かれている内容をしっかりと身につけることができたら、「HTMLとCSSは使えます！」と自信を持って言えるようなレベルまで持っていくことができます。とはいえ、すごい難しい本というわけでもないので自信のある人はいきなりこの本から始めてしまうのもアリです。
HTML5/CSS3モダンコーディング
こちらは3つのサイトを作成していく中で、実際に現場ですぐに使うことができるような知識を身につけることができます。CSSの詳しい知識を身につけていくには非常におすすめの本です。
この他のおすすめ書籍は、下記の記事にまとめました。ぜひ参考にしてみてください。
中上級者の方は
HTMLとCSSについて、もっと高いレベルを目指したい方は中上級者向けの書籍をこちらで紹介しています。ぜひ参考にして下さい。
2. JavaScriptとjQueryを独学で身につける
JavaScriptやjQueryはWebサイトに「動き」をつける役割を果たします。
基本的なWebサイトを作る場合はHTMLとCSSで完結させることもできますが、使いやすさやデザイン性を追い求めるとJavaScriptやjQueryが必要となってくる場合が多いです。
例えばクリックするとメニューが表示される「ハンバーガーメニュー」や、写真がスライド形式で表示される「カルーセル」の多くはJavaScriptを使って作られています。
jQueryはJavaScriptのライブラリという説明をされることが多いですが、簡単に行ってしまうとJavaScriptを使いやすくしたものです。基本的な文法はJavaScriptと同じですが、jQuery特有の書き方も存在していて、上辺の理解ではJavaScriptと混同してしまう方が多いです。
jQueryのプラグインには便利なものが本当に多く、使いこなせるようになると作成できるWebサイトの幅が広がります。優れたWebサイトを作るためには必須の知識ですね。
オンラインサービスで身につける – JavaScriptとjQuery
JavaScriptとjQueryもオンライン学習サービスでコンテンツが充実しているので、上記でご紹介したドットインストール、Progate、Codecademyなどで基本を学ぶことができます。その他にも様々なサイトで扱われています。
詳しくはこちらの記事をご覧ください。
本で勉強する – JavaScriptとjQuery
確かな力が身につくJavaScript「超」入門
JavaScriptの基本的な書き方や使い方から、フォームの値の取得など実際に使えるテクニックが学べる一冊です。初心者向けに書かれているので、プログラミングを初めて勉強する人にはおすすめの一冊です。for文やif文など、プログラミングの基本的な知識がある方には少し易しく感じるかもしれません。
作りながら学ぶjQueryデザインの教科書
jQueryの基本が丁寧に説明されており、全体としてはサンプルを通してjQueryを学んでいく内容になっています。初めてjQueryを学ぶ人はもちろん、サイトの製作中に少し読んだりして辞書的な使い方もできます。内容がとても分かりやすく、jQueryの入門書におすすめの本です。
3. デザインスキルを独学で身につける
デザインスキルって何？と思うかもしれませんが、デザインにもコーディングと同じように基本的な覚えないといけない技術が存在しています。
どんな優れたデザインでも、デザインの基本は押さえていたり、基本を踏まえた上であえて崩したりしています。
デザインの知識はWeb制作に限らず、プレゼン資料作成など色々な業務で活かすことができるので、しっかりと身につけておくことで必ず役立ちます。
本で知識を身につける – デザインスキル
デザインのスキルはしっかりとまとめられている本で勉強するのがおすすめです。
しっかりとした本を一冊読み込むだけでレベルがぐんと上がります。Webデザイナーになりたい方は必ず読んでおいた方がいい本をご紹介しておきます。
ノンデザイナーズ・デザインブック
Webデザインに限らず、デザイン全般の入門書として強い支持を集めている本です。デザイナーの入門書はこの1冊で間違いありません。
なるほどデザイン
こちらもWebデザインのための本ではありませんが、デザインに関する考え方や基本的な知識を身につけることができる本です。ノンデザイナーズ・デザインブックと比べると、デザインを活用するための内容が書かれていて、デザイナーだけではなく、すべてのビジネスマンにとって読んで欲しい本です。
だから、そのデザインはダメなんだ。
実際にWebデザインの例を見ながら、そのデザインの良いところ、悪いところが紹介されている本です。扱われている題材が実際のWebデザインなので、そのまま実際のWeb制作に繋げることができるため、より実践に繋げやすい内容となっています。
Webデザイン必携。 プロにまなぶ現場の制作ルール84
これは実際に現場のデザイナーにとっても役に立つ本となっており、少し上級者向けの本ですが、現場で役立つ情報が書かれているので読んでおいて損はありません。実際のWebデザイナーたちがどんなことをしているのかをイメージできるため、モチベーションも上がります！
優れたサイトを参考にしてテクニックを覚える – デザインスキル
本でデザインの基礎が勉強したら、次は実際のWebサイトから色々なテクニックを学びます。
いきなり自分で0からWebデザインを始めようと思っても、なかなか作れません。まずは先輩デザイナーの方たちが作ったWebサイトから優れたアイデアやテクニックを学び、自分の力に変えていくことが必要です。
Webデザインのギャラリーサイトを活用すれば、優れたWebサイトに絞って見ていくことができます。
おすすめのギャラリーサイトはこちら↓
ギャラリーサイトは定期的にチェックして、最新のデザインを常に気にかけるようにしましょう。
その他のおすすめギャラリーサイトはこちらの記事で紹介しています↓
Webサイトを作って身につける – デザインスキル
デザインスキルを身につけるのに最もおすすめなのは実際にWebサイトを作ってしまうことです！
公開されない架空のページのデザインではモチベーションが続かず、途中で投げ出してしまう人がたくさんいます。
また、実際に自分でWebサイトを立ち上げてみることで、モチベーションを高め、コーディングの技術も伸ばすことができます。
おすすめはWordPressでのサイト制作です。WordPressを使えば基本のレイアウトはテンプレートファイルで作られているので、デザインをアレンジしていく形でWebデザインを実践することができます。Webデザインについての勉強過程なんかをブログにしてみると、自分で振り返ることもできて一石二鳥かもしれません。
4. デザインツールの使い方を独学で身につける
Webデザインを作るときは、UIデザインをデザインツールで作成し、そのデザインを元にしてHTML、CSSでコーディングをしていくという流れが一般的です。
デザインツールを使いこなせるようになることで、デザインの幅が広がるだけでなく、効率的にデザイン制作を行えるようになります。
Webデザインの現場でよく使われているツール
Webデザインのためのデザインツールは様々なものがありますが、下記に紹介するツールが人気です。
- Sketch
- Adobe XD
- Photoshop
- Illustrator
Sketch、Adobe XDはUIデザインツールと呼ばれるジャンルのツールで、どちらか1つ使いこなせればWebデザインの制作ができるようになります。
PhotoshopとIllustratorは、それぞれ高機能なデザインツールで、使えなくてもWebデザインを制作することはできますが、使いこなせるとより高度で複雑なデザインが制作できるようになります。
Sketch
Sketch(スケッチ)はページのレイアウトなど、UIデザインを作成するために使われるツールです。PhotoshopやIllustratorと違ってUIデザインに特化したツールなので、動きも軽快で、直感的な操作なので初心者の方でも使いやすいツールです。
Adobe XD
Adobe XDはSketchと同じくUIデザインツールです。PhotoshopやIllustratorを提供しているAdobe社のツールなので、とても信頼性の高いツールです。Sketchよりも使いやすく、サクサクと操作できるのが特徴です。
Photoshop
Photoshop(フォトショップ)は画像編集に使うツールです。Webサイトのデザインに必要な画像を編集したり、ページのイメージを作る際にも使われたりします。少し初心者には難しいソフトですが、Webデザイナーになるためには必須のツールなので、頑張って使えるようにしましょう。
Illustrator
Illustrator(イラストレーター)はベクター画像を作成したり編集するためのツールです。アイコンやロゴなど、複雑な形を持つ画像はほとんどがベクター画像で使われています。WebデザインのためにはPhotoshopで十分かもしれませんが、優れたWebデザインを作っていくためには使えるようにしておきたいツールです。
デザインツールの使い方
デザインツールの使い方については、別の記事で詳しくご紹介しています。下記を参考にして、デザインツールのスキルを身に付けてみましょう。
本で基本を覚える – デザインツールのスキル
デザインツールの基本はWeb上のサービスではなかなか覚えることはできません。しっかりと必要な内容がまとめられている本を参考にして身につけるようにしましょう。
UIデザイナーのための Sketch入門＆実践ガイド
Sketchの基本的な使い方から応用的なテクニックまで幅広く紹介されている書籍です。この一冊に書かれている内容をしっかり押さえれば、Sketchがある程度使いこなせるようになります。
世界一わかりやすいAdobe XD UIデザインとプロトタイプ制作の教科書
こちらはAdobe XDの使い方が紹介されている書籍です。XDは登場したてのツールなのであまり書籍は発売されていませんが、この本があれば初心者の方でもXDをある程度扱えるようになります。
世界一わかりやすい Illustrator & Photoshop 操作とデザインの教科書
世界一わかりやすいというタイトルが付けられているだけあって、説明が本当にわかりやすく、PhotoshopとIllustratorの入門書にはおすすめの一冊です。
Photoshop しっかり入門CC/CS6/CS5
Photoshopの基本が本当に丁寧に分かりやすく説明されており、入門書にぴったりの本です。つまづきやすいポイントもしっかりと説明されていて、しっかり理解を深めながら読み進めることができます。内容もしっかりしているので、入門書ですがそこそこの力を付けることができます。
Illustrator しっかり入門
上記の本のIllustrator版です。Photoshop版と同じく、分かりやすく丁寧な説明が特徴の書籍です。Illustratorをしっかり使いこなせるようになりたい方は、この本で使い方を覚えましょう。
5. SEOとアクセス解析の知識を独学で身につける
Webサイトを作ったり運営していく上で、SEOの知識は欠かせません。せっかくWebサイトを作ってもアクセスされなければ意味がありませんよね。
アクセス解析ツールの代表はGoogle アナリティクスです。これ1つで幅広いアクセス解析ができてしまうので、Webサイトを作ったら忘れずに導入しておくようにしましょう。
実際にWebサイトを運営する – SEOとアクセス解析
SEOに関しては様々な本で扱われていますが、これに関しては実践しないと絶対に身につけることはできません。また、SEOにはその時々で効果的な方法が変わってしまうため、Webで知識を増やしていくのがおすすめです。
Webサイトの運営は、公開してからしばらくアクセスがほとんどない状況が続き、少し苦しい部分もありますが、ある程度アクセス数が増えてきた頃には自然とSEOの知識やアクセス解析ツールの使い方が身についているはずです。
こちらの記事を読んでいただければSEO対策はどういうことをするものなのか分かるかと思います。
まとめ
Webデザインを身につけるためにはただ知識を増やせばいいというだけではなく、ツールの使い方や最新のトレンドを知っておく必要があり、幅広い内容を学ばなければなりません。
しかし、だからこそ面白いのがWebデザインです。
コーディング技術が優れたWebデザイナーもいれば、個性的なWebデザインが得意なWebデザイナーもいます。
優れたWebデザイナーの形は1つではなく、自分の個性を伸ばしていく必要があります。
まずは基本をすべて押さえて、自分なりのWebデザインを探してみてください！
