AIを活用するには、最近のWebデザイン・制作に関する確かな知識とテクニックが必要 -Webデザインきちんと入門

Book Review

Post on:2026年11月6日

sponsorsr

※本ページは、アフィリエイト広告を利用しています。

最近のWebデザイン・制作は、AIの普及に伴い、大きく進化しています。しかし、AIを活用するには、Webデザイン・制作に関する確かな知識が必要です。AIを使いこなしながら、人間がより適切な判断をし、実践することが重要です。

WebデザイナーやWeb制作者にとって、確かな知識と最新のテクニックを学べる解説書を紹介します。

本書は書名がすこし変更されましたが、『Webデザインの基本きちんと入門』の第3版に相当するもので、内容はこれまでと比べて最新の知識やテクニックを加えて大幅にアップデートされており、それで書名も変わったのだと思います。

初めて手にする人はもちろん、第1版・第2版を持っている人にもお勧めです。

初めてだけどやさしくわかる　Webデザインきちんと入門
ISBN 978-4-8156-4330-0
[Amazonでみる]
[楽天でみる]

著者: 伊藤庄平、益子貴寛、久保知己、宮田優希、伊藤由暁
出版社: SBクリエイティブ
発売日: 2026/9/30

Kindle版も同時発売されていますが、書籍版をお勧めします。電子版を読むには、iPad Pro 13inchくらいの大きさがないと厳しいと思います。

Webデザインきちんと入門 Kindle版

版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。

本書は全8章＋付録の構成で、1-5章はデザイン、6-7章はHTMLとCSS、8章はWebマーケティングです。まさにWeb制作に関する基礎知識とテクニックが収録されており、かなりのボリュームです。

第1章は「Webデザインの基本」ワークフローの全体像、Webサイトの目的や目標、ターゲットの想定など、実制作に入る前に必要なことを学びます。最近ではモバイルファーストが必須となり、さらにマルチデバイス対応とこれまで以上にレスポンシブの必要性が求められています。

第2章は「レイアウト」最近のWebサイトで採用されているレイアウトを学びます。

Webサイトのレイアウトで基準となるのは、グリッドシステムです。マス目に沿って要素を配置し、情報を整理し、一貫性を保つ仕組みで、レイアウトの土台になります。本書ではグリッドの構成要素、グリッドの決め方や注意点、レイアウトにおける視線誘導、ナビゲーションのレイアウトなどが詳しく解説されています。

また、実例も豊富に掲載されており、シングルカラム、マルチカラム、フルスクリーン、情報量が多いレイアウト、余白を活かしたレイアウト、グリッドを意識したレイアウトなど実際のWebサイトが収録されています。

ここ数年でタッチデバイスでWebサイトにアクセスするユーザーも増加しました。マウスやキーボード操作とは異なり、正確で細かい操作はできないため、タッチデバイス向けに設計することが必要です。

第3章は「配色」配色はWebサイトの見た目を決定する上で重要な要素の一つです。同じレイアウトでも配色を変えるだけで見た目の印象や見やすさ、使いやすさが大きく変わります。

実例は各章ごとに豊富に収録されており、配色だと赤をベースにした配色、黄をベースにした配色、緑をベースにした配色、青をベースにした配色、ピンクをベースにした配色、黒をベースにした配色、白をベースにした配色、紫をベースにした配色、カラフルな配色、さらに和を感じる配色、高級感のある配色、信頼感のある配色、力強くスタイリッシュな配色、可愛らしく柔らかな配色など、実際のWebサイトを見てみたくなるような配色が満載です。

第4章は「写真と図版」図版とはイラストや概念図やフローチャートやアイコンのことで、写真や図版が持つ情報や魅力を最大限に活かしてWebサイトに掲載するテクニックを学べます。

第5章は「タイポグラフィ」この章までがデザインのパートです。デザイナーとしての書体の選び方や使い方、タイポグラフィでWebサイトをどのように演出するかといったデザイン的ななテクニックだけでなく、最適なfont-familyの設定といったことも詳しく解説されています。

第6章は「HTMLとCSS」ここからはマークアップやコーディングです。最新のHTMLで作るセマンティックWeb、最近のCSSの管理方法など、現場で必要な知識を一通り学べます。

また、最近はリセットCSSも考え方がだいぶ変わってきました。以前は各ブラウザ間で見た目の差異があるスタイルを共通化するためものでしたが、最近ではその差異はほとんどなくなり、リセットCSSも見た目ではなく、挙動を扱いやすくするものが中心になっています。
参考: 2026年、現在の環境に適したリセットCSSのまとめ

第7章は「インタラクション」最近のWebサイトではマイクロインタラクションの機能に存在する小さな振る舞いや挙動が取り入れられるようになりました。たとえば、「いいね」をクリックするとハートが弾けるアニメーションといったユーザーに特別な体験を提供するものです。

マイクロインタラクションはもちろん、さまざまなインタラクションも以前はJavaScriptがないと実装できませんでしたが、最近ではCSSが進化し、CSSだけで実装できるものがかなり増えてきました。

第8章は「運用とマーケティング」Webサイトは制作するだけで終わりではありません。公開した後の運用とマーケティングがもっとも重要です。コンテンツ・広報・広告の3つの視点から、運用で求められるポイントを学べます。

最後の付録は「デザインシステム」デザインシステムはWebサイトだけでなく、SNSや広告など幅広くブランドがユーザーと接する場面において成果物の一貫性と使いやすさを提供するものです。デザインシステムがあることで、チーム内での進行も円滑に進み、また対クライアントとのコミュケーションも相違なく進められます。