ホーム自己紹介ブログ
NO.133
DATE2024. 12. 15

サクッと学べるデザイン心理法則108を読みました

サクッと学べるデザイン心理法則108を読みました。 108つの心理法則を、Webサイトや広告のデザインに活用される例が紹介されています。

どれも納得できる心理法則が多いので、『こういう考えでデザインされているんだな』と読んでいてためになりました。

私はWeb屋なので、Webに関連しようなもので面白かったものをピックアップして、感想を述べます。

ヤコブの法則

法則内容

経験則からくる行動のイメージ。 慣れ親しんだルールで作られていれば初めてでも使える。

感想

"左上のブランドロゴをタップしたら、トップページに遷移する" など、これまでの経験則から想像できる体験は、その通りになるように作りたいものです。ナビゲーションやレイアウトなど、汎用的なパターンはそのまま踏襲するのがベターなのかなと思ったり。

ヒックの法則

法則内容 (2)

選択肢を多くすると人をひきつけることが可能なる反面、選択の決断をしにくくなり売り上げや満足度が落ちる心理効果。

感想 (2)

ECサイトとかだと、選択肢が多いところから欲しいものを選びたいという気持ちになります。 ただ、選択の決断は確かに鈍くなってそうです。 選りすぐりの3つとかまで選択肢が狭まってくれると、決断しやすそうです。

Zの法則

法則内容 (3)

Zの形状の視線パターン

感想 (3)

視線はZのように流れます。 そのため、左上が一番きっかけとなるところで、最後に右下に次につながるものがあるとよいのかな。 左上は、強烈なメッセージとか画像とかで目を引いて、右下に購入ボタンとかを配置すると流れが良さそうです。

デフォルト効果

法則内容 (4)

標準で指定されたものを変更せずにそのままにしたくなる心理効果。 選択肢がある場合、デフォルト状態のものが選ばれやすくなる。

感想 (4)

メール通知をデフォルトONにするサービスは、本当に嫌だ。 ただ、そうではなくサービス設定などは、たしかに大体はデフォルトにしたままだなぁと思った。

目標勾配

法則内容 (5)

ゴールや完成目前になるとモチベーションが上がる心理効果。

感想 (5)

ゲーミフィケーション的に、何かゴールとなる目標を設定して、それに向けたステップがグラフで可視化されると達成したくなるのはとてもよくわかる。パン屋さんのスタンプカードで、来店のたびに1スタンプ押して10個のスタンプが貯まると20%OFFのサービスは、まんまとその通りに行動しちゃってる。

フィッツの法則

法則内容 (6)

選択の速さは、大きさと距離で決まる。

感想 (6)

クリックするボタンが、指から近くてボタンが大きいと良いとのこと。たしかに、ボタンが小さいものはイライラしちゃうかも。ある程度ボタンは余白がある大きさにしてほしい。ボタンの置く位置はマウスやタップしやすい箇所だと、スムーズなのかもしれない。

チャンク

法則内容 (7)

チャンクとは人が近くする情報の塊のことを指す。

感想 (7)

電話番号や郵便番号、当選番号など数字の羅列にはハイフンをつけて表示すると良い。瞬間記憶的には3つが良いみたい。

ゴルディロックス効果

法則内容 (8)

3つの選択肢があった場合、真ん中の選択肢を選びやすくなる心理効果。

感想 (8)

松竹梅的なこと。まあ、必ずしもとは言えないけど、竹か梅を選びがちな私。

ツァイガルニック効果

法則内容 (9)

中断しているものは未完成のもののほうが、完成したものよりも記憶に残りやすくなる心理効果。

感想 (9)

一例は、"詳しくはこちら!"。まあその通りだけど、やりすぎされると嫌だと思うときはある。ほどよく未完成なら許せる。続きはWebで!

連続の法則

法則内容 (10)

人は連続している形状をグループとして認識されやすい。

感想 (10)

横にスクロールできるコンテンツは、一部のコンテンツが欠けていると『あ、横スクロールするんだな』と思う。よくわかる。

近接の法則, 反復の法則, 類同の法則, 対称の法則, 共通運命の法則

法則内容 (11)

近接: 人は近いものを同じグループとして認識されやすい。 反復: 人は同じ形状のものが繰り返し使用されると同じグループに属するものと判断する。 類同: 色、形、サイズなど類似性によって同じグループと認識される 対称: 対称にあるものを同じグループとして認識する。また相互に関連していると認知しやすい。 共通運命: 人は同時に動くものや同じ方向に動くものは同じグループに所属すると認識する。

感想 (11)

とてもとてもとてもよくわかる話。そのためには、UI実装の設計が重要に感じる。個別調整すると、近接が間違ったり反復が一部変になっちゃったりする。そうしないように、レイアウトをちゃんとしたいと思う。

書籍レビュー

-

シェアする

フォローする

購読する

次のページ

フロントエンド開発者のためのCSS設計ガイド:メンテナンス性を高める10の実践

前のページ

2024年の振り返り。マイペースな一年

関連する記事

タグ「書籍レビュー」の記事

『Webフォント実践ガイド Google Fontsではじめる 美しく機能的なタイポグラフィ』を読みました。

たまたま、Googleレコメンドに "Webフォント実践ガイド Google Fontsではじめる 美しく機能的なタイポグラフィ" の本へのリンクが流れてきました。 Webフォントの記事って、あまり見かけなかったのでAmazonでポチりまし

2026年02月12日

書籍レビュー
久々に本を読んでよかったこと

今日、4ヶ月以上放置していた本を読み始めています。 読み始めて、本ってやっぱ良いものだなと思うことがありました。 そのことについて、簡単に書こうかなと思います。 今読んでいる本 "Webフォント実践ガイド Google Fontsではじめる

2026年02月11日

書籍レビュー
『ザ・ダークパターン ユーザーの心や行動をあざむくデザイン』書籍レビュー

今回、以下の書籍を読みました。『ザ・ダークパターン ユーザーの心や行動をあざむくデザイン』せっかくなので、感じたことや気づきをまとめてみます。

2025年07月02日

書籍レビュー
← ブログ一覧へ