「月刊ムー」のロゴがグッズになりました!

認知心理学から学ぶUI/UX|注意・記憶・判断・行動を体系的に理解する

Webサイトを使うとき、人は画面上のすべてを公平に見て、十分に考えてから行動しているわけではありません。注意を向けられる範囲、記憶できる量、過去の経験、無意識の思い込みなどに影響されながら、短い時間で判断しています。

このページでは、サンアンドムーンのJOURNALにある認知心理学とUI/UXの記事を、「注意・知覚」「記憶・学習」「判断・意思決定」「行動・モチベーション」「認知負荷・エラー防止」「見え方と感じ方」の6領域に分けました。

いま困っていることから選ぶ

課題に近い領域から読み始めると、必要な記事に早くたどり着けます。

1. 注意・知覚──何が見え、何が見落とされるのか

画面に表示されていても、注意が向かなければ情報は認識されません。視線の動きや見落としの仕組みを知ることは、情報の優先順位と導線を整える出発点になります。

  1. 選択的注意とは?日常の具体例と見落としを防ぐUX設計記事を読む
  2. 予想と違うものは、見えていても気づかない|変化盲記事を読む
  3. 目は「全体」を見ていない|中心視野と周辺視野記事を読む
  4. 注意は「スポットライト」のように動く|視線誘導記事を読む
  5. 人は「読まない」、ざっと「眺めている」|F型/Z型視線記事を読む
  6. 人を惹きつけるのは「動き」と「音」|本能的注意記事を読む
この領域の残り9本を見る閉じる
  1. 見えているのに、間違える理由|目と脳が生む錯覚記事を読む
  2. なぜ私たちは「顔」に惹かれるのか|顔認識のしくみ記事を読む
  3. 人間の視野をデザインに活かす|中心視野と周辺視野のUX記事を読む
  4. 視界の“にじみ”が導くナビゲーション|周辺視野と導線設計記事を読む
  5. 「目立たせる」と「目立ちすぎる」の境界線|視覚的階層記事を読む
  6. 脳の錯覚の代表例とその理由|錯覚が教える思考の癖記事を読む
  7. 見えていても、伝わらない|誤操作を生む錯覚の構造記事を読む
  8. 人間の集中力は8秒?短い注意を引きつける条件記事を読む
  9. アテンション・エコノミー|注意力を尊重する設計記事を読む

2. 記憶・学習──覚えやすさと理解しやすさをどう支えるか

ユーザーにすべてを覚えてもらう設計は、負担を増やします。思い出さなくても進める仕組みと、理解を助ける情報のまとまりを考えます。

  1. 「一度に覚えられるのは4つまで」|記憶の限界と情報設計記事を読む
  2. 情報は「思い出す」より「認識する」ほうが簡単記事を読む
  3. 忘れることを前提にデザインする|外部記憶UI記事を読む
  4. 最初と最後しか覚えていない|系列位置効果記事を読む
  5. スキーマで覚える脳|スキーマ理論とUI設計記事を読む
  6. ブランドは“文脈”でつくられる|スキーマ理論と印象形成記事を読む
この領域の残り6本を見る閉じる
  1. 記憶は思い出すたびに、書き換えられる|記憶の再構成性記事を読む
  2. 読みにくさが、かえって記憶に残る|流暢性パラドックス記事を読む
  3. 視認性・可読性・理解度|きちんと読んでもらうために記事を読む
  4. 長い行は速く読めるが、短い行のほうが好まれる|行長記事を読む
  5. 文字サイズより「行間」が、読みやすさを決めている|行間記事を読む
  6. 見出しがすべてを決める|スキャニング前提見出し記事を読む

3. 判断・意思決定──人はどのように選び、納得するのか

選択は、情報の内容だけでなく、提示される順番や周囲の反応、すでに持っている考えにも左右されます。誘導するためではなく、納得できる判断を支えるために理解したい領域です。

  1. 「速い思考」と「遅い思考」の2つのシステム記事を読む
  2. UXを歪める認知バイアス|その正体と向き合い方記事を読む
  3. デザインにおける暗黙のバイアスの認識記事を読む
  4. 私たちは「考えて」選んでいない?|無意識の意思決定記事を読む
  5. 人は過去の経験と予想に基づいて行動する|メンタルモデル記事を読む
  6. 「納得感」をデザインする|認知的不協和とブランディング記事を読む
この領域の残り7本を見る閉じる
  1. 社会的証明とブランドの信頼構築記事を読む
  2. 自然に導く、強制しないUX|ナッジ理論記事を読む
  3. 「選ばせているつもり」で選ばせていないUIの話記事を読む
  4. 認知的一貫性という視点から見る、Webサイト制作記事を読む
  5. 認知的一貫性が崩れやすいWebサイトの典型パターン記事を読む
  6. 脳が動く順番で伝える|ゴールデンサークル理論と意思決定記事を読む
  7. 急かすより、選んでもらう|ダークパターンの心理学記事を読む

4. 行動・モチベーション──次の一歩をどう支えるか

人を無理に動かすのではなく、現在地や結果を分かりやすく伝え、続けやすい環境をつくる。そのための心理的な仕組みを扱います。

  1. 「あと少し」が人を動かす|目標勾配効果記事を読む
  2. 目標に近づくほど「やる気」が出る|“あと少し”の心理記事を読む
  3. 進捗バーは、なぜ人を動かすのか記事を読む
  4. フィードバックがないと、人は続けられない|反応の即時性記事を読む
  5. ヤル気にさせるより、奪わない設計|モチベーション保護記事を読む
  6. オペラント条件付けとは?UXデザインに活きる行動の仕組み記事を読む
  7. 予測できる報酬より、予測できない報酬|変動報酬記事を読む
  8. 競争意欲はライバルが少ないほど高まる|N効果記事を読む

5. 認知負荷・エラー防止──迷いや間違いをどう減らすか

ユーザーの注意力や記憶力に頼らず、間違えても戻れるようにすることが、安心して使えるインターフェースにつながります。

  1. 「ちょうどよさ」が体験を変える|段階的開示記事を読む
  2. マルチタスクという、いちばん大きな誤解|注意切替コスト記事を読む
  3. 誤操作の8割は、設計のせい|スリップ vs ミステイク記事を読む
  4. 確認ダイアログは、出すほど無視される|警告頻度の心理学記事を読む
  5. エラーメッセージは、寄り添って、導く|文言設計3原則記事を読む
  6. 「やり直せる」が、信頼を生む|Undo・取り消し可能性記事を読む
  7. ユーザーは、必ず間違える|エラー前提設計記事を読む

6. 見え方と感じ方──形と色が印象をつくる

同じ内容でも、まとまり方や色によって受け取られ方は変わります。人がどのように形をひとまとまりと見て、色から何を感じ取るのかを知ることは、印象を意図どおりに届けるための土台になります。

  1. “まとまり”は無意識に生まれる|UXに活かす3つの視点記事を読む
  2. “見えない”のに“見えてしまう”|デザインに効く3原理記事を読む
  3. わかりやすさと美しさの両立|ゲシュタルト原理をUI/UXに記事を読む
  4. UXにおける「色」の力|感情と行動を左右するデザイン要素記事を読む
  5. 数値で測る“心の動き”|感性工学が拓く体験設計記事を読む

この案内に掲載しきれない関連記事は、「認知心理学とUX」カテゴリからご覧いただけます。認知心理学は、人を思いどおりに動かすための道具ではありません。人が見落とし、忘れ、迷い、間違えることを前提に、より分かりやすく、安心して使える体験を設計するための手がかりです。

まとめ

読む順番に決まりはありません。いま困っていることに近い領域から入るのが、いちばん早く手がかりに届く道です。情報が見落とされるなら「注意・知覚」、内容を覚えてもらえないなら「記憶・学習」、選択肢から決めてもらえないなら「判断・意思決定」、途中で離脱されるなら「行動・モチベーション」、入力や操作を失敗されるなら「認知負荷・エラー防止」、印象が意図どおりに伝わらないなら「見え方と感じ方」から読み始めてください。

執筆・監修

中谷 浩和

中谷 浩和

株式会社サンアンドムーン|代表取締役

1976年創業のデザイン事務所を前身に、Webコンサルティング・UI/UXデザインを専門とする。国際標準のUX設計プロセスを学ぶ Google UX Design Professional Certificate を取得し、上級ウェブ解析士 としてデータ主導のサイト改善にも精通。デザイン思考を軸に、ユーザー認知・行動・文脈からWebサイトの課題を捉え直し、成果につながる設計へ落とし込むことを使命としている。システム設計、フロントエンド技術、SEO・パフォーマンス改善まで技術知識を横断し、サイト全体を見通したディレクションを得意とする。自動車メーカー、銀行・クレジットカード、保険などの大手から中小企業まで、数値で検証しながら改善を積み重ねる実践的なコンサルティングを提供している。

サンアンドムーンへのご相談はこちら

直感で選ばれるデザインへ。心理学に基づいたUI設計を。

無料でUX診断を依頼する
最近の事例
おすすめ事例
人気事例
  1. ミキハウス ベビースキンケアシリーズ

  2. LittleArtchive(リトルアーカイブ)

  3. SHIFT LINK

  4. 株式会社ミキハウス 新卒採用サイト

  5. SaltyArts inc.(株式会社ソルティアーツ)

  1. 株式会社ミキハウス 新卒採用サイト

  2. SaltyArts inc.(株式会社ソルティアーツ)

  3. スヌーズレン・ラボ

  4. NEMO Equipment Japan

  5. for,Freelance株式会社

  1. 「ムー」タイトルロゴ

  2. ミキハウス ベビースキンケアシリーズ

  3. LittleArtchive(リトルアーカイブ)

  4. 株式会社ミキハウス 新卒採用サイト

  5. 梅島動物病院

人気記事
  1. 1

    【パートナー募集】WEBエンジニア(コーダー)募集のご案内

  2. 2

    【パートナー募集】WEBデザイナー/UI・UXデザイナー(業務委託・フルリモート)

  3. 3

    【パートナー募集】WordPress開発エンジニア募集のご案内

  4. 4

    【パートナー募集】グラフィックデザイナー/イラストレーター

  5. 5

    【パートナー募集】AI動画クリエイター

関連事例

無料オンライン相談

「どこに問題があるのか分からない」という段階からのご相談も歓迎です。
サイトの改善やUI/UXデザインのお悩みを、オンラインでお聞きします。

無料で相談する