なぜ、これがこうなるのか？Webデザイン&ワイヤーフレーム比較見本Book

加藤千歳

※この商品はタブレットなど大きいディスプレイを備えた端末で読むことに適しています。また、文字だけを拡大することや、文字列のハイライト、検索、辞書の参照、引用などの機能が使用できません。

目で見て学べる！
実在する37サイトのワイヤーフレームとデザインを比較解説

・実在のWebサイトのワイヤーフレームをたっぷり掲載！
・成果につながるサイト作りのコツがわかる
・困ったときに役立つ！ 世界観やイメージ作りの参考にも

Webサイトの「ワイヤーフレーム」と「デザイン」の実例を
たっぷり掲載した「見本帳」です。

ワイヤーフレームからデザインに落とし込む際のポイントや、
サイト全体のイメージ作り、ちょっとした遊び心まで、
なぜ、このデザインになったのかを丁寧に解説しています。

こんな人におすすめ！
・たくさんの実例を見たい人
・デザインのアイデアをインプットしたい人
・Webデザイン制作の考え方を学びたい人
・Webデザイナーとしてステップアップしたい人

• カテゴリ: ビジネス・実用
• ジャンル: IT・コンピュータ / デザイン・グラフィックス
• 出版社: ソシム
• タイトル: なぜ、これがこうなるのか？Webデザイン&ワイヤーフレーム比較見本Book
• タイトルID: 1912485
• ページ数: 272ページ
• 電子版発売日: 2025年06月27日
• コンテンツ形式: EPUB
• サイズ(目安): 54MB

[ブクログ · ★★★★★]

シリーズ第1弾がとても良かったので、続編の第2弾も購入。
今回は実在のサイトを題材にしているため、実際の動きやスマホデザインも確認しながら読み進められます。ワイヤーフレームの段階で、目的や役割、イメージの方向性まで丁寧に整理されていて理解が深まりました。
制作に行き詰まったとき、すぐ見返せるよう手元に置いておきたい一冊です。

[ブクログ · ★★★★★]

ノーコードツールやローコードツールが出てきて久しく、生成AIによるコーディングで誰もがWeb制作に着手することができるようになった時代。

限られた職種が当たり前に踏まえている行程がそぎ落とされた乱造されたWebページも、多く見受けられるようになってきました。

そんな中で、自社事業であってもクライアントワークであっても、「目的／ゴール」をきちんと言語化したうえで、各行程における「現場を理解している人が、目的／ゴールを自身のタスクに落とし込む」ことがさらに求められていくのではないかと思います。

特にワイヤーフレームは非常に重要です。

ワイヤーを基に、サイトを通して実現したいことと、見てほしい内容を構造化し、優先順位付けをおこない、センスとロジックがかみ合うポイントを視覚化することに繋がるからです。

また、ワイヤーを基にしてデザインを制作することで、Webディレクションとデザイナーの間で「意図に合った工夫」をお互いにどの程度許容／否定できるのか、その意思疎通を図るための基準を作ることも求められるため、この本に記載されているような丁寧な「意図」のくみ上げと表現が可能となるからです。

しかし、実際に世の中にワイヤー→デザインの流れが「他人の目に触れる」と言うことはそうそうないため、コーディングやシステム開発と比べてよりアーティスティック（に見える）領域かもしれません。つまり、現場感覚を磨いてノウハウを吸収することでしか、なかなか学べない領域であると言えます。

この点、本にするまでに様々なすり合わせが必要だったでしょうが、現場におけるやり取りが目の前で行われているような”比較”形式でのワイヤー見本を手に取れたことは非常に幸運でした。

参考資料や勉強になることはもちろんですが、Webディレクターやデザイナーなど、特に駆け出しの方にとっては良い仕事仲間になるのではないでしょうか。

[ブクログ · ★★★★★]

好評の『デザイナーは何を考え、どう作っていくのか？　WebデザインプロセスBook』の著者様の第2弾の企画です。
今回は、著者様率いるウェブ制作会社で実際に手がけたお仕事を、ワイヤーフレームとデザインの形で紹介。ワイヤーフレームをどういう思考で考案したのか、それをどのようにデザインに仕上げていったのかを、わかりやすく解説します。ウェブ制作に関わる人にはとても参考になる内容です。
本書の編集制作、紙面制作を担当させていただきました。