【2022年】Webデザインの本「最新・人気のおすすめの10冊」

Chapter1 最初に知っておこう! Webサイトとデザインの基本
よいWebデザインとは
様々な種類のWebサイト
ユーザビリティとは
Webサイトのしくみ
デバイスの種類
ブラウザーの種類
制作の流れ
1.制作の流れ
2. 企画しよう
3. サイトマップ制作
4. ワイヤーフレーム制作
5. デザインを制作する
6. ファイルを用意する
7. Web上に公開する
制作をはじめる前に
制作環境を整える
エディターをインストールする
ブラウザーをインストールする
グラフィックツールを確認する
Chapter2 Webの基本構造を作る! HTMLの基本
1. HTMLとは
2. HTMLファイルを作ろう
3. HTMLファイルの骨組みとは
1.Doctype
2.lang
4. headとbodyについて知ろう
1.meta要素
2.head内に書く要素
5. 基本の書き方を身につけよう
6. 見出しをつけよう
7. 文章を表示しよう
8. 画像の挿入しよう
1.alt属性
2.src属性
9. リンクをはろう
10. リストを表示しよう
11. 表組みを作ろう
12. フォームを作ろう
13. 使いやすいフォームを作ろう
フォームのユーザビリティ
14. ブロック要素でグループ分ける
article, section, header, footer, main, aside, nav
15. divとspanでグループを分ける
16. よく使うHTMLタグリスト一覧
Chapter3 Webのデザインを作る! CSSの基本
1. CSSの役割とは
2. 基本の書き方を身につける
3. CSSを適応させる方法とは
4. 文字や文章の装飾する
font, line-height, ショートハンド…
Webデザインとタイポグラフィ
Webフォントを使う
文章をそろえる
文章の組版を整える
5. 色をつけよう
文字に色をつける
背景に色をつける
カラーコードで指定する
色名で指定する
上手に配色しよう
色の持つ印象とは
色相・明度・彩度とは
色のトーンとは
色の組み合わせを考える
各色をメインで使った参考サイト一覧
Column 配色ツール
6. 背景を彩ろう
image, repeat, position, ショートハンドを使う
背景画像を全画面表示する
写真素材をダウンロードできるサイト一覧
7. 幅と高さを指定する
width, heightで幅を指定する
Webサイト上で使う単位とは
8. 余白を調整しよう
margin, paddingの余白の概念とは
余白を使ってグループ化する
枠と文字の余白を作る
Column 余白を上手に使ったWebサイトとは
9. 線を引こう
borderを使う
線のデザインの効果的な使い方
10. レイアウトを組む
flex で横並びにする
grid でマルチカラムにする
Webサイトのレイアウトとは
読みやすいレイアウトとは
レイアウト別参考Webサイト一覧
Column floatのレイアウトについて
11. リセットCSSとは
12. クラスとIDを使った指定方法を理解する
13. ブラウザーのデフォルトCSSをリセットする
14. よく使うCSSプロパティリスト一覧
Chapter4 シングルページのWebサイトを制作する
1. シングルページとは
2. シングルページの制作の流れ
3. headの記述しよう
4. header部分の作成しよう
画面いっぱいに背景画像を設置しよう
画像の効果的なトリミングの仕方とは
5. コンテンツ部分の作成しよう
画像と文章の設置しよう
6. footer部分の作成しよう
7. ファビコンを用意しよう
8. シングルページのカスタマイズ例
Chapter5 2カラムのWebサイトを制作する
1.2カラムページとは
2. カラムページの制作の流れ
3. header部分の作成しよう
4. 横並びの設定をしよう(display: flex;)
5. メインエリアの作成しよう
6. サイドバーの作成しよう
7.レスポンシブに対応しよう
メディアクエリーの基本について
ブレークポイントについて考えよう
コンテンツを縦並びにしよう
8.カラムページのカスタマイズ例
Chapter6 マルチカラムのWebサイトを制作
1.マルチカラムとは
2. マルチカラムの制作の流れ
3. 全体の装飾をしよう
4.マルチカラムの設定をしよう(display: grid;)
Gridの設定
grid-template-columnsの設定
grid-template-rowsの設定
grid-gapの設定
5. コンテンツを入れよう
6.レスポンシブに対応しよう
Gridレイアウトをレスポンシブ対応しよう
repeatとは
auto-fitとは
7.マルチカラムのカスタマイズ例
Chapter7 外部メディアを利用する
1.コンタクトフォームサービスを利用する
2.地図を入れる
3.Facebookプラグインを挿入する
4.Twitterプラグインを挿入する
5.OGPの設定をする
6.動画の埋め込みをする
7.外部メディアのカスタマイズ例
HTMLタグ/CSSプロパティ一覧

１　伝わる資料とはどういうものか（伝わる資料は文字を「読ませない」
「文字数」「図」「写真」がキーポイント　ほか）
２　資料が見やすくなるデザインの基本（文字
文章　ほか）
３　スライド全体のデザインを決めよう（ベースデザインを作ればラクラク
スライドサイズは「４：３」を選ぶ　ほか）
４　資料の見栄えが良くなる！表現のテクニック（文章
作図　ほか）
５　さまざまな資料に応用しよう　シーン別実例集（プロジェクト提案のためのプレゼン用表紙スライド
提案するサービスの特長紹介　ほか）

森重湧太（モリシゲユウタ）
東京農工大学大学院情報工学専攻在学中に「研究発表プレゼンがわかりにくい」と感じたことから、教育工学で学んだ知識と独学の資料作成ノウハウをまとめ、勉強会を発足。それをまとめたものをＷｅｂのスライド共有サービス「Ｓｌｉｄｅ　Ｓｈａｒｅ」に掲載したところ、１ヶ月で累計閲覧数３０万回を突破。その後も閲覧数が増え続け、累計２２０万回を超える人気コンテンツに（２０１５年１２月現在）。高校の授業から大企業の研修まで幅広く利用されている。在学中からスマートキャンプ株式会社の運営する法人向け資料作成代行サービス「ＳＫＥＴ」に携わっており、大学院修了後、同社に入社。事業責任者兼ディレクターとして１００社以上の資料作成を監修している（本データはこの書籍が刊行された当時に掲載されていたものです）

１　Ｖｕｅ．ｊｓを学ぶ準備をしよう
２　Ｖｕｅ．ｊｓの基本を学ぼう
３　イベントハンドリングを学ぼう
４　条件付きレンダリングを学ぼう
５　リストレンダリングを学ぼう
６　バインディングで動的にスタイルを変えよう
７　ＴＯＤＯアプリを作成しよう
８　画像ビューワーを作成しよう

１　伝わるバナーってどう作るの？
２　小さくてもわかりやすく！レイアウトのコツ
３　パッと伝わる文字の見せ方
４　全く違う情報をわかりやすく伝えるグルーピング術
５　人の顔や視線を使って目を引くデザインに
６　イマイチな写真をよく見せる補正し加工
７　あしらいと演出で心惹かれるデザインに

カトウヒカル
１９８４年生まれ。佐賀県出身。２０１２年よりＷｅｂデザイナーとして活動。ｋａｎｖａｓ（カンバス）という屋号で企業のホームページ制作を行う。これまで１００サイト以上の制作に関わり、半数はデザインからＨＴＭＬ／ＣＳＳコーディング、ＣＭＳの組込までワンストップで対応。２０２０年２月からＷｅｂデザインの授業を視聴できるサービス「Ｗｅｂデザイン１ｏｎ１レッスンチャンネル」を主催。ＴｗｉｔｔｅｒではバナーデザインのＴｉｐｓを発信（本データはこの書籍が刊行された当時に掲載されていたものです）

Part 01 カジュアル・アクティブ・ポップ （陽気な・楽しい・活動的なイメージの配色）
Part 02 ロマンティック （かわいい・優しいイメージの配色）
Part 03 ナチュラル （安らぎの・リラックスした・自然なイメージの配色）
Part 04 フレッシュ・クリア （新鮮な・透明感のある・清々しいイメージの配色）
Part 05 エレガント （洗練された・気品のある・上品なイメージの配色）
Part 06 ゴージャス・ラグジュアリー （豊かな・華やかなイメージの配色）
Part 07 ダイナミック・エスニック （大胆な・民族的なイメージの配色）
Part 08 クラシック・シック （伝統的な・信頼のおける・渋いイメージの配色）
Part 09 ミステリアス （神秘的な・空想的なイメージの配色）
Part 10 シャープ・モダン （カッコいい・近未来的なイメージの配色）
Part 11 カラフルワールド （日本の色・世界の色）
Part 12 カラフルヒストリー （歴史と流行色・絵画の色）
Part 13 レインボー・カラーパレット （色相別の配色）

Chapter01 「きれいな」デザイン
01 「透明感のある」デザイン
02 「ピュアな」デザイン
03 「洗練された」デザイン
04 「シンプルな」デザイン
Chapter02 「明るい」デザイン
05 「さわやかな」デザイン
06 「若々しい」デザイン
07 「フレッシュな」デザイン
Chapter03 「かわいい」デザイン
08 「やわらかな」デザイン
09 「女性的な」デザイン
10 「ロマンチックな」デザイン
Chapter04 「おしゃれな」デザイン
11 「カジュアルな」デザイン
12 「カフェ風の」デザイン
13 「シンプルカジュアルな」デザイン
Chapter05 「楽しい」デザイン
14 「ポップな」デザイン
15 「元気あふれる」デザイン
16 「遊び心がある」デザイン
17 「子供向けな」デザイン
Chapter06 「ナチュラルな」デザイン
18 「あたたかな」デザイン
19 「素朴な」デザイン
20 「生命力に溢れた」デザイン
Chapter07 「信頼感のある」デザイン
21 「ビジネスに合う」デザイン
22 「大人の風格がある」デザイン
23 「整然とした」デザイン
Chapter08 「高級感のある」デザイン
24 「エレガントな」デザイン
25 「格調高い」デザイン
26 「シック・クラシカルな」デザイン
Chapter09 「力強い」デザイン
27 「インパクトのある」デザイン
28 「躍動感のある」デザイン
29 「男性的な」デザイン
Chapter10 「心に響く」デザイン
30 「情熱的な」デザイン
31 「アーティスティックな」デザイン
32 「斬新な」デザイン
Chapter11 「カッコいい」デザイン
33 「クールな」デザイン
34 「スタイリッシュな」デザイン
35 「パンク・ロックな」デザイン
Chapter12 「ミステリアス」なデザイン
36 「サイバーな」デザイン
37 「無機質な」デザイン
38 「光を使った」デザイン
39 「影を感じる」デザイン
Design index

１　ＨＴＭＬを書いてみよう（ウォーミングアップをしよう
ＨＴＭＬのきほんを学ぼう）
２　ＳＮＳリンク集を作ってみよう（ＣＳＳのきほんを学ぼう
ＳＮＳリンク集のＣＳＳを書いてみよう）
３　２カラムページを作ってみよう（ブログサイトのＨＴＭＬを書いてみよう
ブログサイトのＣＳＳを書いてみよう）
４　１カラムページを作ってみよう（Ｗｅｂ招待状サイトのＨＴＭＬを書いてみよう
Ｗｅｂ招待状サイトのＣＳＳを書いてみよう　ほか）
５　複数ページのサイトを作ってみよう（制作の流れとＷｅｂデザインのきほん
レストランサイトのＣＳＳを書こう（モバイル）　ほか）

竹内直人（タケウチナオト）
Ｗｅｂ制作会社、動画マーケティング会社にてディレクター・マーケター・エンジニアを経て２０１８年に独立。フロントエンジニアとして現役で活動しつつ、実体験に基づいた知識を活かしコーディング講師としても活動している

竹内瑠美（タケウチルミ）
ＵＩ／ＵＸやマーケティング視点も含めたトータルなビジュアルデザインを得意とする。さまざまなベンチャー企業での経験を活かし、現在はスタートアップ企業のデザインパートナーとして活動している（本データはこの書籍が刊行された当時に掲載されていたものです）

1章　デザインの目的とUI/UX
　1-1：本書の範囲と対象
　1-2：デザインの目的
　1-3：UIとUX
　1-4：まとめ
2章　物理的な制約
　2-1：デバイスのバリエーション
　2-2：入力手段の違い
　2-3：画面の違い
　2-4：AndroidとiPhone
　2-5：まとめ
3章　ソフトウェアの影響
　3-1：Webとアプリ
　3-2：テキスト・画像・動画
　3-3：パフォーマンス
　3-4：まとめ
4章　人間の認知特性
　4-1：色・形・動き
　4-2：インタラクションコスト
　4-3：一貫性
　4-4：シンプルさ
　4-5：共通概念
　4-6：まとめ
5章　階層と構造
　5-1：縦、横、前後
　5-2：階層の深さと広さ
　5-3：現在地と差別化表現
　5-4：トップ・一覧・詳細
　5-5：関連する情報
　5-6：わからないとは何か
　5-7：まとめ
6章　ナビゲーションとインタラクション
　6-1：ナビゲーション
　6-2：インタラクション
　6-3：ヘッダ
　6-4：フッタ
　6-5：パンくずリスト
　6-6：カラムと左右ナビゲーション
　6-7：オーバーレイ、インレイ
　6-8：スクロール、ページング
　6-9：スクロールの方向
　6-10：まとめ
7章　デザインを形にする
　7-1：ミニマルデザイン
　7-2：デザインガイドライン
　7-3：プロトタイプ
　7-4：マルチデバイスデザイン
　7-5：まとめ

CHAPTER 1 最初に知っておこう！Webサイトの基本と必携ツール
1-1 Webページの仕組み
1-2 HTMLの基礎
1-3 HTMLの属性
1-4 CSSの基礎
1-5 より管理しやすいCSSについて
1-6 JavaScriptの読み込みの仕方
1-7 ブラウザーによる見え方の違い
1-8 デベロッパーツールを使いこなす
1-9 次章以降で学ぶこと
CHAPTER 2 「レスポンシブWebデザインとフォント」
2-1 作成するランディングページの紹介
2-2 シングルカラムのレイアウトとは
2-3 全画面背景で目を引くデザインの実現
2-4 フォントの詳しい使い方
2-5 アイコンフォントの使い方
2-6 スマートフォンでの閲覧に対応させる
2-7 ブレークポイントの詳細
2-8 表示領域にピタッと移動する方法
2-9 練習問題
2-10 カスタマイズしよう
CHAPTER 3 ブログサイトで学ぶ「装飾とカラムレイアウト」
3-1 作成するブログサイトの紹介
3-2 2カラムのレイアウトを知る
3-3 異なる画面サイズの閲覧に対応させる
3-4 各要素を装飾する①（見出し・画像・ボタン）
3-5 各要素を装飾する②（箇条書きリスト・番号付きリスト）
3-6 各要素を装飾する③（引用文・ページ送り・囲み枠）
3-7 各要素の装飾④（ヘッダー・フッター・ナビゲーション・表・フォーム）
3-8 スクロールに合わせて追従させる
3-9 練習問題
3-10 カスタマイズしよう
CHAPTER 4 コーポレートサイトで学ぶ「表組み、フォーム、JavaScript」
4-1 作成するコーポレートサイトの紹介
4-2 枠からはみ出す要素を作る方法
4-3 グラフでもっとわかりやすくする
4-4 画像とテキストを互い違いに表示させる
4-5 表でデータを示す
4-6 タイムラインを表示する
4-7 フォームの装飾
4-8 属性セレクター
4-9 練習問題
4-10 カスタマイズしよう
CHAPTER 5 イベントサイトで学ぶ「特定ページの作り方とアニメーション」
5-1 作成するイベントサイトの紹介
5-2 CSSでページ内をスルスル動かす
5-3 ブレンドモードで画像の色を変える
5-4 カスタムプロパティ（変数）を使う
5-5 CSSでアニメーションをつける（トランジション）
5-6 CSSでアニメーションをつける（キーフレーム）
5-7 斜めのラインのデザインを作る
5-8 グラデーションで表現する
5-9 スライドメニューを設置する
5-10 練習問題
5-11 カスタマイズしよう
CHAPTER 6 ギャラリーサイトで学ぶ「動画と画像の使い方」
6-1 作成するギャラリーサイトの紹介
6-2 背景に動画を設置する
6-3 画像をレスポンシブに対応させる
6-4 マルチカラムでレイアウトを作る①
6-5 マルチカラムでレイアウトを作る②
6-6 フィルターで画像の色を変える
6-7 カーソルを合わせると画像を拡大する
6-8 要素に影をつける
6-9 ライトボックスで画面いっぱいに表示する
6-10 アニメーションを加える
6-11 ダークモードに対応させる
6-12 練習問題
6-13 カスタマイズしよう
CHAPTER 7 HTMLやCSSをより早く、より上手に管理できる方法
7-1 Emmetを使って素早くコーディングする
7-2 calc関数で計算式を書く
7-3 Sassを使って効率を上げる
7-4 VSCodeでSassを利用する
7-5 ネストを使いこなす（Sassの便利な使い方①）
7-6 パーシャルでファイルを分割する（Sassの便利な使い方②）
7-7 スタイルを使い回せるMixin（Sassの便利な使い方③）
CHAPTER 8 サイトの投稿と問題解決
8-1 チェックリスト一覧
8-2 エラーメッセージを読み解く
8-3 制作に関する質問ができるサイト

０１　サンプルサイトから見る印象に関わる動き
０２　「動くＷｅｂデザイン」の基礎知識
０３　Ｗｅｂサイトの動きを実現する仕組みと準備
０４　最低限覚えておきたい現れ方
０５　背景の動き
０６　エリアの動き
０７　画像リンクの動き
０８　テキストの動き
０９　イラスト・オブジェクトの動き

久保田涼子（クボタリョウコ）
１９８２年生まれ、広島市出身。東京女子大学文理学部心理学科卒業。フリーランスクリエイター。ＷＥＢ制作ナレーター業務Ｃｏｃｏ-Ｆａｃｔｏｒｙの代表をつとめ、国内外のウェブサイトをトータルプロデュースする他、デジタルハリウッドＳＴＵＤＩＯ講師としてオンライン講座や教材開発、ワークショップ開発に多数携わる

杉山彰啓（スギヤマアキヒロ）
１９８４年生まれ、東京都出身。大手システム開発企業にて、移動ロボットの走行制御プログラミング開発に従事し現在は、茨城県鹿行地区Ｎｏ１のポータルサイトを運営するＬｏｃｏｔｙ（ロコティー）の代表を務めながら、デジタルハリウッドＳＴＵＤＩＯで講師やＹｏｕＴｕｂｅ・アプリ開発のディレクター業務など様々な活動を行う（本データはこの書籍が刊行された当時に掲載されていたものです）

１　イラスト（まばゆいキラキラ星
可愛いぷっくりハート　ほか）
２　パターン（輝きのサンバースト
魅惑のマーブリング　ほか）
３　フレーム（シックな内側角丸フレーム
小粋な二角丸フレーム　ほか）
４　タイポ＆ロゴ（Ａｄｏｂｅ　Ｆｏｎｔｓを使おう
スマートな反転文字　ほか）
５　インフォグラフィック（プレゼン資料で活躍！ベン図
シンプルなサイクル図　ほか）

Chapter 1　知っておきたいサイトとデザインのきほん知識
1-1　ウェブサイトのしくみについて知ろう
1-2　サイト制作のフローとウェブデザイン
1-3　コーディングについて知っておくべきこと
1-4　ウェブページのパーツやレイアウトについて知ろう
1-5　ウェブデザインで知っておくべきこと
Chapter 2　サイト制作の前に準備しておくこと
2-1　制作環境を整えよう
2-2　Google Chromeのインストールと使い方
2-3　Visual Studio Codeのインストールと使い方
2-4　入力したコードをブラウザで確認する方法
2-5　実習用サンプルサイトを見てみよう
Chapter 3　知っておきたいHTMLのきほんと書き方
3-1　HTMLのきほん知識
3-2　サンプルサイト共通のHTMLを書いてみよう
3-3　見やすいコードとコメントの書き方
Chapter 4　知っておきたいCSSのきほんと書き方
4-1　CSSのきほん知識
4-2　CSSを書いてみよう＜ページの基本設定を記述する＞
4-3　CSSを書いてみよう<レイアウトの詳細を記述する>
4-4　ウェブフォントを指定してみよう
Chapter 5　知っておきたいレスポンシブデザインのきほんと書き方
5-1　レスポンシブデザインのきほん知識
5-2　モバイルサイト用のCSSを書いてみよう
5-3　ハンバーガーメニューを作成しよう
5-4　モバイル用フッターのレイアウトを調整しよう
Chapter 6　フルスクリーンレイアウトを制作する
6-1　フルスクリーンレイアウト制作で学ぶこと
6-2　フルスクリーンレイアウトのHTMLを書いてみよう
6-3　フルスクリーンレイアウトのCSSを書いてみよう
6-4　フルスクリーンレイアウトのモバイル用CSSを書いてみよう
Chapter 7　フレックスボックスレイアウトを制作す
7-1　フレックスボックスレイアウト制作で学ぶこと
7-2　フレックスボックスレイアウトのHTMLを書いてみよう
7-3　フレックスボックスレイアウトのCSSを書いてみよう
7-4　フレックスボックスレイアウトのモバイル用CSSを書いてみよう
Chapter 8　シングルカラムで動画コンテンツページを制作する
8-1　シングルカラムレイアウト制作で学で学ぶこと
8-2　シングルカラムレイアウトのHTMLを書いてみよう
8-3　シングルカラムレイアウトのCSSを書いてみよう
8-4　シングルカラムレイアウトのモバイル用CSSを書いてみよう
Chapter 9　グリッドで格子状レイアウトを制作する
9-1　グリッドレイアウト制作で学ぶこと
9-2　グリッドレイアウトのHTMLを書いてみよう
9-3　グリッドレイアウトのCSSを書いてみよう
9-4　グリッドレイアウトのモバイル用CSSを書いてみよう
Chapter 10　2カラムでショップページを制作する
10-1　2カラムレイアウト制作で学ぶこと
10-2　2カラムレイアウトのHTMLを書いてみよう
10-3　ECサイトへリンクするページのHTMLを書いてみよう
10-4　2カラムレイアウトのCSSを書いてみよう
10-5　2カラムレイアウトのモバイル用CSSを書いてみよう
Chapter 11　Googleマップ付きの問い合わせページを制作する
11-1　問い合わせページ制作で学ぶこと
11-2　問い合わせページのHTMLを書いてみよう
11-3　問い合わせページのCSSを書いてみよう
11-4　問い合わせページのモバイル用CSSを書いてみよう
Appendix　オリジナルのポートフォリオサイトに改変してみよう
<綴じ込み特典>
デザインのバリエーションが学べる！「レスポンシブデザインのネタ帖」
インターン、就転職に役立つ！「ポートフォリオ用アレンジのネタ帖」