現場で使える Web デザインアイデアレシピ

本書は、著者がこれまでに発信してきた Web 制作 Tips を一冊にまとめて、具体的な実装方法を解説した書籍です。

・HTML や CSS の基礎を学んできて、次のステップを踏みたい
・独学で学んできたので、他人のコードを見てみたい
・無駄なコードを省き、短縮化させたい
・よく見かけるあのデザイン、どう実装すればいいのか分からない

このような方を対象として「デザインを見ただけで必要な HTML タグと CSS コードをイメージし、実装できるようになる」をテーマに、Twitter では紹介しきれなかったデザインアイデアを画像とともに詳しく解説するのが本書の役割です。

Web 制作でよく使われる「背景・画像・写真装飾」「見出しやテキストの装飾」「レイアウト」「ボタンデザイン」と 4 つのデザインカテゴリーをメインに、お問い合わせフォームの UI、Google 検索結果ページに反映する構造化データの書き方、デザインやコーディングを便利にするウェブサービスの紹介など、Web 制作の現場で活用できる情報を詰め込んでいます。

■本書の特徴
1.用途に合わせたデザインパターンを 70 種紹介
カテゴリーごとに豊富なデザインパターンを掲載しました。
シンプルで使いやすいデザインを網羅したので、現場ですぐに使えます。

2.デザインに合わせたコーディングが学べる
デザインに合わせた最適なコードを本書では紹介しています。
コードの短縮化やモダンブラウザの新旧バージョンへの対応も解説しています。

3.サンプルコードですぐに実装できる
本書で紹介したコードはすべて購入者特典で配布します。
どなたでもすぐにデザインを実装できます。

■本書の構成
Chapter1 背景・画像・写真装飾
Chapter2 見出しやテキストの装飾
Chapter3 レイアウト
Chapter4 ボタンデザイン
Chapter5 お問い合わせフォーム
Chapter6 現場で使える Web ツールと素材配布サイト
Chapter7 Google 検索結果ページへの対策
Chapter1 背景・画像・写真装飾
Chapter2 見出しやテキストの装飾
Chapter3 レイアウト
Chapter4 ボタンデザイン
Chapter5 お問い合わせフォーム
Chapter6 現場で使える Web ツールと素材配布サイト
Chapter7 Google 検索結果ページへの対策

よく見かけるあのデザインを、どう HTML と CSS で組めばよいのか分からない。そうした段階で手が止まっている人に向けて、装飾やレイアウトのアイデアを実装のコードとともに集めたのが『現場で使える Web デザインアイデアレシピ』 (小林マサユキ 著、マイナビ出版、2022 年 1 月 31 日発売) です。副題は「HTML & CSS で表現するシンプルで使いやすい 70 のレシピ」で、Compass Web Development のシリーズに入っています。版元の紹介によると、サイト制作の現場で使える Tips を SNS で発信してきた Web デザイナーの著者が、それらを一冊にまとめて具体的な実装方法を解説した書籍で、デザインを見ただけで必要なタグと CSS のコードを思い描いて実装できるようになることをテーマにしています。

装飾、レイアウト、フォームから検索対策まで全 7 章の構成

章立ては Chapter1「背景・画像・写真装飾」、Chapter2「見出しやテキストの装飾」、Chapter3「レイアウト」、Chapter4「ボタンデザイン」の 4 つのデザインカテゴリーが中心で、版元はこの範囲を Web 制作でよく使われるものと位置づけています。続く Chapter5「お問い合わせフォーム」はフォームの UI を、Chapter6「現場で使える Web ツールと素材配布サイト」はデザインやコーディングを便利にするウェブサービスを、Chapter7「Google 検索結果ページへの対策」は検索結果ページに反映する構造化データの書き方を扱います。版元が挙げる特徴は、用途に合わせたデザインパターンを 70 種そろえたこと、デザインに合わせたコードの書き方に加えてコードの短縮化やブラウザーの新旧バージョンへの対応にも触れていること、本書のコードをすべて購入者特典として配布していることの 3 点です。

見た目を少ないコードで組む力が現場で効く理由

同じ見た目でも、組み方によって後から直しやすいコードにも、崩れやすいコードにもなります。見出しの飾り線や画像に重ねる文字、ボタンの立体感といった装飾は、余計な要素を HTML に足さず、疑似要素や背景の指定で CSS 側に寄せると、文書の構造を保ったまま見た目だけを差し替えられます。横並びや段組みの配置も、Flexbox や CSS Grid のようなレイアウトの仕組みを選び分けられると、画面幅が変わったときの崩れを減らせます。版元は対象読者に、無駄なコードを省いて短くしたい人や、独学で学んできて他人のコードを見てみたい人を挙げています。お問い合わせフォームは見た目以上に使いやすさが問われる部品で、入力欄とラベルの対応や誤りの伝え方は アクセシビリティ にも直結します。構造化データは、ページの内容を検索エンジンが読み取れる形で書き添えるもので、検索結果での表示に使われることがあります。ただし、どう表示するかは検索エンジン側の判断と方針によって変わります。Chapter7 は刊行時点の記述として読み、実際に使う際は検索エンジンの公式の説明と照らし合わせる前提になります。

HTML と CSS の基礎を終えた人の次の一冊として

版元が想定する読者は、HTML や CSS の基礎を学んできて次のステップを踏みたい人、独学のため他人のコードを見てみたい人、コードを短くしたい人、よく見かけるデザインの実装方法が分からない人です。タグやプロパティの意味をゼロから学ぶ入門書ではありません。また配色や余白、情報設計といったデザインの原則を体系立てて学ぶ本でもないので、そうした土台を固めたい人には Web デザインを学ぶ本の選び方 も参考になります。

案件のたびに装飾やボタンの見せ方で手が止まる人、あるいは自分のコードが長く複雑になりがちだと感じている人にとって、本書は目的のデザインから章を引いてコードを手元で動かせる一冊です。