こんにちは、デザイナー・ブロガーの
ゆっきー（@elcielo_design）です。
今回は、Webデザインの基本・セオリー等が
学べるような書籍を紹介しようと思います。
この記事の目次
Webデザインの
基本・セオリーの書籍・本
この記事では、Webデザインの
基礎等を学べる本を紹介します。
Webデザインを初めて学ぶ方は、
まず次に紹介するどれかから選択して、
学び始めるのがおすすめになります。
特に、次のような人はおすすめです。
- Webデザインを初めて学習する。
-
Webデザインの基本をしっかり学びたい。
- Webデザイナーを目指している。
なお、デザイン書籍等を1ヶ月無料で読むなら、
Amazonの「Kindle Unlimited」がおすすめ。
Webデザインの基本・セオリーを
学べる書籍・本
「Webデザインの基本の書籍・本の一覧」
| 系統 | 書籍名 |
| ① Webデザイン 基礎・セオリー |
いちばんよくわかるWebデザインの基本 きちんと入門 [第2版] |
| デザインの学校 これからはじめるWebデザインの本 [改訂2版] |
|
| HTML&CSSの基本がゼロから身につく Webデザインを見るだけノート |
|
| ② Webデザインと HTML&CSS、 サイト制作基本 |
1冊ですべて身につく HTML &CSSとWebデザイン入門講座 |
| HTML&CSSとWebデザインが1冊で きちんと身につく本 [増補改訂版] |
|
| 初心者からちゃんとしたプロになる Webデザイン基礎入門 |
|
| Webデザインの新しい教科書 改訂3版 基礎から覚える、深く理解できる。 |
|
| これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本 |
|
| 実習で身につく!新しいWebデザインの教科書 〜基礎から学べるHTML&CSSデザイン〜 |
|
| 30時間でマスター Webデザイン 改訂版 |
|
| ドリル式 やさしくはじめる Webデザインの学校 |
下でそれぞれ詳しく紹介しています。
① Webデザインの基礎や
セオリー等が学べる書籍・本
「初心者向け」
「Webデザインの基礎関連本」
- いちばんよくわかるWebデザインの基本
きちんと入門 [第2版]
-
デザインの学校
これからはじめるWebデザインの本 [改訂2版] - HTML&CSSの基本がゼロから身につく
Webデザインを見るだけノート
いちばんよくわかるWebデザインの基本
きちんと入門 [第2版]
伊藤 庄平/益子 貴寛 SBクリエイティブ 2021年08月23日頃
Webデザイン入門のベストセラー本。
| タイトル (書籍名) |
いちばんよくわかるWebデザインの基本 きちんと入門 [第2版] |
| 価格 | ¥2,618 (税込) |
| 発売日 | 2021/8/20 |
| 特徴 | ・「Webデザインとは何なのか」について 理解できる書籍の一冊。 ・圧倒的な高密度の情報量 ・短い区切りで読みやすく工夫されている。 ・デザインの基本であるレイアウト4つの 原則やレスポンシブデザインも記載 |
| 内容 | Chapter 01 Webデザインの基本 Chapter 02 レイアウト Chapter 03 配色 Chapter 04 写真と図版 Chapter 05 タイポグラフィ Chapter 06 HTML5とCSS3 Chapter 07 インタラクション Chapter 08 運用とマーケティング |
| おすすめの人 | ・Webデザインの基本を一冊で学びたい人 |
| その他 |
これからはじめるWebデザインの本
[改訂2版]
Webデザインを仕事にする上で
知っておきたい基本の知識等を、
やさしい文と絵で分かり易くまとめた本。
| タイトル (書籍名) |
デザインの学校 これからはじめるWebデザインの本 [改訂2版] |
| 価格 | ¥2,178 (税込) |
| 発売日 | 2018/9/7 |
| 特徴 | ・Webデザインの基本を短期間でしっかり 学習できる内容。 ・実践に必要な周辺知識も学べる。 |
| 内容 | 01 Webサイトをデザインする 02 最低限コレだけは！インターネットの しくみを知っておこう 03 HTMLやCSSなど、Webブラウザ側の 技術を知ろう 04 Webサイトの構成要素 画像・文字・映像 05 動的なWebサイトを作る技術 06 Webサイトを保存・管理・生成する Webサーバ側の技術 |
| おすすめの人 | ・超基本的なことからWebデザインを 学びたい人 |
| その他 |
HTML&CSSの基本がゼロから身につく
Webデザインを見るだけノート
イラストを見るだけでサクッと学べる
「見るだけノート」シリーズの
Webデザイン学習本になります。
| タイトル (書籍名) |
HTML&CSSの基本がゼロから身につく Webデザインを見るだけノート |
| 価格 | ¥2,178 (税込) |
| 発売日 | 2020/9/11 |
| 特徴 | ・専門知識がなくても楽々Webサイトが 作れる内容。 |
| 内容 | 01 Webデザインを始める前に 02 Webサイトの骨組みとなるHTMLの基本 03 Webデザインを決めるCSSの基本 04 目的別Webデザインの基本 05 Webサイトの公開 |
| おすすめの人 | ・イラストを見てサクッとWebデザインの 基礎を学びたい人 |
| その他 |
② WebデザインとHTML&CSS、
サイト制作の基本等が学べる書籍・本
「初心者〜中級者向け」
「WebデザインとHTML&CSSの本」
- 1冊ですべて身につく
HTML &CSSとWebデザイン入門講座 -
HTML&CSSとWebデザインが1冊で
きちんと身につく本 [増補改訂版] - 初心者からちゃんとしたプロになる
Webデザイン基礎入門
-
Webデザインの新しい教科書 改訂3版
基礎から覚える、深く理解できる。 - これだけで基本がしっかり身につく
HTML/CSS&Webデザイン1冊目の本 -
実習で身につく!新しいWebデザインの教科書
〜基礎から学べるHTML&CSSデザイン〜 - 30時間でマスター Webデザイン 改訂版
-
ドリル式 やさしくはじめるWebデザインの学校
WebデザインとHTML&CSS、
サイト制作が学べる本は多くありますが、
特にはじめの2冊が個人的におすすめ。
なお、後半3冊はマイナーな本です。
他の人と被りたくない人はどうぞ。
1冊ですべて身につく
HTML & CSSとWebデザイン入門講座
「Webクリエイターボックス」の
Manaさんが書かれたHTML・CSS入門本。
| タイトル (書籍名) |
1冊ですべて身につく HTML &CSSとWebデザイン入門講座 |
| 価格 | ¥2,486 (税込) |
| 発売日 | 2019/3/16 |
| 特徴 | ・全国の書店員がおすすめする本 (CPU大賞) 第1位受賞、2019年上半期売上 第1位。 ・Amazonのベストセラー本 ・Webサイト制作するための基礎から始まり HTML・CSSの基本が初心者に分かり易く 説明されている。 ・プロの現場で役立つテクニックのみならず 使い易く美しいデザインを作るコツも記載 |
| 内容 | 1 最初に知っておこう! Webサイトの基本 2 Webの基本構造を作る! HTMLの基本 3 Webのデザインを作る! CSSの基本 4 フルスクリーンのWebサイトを制作する 5 2カラムのWebサイトを制作する 6 タイル型のWebサイトを制作する 7 外部メディアを利用する |
| おすすめの人 | ・これからWebサイトを作り始める初心者 ・HTMLとCSSを基本から学びたい人 ・美しいデザインのWebサイトを作りたい人 |
| その他 |
HTML&CSSとWebデザインが
1冊できちんと身につく本
[増補改訂版]
Webサイト制作に必要なHTML・CSSの
知識に加え、Webデザインの定番の
レイアウトやデザインを学べる書籍。
| タイトル (書籍名) |
HTML&CSSとWebデザインが1冊で きちんと身につく本 [増補改訂版] |
| 価格 | ¥2,860 (税込) |
| 発売日 | 2022/1/17 |
| 特徴 | ・チュートリアル形式で、サンプルサイトを 作りつつ必要な知識を順番に身につけれる。 ・複数のレイアウトを一冊で学べる。 ・実践的なテクニックも多く掲載。 ・言語の解説だけでなくWebデザインの 基礎についても解説。 ・レスポンシブデザインによる マルチデバイス対応が分かる。 ・サンプルサイトは見栄えも拘ってある。 ・サンプルデータがダウンロード可能。 |
| 内容 | 1 知っておきたいサイトとデザインの きほん知識 2 サイト制作の前に準備しておくこと 3 知っておきたいHTMLのきほんと書き方 4 知っておきたいCSSのきほんと書き方 5 フルスクリーンページを制作する 6 シングルカラムページを制作する 7 2カラムページを制作する 8 グリッドレイアウトページの制作と 動画の埋め込み 9 問い合わせページを制作する 10 マルチデバイス対応ページを制作する appendix ポートフォリオサイトを オリジナルに改変してみよう |
| おすすめの人 | ・はじめてHTMLやCSSを学び、 これからサイト制作をはじめる人 ・超初心者ではないが未経験から Webデザイナーを目指している人 |
| その他 |
初心者からちゃんとしたプロになる
Webデザイン基礎入門
栗谷幸助/おのれいこ エムディエヌコーポレーション 2019年10月
WebデザインやHTML・CSSの学習を
「1日30分からはじめる」をテーマに、
優しくしっかり解説した書籍。
| タイトル (書籍名) |
初心者からちゃんとしたプロになる Webデザイン基礎入門 |
| 価格 | ¥2,750 (税込) |
| 発売日 | 2019/9/25 |
| 特徴 | ・プロWebデザイナーを目指す上で必要となる 基本的な知識や技術を体系的に学べる。 ・HTML・CSSの書き方を初歩から 教えるだけでなく、サイトを制作し、 公開・運営するために必要な基礎を全て解説 ・各記事ごとに学習時間の目安が書いてあり 授業や独習で学習教材として活用し易い作り ・サンプルは学習データとしてダウンロード可 |
| 内容 | Lesson1 Webサイトの成り立ち Lesson2 Webサイトの枠組みを知る Lesson3 Webデザインに必要な素材 Lesson4 HTMLをマスターする Lesson5 CSSをマスターする Lesson6 シングルページのサイトを作る Lesson7 レスポンシブ対応サイトを作る Lesson8 Webサイトを公開してみよう Lesson9 SNS連携とWebサイトの運用 |
| おすすめの人 | ・Webデザインを基礎から学びたい人 |
| その他 |
Webデザインの新しい教科書 改訂3版
基礎から覚える、深く理解できる。
エムディエヌコーポレーション 2021年05月28日頃
Webデザイン・Webサイト制作の
「正しい基礎」を伝える
Web制作入門書のロングセラー。
| タイトル (書籍名) |
Webデザインの新しい教科書 改訂3版 基礎から覚える、深く理解できる。 |
| 価格 | ¥2,750 (税込) |
| 発売日 | 2021/5/28 |
| 特徴 | ・WWWやインターネットの仕組みを始まりに サイト制作のワークフロー、HTML・CSSの 技術、Webサイトを公開・運用するまでの 基礎知識を、系統立てて解説。 ・改訂3版では、FlexboxやCSS Grid Layout といった、新しい技術使用の解説も追加。 ・「なぜ、そうするのか?」といった背景や 理由にも踏み込んで説明している。 ・「自分で考える力」「ずっと役立つ 応用力」が身につく。 |
| 内容 | Lesson1 Webデザインの世界を知る Lesson2 Webサイトを設計する Lesson3 HTMLの役割とできること Lesson4 CSSの役割とできること Lesson5 Webサイトを構成する素材 Lesson6 Webサイトを表現する色 Lesson7 Webサイトを公開する Lesson8 Webサイトを運用する Lesson9 Webサイトを制作する |
| おすすめの人 | ・Web・Webデザインの根本的な仕組みや 技術の裏側にある背景を深く理解して Webデザインを学びたい人 |
| その他 |
これだけで基本がしっかり身に付く
HTML/CSS&Webデザイン
1冊目の本
Capybara Design 竹内 直人/竹内 瑠美 翔泳社 2021年10月14日頃
Webサイト制作をこれから学ぶ人へ送る
1冊目に最適な超最新のWebデザイン入門書。
| タイトル (書籍名) |
これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本 |
| 価格 | ¥2,420 (税込) |
| 発売日 | 2021/10/14 |
| 特徴 | ・手を動かして、Webサイトを作ることを 重視した構成。 ・やさしく要点を押さえた解説。 ・オシャレでバリエーション豊かなサンプル サイトで、制作できるサイトは計4種類。 ・豊富な図解とイラスト、キャラクターによる ガイドになっている。 ・コーディングの知識だけでなく、学習を 続ける上での学び方のコツやポイントも紹介 ・重要なポイントの理解を助ける動画もあり。 |
| 内容 | Part1 HTMLを書いてみよう Part2 SNSリンク集を作ってみよう Part3 2カラムページを作ってみよう Part4 1カラムページを作ってみよう Part5 複数ページのサイトを作ってみよう |
| おすすめの人 | ・1冊目の最新のWebデザイン入門書を 探している人 |
| その他 |
実践で身につく!
新しいWebデザインの教科書
～基礎から学べる
HTML&CSSデザイン～
境祐司 エスシーシー 2018年03月19日頃
Webデザインを基礎から習得できる、
コスパ最強？の学習書。
| タイトル (書籍名) |
実習で身につく!新しいWebデザインの教科書 〜基礎から学べるHTML&CSSデザイン〜 |
| 価格 | ¥2,090 (税込) |
| 発売日 | 2018/3/19 |
| 特徴 | ・Webデザイン、HTML、CSSの基礎、 Webレイアウトの基礎と応用等を 図と写真を用いて基礎から詳しく説明。 ・数多くの実習課題を掲載していて、 Webサイトを実際に作成しつつ学習できる。 ・レスポンシブデザインについても 100ページにわたり、随所で解説。 ・自作のWebサイトを客観的に評価する方法と チェックシートあり。 |
| 内容 | 第1章 Webデザインの基礎知識 第2章 HTMLの基礎 第3章 CSSの基礎 第4章 Webレイアウトの基礎 第5章 Webレイアウトの応用 第6章 拡張技術の活用 第7章 Webサイトの検証と公開 |
| おすすめの人 | ・コスパが良いWebデザイン学習本が欲しい人 |
| その他 |
30時間でマスター
Webデザイン 改訂版
HTML5,CSS3によるWebページ作成を
例題を通して基礎から学べる入門テキスト。
| タイトル (書籍名) |
30時間でマスター Webデザイン 改訂版 |
| 価格 | ¥1,430 (税込) |
| 発売日 | 2019/10/18 |
| 特徴 | ・ステップを踏んだ分かり易い説明と、 豊富な問題で構成し、Webデザインの基本を 身につけられる。 ・他のWeb入門書に比べて比較的価格が安い。 ・巻末付録にJavaScriptによるプログラミング 入門を収録している。 ・オールカラー ・Windows10対応 |
| 内容 | 第1章 Webサイト制作の基礎 第2章 HTMLの基礎 第3章 CSSの基礎 第4章 Webサイトの制作 第5章 JavaScriptの使用例 付録 JavaScriptの基礎 |
| おすすめの人 | ・WindowsでWebデザインを学ぶ人 |
| その他 |
ドリル式 やさしくはじめる
Webデザインの学校
ドリルで考えながら、作りながら習得する
やさしく実践的なWebデザイン学習書。
| タイトル (書籍名) |
ドリル式 やさしくはじめる Webデザインの学校 |
| 価格 | ¥2,508 (税込) |
| 発売日 | 2016/8/12 |
| 特徴 | ・HTMLの知識なしで、レスポンシブWeb サイトまで作れるソフト「BiND」を学べる。 ・内容は3コース構成 ・チュートリアル用の素材は本書サポート サイトからダウンロード可能。 |
| 内容 | 1 Basicコース – Webデザインの基本を 覚えよう 2 Drillコース – Webデザイン力を アップしよう 3 Tutorialコース – BiNDでレスポンシブ サイトを作ってみよう |
| おすすめの人 | ・ドリル形式でWebデザインを学びたい人 ・プロではないけどWebサイトを デザインしたり運営したりしないといけない人 |
| その他 |
Webデザインの基本ルールを学んで
アレンジをしよう。
この記事では、Webデザインの
基本が学べる入門書をまとめました。
グラフィックデザイン・Webデザインの
知識・技術の土台となる部分になるので、
これらの本の内容をしっかり学んだ上で
専門分野を詳しく学んでいきましょう。
なお、Webデザイン関連の書籍は、
こちらの記事にまとめています。
