【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 レインボー・カラーパレット （色相別の配色）

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

1章　基礎
　1-01 ボックス
　1-02 コンポジション
　1-03 単位
　1-04 グローバルスタイルとローカルスタイル
　1-05 モジュラースケール
　1-06 公理
2章　レイアウト
　2-01 Stack
　2-02 Box
　2-03 Center
　2-04 Cluster
　2-05 Sidebar
　2-06 Switcher
　2-07 Cover
　2-08 Grid
　2-09 Frame
　2-10 Reel
　2-11 Imposter
　2-12 Icon