この記事の監修者
今回はWeb制作関連のオススメ書籍を、ジャンル毎に数冊ずつ厳選してご紹介します！
オンライン学習サービスなどは多くありますが、知識を体系的に学ぶんだったら本が一番確実です。
とはいえ、
- 書籍は数が多いので何を選んだらいいかわからない…
- 買うなら実際に読んだ人がオススメするものがいい…
こんな悩みを抱えている方もいると思います。
この記事では、筆者自身が買って良かったと思う本はもちろん、Web業界のベテランの方がオススメしている本も紹介しているので、書籍購入を検討している方は是非参考にしてみてください！
基礎的なコーディングを学べる書籍
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
めちゃくちゃ売れてるコーディング入門教材で、オシャレなデザインをベースにコーディング方法を丁寧に解説してくれている良書です。
オンライン教材で一通り学習したあとの次のステップに進みたい方にはこの一冊を持っておくことをオススメします。
これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本
2021年10月に発売された新刊です。初心者向けにHTMLやCSSの基礎から解説してくれている書籍で、複数パターンのWebページコーディング方法を知ることができます。
display:gridでの構築方法やスマホ基準のコーディング、モダンなCSSプロパティにも触れていたりと、ある程度コーディングに慣れてきた方にも情報のアップデートに良さそう。
チートシートやAdobeXDのデザインカンプなど、特典も盛りだくさんで満足のボリュームなので、特に初学者の方は持っておいて損はないかと…！
教科書では教えてくれないHTML&CSS
2021年7月に発売された新刊です。デザイナーから渡されたデザインの全体を理解してコーディングする、現場で「使える力」にレベルアップすることをコンセプトにまとめられた実践的な書籍です。
かなり好評の書籍なので、初学者を1歩脱した知識を身につけたい方なら買っておいて損はありません。
Sassを学べる書籍
Sassの教科書
僕もこれでSassを学びました。Sassをしっかり理解するならこの本一択かな、と思います。
基本的な使い方から、現場でも使える知識、こんなことまできるんだと思える深い内容まで網羅されているので、とりあえず1冊持っておきたいです。
CSS設計や命名規則を学べる書籍
CSS設計完全ガイド
BEMと独自の命名規則であるPRECSSが学べる本です。かなり売れてます。
PRECSSは従来の命名規則の良いところどりをした新しい考え方で、知っておくと綺麗なコーディングがしやすくなります。
HTMLやCSSを使ったサイトコーディング、Sassを使った効率化ができるようになった方の次のステップとして是非購入をオススメします！
CSS設計の教科書
有名なFLOCSSが紹介されている書籍で、内容も分かりやすいです。
公開時期から時間は経っていますが、CSS設計の概要を理解したい方は上の本とあわせて読んでおいても損はない内容かと思います。
ざっくりつかむ CSS設計
紹介しているCSS設計本の中では新刊の部類です。
上2つの書籍のように、PRECSSやFLOCSSなど設計手法の解説に重点は置いておらず、現在のWeb制作・開発における現場に求められる考え方を学ぶための教科書的な内容になっています。
とはいえ、BEMやSMACSSなどの源流となるCSS設計手法の基礎的な考え方などにも触れているので、現場レベルの知識を身につけてレベルアップを目指す方は手にとってみることをオススメします。
JavaScript・jQueryを学べる書籍
確かな力が身につくJavaScript「超」入門
JavaScriptの基礎を学べる書籍です。初めの一歩として人気で、JavaScript教本の中でもかなり売れている書籍です。
無料教材やネットにある情報だけではまとまった知識を得ることは難しいので、こちらの書籍で基礎から実用的な知識まで触れておきましょう。
jQuery最高の教科書
jQueryの教本と言えばこの本と言えるほどかなり有名ですが、基礎からしっかり解説されているのでjQueryをきちんと学びたいなら手にとっておきたい一冊です。
デザイン・アニメーションの実践的なコードが知れる書籍
現場で使える Webデザインアイデアレシピ
Twitterで有益なコーディングTipsの発信をされている小林さん（@pulpxstyle）が執筆した書籍。「デザインを見ただけでHTMLとCSSをイメージし、実装できるようになる」をテーマに、オシャレなデザインと実装コードがセットで紹介・解説されている良書です。
目から鱗のコーディング方法が知れるだけでなく、今風のデザインもキャッチできるので、デザイナー志望の方にもオススメできます。
モダンなコードも紹介されいる実践的な内容で、ワクワクしながら読み進められる内容でした。IEブラウザのサポート終了が決まっている今、最新のコードを知りたい方は手に取っておいて損はない1冊です。
動くWebデザインアイディア帳
世に出回っているWebサイトの動きの部分について丁寧に解説されている本です。
実際のカンプ画像から、jQueryやcssのanimationが仕様されている部分の解説へと繋がっているため、実践的なイメージもつきますし、何より見せ方が綺麗で楽しくjQueryを学べる一冊となっているかなりオススメの一冊です。（紹介されているライブラリはjQuery以外もあります）
動くWebデザインアイディア帳（実践編）
黄色い表紙「動くWebデザインアイディア帳」の姉妹本で、Webサイトの印象付けをするさまざまなアニメーションを網羅的に解説しています。
黄色本とこのピンクの実践本をセットで購入し中身を見ましたが、今世の中にあるオシャレなWebサイトの動きは、この2冊があればおよそカバーできるんじゃないでしょうか。
辞書代わりにも使えますし、何より見ててワクワクします。2冊ともセットで持っておくことを強くオススメします。
WordPressを学べる書籍
WordPressの教科書
WordPressの教本と言えばこの本ですね。静的サイトのWordPress化について学べます。
WordPressを使ったコーディングの仕事をするために必要な知識が詰まってます。
ボリュームもかなりあるので少し重ためですが、しっかり学びたい方にはオススメの一冊です。
いちばんやさしいWordPressの教本
内容の分かりやすさに定評がある書籍です。こちらは人気テーマ「Lightning」を使ったサイト構築方法を学ぶことができます。
とりあえずWordPressを触ってみたい方、一からコーディングするのは難しい、といった方はこの一冊から入るのが良いかと思います。
WordPressユーザーのためのPHP入門
WordPressに使われているPHPを学べる書籍です。
この書籍は、終始「WordPressに必要な」というポイントでまとめられているので、Web制作に不要となる範囲のPHP学習に時間を割く必要が無くなる点がかなりお勧めできる点です。
WordPressを扱ううえでPHPへの抵抗心を少しでも無くしたい方は手元に置いておきましょう。
デザインツールについて学べる書籍
Adobe XDではじめるWebデザイン&プロトタイピング
基礎的な使い方から豊富な事例を元にした具体的な解説で、XDの書籍としてはかなり評価も高いです。
購入者限定のダウンロード特典で、業種別ワイヤーフレームやUIパーツが手に入るお得な要素もあり、お買い得な一冊となっています。
XDは無料で使えるAdobeソフトで、無料のチュートリアルもありますが、よりレベルの高いデザイン制作を目指すなら書籍学習がオススメです。
Photoshop 10年使える逆引き手帖
Photoshopの解説書はかなり多く出版されていますが、レビューの評価や網羅性などを考慮するとこちらの書籍がオススメです。
初級者〜中級者に向けた内容で、分かりやすい図解やダウンロードデータなどでPhotoshopの使い方を学べます。
イラレのスゴ技
教科書には載っていない、実践で使えるテクニックが紹介されている書籍です。
楽しくIllustratorを学びたい方は必見です！
デザインの基礎を学べる書籍
ノンデザイナーズ・デザインブック
デザイン関連の書籍は大量にありますが、その中でも多くの方がオススメしてる教本です。
コーダー（実装者）であっても基礎中の基礎は学んでおいた方がデザイナーの意図を掴みやすくなるので、Web制作に関わる人なら持っておくことをおススメする1冊です。
なるほどデザイン
デザインのことを何も知らなかった時に読み、「デザインって面白い！」と思えるようになった一冊です。
基礎的な知識やデザインのテクニックをわかりやすいタッチで解説してくれているので、とりあえず持っておいても損はしないと思えた1冊です。
Webデザイン良質見本帳
様々なWebサイトのレイアウトをパターン分けして解説してくれている良書。
この本を読んでからは公開されているWebサイトや、デザインカンプを見た時の捉え方が変わり、一歩進んだレベルで見れるようになりました。
けっきょく、よはく。
オシャレを決めるためには余白が大事、というテーマのもと効果的な余白の使い方を解説してくれる本です。
このシリーズは新人デザイナーと先輩デザイナーの掛け合いが面白くて、beforeのボツ案に対してafterで改善案を示してくれるという分かりやすい構成なので、ノンデザイナーの方でも理解しやすく勉強ができます。
ほんとに、フォント。
シリーズものでこちらはフォントをテーマにしています。
Webサイトを作ることと、フォントを理解することは切っても切り離せません。この1冊でフォントの違いがどれだけデザインに影響するのかを知ることができます。
あたらしい、あしらい。
シリーズ第三弾ですが、こちらのテーマはあしらいです。デザインの引き出しを増やしたい方は見ておいて損はありません。
思わずクリックしたくなる バナーデザインのきほん
Twitterでデザイン添削や有益なテクニックを発信をされているカトウヒカルさん（@pulpxstyle）が執筆した書籍。
「パッと見て伝わるバナーデザイン」を作ることを目的とし、分かりやすくカテゴライズされたテクニックが紹介されちえます。
デザインの基礎が詰まっているバナー制作ですが、初学者の方でもこの本を読めば、基礎から応用まで身につけられる良書です。
配色アイディアを得たい時に助かる書籍
配色アイデア手帖
有名な配色本で、見ているだけでワクワクします。
本のタイトルの通り配色イメージの参考書籍を持っておきたい方にはオススメです。
3色だけでセンスのいい色
カラーのイメージと組み合わせを実際のデザイン例で紹介してくれる面白い本で、3色というシンプルな配色構成で紹介されている点がとても分かりやすいです。
僕はクライアント様への配色提案時などで使いましたがかなり良かったです。
Web制作の基礎知識を学べる書籍
イラスト図解式 この一冊で全部わかるWeb技術の基本
「コーディングするだけ」「デザインするだけ」という人も持っておきたい、Webサイトの基礎地域をまとめてくれている書籍です。
小難しい内容も図解でわかりやすく解説されているのでオススメ。
この本はシリーズ化されてるので、Amazonなどで買う方は「イラスト図解式」と検索してみてください。自分の知識を深めたいジャンルがあれば覗いてみましょう。
イラスト図解式 この一冊で全部わかるWeb制作と運用の基本
Webサイトの立ち上げから運用までの流れや、業界で使われる用語の解説など、Web制作をするために必要な知識が解説されている一冊。
コーダー・デザイナーなど、専門職のスキルを学習している方でも、携わる業務の全体の流れを体系的に把握しておくことは重要です。
Web制作に関する仕事をしたい、就職・転職を希望する方は必読の一冊です。
読書は紙派？電子派？
みなさん読書は紙派ですか？電子化ですか？
紙の本を読むときもありますが、基本的に僕は電子派です。理由はざっくりですが下記の通り。
- スマホやタブレットでいつでもどこでも読める
- Webデザインの色合いなど実機で確認できる
普段仕事などで外にいる時間が多い場合、本を常にかばんに入れて持ち歩くのはかさばるし重いし結構大変だったりします。そんな時に携帯性のある電子書籍は便利です。
また、紙とデバイスだと表示される色合いと見え方に差があります。普段ディスプレイを見ながら作業するWebデザイン系の人であれば、特に電子書籍で閲覧する方がオススメです！
電子書籍系で今僕が使ってるのはAmazonKindleとDMMブックスです。
Kindleはとにかく品揃えが多いので、電子書籍デビューするならここから。Unlimitedは月額払いで有名書籍が読み放題になるので、読書量が多い方は特にオススメです！
DMMブックスはセールが多いです！通常価格は他電子書籍と同じですが、過去には70％割引なんて驚愕のセールも開催されました…。そこまでなくとも半額程度のセールなら頻繁に開催されてるのでお試しで登録してみるのもありですよ！
買いたい本がKindleセール対象になってなかったらDMMブックスで探す、みたいな使い方もありだと思います！
最後に
本当はもっと数を絞りたかったんですが、自分が読んで良かったと思えるものも交えて紹介していくと、かなり多くなってしまいました。。。
ただそれだけ書籍の教材は数多くあります。オンライン教材で足りない知識を補填するためには書籍がオススメなので、自分に合ったモノが見つかった方はこれを機に検討してみてください！
また、当記事を読まれている方の中にはWeb制作初学者の方もいるかと思います。デザインやコーディングの基礎知識を学びたい方向けの記事を用意しているので是非見ていってください！
PENGIN無料コーディング課題
オススメUdemy講座紹介
