8/30〜|ライターのダイチが運営している個人メディア「ダイブログ」とPENGIN BLOGを統合しました

Web制作のおすすめ本24選!(コーディング・Webデザイン)

【初学者向け】書籍でWeb制作を学ぶ!オススメ書籍をジャンル別に紹介!

お知らせ

当記事の元サイト「ダイブログ」は、8/30〜「PENGIN PLOG」と統合しました。
※元ドメイン(https://daib-log.com/〜)からはリダイレクト処理されます。

今回はWeb制作関連のオススメ書籍をジャンル毎に数冊ずつ厳選し、合計24冊の本をご紹介します!

オンライン学習サービスなどは多くありますが、知識を体系的に学ぶんだったら本が一番確実です。

とはいえ、

  • 書籍は数が多いので何を選んだらいいかわからない…
  • 買うなら実際に読んだ人がオススメするものがいい…

こんな悩みを抱えている方もいると思います。

この記事では、僕自身が買って良かったと思う本はもちろん、Web業界のベテランの方がオススメしている本も紹介しているので、書籍購入を検討している方は是非参考にしてみてください!

基礎的なコーディングを学べる書籍

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

めちゃくちゃ売れてるコーディング入門教材です。オンライン教材で一通り学習したあとの次のステップに進みたい方にはこの一冊を持っておくことをオススメします。

教科書では教えてくれないHTML&CSS

2021年7月に発売された新刊です。

デザイナーから渡されたデザインの全体を理解してコーディングする、現場で「使える力」にレベルアップすることをコンセプトにまとめられた実践的な書籍です。

かなり好評の書籍なので、初学者を1歩脱した知識を身につけたい方なら買っておいて損はありません。

Sassを学べる書籍

Sassの教科書

僕もこれでSassを学びました。Sassをしっかり理解するならこの本一択かな、と思います。

基本的な使い方から、現場でも使える知識、こんなことまできるんだと思える深い内容まで網羅されているので、とりあえず1冊持っておきたいです。

CSS命名規則を学べる書籍

CSS設計完全ガイド

BEMと独自の命名規則であるPRECSSが学べる本です。かなり売れてます。

PRECSSは従来の命名規則の良いところどりをした新しい考え方で、知っておくと綺麗なコーディングがしやすくなります。

HTMLやCSSを使ったサイトコーディング、Sassを使った効率化ができるようになった方の次のステップとして是非購入をオススメします!

CSS設計の教科書

有名なFLOCSSが紹介されている書籍で、内容も分かりやすいです。

公開時期から時間は経っていますが、CSS設計の概要を理解したい方は上の本とあわせて読んでおいても損はない内容かと思います。

JavaScriptを学べる書籍

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

JavaScriptの基礎を学べる書籍です。初めの一歩として人気で、JavaScript教本の中でもかなり売れている書籍です。

無料教材やネットにある情報だけではまとまった知識を得ることは難しいので、こちらの書籍で基礎から実用的な知識まで触れておきましょう。

jQueryを学べる書籍

jQuery最高の教科書

jQueryの教本と言えばこの本と言えるほどかなり有名ですが、基礎からしっかり解説されているのでjQueryをきちんと学びたいなら手にとっておきたい一冊です。

動くWebデザインアイディア帳

世に出回っているWebサイトの動きの部分について丁寧に解説されている本です。

実際のカンプ画像から、jQueryやcssのanimationが仕様されている部分の解説へと繋がっているため、実践的なイメージもつきますし、何より見せ方が綺麗で楽しくjQueryを学べる一冊となっているかなりオススメの一冊です。(紹介されているライブラリはjQuery以外もあります)

Webサイトのアニメーションが学べる書籍

動く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デザイン&プロトタイピング

2021年3月に発売された新しい書籍です。

基礎的な使い方から豊富な事例を元にした具体的な解説で、XDの書籍としてはかなり評価も高いです。

購入者限定のダウンロード特典で、業種別ワイヤーフレームやUIパーツが手に入るお得な要素もあり、お買い得な一冊となっています。

XDは無料で使えるAdobeソフトで、無料のチュートリアルもありますが、よりレベルの高いデザイン制作を目指すなら書籍学習がオススメです。

Photoshop 10年使える逆引き手帖

Photoshopの解説書はかなり多く出版されていますが、レビューの評価や網羅性などを考慮するとこちらの書籍がオススメです。

初級者〜中級者に向けた内容で、分かりやすい図解やダウンロードデータなどでPhotoshopの使い方を学べます。

イラレのスゴ技

2021年2月発売の新刊です。

教科書には載っていない、実践で使えるテクニックが紹介されている書籍なので、楽しくイラストレーターを学びたい方は必見です。

デザインの基礎を学べる書籍

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

デザイン関連の書籍は大量にありますが、その中でも多くの方がオススメしてる教本です。

コーダー(実装者)であっても基礎中の基礎は学んでおいた方がデザイナーの意図を掴みやすくなるので、Web制作に関わる人なら持っておくことをおススメする1冊です。

なるほどデザイン

デザインのことを何も知らなかった時に読み、「デザインって面白い!」と思えるようになった一冊です。

基礎的な知識やデザインのテクニックをわかりやすいタッチで解説してくれているので、とりあえず持っておいても損はしないと思えた1冊です。

Webデザイン良質見本帳

様々なWebサイトのレイアウトをパターン分けして解説してくれているので、この本を読んでからは公開されているWebサイトや、デザインカンプを見た時の捉え方が変わり、一歩進んだレベルで見れるようになりました。

けっきょく、よはく。

オシャレを決めるためには余白が大事、というテーマのもと効果的な余白の使い方を解説してくれる本です。

このシリーズは新人デザイナーと先輩デザイナーの掛け合いが面白くて、beforeのボツ案に対してafterで改善案を示してくれるという分かりやすい構成なので、ノンデザイナーの方でも理解しやすく勉強ができます。

ほんとに、フォント。

シリーズものでこちらはフォントをテーマにしています。

Webサイトを作ることと、フォントを理解することは切っても切り離せません。この1冊でフォントの違いがどれだけデザインに影響するのかを知ることができます。

あたらしい、あしらい。

シリーズ第三弾ですが、こちらのテーマはあしらいです。

デザインの引き出しを増やしたい方は見ておいて損はありません。

配色アイディアを得たい時に助かる書籍

配色アイデア手帖

有名な配色本で、見ているだけでワクワクします。

本のタイトルの通り配色イメージの参考書籍を持っておきたい方にはオススメです。

3色だけでセンスのいい色

カラーのイメージと組み合わせを実際のデザイン例で紹介してくれる面白い本で、3色というシンプルな配色構成で紹介されている点がとても分かりやすいです。

僕はクライアント様への配色提案時などで使いましたがかなり良かったです。

Web制作の基礎知識を学べる書籍

イラスト図解式 この一冊で全部わかるWeb技術の基本

「コーディングするだけ」「デザインするだけ」という人も持っておきたい、Webサイトの基礎地域をまとめてくれている書籍です。

小難しい内容も図解でわかりやすく解説されているのでオススメ。

この本はシリーズ化されてるので、「イラスト図解式」と検索してみてください。自分の知識を深めたいジャンルがあれば覗いてみましょう。

最後に

本当はもっと数を絞りたかったんですが、自分が読んで良かったと思えるものも交えて紹介していくと、かなり多くなってしまいました。。。

ただそれだけ書籍の教材は数多くあります。オンライン教材で足りない知識を補填するためには書籍がオススメなので、自分に合ったモノが見つかった方はこれを機に検討してみてください!


また、当記事を読まれている方の中にはWeb制作初学者の方もいるかと思います。デザインやコーディングの基礎知識を学びたい方向けの記事を用意しているので是非見ていってください!

PENGIN無料コーディング課題

【デザインカンプ無料配布】未経験からのコーディング学習ステップ

オススメUdemy講座紹介

Udemyオススメ講座まとめ 【2021年8月】Udemy×Web制作!オススメ優良講座を紹介!