いちばんよくわかる Web デザインの基本きちんと入門［第 2 版］

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

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

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

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

＜本書の対象読者＞
●これから Web デザインを学びたい初心者の方
●Web サイト制作に自信が持てない方
●1 冊で Web デザイナーの基礎知識を網羅して学びたい方
CONTENTS
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
Chapter 01 Web デザインの基本
Chapter 02 レイアウト
Chapter 03 配色
Chapter 04 写真と図版
Chapter 05 タイポグラフィ
Chapter 06 HTML5 と CSS3
Chapter 07 インタラクション
Chapter 08 運用とマーケティング

Web デザインを独学で始めると、余白の取り方や色の組み合わせを「なんとなく」で決めてしまい、出来上がりのどこが悪いのかを自分で説明できない状態が続きます。『いちばんよくわかる Web デザインの基本きちんと入門 第 2 版』 (伊藤庄平 / 益子貴寛 / 久保知己 / 宮田優希 / 伊藤由暁 著、SB クリエイティブ、2021 年 8 月刊) は、そのなんとなくを原則の言葉に置き換えていく B5 判の教科書型入門書です。版元は対象読者として「これから Web デザインを学びたい初心者の方」「Web サイト制作に自信が持てない方」「1 冊で Web デザイナーの基礎知識を網羅して学びたい方」の 3 つを挙げ、11 刷を突破した旧版の内容を更新した改訂版と紹介しています。5 名の共著で、版元ページには 5 名全員が著者として掲載されています。

全 8 章の構成、Web デザインの基本からレイアウト / 配色 / 運用まで

構成は Chapter 01 から Chapter 08 までの全 8 章で、章題は順に「Web デザインの基本」「レイアウト」「配色」「写真と図版」「タイポグラフィ」「HTML5 と CSS3」「インタラクション」「運用とマーケティング」です。版元の詳細記事は、コンセプトやターゲットといった企画の部分、レイアウト / 配色 / 写真 / 図版 / タイポグラフィというデザインの基本、CSS グリッドやインタラクションといった技術、マーケティングや SEO というサイト公開後の運用までを 1 冊で扱うと整理しています。レイアウトの章では「近接の原則・整列の原則・反復の原則・対比の原則」の 4 つの原則とレスポンシブ Web デザインを解説し、配色の章では「色相・明度・彩度」という色の三属性と、明度と彩度を組み合わせた「トーン」の概念から入り、章末に実例デザインの配色見本集を置いています。写真と図版の章はトリミングや補正、解像度やファイル形式、色調補正といった基本設定を、タイポグラフィの章はフォントの選び方や文字サイズ、行間、余白の取り方と Web フォントを扱います。紙面は 2 段組みで、版元によれば「1 つのテーマを 2〜4 ページほどで完結させている」ため、通読しても、必要な項目だけ引いても読める作りです。

原則から学ぶ意義と、レスポンシブ実装まで含める理由

Web デザインの難しさは、紙のデザインと違って固定のカンバスが無い点にあります。同じページがスマートフォンの縦画面でも大型ディスプレイでも表示されるため、「この位置にこの大きさで置く」という個別の判断ではなく、近接 / 整列 / 反復 / 対比のような、画面幅が変わっても保たれる原則で設計を考える必要があります。レスポンシブ Web デザイン は、その原則を画面幅ごとに再配置する技術で、これを実装する道具が フレックスボックス と CSS グリッド です。本書が Chapter 06 で HTML5 と CSS3 を、紹介文でフレックスボックスと CSS グリッドを名指しで挙げているのは、デザインを考える人が実装の制約を知らないと、作った案がそのまま組めずに手戻りになるからです。配色やタイポグラフィにも同じ構造があります。ディスプレイの発色や OS のフォント環境は閲覧者ごとに異なるので、特定の環境で美しく見える 1 枚を作る技能より、色の三属性やトーン、行間と余白のような、環境が変わっても通用する判断基準を持つことが実務では効きます。最終章に運用とマーケティングを置いている点も、公開後に数字で評価される Web という媒体の性格を反映した構成です。

初心者向けの前提知識と、著者 5 名の実務背景

前提知識はほとんど要りません。HTML と CSS を書いた経験があると Chapter 06 以降が読みやすくなりますが、章題のとおり基本から始まるため、これから Web デザインを学ぶ人が最初に開く本として成立しています。著者 5 名は、版元ページの著者紹介 (刊行時点) によれば、伊藤庄平氏が株式会社シロクロのデザイナー / 代表取締役で JAGDA 会員、共著に『オンスクリーン タイポグラフィ』 (ビー・エヌ・エヌ) があり、益子貴寛氏が株式会社まぼろし取締役 CMO として Web サイトの企画 / 設計や広告運用、SEO、アクセス解析など Web マーケティング全般を担当し、Google アナリティクス認定資格者で、著書に『Web 標準の教科書』 (秀和システム) があります。宮田優希氏は 2014 年より Web デザイナーとして株式会社まぼろしに入社し UI/UX デザインとフロントエンド実装を、伊藤由暁氏は 2015 年 5 月に同社に入社し HTML/CSS とウェブアクセシビリティを得意として情報設計と実装を、久保知己氏は 2014 年に同社に入社し HTML+CSS によるマークアップから CMS の構築までを手がけてきた人物です。デザインとタイポグラフィ、マーケティング、実装とアクセシビリティという分担が、企画から運用までを 1 冊に収める全 8 章の幅と対応しています。

一方で、Photoshop や Figma といった特定ツールの操作手順を学びたい人には、目次にツール操作の章が無いこの本は目的が合いません。すでにデザイナーとして数年の実務経験があり、タイポグラフィやアニメーションなど 1 領域を深く掘りたい人にとっても、本書は基礎の再確認にとどまります。逆に、これから Web デザインを独学で始める人、コーディングはできるが見た目の判断に自信が持てないエンジニア、制作会社にデザインを発注する側で共通言語を持ちたい担当者にとっては、レイアウト / 配色 / 写真 / 文字 / 実装 / 運用を 1 冊で見渡せる本書は、断片的な記事を渡り歩く時間を大きく節約してくれます。原則を言葉で説明できるようになった時点で、自分の制作物のどこを直すべきかが見えるようになる、その最初の一歩に向いた教科書です。