koukiitou.com

「WebデザインプロセスBook」を読んだ

「WebデザインプロセスBook」を2025年07月04日に読んだ。

目次

メモ

ウェブデザイン制作のおもな流れ p10

1　初期調査と打ち合わせ
・ヒアリング
・リサーチ

2　プロジェクトの基盤づくり
・要件定義
・コンセプト策定
・企画立案
・サイト構成作成

3　情報整理と設計図の作成
・情報整理
・ワイヤーフレーム作成

4　ビジュアルデザインの実地
・デザイン制作

ヒアリングシート p11

クライアントとの打ち合わせで、ウェブサイトの目的、ターゲットユーザー、予算、納期、希望するデザインや機能などを詳しく聞きます。
この情報を元にリサーチを行ったり、サイト構成を考えたりします。

ワイヤーフレーム p11

サイトの骨格を視覚的に示すワイヤーフレームを作成します。
各ページのコンテンツ、メニューやCTAボタンなどの要素を配置します。

デザインカンプ（1stテイク） p12

ワイヤーフレームを元に、画像やレイアウトを施したデザイン初案です。
粗削りな部分もあるため、ここからチェックバック&調整を行い、デザインを確定していきます。

デザインカンプ（ファイナル） p12

初案からチェックバックを重ね、色やしイアウト、画像を調整したデザイン最終案です。
初案と比べると違いが一目瞭然です。

調整の軌跡 p13

カンプ初案→最終に仕上げるまでに、どのようなプロセスを経たかを紹介。
実際の現場では、このようなトライ&エラーを何度も何度も行うことが常です。

ワイヤーフレームは何のためにつくるの？ p58

すべてのデザインの良し悪しは情報設計からはじまります。
ワイヤーフレームは、ウェブサイトの骨格を構築する重要なプロセスとして、デザイン制作に着手する前に掲載する情報を整理整頓し、クライアントやデザイナーと認識を共有するための「情報設計」を目的として作られます。

ページのレイアウトや要素の配置・強弱などを視覚化することで、サイトの基本構造が理解しやすくなるため、メニュー、ボタン、画像、テキストなど、要素の最適な配置場所やユーザーの動き・導線などをより深く検討することができます。

一方、デザインカンプは「視覚設計」となるため、ワイヤーフレームで定義した構造や機能性をユーザーにどのように見せるか、魅力的で直感的に理解しやすくするために再定義を行う工程となります。

ワイヤーフレーム制作時には、デザインのスタイリングでこの再定義が行われることを頭に入れ情報設計をすることで、スムーズにより良いデザイン制作へと引き継ぐことができます。

ワイヤーフレームに引っ張られすぎないように p100

先述したように、デザイン制作はワイヤーフレームで行った情報設計をもとに「視覚設計」を行う工程です。
ワイヤーフレームは、ウェブサイトの構造やレイアウト、コンテンツの配置など、情報設計の基本的な骨組みを示すものです。
そのため、ワイヤーフレームをベースにそのまま装飾をするのではなく、デザインのフェーズでは、サイトのイメージやユーザーの操作性を向上させるために、色彩・タイポグラフィ画像などの視覚的要素をもとに再定義が行われます。

視覚設計への再定義を行わず、ワイヤーフレームと同じレイアウトを希望している場合もあるので、受発注時には、意向を共有・確認するようにしましょう。

ユーザーの購買意欲を後押しする「ザッツ・ノット・オール・テクニック」 p148

おまけや特典を加えることで、ユーザーの購買意欲を後押しすることを「ザッツ・ノット・オール・テクニック」といいます。
これは「That's Not All(それだけではない)」から名付けられた心理効果です。

この章の作例では、基準となる冬期講習の金額を提示したあとで、「それだけではないよ」と早期お申込み特典を紹介しています。

入塾を検討しているユーザーは、「せっかくなら、この機会にお得に入塾したい」という希少性(タイミング)を感じるため、購買行動を後押しする効果があります。

写真を大きく配置するテクニック p148

ウェブデザインでは写真を大きく扱うことで、より広がりを演出することができます。
写真は感情的な反応を引き起こすパワーがあり、大きく扱うことでその効果が増すのです。

細かなあしらいを減らし、シンプルで洗練されたデザインに近づけたり、いくつかのデザインの要素をつなげる役割やメリハリをつけることができます。
画面からはみ出すくらい大きくしたり、写真の端をぼかしてみたり、何かの形にトリミングしてみたり、いろいろなアレンジができるので、思いきって一度、自分が思っているよりも写真を大きく配置することを試してみましょう。
意外な発見があるかもしれません。

サイト内のテイストをそろえる p178

サイト内にテイストが異なる要素が混在していると、デザインが雑然として見え、違和感を覚えます。
違和感があると、混乱し、重要な情報を見逃したり、誤解するリスクが高まってしまいます。

一方、テイストが統一されていると、デザインのイメージや方向性が明確になります。
視覚的にも、ユーザーが心地よさを感じ、情報をスムーズに理解・処理しやすくなる傾向があります。

●イラスト
イラストは、できれば同じタッチ(同じ人が描いた絵)で統一したいですが、難しい場合にはできるだけ同じテイストの素材をそろえるように気をつけましょう。

●写真
複数の写真をグルーピングして並べる際には、テイストを統一することで視覚的な一体感が生まれ、直感的にひとつのグループとして認識されやすくなります。
写真の内容だけでなく、色味や形をそろえる方法も効果的です。
たとえば、同じ色調を持つ写真を選ぶ、似た形状やテーマを持つ画像にするなどの方法があります。
写真に同じような装飾やデザインのあしらいを加えることでも、写真の統一感を強化することができます。

視覚的な調和を意識し、一体感のあるデザインを心がけることはデザイン全体のクオリティをアップすることにもつながります。

バナーは実際に設置する背景の上で制作する p196

バナーを制作するうえで重要なポイントのひとつに「そのバナーが実際に設置される背景でどのように見えるか」があります。

同じデザインでも、置かれる場所や背景によって見え方や印象が大きく異なるため、制作段階からその点を考慮することが必要です。
特に、バナーの色づかいや構図は、背景の色やデザイン・レイアウトなどに左右されるため、実際の設置環境をシミュレーションしたうえで制作を行うようにしましょう。

事前にバナーを配置する予定の背景画面をスクリーンショットなどで用意し、その上で制作を進める方法がおすすめです。
バナーが実際のページ上でどのように見えるかを確認しながらデザイン制作を進めることができます。

また、スクショ画像を用いることで、バナーが背景に対してどの程度目立つか、文字が読みやすいか、周辺の要素とバランスが取れているかといった視覚的な確認や調整がしやすくなります。

デザイン段階でこうした要素をシミュレーションをしておくと、クライアントへの説明や合意をスムーズに進めることができます。

ウェブデザイン確認の流れ p198

デザインをチェックする際にはまず、全体のテイストや世界観方向性がズレていないか、与えたい印象と受け取る印象が一致しているかという点から確認します。

もし、デザインの方向性が違うまま進んでしまうと、後ですべて調整しなおさなければならなくなってしまいます。
できれば、まずはファーストビューから少し下くらいまでを作ってみて、一度、方向性の確認をするようにしましょう。
ズレがあれば早めの方向転換ができますし、問題なければ、安心して残りのデザインを進めることができます。

ただし、この時点では社内(デザインチーム内)での確認にとどめておきましょう。
デザイナー以外の人(クライアントなど)にファーストビューでの判断を求めるのは避けるほうが賢明。
中途半端な状態で見せてしまうと、不安感や不信感が生まれる原因となってしまいます。

デザインスキルに合わせたフィードバック p199

デザインのフィードバックをする際は、相手のスキルによってチェックすべきポイントがすこし異なってきます。

相手が初級者の場合は、基本的なこと(配置をそろえる、適度な余白、情報整理、メリハリなど)を確認します。
まずは、そこができていないことが多いです。
あしらいが過剰ではないか、あるいは少なすぎないかという点も指摘が多いポイントになります。

中級者の場合は、基本的なことは問題なくこなせていますが、尖ったデザインになりやすい傾向があります。
もちろん、そのようなデザインがダメなわけではないですが、奇をてらいすぎるのはNG。
レイアウトや配色などを少し定番に寄せるように調整すると、見違えるほどよいデザインになることがあります。
そのあたりを念頭にチェックしましょう。

上級者の場合は、世界観やデザインテイストが問題なければ、細かなチェックバックが発生することはほとんどありません。
デザインに着手する前に、ヒアリングやリサーチでデザインの方向性をしっかりすり合わせておくことが大切になります。

チェックする時間や環境を変える p201

デザイン添削をしていると、判断に迷うこともよくあります。
そんなときは、作業環境や時間を変えて、再度チェックしてみることをおすすめします。

筆者も実際に、会社でチェックしたときは気が付かないのに、自宅でリモートワークしていると気付くことがよくあります。
また「デザインを一晩寝かす」のもひとつの手。
時間を置いてから改めて見ると、初見時とは違った角度からデザインを見ることができます。

上空から見下ろす「鳥の目」の視点、つまり俯瞰の視点を、環境や時間帯を変えると意図的に作ることができます。
判断に迷ったときはぜひ試してみてください。

メニューやリンクのわかりやすさ p202

使いやすいウェブサイトの条件として、メニューやリンクの遷移先にどんな情報があるのかわかりやすくなっていることは重要です。

ユーザーが「自分は何を探しているのか」「どこをクリックすればそれを見つけられるか」それらが簡単に理解できると目的の情報に効率的にたどり着くことができます。
明確に見てもらいたい意図があるボタンは、「もっと見る」などの不明確な言葉ではなく、具体的にリンク先の内容がわかる言葉にしましょう。
ゴールへとつながる重要度の高いコンバージョンボタンでは、名詞よりも動詞を使うことで、ユーザーに能動的に動いてもらえるよう促すことができます。
もっと見る→お客様の声
詳しく見る→資料請求する

リンク先の内容がわかる言葉にすると、目的が明確になり、ユーザーは直感的に理解することができる

メニューは日本語表記か p210

ウェブサイトのメニューを英語にすると見た目もかっこいいですが、日本語を母国語とするユーザーは、日本語で表示されるほうが理解しやすく、サイトのナビゲーション操作がスムーズです。
英語のみのメニューは読んで内容を理解する必要があるため、パッと見て内容がわかりにくい傾向があります。
検索エンジン最適化(SEO)への対策などもあるため、ターゲットや方針に合わせて言語の表記を検討しましょう。

見出しは興味をもってもらえるような内容か p211

見出しには、単語を置くことが多いですが、興味を引くような文章にするのもおすすめです。
文章ばかりにしてしまうとわかりづらくなることもあるため、前後の情報の流れも考慮しながらバランスを考えてみましょう。
見出しを文章にした例
・「弊社の特徴」→「○○が大切にしていること」
・「事業内容」→「わたしたちの仕事」
　※〇〇=会社名など

視線誘導 p217

「視線誘導」とは、意図した順番でデザインを見てもらうようにする手法のことです。
人の視線が動く原理を理解したうえで、それに合わせコンテンツを配置することで、視線誘導の効果が得られます。

視線誘導にはいくつかの方法があり、主なものは下記のとおりです。
ユーザーの視線を自然に誘導し、読んでもらえるようになっているか確認してみましょう。
Fの法則
視線が「左上→右上→左下→右下→さらに下」の順に動くパターン

Zの法則
視線が「左上→右上→左下→右下」の順に動くパターン

Nの法則
視線が右上→右下→左上→左下の順に動くパターン。
ウェブデザインでは少ないが、雑誌などでよく見られる

数字で誘導
視線が数字の順番どおりに動くパターン
視線誘導効果は、人の注意を特定のポイントへと自然に誘導する心理効果です。
たとえば、ある人が特定の方向を見ていると、周りの人々も無意識のうちにその視線に従って同じ方向を見ます。
同じようにデザインの中でも写真やイラストの人物、動物などの視線の先にユーザーに見てもらいたい、読んでもらいたいコンテンツを配置することで、見る人の視線を自然と誘導することができます。

空いてしまったスペースはどうする？ p218

配置するものがなく、なんとなくスペースが空いたままになってしまうことがあります。
意図的な余白であれば問題ありませんが、「空いてしまった」スペースはユーザーに違和感を与えます。

もし意図しないスペースができてしまったときは、あしらいや配置などで工夫しましょう。
関連するモチーフをグッと大きくして、色を薄くし、はみだすように配置する方法もその中のひとつ(P.57参照)。
案外うまくいくこともよくあります。

画像の切れ目に文字を配置していないか p219

画像や配色の切れ目にテキストを配置するデザインはおしゃれな一方視覚的な混乱と注意の分散が起こるため注意が必要です。
線の細いフォントや、背景色に近い色を使うと、背景と文字のコントラストが不十分になり、すっと目に入ってこない場合があります。

背景が不均一で読みにくい文字は、目に入った情報を脳が処理する際に余計に労力が必要になります。
特にメニュー部分などは配色の切れ目に文字を配置しないようにします。

画像や配色の切れ目にテキストを配置する場合には、文字を太く大きくし、見やすくする工夫をしましょう。
写真の中と外で文字の見え方が異なるので、目に入った情報を無意識下で処理をする際に余計に労力が必要に

写真の構図について p220

写真を使う際は、トリミングに注意しましょう。
見た人にどこか違和感や不安感を与える「NG構図」というものがあるからです。
首切り構図
画像や配色の切れ目に人物の首や関節部分が重なる構図です。
このような構図は、無意識のうちに首や関節が切られているような印象を与えてしまいます。
生首構図・串刺し構図
人物の首のところでトリミングすると、生首のように切れている印象になります。
人物の頭の上に縦線が入る「串刺し構図」もNGです。
人物紹介などを作成する際は注意しましょう。
目刺し構図
人物の目に何かが刺さるような背景の場合は配置を調整します。

配置がガタガタしているところはないか p221

デザイン的にいい感じに見せるため、意図的にずらして配置する場合がありますが、実は普通にそろえたほうが見やすくしっくりくることもあります。
本当にそのずらしが必要か一度見直してみましょう。
そろえた配置のデザインも作って比較してみるのもよいかもしれません。

角度がバラバラになっていないか p221

ひとつの画像のなかで傾いている角度がバラバラだと、視線が忙しくなり落ち着かない印象になります。
特に意図がない場合は角度を統一するよう調整しましょう。

人物の顔の位置や大きさがそろっているか p221

人物の写真を並べて配置するときには、人物の顔や体の大きさ、配置をそろえるとデザインのバランスがよくなります(P.159参照)。
実際の体の大きさなどを考慮して、女性を男性より小さくするなどの調整も行いましょう。

レイアウトの3つのコツ p222

前項ではデザインのレイアウトの基本的なことを紹介しました。
ここでは、それらを実際のデザインでうまく活用する方法を紹介します。

デザインを単調なものにせず、印象的に仕上げるためには「そろえる」「ずらす」「はみだす」の3つのコツがあります。
これらをうまく複合させていきましょう。

基本は「そろえる」 p222

デザインの基本ともいえる「整列」。
まずはテキストや画像など、構成する要素の配置をそろえましょう。
下例では、基本的はセンターぞろえでデザインを組んでいます。

角度や配置、大きさ、色を「ずらす(はずす)」 p223

デザインの要素の角度や配置、大きさ、形状などに変化を付けることで単調なデザインに動きやリズムを与えます。
例えば文字のサイズやフォント、画像の配置や角度、大きさなどを変える(ずらす)ことで視線を引き付ける効果が生まれます(筆者はずらす効果としてよく手書き文字を使います)。

これは「サリエンス効果(顕著性効果)」と呼ばれる心理効果に対応した手法です。
人間の脳は常に五感から刺激を受けているため、すべてに反応をしていると処理能力が追いつかないことから、9割以上を無意識に処理していると言われています。
形状、位置などをずらし、わざと注意を引く刺激をつくることで、視線を引き付ける効果を生み出します(やりすぎには注意)。

逆にずらす要素が少ないと、高級上質な印象になり、訴求力が控えめになります。
そのため、“売り感”を抑えたいブランドイメージなどでは、あまりずらさないデザインがおすすめです。

枠から「はみだす」 p224

デザインの一部、たとえばイラストや写真、背景画像などを、規定の枠からはみださせると、視界に広がりを与える効果があります。
これは「アモーダル補完」と呼ばれる脳の補完機能(脳が見えない部分を補完して全体像を認識する)によるものです。
あえてはみだすデザインにすることでイメージに広がりを持たせることができます。

3つのコツを共存させる p224

「そろえる」「ずらす」「はみだす」の3つをうまく組み合わせてデザインに取り入れると、魅力的で印象に残るデザインに近づけることができます。
2つだけでは物足りないため、3つの要素をすべて取り入れることがポイントです。

この3つをうまく共存させるにはバランスが重要です。
頭の中だけで完結せずに、積極的に手を動かしてさまざまなアイデアを試してみましょう。

助詞や単位は小さく、数字は大きく p234

助詞(「は」「を」「が」「も」「に」など)や、単位を小さくすることで、伝えたいメッセージが強調されることもあります。
また、数字を大きくすることでも、同様にデザインにメリハリを出すことができます。

小さなひと手間ですが、効果は意外と大きいです。

余白は、思うよりも広めにしてOK p237

余白は自分が思っているよりも広くとって大丈夫です。
自分の想像する1.5倍くらいでちょうどいいかもしれません。

要素やセクションの上下などは、必ず同じ間隔で余白をあけるようにします(場合によって下のほうは広めでもOK)。
余白の間隔はルールで整えられていると見やすいデザインになります。

セクション間のつながりを意識しているか p242

ウェブサイトを上から下へと見ていくときに、スパッと切れたバラバラのデザインにならないよう、セクション間のつながりを意識しましょう。
何かのあしらいでつないだり、背景をぼかしてそれとなくつなげたりして、つながりやストーリーがわかるようなデザインを心がけます。

リンクはわかりやすいか p243

リンクがあることがわかりにくいデザイン、逆にリンクがないのにあるようなデザイン(影が付いている、下線がある、リンクがある個所と同じデザイン)になっていませんか。

ユーザーが直感的に理解し、期待通りに操作できるよう「アフォーダンス理論」の概念を利用しましょう。
アフォーダンス理論とは、人がオブジェクトを見たときに、そのオブジェクトがどのような行動や使用法を可能にしているかを直感的に理解できるという考え方です。

たとえばリンクのボタンでは「押す」というアフォーダンスを提供しています。
ユーザーが見ただけで、ボタンだと認識ができ、押せることがわかるような設計(影をつけたり、押せる感を出したり、矢印のアイコンをつけたり)にすることが大切です。

影のあしらいは同じになっているか p244

サイト内、特に同じページ内の影のあしらいは、できるだけ同じ濃さ・方向・広さにしましょう。
影がバラバラだと、デザインもバラバラとした印象になります。
同じ光量が、同じ角度から降り注いでできる影になるように統一しましょう。
また、影が濃すぎると暗い印象になるため、注意が必要です。

どこか違和感がないか p246

人が矛盾を感じて不快感を覚えることを「認知的不協和」といいます。
事実と違うことや、妙なちぐはぐ感がないか、ウェブサイト全体を見て確認しましょう。

人間が進化の過程で形成した本能的な反応を「原始的反応」といいます。
たとえば、鋭い角は危険を示し、それを回避する本能を刺激します。
方、曲線や円は柔らかさと安全を示し、リラックスした感情を引き起こします。
そのため親しみやすさや優しい雰囲気を伝えるサイトデザインに鋭い角を使っていたりすると、人は無意識のうちに不快感を抱きます。
正反対の印象を持つ形状を一緒にデザインに盛り込むときには、このような心理的背景があることも考慮しましょう。

あしらいもそろえる p247

「そろえる」というと、配色や配置をそろえることを思い浮かべますが、あしらいもそろえることを意識しましょう。

人は何かを見たときに、無意識のうちに「まとまり」として認識する傾向があり、「群化の法則」と呼ばれます。
これは脳が処理を減らすために、見たものをグループ化して知覚しようとするためです。

あしらいにも群化の法則を上手に活用しましょう。
たとえば、見出しのあしらいはルールに沿っていてブレていないか、モチーフはいろいろなものを多用するのではなく一貫性を保てているか、他にも線の太さをそろえたり、モチーフのかたちをそろえるなど、小さなあしらいのひとつひとつにも気を配ることが、デザイン全体の統一感につながります(P.130参照)。