実在するWebサイトのワイヤーフレームからデザインに落とし込む際の意図やテクニックを詳しく解説したデザイン書 -Webデザイン&ワイヤーフレーム比較見本Book

Post on:2025年7月4日

sponsorsr

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

他の人はどういう工程でWebデザインを仕上げているのか、気になりませんか？
通常は表に出ることのない実在するWebサイトのワイヤーフレームの設計、デザインカンプへの落とし込み、チェックバックを重ねて最終の完成形までブラッシュアップするまでの、デザイナーの意図や考え、デザインのテクニックなどを詳しく解説したデザイン書を紹介します。

掲載されている37のWebサイトはすべて実在するWebサイトです。

表紙に既視感を覚えた人は、大正解！去年末に当ブログで紹介した『WebデザインプロセスBook』（紹介記事）の続編というか第2弾で、前書はベストセラー３冠で評判でしたが、本書は前書よりもさらにパワーアップしています。

前書との大きな違いは、前書は1-4年目のデザイナーさんによるダミーサイトでしたが、本書は15-20年目のデザイナーさんによるすべて実在するWebサイト。デザインのクオリティが大幅にアップしています。ワイヤーフレームからデザインカンプ、そして本物の完成形も見ることができます。詳しくは著者のポストをご覧ください。

なぜ、これがこうなるのか？
Webデザイン&ワイヤーフレーム比較見本Book
ISBN 978-4-8026-1512-9
[Amazonでみる]
[楽天でみる]

著者: 加藤千歳
出版社: ソシム
発売日: 2025/6/27

Kindle版も同時発売されます！

Webデザイン&ワイヤーフレーム比較見本Book Kindle版

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

本書は8章構成で、掲載されているWebサイトはコンセプトや見た目の印象別にカテゴライズされています。第1章は「Formal」落ち着いたデザインのWebサイトが5つ収録されています。01は山梨共立グループ採用サイト、パステルカラーを使った居心地のよさそうな採用サイトです。

本書の大きな特徴は、デザインする際に作成するワイヤーフレームとそれを元に作成されたデザインを比較しながら学べることです。ワイヤーフレームには情報設計のポイントや機能面での注意事項なども明記されています。

情報設計のステージからどのようにして視覚設計へと変化したのか、具体的な事例を数多く見ることで多くの学びがあります。通常、ワイヤーフレームなどの情報設計が表にでることはないので、かなり貴重です。

上記のワイヤーフレームから姿を変えたのが、こちらのデザインです。実在するサイトですので、山梨共立グループ採用サイトにアクセスすると、実際の完成形を目にすることもできます。

デザインする際にワイヤーフレームの要望をどのように対応したのか、またワイヤーフレームからどのような効果を狙って変更したのかなど、デザイナーの意図や考えも解説されています。

1つのWebサイトに対して、8-12ページ分くらいのボリュームです。サイト全体で使用するカラースキーム、フォント、見出しやボタンなどのあしらいについても解説されています。

第1章の「Formal」には落ち着いたデザインのWebサイトが合計5つ収録されています。

第2章「Casual」はポジティブで親しみやすいデザイン、第3章「Elegant」は上品で落ち着いた高級感のあるデザイン、第4章「Simple」はシンプルですっきりしたデザイン、第5章「Luxury」は洗練された高級感のあるデザイン、第6章「Cheerful」はおしゃれでかわいいデザイン、第7章「Japanesque」は和テイストの雰囲気のあるデザイン、第8章「Peaceful」はやさしく安心感のあるデザイン、が揃っています。

その中から特に気になったWebサイトをピックアップしてみました。