現場で使える 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 検索結果ページへの対策

Web デザインの仕事では「方向性は決まったのに、具体的な見せ方が思い浮かばない」という場面が頻繁に訪れます。本書はそのとき開く引き出し集として設計されており、ヘッダー、カード、ナビゲーション、フッターといったパーツ単位で多数のデザインパターンを収録しています。著者の小林マサユキ氏は実務で培ったレイアウトの型を、再現可能なコード (HTML/CSS) つきで提示しています。

体系的にデザイン理論を学ぶ本ではなく、「こういう表現もある」という選択肢を増やすためのカタログに近い性格の書籍です。一つひとつのレシピは短く完結しているため、案件の要件に合いそうなパターンを拾い読みし、自分のプロジェクトに組み込む使い方が想定されています。 CSS の基礎文法を理解している前提で書かれているため、 HTML と CSS を書いたことがない段階の人には向きません。

デザインの引き出しが足りないと感じている Web デザイナーや、コーディングはできるがビジュアル面のバリエーションに悩むフロントエンドエンジニアにとって、手を動かしながらレパートリーを広げるための実用書です。