いちばんよくわかるWebデザインの基本きちんと入門[第2版] レイアウト/配色/写真/タイポグラフィ/最新テクニック

著者 : 伊藤庄平 益子貴寛 宮田優希 伊藤由暁 久保知己

• SBクリエイティブ (2021年8月20日発売)

作品紹介・あらすじ

11刷突破のベストセラーが最新情報にアップデート！

これからはじめる人、一気に学びたい人へ
一生使えるWebデザインのテクニック集！

絶対に外せない！ レイアウト4つの原則とレスポンシブWebデザイン
今日から使える！ 配色の基本と、実例デザインの配色見本集
ユーザーの心を動かす！ 写真と図版の使い方、タイポグラフィの選び方
フレックスボックス、インタラクション、マーケティングの知識まで

この一冊でWebデザイナーに必須の基礎知識が網羅できる！

＜本書の対象読者＞
●これからWebデザインを学びたい初心者の方
●Webサイト制作に自信が持てない方
●1冊でWebデザイナーの基礎知識を網羅して学びたい方

感想・レビュー・書評

[横さんの感想 · 2023年8月27日]

Ｗｅｂデザインに焦点を当てたＩＴ書

開発言語サイドからではなく、アウトプットする画面などのレイアウトサイドから
Webコンテンツを解説しています。

カラーで写真や、図表をつかって、見たらすぐわかる形になっています。
250頁あまりありますが、本文は、２段組みでけっこう細かい文字なので、辞書に準じた集積感を感じました。
実例デザイン、ＣＯＬＵＭＮといったテーマごとに挿入された資料もあります。
詳細の目次とともに、４頁のインデックスにて、用語、テーマの逆引きもできます。

HTML5,CSS3,Javascript等 のコードなどの解説は、指定パラメータの書き方などがありますが、各言語の使い方は言語解説書を合わせてご確認ください。

各Chapter に関する内容は次のように感じました。
01　Ｗｅｂデザインの基本　作業の全体像を概説しています。
02　レイアウトの概要
03　色の基本と、組み合わせの解説
04　写真の概要
05　文字と書体の概要
06　コンテンツ技術言語の概要
07　インタラクションとは関係性のこと、ＵＩ，ＵＸ技術の概要
08　Ｗｅｂサイトの運用管理について

作業全体を把握するには、01,02,07,08　Ｗｅｂサイトの属性や表現方法は、 02,03,04,05　ＩＴ技術の対応については、 06,07,08 かと。

Contents

Introduction
Chapter01　Webデザインの基本
Section01　デザインとは何か
Section02　目的と目標を考える
Section03　ターゲットを想定する
Section04　コンセプトを決める
Section05　モバイルファーストとマルチデバイス対応
Section06　ワイヤーフレームやプロトタイプを作る
Section07　自発的にスケジュールを管理する
Section08　ワークフローの全体像
Chapter02　レイアウト
Section01　レイアウトは
Section02　レイアウトの原則
Section03　Webデザインにおけるレイアウト
Section04　Webデザインにおけるナビゲーションのレイアウト
Section05　レイアウトにおける視線誘導
Section06　タッチデバイス向けのレイアウト
Section07　レスポンシブWebデザイン
Chapter03　配色
Section01　色とは
Section02　色の三属性
Section03　トーン
Section04　補色・類似色・配色の調和
Section05　色の印象
Section06　カラーモード
Section07　利用者の視点に立った配色
Section08　Ｗｅｂサイトの目的に合った配色と比率
Section09　リンクの色の扱い
Chpater04　写真と図版
Section01　Ｗｅｂデザインにおける写真
Section02　Ｗｅｂデザインにおける図版
Section03　色調補正
Section04　写真のトリミング
Section05　解像度、ピクセルについて
Section06　画像のファイル形式
Chapter05　タイポグラフィ
Section01　書体とは
Section02　欧文書体と和文書体
Section03　書体ファミリー
Section04　書体の選び方
Section05　本文の組版
Section06　文字コードとブラウザの表示
Section07　最適なfont-family
Section08　Ｗｅｂフォントについて
Section09　Ｗｅｂフォントサービスの紹介
Section10　Ｗｅｂフォントの使い方
Chapter06　HTMLとCSS3
Section01　ＨＴＭＬ５の新概念
Section02　ＣＳＳのカスケーディング、詳細度、継承
Section03　ＣＳＳの作り方と管理
Section04　ＣＳＳでレイアウトする（Flexbox)
Section05　ＣＳＳでレイアウトする（CSS Grid)
Section06　メディアクエリーで作るレスポンシブＷｅｂレイアウト
Chapter07　インタラクション
Section01　インタラクティブデザインとは
Section02　インタラクティブデザインの基本
Section03　マイクロインタラクションとは
Section04　ＣＳＳをつかったインタラクション
Section05　Ｊａｖａｓｃｒｉｐｔとは
Section06　動きのあるサイトを作る時の注意点
Section07　ＳＶＧやＷｅｂＧＬをつかったインタラクションデザイン
Chpater08　運用とマーケティング
Section01　テスト環境と本番環境
Section02　公開前後のチェック作業
Section03　Ｗｅｂマーケティングの全体像
Section04　インターネット広告の種類
Section05　リスティング広告
Section06　ランディングページ最適化（ＬＰＯ）
Section07　検索エンジン最適化（ＳＥＯ）
Section08　オウンドメディア運用
Section09　ソーシャルメディアマーケティング
Section10　動画マーケティング
Section11　Ｇｏｏｇｌｅアナリスティクス
Section12　Ｇｏｏｇｌｅ　Ｓｅａｒｃｈ　Ｃｏｎｓｏｌｅとタクスマネージャー
Section13　Ｇｏｏｇｌｅの各種サービスの活用
Section14　ＷｅｂサイトのＰＤＣＡサイクル
ＩＮＤＥＸ

ISBN：9784815609610
出版社：SBクリエイティブ
判型：B5
ページ数：256ページ
定価：2400円（本体）
発売日：2017年03月01日 第1版第1刷
発売日：2021年08月24日 第2版第1刷
発売日：2022年07月06日 第2版第4刷

[tomemariさんの感想 · 2023年10月31日]

基本を網羅的抑えている。
デザインだけに偏らず、運用〜マーケティングまで情報があるのがありがたい。
ウェブページの制作がメインにはなっているが、作った後の活用や顧客をホームページに誘導するためのオウンドメディア運用、検索エンジン最適など、基本のキがわかりやすい。

[ninoyanさんの感想 · 2023年9月15日]

これから読むので、雑感＋評価保留です。読了後、評価します。

大まかに、前半はデザインの基礎知識、後半はHTML等の技術要素や、運用、マーケティングについてと、細かな技術書というより【WEBサイトを作るとは】という基本が学べる構成。

デザイン実務初学者だけでなく、発注するクライアント側も、仕上がりをチェックしたり要望を出すのに、この程度の知識があると、WEBデザイナーとコミュニケーションが取りやすいかと。

見開き2ページ、1テーマで、読み進めやすいのも良し。

チャプター
01:Webデザインの基本
02:レイアウト
03:配色
04:写真と図版
05:タイポグラフィ
06:HTML5とCSS3
07:インタラクション
08:運用とマーケティング

[尚美学園大学メディアセンター（図書館）さんの感想 · 2022年6月28日]

情報表現学科 情報・アプリコース お薦め入門書
https://library.shobi-u.ac.jp/mylimedio/search/search.do?target=local&mode=comp&materialid=00080919

[摂南大学図書館寝屋川本館さんの感想 · 2022年2月1日]

摂南大学図書館OPACへ⇒
https://opac2.lib.setsunan.ac.jp/webopac/BB50253413

著者プロフィール

伊藤 庄平（いとう しょうへい）
株式会社シロクロのデザイナー・代表取締役。1979年2月福岡県生まれ。JAGDA会員、新宿私塾16期、文字塾3期生。マーケティング、ディレクション、デザイン、実装業務を担当。共著に『オンスクリーン タイポグラフィ』（ビー・エヌ・エヌ）がある。

「2021年 『いちばんよくわかるWebデザインの基本きちんと入門［第2版］』 で使われていた紹介文から引用しています。」