この本を選んだ理由

この本を選んだのには、大きく2つの理由があります。

まず1つ目。

冒頭でも触れましたが、Webデザイナーとして働くようになって以来、

ずっと「デザイナーさんの頭の中を覗いてみたい」と思っていたからです。

そんな中で目にしたこの本の副題「デザイナーは何を考え、どう作っていくのか？」という言葉に強く惹かれました。

まさに知りたかったことが詰まっていると感じ、迷わず手に取りました。

2つ目。

WFの制作担当することが増えたからです。

これまでは、1人で案件を担当し、WFも手書きでサッと作ってそのまま自分でデザイン・コーディングまで完結させていました。

しかし、案件が増えるにつれて分業体制で進めることが多くなり、他の人に渡すためのWFを作成する機会が増えてきました。

そこでふと、「他の会社ではどんなWFが作られているのだろう？」「デザイナーが受け取りやすいWFって、どんなものだろう？」という疑問が湧いてきたのです。

今まで他の人が作ったWFを見る機会がなかったからこそ、この本を通して、実践的な学びを得られるのではと思いました。

本の概要

ワイヤーフレームからデザインカンプまで！

チェックバックを通して、デザインがどのように進化し、最終決定に至るのかそのプロセスを体系的に紹介します。

Webサイトが形になるまでにデザイナーはさまざまな試行錯誤を行います。

時に専門的な言葉で、時に感覚的な言葉を用いながら見た目はもちろん、ユーザビリティも考慮しながら完成形を目指していきます。

本書では、Webサイト制作の流れとともに納得のいくテイクに辿り着くまでのプロセスを紹介。

クライアントへのヒアリングからワイヤーフレーム設計、デザインカンプに落とし込んでからの調整までデザイナーが何を考え、どのような意図をもって完成形に仕上げているのかを紹介しています。

また、よりよいWebサイトに仕上げるために確認しておきたいチェックポイントも紹介しています。

CONTENTS

Chapter 1　事例集：コーポレートサイト

Chapter 2　事例集：ECサイト

Chapter 3　事例集：シングルページ

Chapter 4　事例集：採用サイト

Chapter 5　バナー

Chapter 6　Webデザイン制作時に気をつけたいこと

https://www.socym.co.jp/book/1488

この本のおすすめポイント

想像していた以上にWFが具体的で、そこに込められた意図の深さに驚かされました。

「ここまで作り込んでいいんだ」と、自分の中の基準が変わった気がします。

WFからイメージを広げて、初稿の時点ですでに提案力のあるデザインになっているのも印象的でした。

また、初稿から最終稿までの変化のプロセスを比較しながら見ることができ、細かな工夫がどのように印象を変えるのかが視覚的に理解できる点も魅力です。

ただ完成形を見るのではなく、“デザインの思考の流れ”までたどれるのがとても面白かったです。

こんな方に向いてます！

WFを作りたいけど、どう作ればいいのかわからない方

「どのくらい具体的に作り込むべき？」と迷っている方にぴったりです。実際のWF事例とその後のデザインの変化を見ることで、ちょうどよい“温度感”がつかめます。

デザインのブラッシュアップで手が止まりがちな方

「初稿は作ったけど、そこからどう良くしていけばいいかわからない…」という方にも◎。 本書では、初稿→最終稿までのプロセスが丁寧に紹介されており、改善のヒントがたくさん詰まっています。

この本を読んだ感想

もともとはデザインがどのように良くなっていくのかを見るつもりで本を買ったのですが、

WFを作る機会が多くなっていたためか、

デザイナーに繋げることを目的とした時に、どの程度WFを作り込めばいいかという視点で本を読ませていただきました。

この視点で本書を読み進めると、Webデザインのプロセスを知るという本書の目的からは少し逸れてしまったかもしれません。

しかし、デザイナーだけでなく、WFを作成するディレクターにも非常に有益で、きっと楽しんでいただける内容だと感じました。

Webデザイナーの頭の中を覗けた！（喜）

Webデザイナーの頭の中を覗き見することができて、最初から最後までずっと楽しかったです。

チェックバックに対してどう変化させるのかを見ていると、自分では思いつかないようなデザインがたくさんあって、引き出しを増やすことの重要性を改めて感じました。

今すぐ実践できる5つの工夫

「デザイナーが受け取りやすいWF」とは何か？

これまで自分のために手書きでWFを作っていたので、「他の人に伝えるために作る」と言うのはすごく難しいです。

『100%伝わるWF』を作ることは難しく、ある意味不可能かもしれません。

でもこの本を読んで『今すぐ実践できる工夫』がいくつもあることに気づきました。

1つ目、どんな写真を使うかを明確に伝える

写真を入れたい位置に四角を置くだけでなく、「〇〇している写真」など具体的に書き添えると、イメージが伝わりやすくなります。

2つ目、要素の大きさや色の濃淡で優先度・重要度を伝える

文字サイズや図形の大きさで優先度が自然に伝わります。

また、薄いグレーより濃いグレーを使うことで、「より重要なものだ」と視覚的に伝えられるのも印象的でした。

3つ目、本番用のテキストを入れておくことでサイトの雰囲気を伝える

あたりのテキストではなく、本番用の文章を入れるだけで、サイトの雰囲気や温度感がぐっとリアルに伝わります。

4つ目、デザインで必要な要素を伝える

「これがあったほうがいい？」「これはなくてもいいかも？」とデザイナーさんが迷ってしまうと、それだけで時間を取ってしまいます。

WFの段階で要素をしっかり整理しておくことで、デザインに集中してもらえる環境を整えることができます。

WFはグレートーンが基本ですが、必要に応じて色を使うことも効果的だと学びました。

5つ目、動線を伝える

WFを見たときに「このリンク、どこに飛ぶんだろう？」と思うことってありますよね。

それは、ユーザーも同じ疑問を抱くということ。

見落としがちなポイントですが、動線を明確に示すことは、ストレスのない体験づくりにつながります。

特に印象に残った内容

この本を読むまでは、「WFでは要素の配置が分かればいい」と考えていました。

最終的にお客様に見て判断してもらうのはデザイン案だからです。

しかし、今は「WFがサイトの完成度を左右する」とまで思っています。

加藤さんのWFを見ていると、ただ整然と並べられているのではなく、細やかな意図が込められていて、それをデザイナーさんがきちんと読み取っていることが伝わってきました。

これまで、WFはデザインの土台として位置づけていたのですが、実際には、WFがしっかりと作られていることで、デザイン案がスムーズに具現化され、全体のクオリティが高まることに気づきました。

以前、加藤さんのセミナーで「ヒアリング内容をすべて共有しているわけではない」とおっしゃっていたのを思い出しました。

“読み取れるWF”を作ることの大切さ、そして“読み取る力を持ったデザイナー”を感じました。

WFは単なる配置図ではなく、クライアントの意図や、最終的なデザインへと繋がる重要な指針であることを改めて感じました。

今後にどう活かすか

WFの段階で深く考えきれていなかったことで、デザインフェーズで「どうしよう…」と手が止まることがありました。

この本を読んで、「WFの時点でどれだけリアルに考えられるか」が完成度を大きく左右するのだと再確認しました。

設計図がいい加減だと、長く住める住宅が建たないのと同じで、

WF制作は『お客様の気持ちや意図をカタチに起こす』工程であり、

デザイン制作は『その意図を、より伝わりやすく、魅力的に磨き上げる』段階だと実感しました。

だからこそ今後は、

「このWFを見た人が、迷わずデザインに取りかかれるか??」

「この情報だけで、お客様に伝えたいことが伝わるか??」

という視点を持って、ひとつひとつの要素に理由を持たせたWFづくりを意識していきたいです。

また、誰かに渡すWFであっても、自分でデザインまで担当するWFであっても、

最初から“伝える”意識を持つことで、最終的なアウトプットの質が変わるということを忘れずにいたいと思います。

WebデザインプロセスBook デザイナーは何を考え、どう作っていくのか?／加藤千歳【1000円以上送料無料】 価格：2,200円（税込、送料無料) (2025/4/11時点) 楽天で購入