Webデザインの勉強本は非常に多く出版されているので、独学でも十分に勉強していけます。
本の良さは、何と言っても体系的に学習していけることです。
ただ、本がたくさんありすぎて、どの本を選んだらよいかわからないという人も多いでしょう。
そこで今回は、初心者向けのWebデザインのおすすめ入門書を紹介します。
これからWebデザインを勉強したい人、勉強を始めてみたもののいまいち捗らない人は参考にしてみてください。
HTML・CSSの本
Webデザインをするには学ぶことがたくさんありますが、まずはHTML・CSSを使ってサイトを作ることから始めるのがおすすめです。
スラスラわかるHTML&CSSのきほん
この書籍は、架空のカフェサイトを作りながらHTMLとCSSの基礎を学んでいく構成です。
作るサイトはスマートフォンに対応したレスポンシブ・デザインの手法なので、今の時代に即した制作の基本が理解できます。
一冊を通してじっくり1つのサイトを作っていくので、つまづくこともほとんどないでしょう。
まずは手を動かしてサイト作りを体験するのが理解の早道です。
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
ブロガーとしても著名なWebデザイナーManaさんが執筆したWebデザインの入門書です。
SNS上でもよく話題に上がっていて、非常に売れているようです。
前半は基礎知識の解説、後半はサンプルのサイトを作っていく構成になっています。
HTML・CSSだけでなく、Webデザイン全般の知識をかいつまんで解説しているので、Webデザインの何たるかをイメージしやすくなります。
先述の『スラスラわかるHTML&CSSのきほん』かこの本のどちらか一冊、あるいは反復練習の意味で両方読んでもよいと思います。（どちらか一冊を繰り返してもOK）
できるポケット Web制作必携 HTML&CSS全事典
HTML・CSSの辞書です。
各タグ・プロパティの解説は簡潔ですが、その反面、探してサッと記述を確認できる使いやすさが特徴です。
勉強中に机の横に置いておき、ちょっと調べたい時に使うのに適しています。
ネットで調べるでもよいですが、このような事典を手元に置いておくと便利です。
小型本なので、持ち運び用途にも適しているでしょう。
HTML5&CSS3デザイン 現場の新標準ガイド
言語の概念や文法、タグ・プロパティの解説が充実しており、HTML・CSSについてより深く理解できる本です。
ゼロからサイトを制作する際のマークアップ設計で真価を発揮します。
そのため、どちらかと言うと中級者向けですが、辞書として使えるので初級者でも使えるでしょう。
HTML・CSSの正しい知識を身につけるのにおすすめで、Webデザイナーはもちろん、フロントエンドエンジニアにも適した一冊です。
Photoshop・Illustratorの本
WebデザイナーならAdobeソフトが扱えなければなりません。
最低限必要なのは、Photoshop・Illustratorの2つです。
Photoshop しっかり入門
初めてPhotoshopに触る人向けの入門書です。
画面のスクリーンショットと丁寧な解説で、初心者の方でも着実にソフトを理解していけます。
Photoshopは非常に多機能で、使う人次第で様々なアイデアを活かせる奥の深いソフトです。
ソフトを隅から隅まで覚えるのは大変だし、その必要もありません。（そんな人はプロの中でも一部の人でしょう）
基本的な機能とその操作方法を覚えるならこの一冊で大体カバーできるでしょう。
世界一わかりやすい Illustrator 操作とデザインの教科書
初心者にとって、Illustrator は Photoshop よりも難しく感じるかもしれません。
その理由は、パスやベジェ曲線など基本ツールの操作そのものが結構難しいからです。
私の感覚ではありますが、
「基本を覚えてからが奥の深いPhotoshop」
に対し
「基本を覚えるまでが癖の強いIllustrator」
といった印象です。
この本は、操作の手順を一つ一つ丁寧に図解で追ってくれるので、全くの初心者にもわかりやすいと思います。
各章の最後にはレッスン問題もあるので、飛ばさずに手を動かして基本操作を覚えていきましょう。
デザインの学校 これからはじめる Illustrator の本
入門書を読んでも本当に習得できているのかと心配に感じるかもしれません。
そんな時におすすめの本です。
あるいは、最初にこの本から始めてもよいでしょう。
先述したPhotoshopとIllustratorの参考書は教科書で学ぶようなスタイルであるのに対し、このシリーズは練習帳・ドリルの位置付けと言えそうです。
要するに、
「とにかく手を動かして慣れろ！そうすればわかってくるよ！」
という趣旨で、解説が充実した本とは少し趣が異なります。
ロゴ・ 名刺・地図・ポストカード・ブログのタイトル画像などを作成していくため、実践をイメージしやすく、解説通りに真似して作ることで操作を身体で覚えていきます。
Photoshopにも同シリーズの本があります。
WebデザインのためのPhotoshop+Illustratorテクニック
Webデザイン業務におけるPhotoshopとIllustratorの使いこなし術を解説した本です。
ワイヤーフレーム・画像加工・パーツ作成・デザインカンプ・書き出しなど、プロセスごとによく使う機能を流れで理解できるので、「Webデザインの実務ではどんな風に使うのか？」を知ることができます。
ソフトの基本操作を学んでからこの本を読めば、より実践的な使い方が身につくでしょう。
Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル
別のソフトになりますが、プロトタイピング・ツールのAdobe XDとそれを使ったWebデザインの制作手法が学べる本です。
PhotoshopやIllustratorが使える人ならXDの学習は難しくなく、これ一冊で十分に理解できるでしょう。
プロトタイピングを業務に取り入れる制作会社も増えてきており、今やスタンダードになりつつありいます。
余裕があればXDも身につけるとよいでしょう。
デザインの本
当然ですが、Webデザイナーはデザインのスキルも大切です。
理屈を知れば、誰でもデザインスキルはレベルアップするので、臆せずに学んでいきましょう。
ノンデザイナーズ・デザインブック
デザイン入門のド定番ロングセラー本です。
デザインのルールやテクニックはたくさんありますが、初心者がそれらをいきなり理解しようとするとおそらく消化不良を起こすし、網羅するのは簡単ではありません。
この本では、「整列・近接・反復・対比(コントラスト)」のレイアウト4大原則に絞って解説されているため、誰でもデザインの基本の「き」がしっかり身につくようになってます。
デザインの勉強の最初の一冊におすすめしたい本です。
なるほどデザイン 目で見て楽しむ新しいデザインの本。
発売当初から話題になっていたデザイン入門書です。
『目で見て楽しむ新しいデザインの本』というサブタイトルにある通り、絵・図をふんだんに使い、視覚に訴えるように本自体がデザインされています。
デザインの勉強はアカデミックなイメージを持つ人も多いでしょうが、この本は肩肘張らず誰でも楽しく読み進められます。
かと言って、内容が浅いわけでもないので、デザインを学ぶ人のとっかかりとしてはもちろん、デザイン経験者が見返しても頭の整理や気付きが得られそうです。
デザイン入門教室 [特別講義] 確かな力を身に付けられる 〜学び、考え、作る授業〜
センス云々でなく理論に基づいたデザインの基礎を学ぶ入門書です。
レイアウト・写真画像・配色・文字・インフォグラフィックと、デザインの主な要素を全般的に扱っています。
最後の実技演習編は、デザインの良い例・悪い例を見本に、学んできたデザインルールを復習していきます。
デザインの基本をきちんと学べる良書で、何度も見返して吸収したいものです。
レイアウト・デザインの教科書
デザインの骨格となるレイアウト（配置）要素にフォーカスした本です。
基本的なルールから応用テクニックまで、デザイン事例も踏まえてレイアウトに関する情報が網羅的に掲載されています。
タイトル通り、教科書あるいは辞書的に使えるので、初心者でなくても参考になる一冊です。
やさしい配色の教科書 [改訂版]
配色関係の本は色サンプルを列挙したサンプル本が多くありますが、この本は色・配色に関する基本的な知識・考え方・ルールの解説が中心です。
見開きで1トピックが完結し、解説も平易な表現なので初心者にもわかりやすいです。
色を学び始めるための導入におすすめの一冊で、この本で前提知識を身に着けてから配色サンプルを参照するとよいでしょう。
配色デザイン見本帳
実例が豊富な配色サンプル集です。
作りたいイメージごとに見開きで、解説・ポイント・実例・バリエーション（カラーパレット）が記載されています。
色選びに迷った時やインスピレーションを得たい時にサッと開いて参考にできるので、手元に置いておきたい一冊です。
Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集
実際にあるWebサイトを集めたサンプル集です。
レイアウトや配色以外にも、業種・ジャンル別、パーツ・素材別、印象別など、様々な切り口からWebデザインのポイントを解説しています。
Webデザイナーにとっては日頃から色々なWebサイトを見ておくことも大切で、この本を手に取れば、良質なWebデザインにたくさんアクセスできます。
実践的なアイデアのヒントとして、プロはもちろんのこと、勉強中の人でも模写するなどの活用ができるでしょう。
JavaScript・jQueryの本
使われていないWebサイトの方が少ないと言えるくらい、今やどのサイトも当たり前のようにJavaScriptが使われています。
プログラミングは得意でないデザイナーの人も少なくないですが、それでもちょっとした実装ができる程度のスキルは必要です。
jQuery標準デザイン講座
基本の知識・文法から実践的サンプルまで、jQuery初心者向けに丁寧に解説されています。
Webサイトでよく見かけるオーソドックスなjQueryの実装サンプルがたくさん掲載されていて、簡単なものから徐々にレベルが上っていくので、基礎を学びながら無理なくjQueryを習得していけます。
動くWebデザインアイディア帳
CSSや・Queryによる「動き」のサンプル集です。
『jQuery標準デザイン講座』より出版年が新しく今時なWebサイトの演出が豊富に掲載されています。
jQueryは技術としてのトレンドは過ぎているものの、ホームページやブログなどのWebサイトでは今も現役で使われています。
将来的なことを考えると、jQueryはガッツリ勉強すると言うよりも、これらの本で学ぶような内容が使えればOKかなと感じます。
スラスラ読める JavaScript ふりがなプログラミング
JavaScriptの入門書の中でもおそらく最もやさしいであろう本です。
プログラミングは英語かつ独特な記述方式なので、何を書いているのか直感的にわかりにくい難しさがあります。
この本では、プログラミングの各単語の読みや意味を逐一ふりがなとして振ってくれているため、ふりがなとセットで眺めることで自然と構文に慣れるよう工夫されています。
プログラミング言語は全く初めてという人におすすめです。
確かな力が身につくJavaScript「超」入門
サンプルを作りながらJavaScriptの基本を学ぶ入門書です。
サンプルは見たことあるようなものが多いので、初心者が抱く「これは何のためにやっているもの？」という疑問も少なく学習していけます。
扱う内容も難しすぎず、ボリュームも多すぎないので、Webデザイナー志望の人にも調度良いくらいのレベルでしょう。
わかりやすさ重視なら動画教材も有り
Webデザインのようにパソコン操作の伴う学習には、実際の動き（デモ）を見れた方が理解しやすいこともあるでしょう。
そんな時におすすめなのが動画教材販売サービスのUdemy (ユーデミー)です。
最近はサブスク型のサービスも増えてきましたが、ユーデミーの教材は借り切り型なので本と同じように購入でき、30日間返金保証も付いています。
頻繁に開催されるセールを狙えば、書籍と同程度の（あるいはもっと安い）料金で動画教材をゲットできますよ。
コメントをどうぞ