WEBデザイン 新・スタンダードテクニック37｜著者が語る使い方
この本について
『現場のプロが教える WEBデザイン 新・スタンダードテクニック37』は、2015 年 8 月に MdN（インプレス）から刊行された Web デザインのテクニック集で、私（秋元 英輔）も執筆しました。Web 制作の現場で活動する著者が手法ごとに分担して書いた本です。A5 変形・256 ページ、紙の本と Kindle 版が同日に発売されています。
出版社の内容紹介にあるとおり、本書の前提は「モバイルファースト」と「モダンブラウザ」です。刊行は 2015 年です。スマートフォンからのアクセスが PC を上回るサイトが珍しくなくなり、古いブラウザへの対応が不要になってきた時期にあたります。その前提で、HTML5 + CSS3 による「これからの Web 制作のスタンダード」を 37 本の手法としてまとめた本です。各手法はステップバイステップ形式で、サンプルデータをダウンロードして手を動かしながら確認できます。
本書の構成（目次より）
- Chapter 1 デザイン & レイアウト
- Chapter 2 ナビゲーション
- Chapter 3 エフェクト & インタラクション
- Chapter 4 ユーザビリティ
最も厚いのが Chapter 1 です。レスポンシブなマルチカラムとシングルページ、メディア風レイアウト、背景全面の画像・動画、Infinite Scroll、Masonry による Pinterest 風の並べ方、吹き出しで会話を表す UI まで扱っています。以降の 3 章は、それらに動きと使いやすさを足していく構成です。全 37 本が「001〜037」の番号付きで並び、どの番号からでも読み始められます。なお、出版社ページで詳細目次が公開されているのは Chapter 1 だけのため、ここでも Chapter 1 のみ内容を挙げています。
著者としておすすめする読み方
コーディングを学んでいる方は、Chapter 1 の 001「レスポンシブなマルチカラムレイアウトの実装」から順に、サンプルデータを開きながら読んでください。番号順に進むと、レイアウト → ナビゲーション → 動き → 使いやすさ、と並びます。これは 1 つのサイトを組み上げるとき、実際に判断していく順番でもあります。
発注する側なら、目次を眺めるだけでも使えます。「背景に動画を置きたい」「スクロールで次のコンテンツを読み込みたい」——こうした要望には、本書でそれぞれ名前と番号が付いています。打ち合わせで「Masonry のような一覧」「背景全面に動画」と、本書にある名前で指せれば、言葉の行き違いが減ります。手元に本があれば番号（001〜037）でも構いません。
2015 年の本を今読むときの注意
本書の手法は HTML5・CSS3・jQuery で実装されています。2026 年現在、HTML5 と CSS3 は標準になり、本書で「新しい」と書かれていた手法の多くは当たり前のものになりました。一方、jQuery に依存した実装は、現在の制作では CSS 単体や素の JavaScript、あるいは React などのフレームワークで置き換えられることが多くなっています。CSS Grid や position: sticky のように、当時はまだ使いにくかった機能で同じ結果を短く書けるケースもあります。
そのため、本書のコードをそのままコピーして使うより、「どんな見せ方・動きが定番になっていて、それにどんな名前が付いているか」を知る本として読むほうが、今は役に立ちます。レイアウトやナビゲーションの考え方自体は、実装技術が変わっても引き続き使えます。
書誌情報
- 書名: 現場のプロが教える WEBデザイン 新・スタンダードテクニック37
- 出版社: インプレス（MdN）
- 発売日: 2015 年 8 月 18 日（紙・Kindle 同日）
- ISBN: 978-4-8443-6518-1
- 仕様: A5 変形／256 ページ
- 定価: 3,080 円（税込）
- 購入: Amazon（Kindle）／MdN の書籍ページ（目次・ダウンロードデータあり）
関連ページ
- Web デザイン・コーディングを含むホームページ制作: 千葉のホームページ制作サービス
- 著者プロフィールと 2 冊の著書: アンドクリエイトについて（著書）
- もう 1 冊の著書: 『ビジネスサイトをこれからつくる WordPressデザイン入門』の紹介
