【スクール教材超え】WEBデザインの独学で絶対に読むべきおすすめ本17冊

WEBデザインの独学でおすすめの本

WEBデザイナーになるために本を買いたいんだけど、たくさんありすぎてわからないなぁ。。

これからWEBデザイナーを目指す初心者は、どの本を買えばいいの?

WEBデザインスキルを学べる本を書店やAmazonで探しても、数が多くて「どれを選べばいいのかわからない…」と迷いますよね…。

この記事では、これからWEBデザイン学習で読むべきおすすめの本をご紹介します!

スキルごとにおすすめの本を紹介しているので、あなたに今必要な本が見つかりますよ♪

具体的には以下の通り。

  • デザインの基礎を学べるおすすめの本
  • デザインの各論を学べるおすすめの本
  • WEBデザインに特化したおすすめのデザイン本
  • デザインソフトについて学べるおすすめの本
  • コーディングを学べるおすすめの本
  • jQuery(JavaScript)、WordPressを学べるおすすめの本
  • WEBサイトの売り上げアップを学べるおすすめの本

ここで紹介する本を読めば、WEBデザイナーに必須のスキルは全て身につけることが可能です。

やぁみんな!僕がWEBデザインスクール校長のさかしだ!

独学でWEBデザイナーを目指すときに、絶対に読むべき本を紹介するよ♪

スクール運営している立場から選んだから、スクールの教材並、もしくはそれ以上の学びを得られるぜ。

爆安でスクール教材顔負けの学びを手に入れよう!

【↓↓当社の格安WEBデザインスクールも好評です♪ 入会金69,800円 + 月額10,800円

web食いオンラインスクール

【webデザインスクールについて詳しく知りたい人はコチラ】
Webデザインスクール・オンライン講座15個を徹底比較してみた

WEBデザイナーになるために必要なスキル

webデザイナーに必須のスキル

WEBデザインの学習をするにあたり、まずは「どこまで学べば良いのか?」というゴールを知っておきましょう!

結論を言うと、「WEBサイトを一通り作れるスキル」を習得する必要があります。

というのも、最近のWEBデザイナーはデザインのみでなく、コーディングまで担当する場合が多いためです。

デザインだけでも生き抜くことはできるのですが、ハイクオリティなデザイン実績がないとなかなか厳しいです。

なので、なるべく「デザインからコーディングまで一気通貫でできます!」と自身のスキルをパッケージ化すると、就職・転職や案件獲得につながりやすくなると言えるでしょう。

具体的には、以下のスキルは身につけたいところです。

【WEBデザイナーに必須の基礎スキル】

  1. デザイン基礎(基礎・表現・理論)

  2. デザイン各論(レイアウト・フォント・配色)

  3. デザインソフト(Photoshop・Illustrator・XD等)

  4. コーディング(HTML/CSS・jQuery)

「これからWEBデザイナーになりたい方」は、上記「WEBデザイナーに必須の基礎スキル」を習得しましょう!

上記は本で学習可能です!

さらに上を目指すのであれば「WordPress」や「WEBサイトの成果を最大化するためのおすすめ本」まで読んでもらうのがおすすめですね。

17冊を紹介しますが、あなたに必要は本だけを選んで読んでいただければ大丈夫ですよ♪

勉強することは多いんだねぇ〜。

WEBデザインもIT職だから、ソフトの使い方やコードの書き方を覚える必要があるからね。

本っていっぱいあるけど、どんな基準で選ぶといいの?

「写真やイラストが多いもの」、「コーディングやソフトの使い方系の本はなるべく最近のもの」を選ぶのがおすすめだ!

テキストだけだと理解しにくく挫折しやすいってことと、最近出版された本を使わないと今は使われていないスキルを学ぶことになるからだね。

なるへそ!

ちなみに、一冊で全て学べる….なんて本はないの?(笑)

さすがにそれはないね(笑)

無駄なく体系的に学びたいならスクールが作ったオリジナル教材を使うしかないかな。

シュン…。

でも、本の方が深く学べる部分も多いと思うから、地道に学ぶわ♪

それがいいと思うぜ!

スクールの教材は体系的だけど、内容薄い部分もあるからさ。

じゃあ早速おすすめの本を紹介していくね!

デザイン基礎(基礎・表現・理論)を学ぶのにおすすめの本3選!

デザインの基礎学習におすすめの本

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

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

学べること デザインの基礎(デザインの4原則・フォント)
料金 2,398円(税込)
著者 Robin Williams

ノンデザイナーズ・デザインブックは、webデザイン専用の本ではありません。

ですが、すべてに共通するレイアウトデザインの基礎である「デザインの4原則」についてイラスト付きでわかりやすく教えてくれます。

「デザインの4原則」とは近接・整列・反復・コントラストのことで、この原則を守るだけで「デザインされている気がするデザイン」から「デザインされているデザイン」にレベルアップするのです!

WEBデザイナーは「デザインすること」が仕事なので、デザインの4原則は必ず身につけておきたいところですね。

ほとんどのクリエイターは読んでいるので、「デザインの勉強をしよう!」と決意したら初めに読んでほしい本です!

「ノンデザイナーズデザインブック」の中身をちょっとだけのぞいてみよう!

ノンデザイナーズデザインブックの中身

ノンデザイナーズデザインブックの中身

ノンデザイナーズデザインブックの中身

「ノンデザイナーズデザインブック」の口コミ・評判

【良い口コミ抜粋】

近接、整列、反復、コントラスト。

この4つの原則に絞って、僕らが感覚的にやっていることの中で抜けがちな落とし穴をきっちりと埋めていく。しかしそれは決して応急処置ではなく、視覚化された時に明らかな違いを生む。

ああ、俺は才能がなかったな、と感じたことの理由がマジでまず説明され、さらに間違い探しで自分の近くの弱さを体感する。

(出典:Amazonレビュー

【批判的な口コミ抜粋】

本書はノンデザイナーズつまりデザイナーでない人のための本であると謳っていますが、わたしが見た限り若干語弊があります。

本書の真の対象読者は「デザインという概念を全く意識した経験のないひと」だと思います。なぜなら、この本に書いてあることの多くの部分はデザインを意識したことのある人間であれば既に(言葉としては知らなくても)実践していると思われるからです。

デザインの基本原則を言語化しているという意味では、確かに知識のない人間には為になります。

(出典:Amazonレビュー

【この本の詳細を見るならこちら】
ノンデザイナーズ・デザインブック

なるほどデザイン

なるほどデザイン

学べること デザインの考え方・表現方法
料金 2,200円
著者 筒井 美希

webデザイン専門の本ではありませんが、「目的に合わせたデザインの考え方・表現方法」が身につく本なので、ぜひ読んでほしい一冊です。

デザイン初心者のほとんどが「どういうデザインにすればいいんだろう?」と手が止まるか、「なんとなく、感覚的にデザインして目的を達成できないデザイン」をしてしまいます。

原因は「デザインの考え方」がわかっていないからです。

「なんでここにこの要素を配置したの?」「なんでこの色なの?」「なんでこの文字の大きさなの?」という部分を、webサイトの目的に沿って論理的にデザインできないと、良いデザインは生まれません。

デザイン1つ1つに「根拠となる考え方」を持つ必要があるのです。

そして「なるほどデザイン」には、「デザインの考え方」から「デザインをつくる流れ」、「デザインを良くするための表現方法」などがわかりやすい言葉で書かれています。

つまりこの1冊だけでも、webデザインにおける理論をマスターできます。

「プロのデザイナーの頭の中ってこんな風になってたのか…」とのぞける貴重な一冊です♪

「なるほどデザイン」の中身をちょっとだけのぞいてみよう!

なるほどデザインの中身

なるほどデザインの中身

なるほどデザインの中身

なるほどデザインの中身

なるほどデザインの中身

わっっっっかりやすぅぅぅう〜〜!!

デザイン初心者は必読だ!

こんなにデザイン表現を上手く言語化している本は他にないぜ!

「なるほどデザイン」の口コミ・評判

【良い口コミ抜粋】

全ページなるほどでいっぱい。デザインを本を読んでやってみたけど、よく分からない人に。

「伝えたいこと」にそったデザインってなに?
色ってどうやって作ってんの?
そもそもデザインってなに?
と途中で迷宮入りしそうなときに、これがあると助かると思います。
基礎の基礎を、直感的なものを丁寧に教えてくれます。

(出典:Amazonレビュー

【批判的な口コミ抜粋】

いくつかのサイトで推薦されていたので買いましたが、私はあまり良い本だとは思いませんでした。
本のデザインはきれいですが、よく読むと内容が薄い、説明が説得力がなく頭に入って来ない、薄っぺらい内容な印象です。
デザインの本は他に「ノンデザイナーズデザインブック」と「デザイン・レイアウトが上手になる本」を読みましたが、これらの本の方が内容が濃かったですし勉強になったと思います。

(出典:Amazonレビュー

【この本の詳細を見るならこちら】
なるほどデザイン

エンジニアのための理論でわかるデザイン入門

エンジニアのための理論でわかるWEBデザイン入門

学べること デザイン理論(コンセプト、情報整理、レイアウト等)
料金 2,200円
著者 伊藤 博臣

この本は、「デザインにセンスや芸術性は不要」と伝えているデザイン本です。

デザインとは「機能」があって初めて成り立つものと言っており、機能的必然性の延長線上にあるものだということを教えてくれます。

噛み砕いていうと、「デザインにも役割・目的を持たせれば必然的に良いデザインになる」ということ。

たしかに、「ユーザーは最後に右下を見る傾向があるから、購買ボタンは右下に配置されることが多い」と言われると、納得感があり、良いデザインに感じますよね。。

「根拠のあるデザイン」が良いデザインということです。

つまり、「自分はデザインセンスがないからWEBデザイナーは向いてないかも…」という人に読んで欲しい本ですね!

「感覚的なデザイン」から「論理的なデザイン」ができるWEBデザイナーになれます!

エンジニアの論理的思考が満載なので、かなり納得できる内容でした。

「エンジニアのための理論でわかるデザイン入門」の中身をちょっとだけのぞいてみよう!

エンジニアのための理論でわかるデザイン入門の中身

エンジニアのための理論でわかるデザイン入門の中身

エンジニアのための理論でわかるデザイン入門の中身

エンジニアのための理論でわかるデザイン入門の中身

イラストや図解は多くないね…。

所々しかないから、活字が苦手な人は読みにくいかも…。

でも、中身は最高にわかりやすいぜ!

デザインを理論で武装しよう!

「エンジニアのための理論でわかるデザイン入門」の口コミ・評判

【良い口コミ抜粋】

デザインにまったく関わったことは無く、イロハをまったく知らない者でもデザインってこういう考え方でやっていくんだという初歩的な部分を知ることができた。
写真やサンプルが豊富なため分かりやすかった。
入門書としてはボリュームとしてもちょうどいいと思う。

(出典:Amazonレビュー

【批判的な口コミ抜粋】

黄金比や三分割は分かるが実際にそれを使用したデザインの分割部分に必然性を感じない。
何故そこが分割ラインになる?(ギターのデザイン)
必要ないと言っているが、やはりセンスが必要なようです。

(出典:Amazonレビュー

【この本の詳細を見るならこちら】
エンジニアのための理論でわかるデザイン入門

デザイン各論(レイアウト・フォント・配色)を学ぶのにおすすめの本3選!

デザインの各論学習におすすめの本

上記3冊で「デザイン全体の基礎」は学習できますが、ここからは各論です。

レイアウト・フォント・配色に分け、それぞれおすすめの本を紹介しています。

デザインは各論に分けて深く勉強すると、より上達しやすくなりますよ♪

けっきょく、よはく。(レイアウト)

けっきょく、よはく。

学べること レイアウトの考え方、今風なおしゃれデザインの作り方
料金 1,980円
著者 ingectar

WEBデザインの「レイアウト」を学ぶのであれば、「けっきょく、よはく。」がおすすめ。

というのも、最近のWEBデザインのレイアウトは「余白」を上手く利用し、情報を整理することを重視しているためです。

昔のWEBサイトって情報がギチギチに詰め込まれていて、読みにくかったですよね?

また、素人デザインっぽく見えるのは、余白を怖がり余白を埋めることで、余裕のないデザインになるのが一つの理由だから。

そんな背景もあり、今は必要な情報だけを整理し、いかにわかりやすく伝えるかがデザインで大事にされているのです。

そして、情報をより整理するために必要なのが「余白」だと、この本では言っています。

レイアウトを学ぶなら「今」主流のデザインを学ぶべきなので、初心者の方でレイアウトに悩んでいる人は必読です♪

「けっきょく、よはく。」の中身をちょっとだけのぞいてみよう!

けっきょく、よはく。の中身

けっきょく、よはく。の中身

けっきょく、よはく。の中身

けっきょく、よはく。の中身

めっちゃ読みやすいね♪

「読みやすさ」を解説している本だからってのもあるね(笑)

会話形式ってのも高評価だ。

「けっきょく、よはく。」の口コミ・評判

【良い口コミ抜粋】

プロのデザイナーの引き算の視点が学べる良い本だと思います。

理想は、ダサめなデザインもスタイリッシュなデザインも、状況に応じて、両方作れるように
なる事だと思いますので、
いずれにしても、オススメ出来るいい参考書だと思います。

(出典:Amazonレビュー

【批判的な口コミ抜粋】

テーマは「余白」ですよね?
しかし、中身は余白が中心の本とは言い難い。
普通のデザイン解説集と変わりません。

(出典:Amazonレビュー

【この本の詳細を見るならこちら】
けっきょく、よはく。

ほんとに、フォント。(フォント)

ほんとに、フォント。

学べること フォントについて(フォントの基礎、選び方、フォントの感じ方、使うシチュエーション等)
料金 1,980円
著者 ingectar-e

フォントについては、「ほんとに、フォント。」を読むのが良いでしょう。

フォントの基礎的な内容や選び方、ユーザーがフォントに対して感じる感情、書体の向き不向きなど、フォントについて知っておくべき内容が網羅的に解説されているためです。

WEBデザインでは使えるフォントの種類は限られますが、フォントによってイメージが大きく変わるため、非常に重要な要素になります。

読みやすさだけでなく、誰に向けて作られたデザインか、どんなメッセージを受け取って欲しいかもフォントによって左右されるので、しっかり勉強しましょう!

お察しの通り、「けっきょく、よはく。」の第二弾なので、とてもわかりやすいです。

「ほんとに、フォント。」の中身をちょっとだけのぞいてみよう!

ほんとに、フォント。の中身

ほんとに、フォント。の中身

ほんとに、フォント。の中身

ほんとに、フォント。の中身

ほんとに、フォント。の中身

うちのスクールでも「フォントの選び方がわかりません…」という生徒さんが圧倒的に多い。

選び方がわかるだけでもデザインが飛躍的に良くなるから、ぜひこの本を読もう!

フォントについて体型的に学ぶなら、「ほんとに、フォント。」だね!

ただ、どちらかというと「初心者」向けのフォント本と言えるかも。

「ほんとに、フォント。」の口コミ・評判

【良い口コミ抜粋】

良いデザインの作例を見る勉強のためこちらの本を読んでみました。

結果、「スクリプト体は多用しすぎないよう注意、長文には使わない」「フォントをビジュアル要素としても考える」などなど多くの学びがあったため、本当に読んで良かったです。

他のシリーズ本にも共通しますが、イマイチ例と横並びでよい作例が並べられているのでわかりやすいです。
一つのテーマでいくつか作例のバリエーションがあるのも良いなと思います。
色々なテーマの作例を通し、イマイチ例にはいくつかの共通点があることも段々わかってきます。

(出典:Amazonレビュー

【批判的な口コミ抜粋】

フォント選びの参考に本書を購入したが、フォントの話ではなく、大部分はレイアウトの話で騙された。

内容は、先輩がダメな新人にアドバイスする話だが、そもそもレイアウトの改善指摘(余白、フォントの大きさ、文字間、カテゴライズなど)がほとんどで、フォントを活かしたデザインを作るための「フォント選び」については、なんとなくしか書いてない。

(出典:Amazonレビュー

【この本の詳細を見るならこちら】
ほんとに、フォント。

見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色

見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色

学べること 配色について(色の組み合わせ方、色が持つイメージなど)
料金 1,980円
著者 ingectar-e

初心者WEBデザイナーが配色を学習するならこちらの本がおすすめ♪

8つのカテゴリーに沿った色の使い方を、実例を使って解説してくれる本となっています。

なぜこの本がWEBデザイナーにおすすめかというと、1つの作品に使う色を3色に限定しているからです。

WEBデザインは「情報」を効率よく伝えるためにデザインをするので、だいたい「ベースカラー」「メインカラー」「アクセントカラー」の3色に絞られることが多いです。

絵画のような芸術的にたくさんの色を使って表現することはほぼありません。

もちろん、超上級WEBデザイナーなら多くの色を使ってもうまくまとめられますが、初心者の方には難しいでしょう。

なので、3色に絞って配色を学べるこの本が、初心者の方の配色の勉強におすすめと言えるのです♪

使い方は、細部まで読み込むというより全体をサッと見て、デザインの配色を決める際に手元に置いておくのがベストですね!

配色アイデア手帖 めくって見つける新しいデザインの本」も配色本では人気なんだけど、色数が多いから初めての人にはちょっと難しいかも。

レベルアップしたら、追加で購入する形で良いと思うぜ!

ちなみに、この本の著者は「けっきょく、よはく。」などでおなじみの「ingectar-e」さんだから、かなり読みやすいよ♪

「見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色」の中身をちょっとだけのぞいてみよう!

見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色の中身

見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色の中身

見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色の中身

見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色の中身

 

「見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色」の口コミ・評判

【良い口コミ抜粋】

色見本なら何時間も眺めていられる自分にとって、衝動買いしてしまうほど、素敵な本でした!
でも、初心者向けの本ですので、バリバリの美術系の方には基本過ぎると思いますが…。

3色にした場合のメインカラー、サブカラー、アクセントの使い方が、実例をあげてあるので参考になります。
組み合わせ毎にイメージタイトルがついているので、それを参考に色を確認したり、逆に色から組み合わせを確認もできます。

(出典:Amazonレビュー

【批判的な口コミ抜粋】

文字色と背景色のコントラスト比が低すぎる作例が多く、Webデザインにおいては「これは参考にしてほしくないな…」と思うものが多くありました。
p.204の作例などが顕著で、流石にチラシでもこれは採用しないのでは…?と思うぐらい文字が読みにくいです。
また、作例のほとんどが女性向けのデザインを取り扱っており、男性向け、ビジネス向けのデザインをされている方はあまり参考にならないと思います。

(出典:Amazonレビュー

WEBデザインに特化したデザイン本は以下2冊がおすすめ!

webデザインに特化したデザイン学習本のおすすめ

ここからは「WEBデザインに特化したデザイン学習本」を紹介します。

WEBデザインはデバイスで表示されるため、紙媒体などとは少し事情が違うところが多いです。

そのため、デザイン全体の基礎を習得した後、WEBデザインに特化したデザインを学ぶと、理解がより深まるでしょう♪

WEBデザインの企画・設計なども学べます。

いちばんよくわかるWebデザインの基本きちんと入門

いちばんよくわかるWebデザインの基本きちんと入門

学べること WEBデザインの全般知識(デザイン基礎、デザイン各論、コーディング、運用・マーケティング等)
料金 2,618円
著者 久保知己

WEBデザインを網羅的・体系的に学習したい場合は、この本がおすすめです!

WEBデザインの目的や企画・設計方法、デザインの基礎・各論、コーディングまで学習できるので、この一冊でWEBデザインデ大切なことをマルっと吸収できます。

もちろん、専門の本ほど1つのテーマを深く掘り下げていませんが、「WEBデザイン」に特化した知識を紹介してくれているのでかなり実用的♪

「DTP・イラスト系の情報はいらないのよ…」という方は、「WEBデザイン」だけの知識をこの一冊で吸収してみてはいかがでしょうか?

たしかにさ、本読んでると「CMYKで使われる配色は〜…」みたいにWEBデザインで必要ない知識が載っていることって多いよね。

「このページを他の知識に回してよ〜ん!」って思うことあるもん(笑)

デザインにもジャンルがあるからねぇ。

「まだWEBデザインについて何もわからない!」という方は、すごく勉強になるよ!

この本を読んでから専門の本で深ぼっていくってやり方もアリだと思うぜ♪

ちなみに、体系的に学べるけど、この一冊で完結するわけじゃないから勘違いしないようにね!

「いちばんよくわかるWebデザインの基本きちんと入門」の中身をちょっとだけのぞいてみよう!

いちばんよくわかるWebデザインの基本きちんと入門の中身

いちばんよくわかるWebデザインの基本きちんと入門の中身

いちばんよくわかるWebデザインの基本きちんと入門の中身

「いちばんよくわかるWebデザインの基本きちんと入門」の口コミ・評判

【良い口コミ抜粋】

(出典:Amazonレビュー

【批判的な口コミ抜粋】

これが入門?
理解できず読み進めていくことができません。

(出典:Amazonレビュー

【この本の詳細を見るならこちら】
いちばんよくわかるWebデザインの基本きちんと入門

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

学べること WEBデザインの全般知識(デザイン基礎、デザイン各論、コーディング、デザインアイデア等)
料金 2,350円
著者 久保田 涼子

「こんなとき、どんなデザインにすればいいんだろう…」という方向けに、「デザインアイデア」が豊富に収録してある本です。

そのアイデアが言語化されているので「WEBデザイナーのデザインの捉え方」なんかを学べる良書です。

ヘッダーデザインやフッターデザインなど、パーツごとに分けて解説されているのは斬新ですね!

知識があっても作れなければ意味がないので、本書で解説を読んで論理的にデザインを身につけ、いつでも使える・応用できるようにするという面で非常に役に立つでしょう♪

実際にデザインするとき、アイデアをすぐ引き出せるので手元にあると安心します。

この本は有名だよね♪

クリエイタースクールの有名校「デジタルハリウッドSTUDIO」の講師の方が書いた本だね!

デジハリのWEBデザインコースの学びを書籍で得られるなんて、なんてハッピーな時代なんだ。。

WEBデザインの考え方なんかもしっかり載ってていいね♪

「Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集」の中身をちょっとだけのぞいてみよう!

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集の中身

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集の中身

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集の中身

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集の中身

「Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集」の口コミ・評判

【良い口コミ抜粋】

(出典:Amazonレビュー

【批判的な口コミ抜粋】

具体的なHTML/CSSのコードも乗ってるのかと思ったけど乗ってなかった
ただサイトの実例はたくさん載ってたので見本帳という本の題名どおりではあると思った

(出典:Amazonレビュー

プロが作ったデザインを分析しまくって上達するのもおすすめだよ!

デザインの引き出しを増やせれば、デザインの幅が広がるしね♪

ギャラリーサイトもチェックしておこう!

【プロのデザインを参考にするならギャラリーサイトをみよう!】
【保存版】WEBデザイン時に参考となるおしゃれギャラリーサイト47選

デザインソフトの学習におすすめの本

デザインソフト学習におすすめの本

デザインソフトのおすすめ本を紹介するけど、正直、基礎操作に関してはネットに載っている情報の方がおすすめだ!

え?いきなり何?(笑)

「Photoshop入門」みたいな本たくさん出てるやん。

フォトショップって、実はWEBデザイン専門のソフトではないんだよね。

だから、WEBデザイン業務で使うデザインソフトの機能って超限定的なんだ。

本を買うのはもったいないし、動画で学んだ方がイメージしやすいぜ。

たしかに操作方法を学ぶんだったら、やり方を見せてもらう方がイメージしやすいかも…。

デザインソフトの複雑な機能を使う機会はほとんどないし、もしあってもその都度調べればOKだよ。

実際、僕もそうだし、プロのWEBデザイナーはみんなそうしてるぜ!

基本操作は、Adobe社が公式で出しているチュートリアルで学んで、あとは使い込むことでレベルアップするのがおすすめだよ♪

使ってるうちに自然となれるから。

【デザインソフトの基本操作はAdobe社のチュートリアルで十分】
フォトショップのチュートリアルを見る
イラストレーターのチュートリアルを見る
XDのチュートリアルを見る

ちなみに、デザインソフト(特にXD)は頻繁にアップデートするから、そういう点でも情報が早いネットで勉強するのがベストだ!

オッケー!使い方はネットで勉強するわ。

じゃあ、ここではどんな本を紹介してくれるの?

デザインソフトを効率よく使うための本だね!

以下本を読めば、デザイン作業が劇的に効率よくなるぜ!

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

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

学べること WEBデザインソフト(イラストレーター、フォトショップ、Adobe XD)の活用方法
料金 2,728円
著者 黒野 明子、角田 綾佳、森 和恵

WEBデザインで必須のデザインソフトの、効率的な使い方をわかりやすく、まとめて解説してくれている本です。(※基本操作を教えてくれる本ではありません)

イラストレーター、フォトショップはもちろん、プロトタイプ作成の主流となりつつある「XD」までをまとめて学べるので、便利な使い方、ソフト間の連携などプロの技を盗めます。

「プロがどのように効率的に使っているか(ノウハウ)」を身につけるには自分で経験する必要がありますが、それをプロがこっそり教えてくれる便利本です。

WEBデザイナーはスピード感も大切なので、この本を読んで爆速でデザインできるスキルを身につけましょう♪

「納期にいつも苦しんでる…」「デザイン作るのに2週間もかかっちゃった…」なんて人は、この本でデザインソフトの効率的な使い方を見直してみよう!

情報がちょっと古いけど、スピードアップには良いと思うぜ!

「世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書」の中身をちょっとだけのぞいてみよう!

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

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

世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書の中身

「世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書」の口コミ・評判

【良い口コミ抜粋】

(出典:Amazonレビュー

【批判的な口コミ抜粋】

本ではwindowsでは使えないものが多々あります。(本当は別の方法で使えるかもしれませんがmacユーザー目線なので教えてくれません。)
後、情報が古いので、そこにあると書いてあるものがなかったりすることが多々あります。
2021年でwindowsユーザーの人は、この本を買うと失敗する、もしくはモヤモヤした気持ちで勉強を進めていくことになると思います。

(出典:Amazonレビュー

コーディングスキルは以下のうち1冊だけ読み込もう!

コーディング学習におすすめの本

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

学べること
  • HTML/CSSの基本
  • レスポンシブデザイン
  • デザイン…等

(実際にコードを書くタイプの本)

料金 2,486円
著者 Mana

大人気ブログ「Webクリエイターボックス」の管理人「Mana」さんが書いた、超人気コーディング本。

HTML/CSSのコーディングだけでなく、デザインやユーザビリティなどにも触れられており、お得感満載の内容となっています。

もちろんイラストや図解、写真をふんだんに使っているのでとてもわかりやすく、苦手意識を持たず、楽しくコーディングを学べます。

前半でコーディングやデザインの基礎を身につけ、後半は実際にサイトを作ることでインプットとアウトプットを一冊でできるのも嬉しいポイントです♪

Flexboxなど、最新のコードを意識的に紹介しているところも好印象ですね!

この本はキャバコでも理解できたよ♪

「書店員がおすすめするNo.1コンピューター書」って言われるくらいだからね(笑)

コーディングはもちろん、デザインの基礎まで学べるから「先にコーディングを中心に勉強したい!デザインはサクッと学べればいいかな♪」って人におすすめだよ。

ちなみに、1冊でWEBデザイナーになれるわけではないから、そこは期待しすぎないようにね(笑)

あくまでも、基礎を体系的に、順序よく学べる本だよね♪

「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」の中身をちょっとだけのぞいてみよう!

1冊ですべて身につくHTML&CSSとWEBデザイン入門講座の中身

1冊ですべて身につくHTML&CSSとWEBデザイン入門講座の中身

1冊ですべて身につくHTML&CSSとWEBデザイン入門講座の中身

「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」の口コミ・評判

【良い口コミ抜粋】

(出典:Amazonレビュー

【批判的な口コミ抜粋】

まっくたの素人には不向きです。
買って読みました。HTMLとCSSが何を意味しているかは理解しました。
しかし、どういうフォルダ・ファイルを用意し、どのファイルに何を書くのか
の説明がなく、まるで分からない。HTMLのファイルをどうやって開いて編集するのかさえ書いてない。

(出典:Amazonレビュー

【この本の詳細を見るならこちら】
1冊ですべて身につくHTML & CSSとWebデザイン入門講座

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

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

学べること
  • HTML/CSSの基本
  • レスポンシブデザイン
  • WEBサイトの仕組み…等

(実際にコードを書くタイプの本)

料金 2,178円
著者 狩野 祐東

HTML/CSSの基礎中の基礎から、1サイトまるまるコーディングができるようになる1冊です。

「HTML、CSSってなんやねん?」というレベルの人も勉強しやすい内容になっていますが、実際にカフェのサイトを作りながら学べるので、終わった時にはひと通りコーディングができるレベルになれます。

画像やイラストがとても多く、しかもカラーページで作られているので、飽きずに勉強できますよ♪

HTML/CSSの基礎を学ぶなら、この本でOKです。

めちゃくちゃわかりやすいからこの本を使えば良いんだけど、floatっていうコードとか、今はあまり使われないコードも載っている点は要注意だ。

「スラスラわかるHTML&CSSのきほん」の中身をちょっとだけのぞいてみよう!

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

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

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

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

「スラスラわかるHTML&CSSのきほん」の口コミ・評判

【良い口コミ抜粋】

(出典:Amazonレビュー

【批判的な口コミ抜粋】

プログラミング未経験で本書に触った。
そして、お手本通りにキーボードを打った。しかし、結局どうして編集できたのかわからず、実際のWEBページ制作には知識を応用できなかった。レビューに騙された。

(出典:Amazonレビュー

【この本の詳細を見るならこちら】
スラスラわかるHTML&CSSのきほん

ちなみに、コーディングは本を読むだけじゃ身につかないから、とにかくコードを書きまくろう!

Progate」っていうコードの練習ができるサービスなども併用しようね!

WordPress・フロントエンドスキルを身につけられるおすすめ本2選!

WordPress・フロントエンド学習におすすめの本

jQuery最高の教科書

jQuery最高の教科書

学べること
jQueryの基礎・使い方
料金
2,838円
著者
株式会社シフトブレイン

jQueryを0から学べる本です。

最近のWebデザイナーは、ヘッダーの追従やハンバーガーメニュー、ドロップダウンメニューの挙動くらいは実装できることが望まれているので、jQueryの基礎くらいは勉強しておきましょう!

とはいえ、高度な動きはフロントエンドエンジニアの担当なので、この本に載っている「よく使われる動き」のみ勉強すればOKです♪

jQueryの基礎から教えてくれるので、安心してプログラミングの勉強を始められます。

紹介されている動きはおしゃれなで今っぽいので、楽しく勉強できますよ♪(若干難しさもあります)

JavaScriptは学ばなくていいの?

JavaScriptも使えるのがベストだけど、WebデザイナーはjQueryが使えればOKよ!

jQueryでよく使う動きはほぼ実装可能だ。

複雑な動きを実装する場合、フロントエンドの仕事になるしね。

「jQuery最高の教科書」の中身をちょっとだけのぞいてみよう!

jQuery最高の教科書の中身

jQuery最高の教科書の中身

jQuery最高の教科書の中身

jQuery最高の教科書の中身

「jQuery最高の教科書」の口コミ・評判

【良い口コミ抜粋】

(出典:Amazonレビュー

【批判的な口コミ抜粋】

内容は一から順に教えていくことだけで、結果から編集して動かして理解しようとしても正常に動きません。
買って失敗しました。

(出典:Amazonレビュー

【この本の詳細を見るならこちら】
jQuery最高の教科書

WordPress 仕事の現場でサッと使える! デザイン教科書

WordPress 仕事の現場でサッと使える! デザイン教科書

学べること
WordPressの基礎知識テーマ作成、カスタマイズ方法
料金
3,058円
著者
中島 真洋

「WordPressって何なの?」という初めてWordPress学習をする方にちょうど良い本です。

「デザイン教科書」というタイトルだけあって、WEBデザイナーが知っておきたい機能を中心に解説されています。

コーディングされたファイルがあるので、サンプルをダウンロードして、あとは書籍に沿ってWordPressサイト化していくだけで大まかなスキルが身につくでしょう。

WordPressで必須の「テンプレートファイル」や「テンプレートタグ」なども丁寧に解説されています。

また、クラシックエディターではなく、最近主流のブロックエディターに対応しているのも嬉しいポイントです♪

WEBデザインの仕事をしていると、必ずと言っていいほどWordPress案件にぶち当たるよ。

この本でWordPressの基礎知識は身につくから、必要になったら手にとって欲しいな♪

「WordPress 仕事の現場でサッと使える! デザイン教科書」の中身をちょっとだけのぞいてみよう!

WordPress 仕事の現場でサッと使える! デザイン教科書の中身

WordPress 仕事の現場でサッと使える! デザイン教科書の中身

WordPress 仕事の現場でサッと使える! デザイン教科書の中身

「WordPress 仕事の現場でサッと使える! デザイン教科書」の口コミ・評判

【良い口コミ抜粋】

(出典:Amazonレビュー

【批判的な口コミ抜粋】

内容をよく確認しないで購入してしまいました。この手の本は事前に本屋などで確認したほうがいいですね。

(出典:Amazonレビュー

【この本の詳細を見るならこちら】
WordPress 仕事の現場でサッと使える! デザイン教科書

【WordPressは当サイトでも無料で学べます♪】
【初心者向け】WordPressテーマの自作方法を徹底解説!

WEBサイトの成果を上げるスキルを学べるおすすめ本3選!

成果を上げるWEBデザイン学習におすすめの本

WEBデザインの基礎を身につけた方は、以下の本でさらにスキルアップすることをおすすめします。

具体的には「作ったWEBサイトの成果を上げるためのスキル」を身につけていきます。

WEBデザイナーは、WEBサイトを作って終わりとなることが多いのですが、成果を上げることまで意識できると、他者との差別化にもなりますし、クライアントの喜び方が変わるでしょう。

時間に余裕のある方は、以下の本も手に取ってみてくださいね!

2万回のA/Bテストからわかった 支持されるWebデザイン事例集

2万回のA/Bテストからわかった 支持されるWebデザイン事例集

学べること
成果の出るデザイン・出ないデザインの違い
料金
2,728円
著者
鬼石 真裕 , KAIZEN TEAM

こちらは成果が出ているWEBサイトと、成果が出ていないWEBサイトをA/Bテストで比較し、何が違うかを分析してくれている本です。

つまり、「どういうデザインが成果(売り上げ)をあげられるデザインか」がわかる内容となっています。

最近はデザインによって売り上げが変わることも浸透してきているので、デザインによる売り上げアップ、いわゆる「セールス WEBデザイン」「グロースハック」のスキルを身につけられる本と言えそうです。

デザインリニューアルの際の、改善アイデアも得られます。

でもさ、デザインによって正解は違うんでしょ?

だったら意味ない気がするけど…。

もちろん、絶対の正解はない。

けど、商品が売れるデザインの傾向はあるし、「売れるデザインを作る考え方」なんかも学べる。

「売り上げ」で貢献できるWEBデザイナーはまだまだ少ないから、セールスWEBデザインのスキルがあるだけで需要は圧倒的に高まるぜ。

「デザインで売り上げを上げる」ってなんかワクワクするね♪

WEBデザイナーは本当に業務範囲が広がってきてワクワクだよね!

あとは「イケてるデザイン = 売れるデザイン」ではないってポイントを学べるのが、初心者に知って欲しいポイントかな。

「何のためにデザインするのか」って考えるきっかけになるし、きっと他の新人WEBデザイナーと差別化できるポイントになるぜ。

「2万回のA/Bテストからわかった 支持されるWebデザイン事例集」の中身をちょっとだけのぞいてみよう!

2万回のA_Bテストからわかった 支持されるWebデザイン事例集の中身

2万回のA_Bテストからわかった 支持されるWebデザイン事例集の中身

2万回のA_Bテストからわかった 支持されるWebデザイン事例集の中身

「2万回のA/Bテストからわかった 支持されるWebデザイン事例集」の口コミ・評判

【良い口コミ抜粋】

(出典:Amazonレビュー

【批判的な口コミ抜粋】

A/Bテストは、UI改善の王道ではあるのだが、なぜそういう表現が必要なのか?という点で仮説を立証するカタチで行われるからこそ、性能の根拠となる成果に価値が生まれると考えられる。
そういった点で本書を読み進めると、結果論から施策を後付け解説しているように読めて仕方ない。

(出典:Amazonレビュー

UIデザインの教科書[新版] マルチデバイス時代のインターフェース設計

UIデザインの教科書[新版] マルチデバイス時代のインターフェース設計

学べること
UIデザインの考え方
料金
2,618円
著者
原田 秀司

UI(ユーザーインターフェイス)デザインに特化した本で、「このサイト使いやすい、わかりやすい!」と感じる正体を解説してくれています。

UIデザインの基礎から、デバイスごとの違い、ユーザーの心理なども解説してくれるので、初心者の段階ではUIはこの一冊で十分と言えるでしょう!

UIをマスターすると、デザインの改善にも使えたり、提案の幅が広がるのでおすすめです!

UIはUXとセットで紹介されることが多いんだけど、UXはめちゃくちゃ奥が深いから、最初のうちは分けて考えるのがベストだ!

まずはこの本でUIから身につけよう!

「UIデザインの教科書 マルチデバイス時代のインターフェース設計」の中身をちょっとだけのぞいてみよう!

UIデザインの教科書[新版] マルチデバイス時代のインターフェース設計

UIデザインの教科書[新版] マルチデバイス時代のインターフェース設計

「UIデザインの教科書 マルチデバイス時代のインターフェース設計」の口コミ・評判

【良い口コミ抜粋】

(出典:Amazonレビュー

【批判的な口コミ抜粋】

もっと解り易く固定レイアウトだと表示しといて欲しい。
気づかず購入してしまった。文字が小さすぎる。背景色が調整できないのでまぶしい。

(出典:Amazonレビュー

沈黙のWebマーケティング

沈黙のWebマーケティング

学べること
WEBマーケティングの基礎
料金
WEBで無料公開中(本:2,420円)
著者
松尾 茂起

WEBマーケティングをオリジナルの漫画で学べる書籍で、WEBマーケティング、WEBライティング、SEOで業界トップを走る、松尾さんが書いています。

WEBデザイナーもある程度知っておきたいWEBマーケティングについてを0から体系的に学べる内容で、「WEBでどのように売り上げアップを目指すのか」を理解できます。

マーケティングを知れば「何のためにデザインをするのか」が明確になり、クライアントの目的達成を叶えられるWEBデザイナーになれるでしょう。

成果を出すためにマーケティングの知識は必須なので、時間がある方はぜひマーケティングについても学んでおくのがおすすめです。

マーケティングについては、この本で全体像を学んでおけばOKだ!

「どうやって売り上げアップに取り組むのか」が理解できるよ♪

無料で読めるの!?

書籍の方がおすすめだけど、ネットで無料で読めるようにしてくれてるぜ!

漫画だけど内容は超濃いから、無料公開中に読んでおくのがおすすめだ!

沈黙のWebライティング」ってのもあるみたいだけど。

それはWEBライティングについて解説してくれてる本だ。

そっちも超有益・有名書籍だから、気になる人は読んでおこう!

WEBデザイナーでライティングもできると重宝されるぜ!

漫画だとマーケティングも読みやすいね♪

「沈黙のWebマーケティング」の中身をちょっとだけのぞいてみよう!

沈黙のWebマーケティング

沈黙のWebマーケティング

沈黙のWebマーケティング

沈黙のWebマーケティング

「沈黙のWebマーケティング」の口コミ・評判

【良い口コミ抜粋】

(出典:Amazonレビュー

【批判的な口コミ抜粋】

かなり評判が高かったので購入しました。
正直に言うと、かなり初心者向けの内容で、それも昨日今日マーケティングを始めたような方向けです。

(出典:Amazonレビュー

【この本の詳細を見るならこちら】
沈黙のWebマーケティング(Web無料版)
書籍はこちら

市販の本で独学 or スクールはどっちがいい?

「本で学習するのは安く済むけど、一人でやり切れるかな。。」

「お金はかかるけど、webデザインスクールに行った方がいいの?」

こんな風に疑問を感じていませんか?

結論ですが、webデザイナーになるには、スクールに通うのがおすすめです。

やっぱり、webデザインスクールが一番おすすめ!メリット・デメリット

webデザインスクール

webデザイナーになるには、webデザインスクールに通うのが一番おすすめです。

なぜなら、スクールに通った方が確実なスキルが身につきますし、習得スピードも早いから。

というのも、デザインは自由なので参考書に正解は載っていないからですね。

スクールならプロが目で見てプロの視点で教えてくれるので、正解に近い答えを知れるからしっかり成長できます。

例えば、以下のようなイメージです。

「ここは読んで欲しい文章なので、テキストの上下余白を30px広げた方が読みやすくなります」

「こういうデザインの場合は、こっちの色の方が明度差が大きくなるのでインパクトがでます」

「この業界の場合リッチなイメージが好まれるので、罫線を細く、テキストは小さめにしましょう」

このように、あなたのデザインだけに柔軟なアドバイス・添削をしてもらえるため、上達しやすいのです。

一方独学の場合、参考書ではそれぞれのデザインに適した答え合わせができないので成長しにくいのです。

また、入校するだけで教材が用意されるので、本を自分で探す必要がないのもメリット。

お金はかかりますが(10~50万円程度と少し高いのがデメリット)、時間的には最もスピーディーにwebデザイナーを目指せます。

ただ一つ注意点があります。

それが「スクール選びに失敗すると痛い目を見る」ということ。

webデザインスクールには、知識だけしか学べず実績を作れなかったり、デザインソフトの使い方は教われるけどデザイン知識は教えてくれないところもあります。

そのため、スクールに行く際は下調べをしっかりしましょう!

コーディング、デザインソフト、デザイン知識が学べて、自分の作品をちゃんと作れるところを選ぶのがポイントです。

やっぱりスクールが確実なんだね!

必ず必要ってわけではないけど、やっぱりデザインはプロに教わるのが確実だ。

僕もデザインはスクールで学んだぜ!

今は良いスクールが増えてきたから、じっくり比較してキミに最適なスクールを検討しよう♪

【最短でwebデザイナーになるならこのスクールでOK!】
※完全未経験の人はマルっと学べるTech Academy
Tech Academy【Webデザインコース】

※何かしらのデザイン経験がある人はCode Camp
Code Camp-webデザインコース 

【↓↓当社の格安WEBデザインスクールも好評です♪ 入会金69,800円 + 月額10,800円

web食いオンラインスクール

【webデザインスクールについて詳しく知りたい人はコチラ】
Webデザインスクール・オンライン講座15個を徹底比較してみた

メニューを閉じる