この本を一言で言うと
実在する37サイトのワイヤーフレームとデザインを比較解説する、Webデザイン制作の思考を学べる見本帳。
この本の概要
本書は実在するWebサイトのワイヤーフレームと完成デザインを並べて比較しながら、デザイン制作の考え方を学べる見本帳。37サイトを「きちんと感」「カジュアル・ポップ」「上品・上質」「シンプル」「高級感・華やか」「にぎやか・可愛い」「和風・和風モダン」「安心感」という8つのスタイルに分類して収録している。ワイヤーフレームからデザインに落とし込む際のポイントや、世界観の作り方・遊び心まで、なぜそのデザインになったのかを丁寧に解説。アイデアのインプットや制作の参考として役立つ一冊。
「こういう本が欲しかった」という1冊。ワイヤーとデザインを並べて見せてくれる
Webデザインの参考書って、完成したデザインのギャラリーか、コーディングの教科書かのどちらかが多くて、「なぜそのデザインになったのか」という思考プロセスを見せてくれる本があまりなかった。
この本はワイヤーフレームと完成デザインを並べて、その違いと意図を解説してくれる。「このワイヤーのシンプルな構造が、こういうデザインに変換された理由はこれ」という説明があると、デザインの決断の根拠が見えてくる。
8つのスタイルに分類されているのも使いやすい。クライアントとの打ち合わせで「きちんと感」「和風モダン」みたいなキーワードが出たとき、すぐにこの本を開いてページを見せながら「こういう感じですか？」と確認できる。言葉だけで方向性を確認しようとすると齟齬が生まれやすいので、ビジュアルで共有できるのはすごく助かる。
2025年の本だから事例も新しくて、今のWebデザインのトレンドと合っている。たまに古い本の事例は「これは10年前のデザインでは…」と感じることがあるので、新鮮な実例が収録されているのは大事なポイントです。
— フリーランスWebデザイナー（30歳女性）
この本で学べること
✓
実際に制作されたWebサイトのワイヤーフレームと完成デザインを並べて見ることで、設計の意図とデザインへの落とし込み方が理解できる。
✓
きちんと感・カジュアル・上品・シンプル・高級感・可愛い・和風・安心感という多様なスタイルをカバーしており、幅広い案件の参考になる。
✓
デザインの見た目だけでなく、そのデザインが選ばれた理由・効果・意図まで丁寧に説明している。
✓
サイト全体のイメージ・ブランディングをどう視覚化するかという観点からも解説しており、デザインの方向性を定める助けになる。
✓
制作の参考としてだけでなく、クライアントとの打ち合わせでイメージを共有する際の見本帳としても活用できる。
本の目次
- 11 きちんと感 Formal
- 22 カジュアル・ポップ Casual
- 33 上品・上質 Elegant
- 44 シンプル Simple
- 55 高級感・華やか Luxury
- 66 にぎやか・可愛い Cheerful
- 77 和風・和風モダン Japonesque
- 88 安心感 Peaceful
良い点・気になる点
良い点
- ○ワイヤーフレームとデザインの比較という独自の切り口
- ○8スタイルの多様な実例で幅広い案件に対応できる
- ○デザインの意図まで解説する教育的な内容
- ○2025年刊行の新しい実例を収録
気になる点
- △実装技術（HTML/CSS）は扱っていない
- △37サイトという収録数はボリュームとして物足りないと感じる場合もある
著者について
こんな人におすすめ
✓
✓
✓
よくある質問
Q. 実際のWebサイト制作の実装方法も学べますか？▼
A. 本書はデザインの考え方と実例紹介に特化しており、HTML/CSSなどの実装技術は扱っていません。デザインの発想と方向性の参考書としてお使いください。
Q. 初心者でも使えますか？▼
A. Webデザインの基礎知識があれば活用しやすいですが、実例を見て参考にするだけなら初心者でも楽しめる内容です。
Q. ワイヤーフレームツールの使い方も解説していますか？▼
A. ツールの使い方は扱っていません。ワイヤーフレームとデザインの比較・解説に特化した内容です。
UIデザインガイドライン集
実務で使えるUIデザインのガイドラインを無料でダウンロード
※ 登録いただいたメールアドレスは資料送付にのみ使用します