Webデザインを勉強したい！と思う人は多いかもしれませんが、学校で習う勉強と違って正解が1つではないため、決まった勉強法が無く独学で勉強することが比較的難しいです。

しかし、その難しいと言われる理由は何を勉強すれば良いのかが分かっていないことが理由である場合が多く、順序立てて必要な知識やスキルを身につけていけば誰でも独学でWebデザインを勉強することができます。

今回は多くの現役Webデザイナーに実際に話を聞いてみて、効率よく独学でWebデザインを勉強するための方法をまとめました。

Webデザインに必要なスキル

Webデザインと一概にいっても、ただ単にデザインが作れるだけでは意味がありません。

一般的にWebデザイナーと呼ばれる人たちは下記のすべてを一定レベル使いこなすことができる人たちです。

1. HTMLとCSS
2. JavaScript, jQuery
3. デザインスキル
4. デザインツールのスキル
5. SEOとアクセス解析

SEOまでWebデザインの仕事なの？と思うかもしれませんが、SEO対策を行うためにはコーディングやデザインの段階から考慮しておく必要があるので、そういった知識をWebデザイナーが持っていると、公開された後もアクセスされるWebサイトを作ることができます。

Web制作はただかっこいいサイトを作ることが目的ではなく、公開された後に役に立つWebサイトを作る必要があります。そこまで考えることができるようになって、初めてWebデザイナーと呼べる人になると私は思っています。

1. HTMLとCSSを独学で身につける

HTMLとCSSはWebサイトを作るために必須のスキルです。すべてのWebサイトがこのHTMLとCSSを使って作られています。

HTMLはWebサイトの骨格を作る部分で、サイトに表示する内容は基本的にHTMLで記述されています。

CSSはWebサイトのデザインを整えるための部分で、サイトのレイアウト、文字の色、マージンなどはCSSで記述されています。

HTMLとCSSは他の言語と比べると複雑な処理を行うことがないので、比較的プログラミングやコーディングに慣れていない人でも覚えやすい言語ですね。

オンラインサービスで勉強する – HTMLとCSS

最近ではプログラミングやコーディングを覚えるためのオンライン学習サービスが充実してきており、応用分野まで無料でしっかりと学習できるものも増えてきました。

おすすめのオンライン学習サービスをご紹介します。

ドットインストール

ドットインストールは色々なプログラミング言語を3分動画で学ぶことができる有名なサービスです。

実際にコーディングしている画面を見ながら説明を聞くことができるため、実際にコーディングのレッスンを受けているような感覚になります。

これだけ優れた内容を無料で視聴できるということで、利用しない手はありません。

Progate

Progateはブラウザ上で実際にコーディングやプログラミングを行いながら、学習を進められるオンライン学習サービスです。

実際にコーディングを行うことで、効率よく学習を進めることができます。

Codecademy

Codecademyは、Progateと同じようにブラウザ上でコーディングやプログラミングを行いながら学ぶことができるサービスです。

こちらは海外のサイトなので日本語対応はしていませんが、有名なサービスなのでコンテンツが充実しており、しっかりと知識を身につけることができます。

使われている英語もあまり難しいものではないので、英語に抵抗の無い方はこちらがおすすめです。

その他のオンライン学習サービスはこちらの記事をご覧ください

本で勉強する – HTMLとCSS

本は1冊に必要な内容がしっかりとまとめてあるので、オンライン学習サービスよりもしっかりと知識を身につけることができます。

オンライン学習サービスでなんとなくコツを掴んだら、本を購入して実際にサイト全体を作るプロセスを身につけるようにすると効率良くHTMLとCSSを学習することができます。

おすすめの本をご紹介しておきます。

スラスラわかるHTML&CSSのきほん

HTMLとCSSの基本が分かりやすく書かれている本です。内容が初心者向けになっているので、初めて勉強を始める方にも分かりやすく、

HTML5&CSS3デザインブック

こちらは上記の本よりも少し応用レベルの技術を身につけることができる本です。この本に書かれている内容をしっかりと身につけることができたら、「HTMLとCSSは使えます！」と自信を持って言えるようなレベルまで持っていくことができます。とはいえ、すごい難しい本というわけでもないので自信のある人はいきなりこの本から始めてしまうのもアリです。

HTML5/CSS3モダンコーディング

こちらは3つのサイトを作成していく中で、実際に現場ですぐに使うことができるような知識を身につけることができます。CSSの詳しい知識を身につけていくには非常におすすめの本です。

中上級者の方は

HTMLとCSSについて、もっと高いレベルを目指したい方は中上級者向けの書籍をこちらで紹介しています。ぜひ参考にして下さい。

2. JavaScriptとjQueryを独学で身につける

JavaScriptはWebサイトに「動き」をつける部分です。

基本的なWebサイトを作る場合はHTMLとCSSで完結させることもできますが、使いやすさやデザイン性を追い求めるとJavaScriptやjQueryが必要となってくる場合が多いです。

例えばGoogle Mapを表示しているWebページはよくありますが、Google MapなどはJavaScriptを使ってWebサイト上に表示されています。

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サイトに絞って見ていくことができます。

おすすめのギャラリーサイトはこちら↓

• MUUUUU.ORG
• WebDesignClip
• I/O 3000

ギャラリーサイトは定期的にチェックして、最新のデザインを常に気にかけるようにしましょう。

その他のおすすめギャラリーサイトはこちらの記事で紹介しています↓

Webサイトを作って身につける – デザインスキル

デザインスキルを身につけるのに最もおすすめなのは実際にWebサイトを作ってしまうことです！

公開されない架空のページのデザインではモチベーションが続かず、途中で投げ出してしまう人がたくさんいます。

また、実際に自分でWebサイトを立ち上げてみることで、モチベーションを高め、コーディングの技術も伸ばすことができます。

おすすめはWordPressでのサイト制作です。WordPressを使えば基本のレイアウトはテンプレートファイルで作られているので、デザインをアレンジしていく形でWebデザインを実践することができます。Webデザインについての勉強過程なんかをブログにしてみると、自分で振り返ることもできて一石二鳥かもしれません。

4. デザインツールの使い方を独学で身につける

Webデザインは、多くの人がデザインツールを使って作っています。

効率的にデザインができるようになるためには、まずツールをしっかりと使いこなせるようになることが重要です。

Webデザインの現場でよく使われているツール

Photoshop

Photoshop(フォトショップ)は画像編集に使うツールです。Webサイトのデザインに必要な画像を編集したり、ページのイメージを作る際にも使われたりします。少し初心者には難しいソフトですが、Webデザイナーになるためには必須のツールなので、頑張って使えるようにしましょう。

Illustrator

Illustrator(イラストレーター)はベクター画像を作成したり編集するためのツールです。アイコンやロゴなど、複雑な形を持つ画像はほとんどがベクター画像で使われています。WebデザインのためにはPhotoshopで十分かもしれませんが、優れたWebデザインを作っていくためには使えるようにしておきたいツールです。

Sketch

Sketch(スケッチ)はページのレイアウトなど、UIデザインを作成するために使われるツールです。Photoshopやイラストレーターと違ってUIデザインに特化したツールなので、動きも軽快で、直感的な操作で初心者の方でも使いやすいツールです。

Adobe XD

Adobe XDはSketchと同じくUIデザインツールです。PhotoshopやIllustratorを提供しているAdobe社のツールなので、とても信頼性の高いツールです。Sketchよりも使いやすく、サクサクと操作できるのが特徴です。

これらのツールについて詳しく知りたい方はこちらの記事をご覧ください。

本で基本を覚える – デザインツールのスキル

デザインツールの基本はWeb上のサービスではなかなか覚えることはできません。しっかりと必要な内容がまとめられている本を参考にして身につけるようにしましょう。

世界一わかりやすい Illustrator & Photoshop 操作とデザインの教科書

世界一わかりやすいというタイトルが付けられているだけあって、説明が本当にわかりやすく、PhotoshopとIllustratorの入門書にはおすすめの一冊です。

Photoshop しっかり入門CC/CS6/CS5

Photoshopの基本が本当に丁寧に分かりやすく説明されており、入門書にぴったりの本です。つまづきやすいポイントもしっかりと説明されていて、しっかり理解を深めながら読み進めることができます。内容もしっかりしているので、入門書ですがそこそこの力を付けることができます。

Illustrator しっかり入門

上記の本のIllustrator版です。Photoshop版と同じく、分かりやすく丁寧な説明が特徴です。

5. SEOとアクセス解析の知識を独学で身につける

Webサイトを作ったり運営していく上で、SEOの知識は欠かせません。せっかくWebサイトを作ってもアクセスされなければ意味がありませんよね。

アクセス解析ツールの代表はGoogle アナリティクスです。これ1つで幅広いアクセス解析ができてしまうので、Webサイトを作ったら忘れずに導入しておくようにしましょう。

実際にWebサイトを運営する – SEOとアクセス解析

SEOに関しては様々な本で扱われていますが、これに関しては実践しないと絶対に身につけることはできません。また、SEOにはその時々で効果的な方法が変わってしまうため、Webで知識を増やしていくのがおすすめです。

Webサイトの運営は、公開してからしばらくアクセスがほとんどない状況が続き、少し苦しい部分もありますが、ある程度アクセス数が増えてきた頃には自然とSEOの知識やアクセス解析ツールの使い方が身についているはずです。

こちらの記事を読んでいただければSEO対策はどういうことをするものなのか分かるかと思います。

まとめ

Webデザインを身につけるためにはただ知識を増やせばいいというだけではなく、ツールの使い方や最新のトレンドを知っておく必要があり、幅広い内容を学ばなければなりません。

しかし、だからこそ面白いのがWebデザインです。

コーディング技術が優れたWebデザイナーもいれば、個性的なWebデザインが得意なWebデザイナーもいます。

優れたWebデザイナーの形は1つではなく、自分の個性を伸ばしていく必要があります。

まずは基本をすべて押さえて、自分なりのWebデザインを探してみてください！

おすすめの記事