【2021年版】独学でウェブデザイナー目指す人に超おすすめな本33選

独学でウェブデザイナー目指す人に超おすすめな本33選

ウェブデザイナーへの第一歩を踏み出す時、手にするのが参考書や技術書です

しかし、そんな第一歩に立ち塞がるのが 当時の僕と同じように

  • どの参考書を選べばいいの? おすすめの本はどれなの?
  • html? CSS? photoshop? デザイン? どれから買えばいいの?
  • ウェブデザイナーの仕事内容そもそも分からないけど何読めばいいの?

と思っている方のために、

独学でWEBデザイナーになり、今も現役で業界歴 9年の僕が
はじめての方でも本を選べるように、簡単な内容で おすすめの本を業務分野別で紹介します!

前提として
経験と実績をもとに選定して読んだ本の中から「本当におすすめしたい本のみ」を紹介してます

選びきれない人のために迷ったらコレ!
って本もまとめたので良かったら参考にしてください

簡単に僕のスペック書いておきますのでよかった読んでね

僕のスペック (簡易版)

■経験 / 実績

  • 現役webデザイナー兼、フロントエンドエンジニア兼、webマーケター (業界経験 8年)
  • web制作チームリーダーとして新人教育と社内書籍の選定 / 管理

■保有資格(資格はただの飾りと思ってるけど一応)

  • webクリエイター能力認定試験 エキスパート
  • ウェブデザイン技能士
  • ITパスポート



目次から気になる本だけ見るのも全然OK!
Amazonなら無料でサンプルが読めます

目次

【知識0向け】「ウェブデザイナーとは??」基本を知りたい人におすすめな本【4選】

Webデザイン良質見本帳

見本となるWEBサイト(400以上)が細かく解説されているため
Webデザイナーがどんな知識を持ち、何を考えてデザインしているかが分かる。

「サイト制作全体の流れ」の説明もあるから仕事内容が理解できる。

業界、配色、テイスト別にサイトを作るポイントがまとめられてるから初心者におすすめ!

ただし…

読んで具体的に何か出来るようになる訳ではない (遠い目…)

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

業界や課題ごとにクイズ形式(A or B)で解説
実際の検証結果にもとずいた修正内容だから説得力ある

純粋に見てるだけで面白い
デザイナーに大切なのは、デザインの意図が伝えられること

それを自然と教えてくれる良本

初心者からちゃんとしたプロになる Webデザイン基礎入門

1日30分からはじめる シリーズ

僕こういうのに弱いんだよね
スキマ時間で学びたい人にはおすすめ

ただ…
1日30分で作業したら1か月以上かかるよ(笑)

30ページに渡ってWEBサイトのなりたちが解説されている
コーディング(html, css, javascript)など
広く浅くだけど分かりやすく解説されている

色分けがしっかりされているし読みやすい文章だから女性は好むかも
WEBサイトの作成 → 公開までレッスンとしてあるから
一通り作業のながれが把握できる

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

迷ったらコレ!




「デザイン」の独学におすすめな本【7選】

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

迷ったらコレ!
新人の頃 先輩に読めと命令された(笑)
デザインを学んでいないひと向けに書かれた本

サンプルに合わせてデザインの基礎を叩き込んでくる ←言い方
この本は18年近く売れ続けてる言わば鉄板のデザイン本

とりあえず読んどくと
やっぱり読んでるんだね!って会話できるやつ

なるほどデザイン 目で見て楽しむデザインの本。

見てくださいよ この表紙!

ふざけてますよね

実はこの本・・・

超売れてます

どうやってデザインをすればいいのか?
意図のあるデザインの作り方を、例にならって解説してる

表紙に反して内容濃いし、分かりやすい
なにより読んでて超面白い!!!

同僚に先に読まれて悔しかった思い出・・・

けっきょく、よはく。余白を活かしたデザインレイアウトの本

新人のころ現場で1000回以上言われた事の1つ
「ここの余白がー」

この本をもっと早く知ってたら700回くらいには減ってたかな?(笑)
ただ余白の指摘は一生言われるだろうな
ってくらい難しいし大事

余白を理解すればデザインはグッと良くなる

つまり…

けっきょく、よはく。

Webデザイン・スタンダード

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

神速Photoshop[Webデザイン編]

忙しい現場では時間管理が超大事!

「時間かければ誰でも良いものつくれんだよ」
って先輩の言葉がずっと心に刻まれてる

購入タイミング気を付けないと読んでても面白くない

photoshopに少し慣れてきたころに読むと
楽しめるし作業効率あがる

Webデザイン必携。

photoshopやIllustratorの基本を覚えてきたら読んでほしい1冊

ユーザー目線でデザインをするための
WEBデザインの基本ルールが解説されてる

下記項目は一読の価値あり
「コーディングに困るデザインデータとは」
「分かりやすい納品データの作り方」



「html & css ( sass )」の独学におすすめ本【9選】

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

世界一わかりやすい HTML5&CSS3 コーディングとサイト制作の教科書

初心者からちゃんとしたプロになる HTML+CSS標準入門

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

CSS設計完全ガイド

【中級者向き】
CSSの歴史とCSSの弱点が説明されていて
各設計思想の意識するポイントが分かりやすくかかれている

主な設計思想はOOSCC, SMACSS, BEM, PRECSS
BEMとPRECSSの記載が多い印象だけど、比較形式だから分かりやすい

硬めの表紙に反して分かりやすく読みやすい
CSS設計の本で おすすめするならこれが1番かな

最強のCSS設計

【中級者向き】
表紙とタイトルがいいよね!
CSS設計の奥深さと孤独を現した良い表紙です ← おい

えーっと・・・
ごめんなさい!!小ネタ入れたかった

表紙の印象とちがって中身はクール&シンプルなデザイン
そして読みやすい
主な設計思想はOOSCC, SMACSS, BEM, FLOCSS その他派生系についてちょこっと解説

こんな場合どうする?がまとめられてるのが現場思考でいい

Web制作者のためのCSS設計の教科書

【中級者向き】
コンポーネントについての説明が手厚くされている

CSS設計の基本の解説もあるし
Web制作者のための~シリーズに謎の信頼間を持ってる

主な設計思想はOOCSS, SMACSS, BEM, MCSS, FLOCSS
個人的にこのシリーズ好き

CSSシークレット

【CSS好きの変態向け】
実用書というより研究に近いのかな??

これさぁ・・・
初心者向きではないな!

cssでこんなことできるんだぜ!ってなりたい人におすすめ

Web制作者のためのSassの教科書

【中級者向き】
SASSの本といったらこれ!

環境構築から分かりやすく説明されてる

ってか これ以外におすすめあったら教えてほしい

現場にルヌっと浸透して覚えはじめは抵抗があった
だけど覚えるとメッチャ楽!

※SASSとはCSSをより効率的に記述できるようにするために開発された言語



「javascript ( jquery )」の独学におすすめ本【5選】

確かな力が身につくJavaScript「超」入門

人気のjavascript本
手を動かして実用的で見たころあるサンプルを作れる

あぁ…私、成長してるっ!!!
って実感もてる

中身のデザインも読みやすいしポップ
悩んだらこれでいい気がしてる

ノンプログラマのためのJavaScriptはじめの一歩

同僚がやたらと推してきたから読んだやつ

内容は分かりやすかったけど若干物足りない印象
javascript を毛嫌いしている人がリベンジに読んでみるのはいいかも

僕はハマらなかったけど、同僚がやたらと―(以下 略)

改訂新版JavaScript本格入門

【中級者向き】
これで入門かよっ!!!!!

って突っ込み入れたくなるくらいガチ
間違っても紙版を買ってはいけない

プログラムは手動かさないと習得キツイから
電子版(Kindle)で読みながらコード書いたほうが絶対いい!

本開きながらとか無理だよw (デカいし)

jQuery最高の教科書

プログラム経験の少ないデザイナーでも理解できる構成
がコンセプトらしい
htmlとcssが慣れてきたら読むといいかも

初めて見たとき これができるようになるのか!
ってテンションあがった

サンプルサイトが一時期話題になってた
https://www.shiftbrain.com/book/jquery/

Web制作の現場で使う jQueryデザイン入門[改訂新版]

通称「ドーナツ本」

Flash廃止が加速してjQueryが実質的な代替技術として広まり
WEBデザイナーもjQuery使えないとダメじゃね?

って空気が業界に蔓延した結果、超有名になった本
当時は書店でなかなか買えなかった

めっちゃ分かりやすかった(懐かしい)


迷ったらコレ!

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

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

新人の頃 先輩に読めと命令された(笑)
デザインを学んでいないひと向けに書かれた本

サンプルに合わせてデザインの基礎を叩き込んでくる ←言い方
この本は18年近く売れ続けてる言わば鉄板のデザイン本

とりあえず読んどくと
やっぱり読んでるんだね!って会話できるやつ

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

【おまけ】そもそも参考書 高くね? って人へ 1000円以下 or 無料で読む方法

参考書は1冊 約2500~3500円と高いよね
(5冊かったら余裕で1万超えるし)

習得すれば値段以上の価値があるけど
会社のお金ならまだしも自分のお金では大量に買いづらい

WEBデザイナーという技術(仕事)が
本当に自分にあっているか分からないのに

3000円とか
払ってられるかぁあああああ!

って人に朗報

Kindle Unlimited

Amazon Kindle Unlimited(読み放題)

これ使えば
スマホやパソコンで
好きなだけ読み放題!!!!!

しかも
月額980円
\どーん/

参考書1冊の
約3分1の値段で何冊でも読める!!!!

しかも初めてなら
30日間無料!
\どどーん/

つまり
無料体験期間中に解約すれば
実質 無料!(タダ)
\どどどーん/

amazonの回し者みたいなりました
ごめんなさい

実際、いきなり参考書買いまくるのは
抵抗があると思うし是非試して欲しい!!
(買われた参考書も見られないと可哀想だし)

読み放題の対象になってる本で
おすすめを まとめたから是非参考に!
※下記表示になっているのが読み放題の対象

Kindle Unlimited
Kindle Unlimited

WEBの勉強肌に合わないなぁと思ったら
漫画とか小説とか雑誌もタダで読めるから
暇つぶしに使えばいいよ!! ← おい!

 

 

ちなみに電子書籍に抵抗がある人多いと思うけど
WEBの勉強と電子書籍って愛称がいいんですよ

だってデザイン作る時、プログラム書く時パソコン使うでしょ??

紙の本だとめちゃめちゃ 勉強しづらい
開いたまま本置くと
パタンって閉じちゃうし(笑)

電子書籍だったらパソコンで見ながら
実際に手を動かして勉強できるよ!

最後に一言!!! この記事を読んだあなたが
WEBデザイナーの道へ1歩近づけますように!!!

ここまで読んでくれてありがとう!!!!!!

それでは!

※感想、オススメの本あったら気軽にコメントください

Kindle Unlimited

Amazon Kindle Unlimited(読み放題)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です