<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>人間工学 - デザペディア</title>
	<atom:link href="https://www.ds-pedia.com/tag/%e4%ba%ba%e9%96%93%e5%b7%a5%e5%ad%a6/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.ds-pedia.com</link>
	<description>デザイナーやクリエイターのための情報メディアサイト</description>
	<lastBuildDate>Sun, 27 Sep 2026 05:40:02 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1.2</generator>

<image>
	<url>https://www.ds-pedia.com/wp-content/uploads/2026/07/cropped-favicon@2x-32x32.png</url>
	<title>人間工学 - デザペディア</title>
	<link>https://www.ds-pedia.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>UIデザインに効く認知心理学の法則5選｜ヒック・フィッツ・ヤコブの実務応用</title>
		<link>https://www.ds-pedia.com/2026/09/17/ui-cognitive-psychology-laws/</link>
					<comments>https://www.ds-pedia.com/2026/09/17/ui-cognitive-psychology-laws/#respond</comments>
		
		<dc:creator><![CDATA[Yuny]]></dc:creator>
		<pubDate>Wed, 16 Sep 2026 16:13:21 +0000</pubDate>
				<category><![CDATA[UX・心理学]]></category>
		<category><![CDATA[記事]]></category>
		<category><![CDATA[デザインシステム]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[UX]]></category>
		<category><![CDATA[認知心理学]]></category>
		<category><![CDATA[人間工学]]></category>
		<guid isPermaLink="false">https://www.ds-pedia.com/?p=2093</guid>

					<description><![CDATA[<p>UIデザインの意思決定を感覚論から論理的な設計へ変える認知心理学の法則5選（ヒック、フィッツ、ヤコブ、ミラー、フォン・レストルフ）を解説。選択肢の絞り込み、44ptタップ領域、情報のチャンキングなど、現場のFigma実務ですぐに使える設計基準を網羅します。</p>
<p>The post <a href="https://www.ds-pedia.com/2026/09/17/ui-cognitive-psychology-laws/">UIデザインに効く認知心理学の法則5選｜ヒック・フィッツ・ヤコブの実務応用</a> first appeared on <a href="https://www.ds-pedia.com">デザペディア</a>.</p>]]></description>
										<content:encoded><![CDATA[<p class="wp-block-paragraph">こんにちは！UIデザイナーのYunyです。</p>
<div class="target-audience">
<div class="target-audience__title">この記事はこんな方に向けて書いています</div>
<ul class="target-audience__list">
<li class="target-audience__item">デザインレビューで「なんとなく使いにくい」と言われた際、論理的な根拠で反論・説明したい方</li>
<li class="target-audience__item">ボタンのサイズや選択肢の数、ナビゲーション配置に客観的な設計基準を持たせたい方</li>
<li class="target-audience__item">認知心理学の基本法則を、実際のWeb・アプリUIやFigma実務でどう活かすか具体例を知りたい方</li>
</ul>
</div>
<p class="wp-block-paragraph">UIデザインの現場で「なぜその配置にしたのか」を問われた際、うまく言葉にできず困った経験がある方も多いと思います。<br />自分自身もデザインを始めたばかりの頃は、「見た目の収まりが良いから」といった<strong>感覚的な理由</strong>しか返せず、手戻りを繰り返すことがよくありました。</p>
<p class="wp-block-paragraph">画面の使いやすさは、デザイナー個人のセンスや勘ではなく、人間の脳が情報を処理する<strong>認知特性のルール</strong>で決まります。<br />この記事では、実務のUX/UI設計ですぐに役立つ<strong>代表的な5つの認知心理学の法則</strong>と、デザインレビューでそのまま使える具体的な言語化テクニックを詳しく共有します。</p>
<h2 class="wp-block-heading">なぜUIデザイナーに「認知心理学」が必要なのか？</h2>
<div class="c-quick-answer">
<div class="c-quick-answer__header"><span class="c-quick-answer__badge">クイックアンサー</span><span class="c-quick-answer__title">なぜUIデザインに認知心理学が不可欠なのか？</span></div>
<p class="c-quick-answer__text">
ユーザーは画面を「見た目の美しさ」ではなく<strong>「脳の省エネ（認知負荷の低さ）」</strong>で直感的に評価します。認知心理学の法則を設計基準に据えることで、感覚的な議論を排除し、誰もが迷わず操作できるUIを論理的に組み立てられます。</p>
</div>
<p class="wp-block-paragraph">ユーザーがWebサイトやアプリを操作するとき、画面上の情報を見つけ、理解し、行動を決定するまでに多くの<strong>脳のリソース（認知負荷）</strong>を消費しています。<br />操作に迷ったり戸惑ったりする原因の大半は、レイアウトの美しさではなく、人間の情報処理プロセスに対して<strong>不自然な負荷</strong>がかかっている点にあります。</p>
<p class="wp-block-paragraph">認知心理学の法則を設計の土台に据えると、デザインレビューの議論が「個人の好み」から「客観的な使いやすさの検証」へと大きく変わります。<br />チームのエンジニアやプロダクトマネージャーに対しても、<strong>科学的な根拠を持った提案</strong>ができるため、無駄な手戻りを防ぎながらスムーズな合意形成を図ることができます。</p>
<h2 class="wp-block-heading">1. ヒックの法則（Hick&#8217;s Law）｜選択肢の増えすぎを防ぎ、意思決定を加速させる</h2>
<p class="wp-block-paragraph">ヒックの法則とは、ユーザーが意思決定を下すまでの時間は、<strong>提示された選択肢の数と複雑さ</strong>に応じて対数関数的に増加するという心理学の基本法則です。<br />1952年に心理学者のウィリアム・エドマンド・ヒックとレイ・ハイマンによって定式化され、人間工学や情報設計の現場で広く活用されています。</p>
<p class="wp-block-paragraph">UI設計において選択肢を1つの画面に並べすぎると、ユーザーは何を選べばよいか分からなくなり、<strong>行動の停止や画面からの離脱</strong>を引き起こします。<br />たとえば、ドロップダウンメニューの中に数十個の項目が無秩序に並んでいたり、ヘッダーに10個以上のナビゲーションリンクが密集していたりする状態がこれに当たります。</p>
<figure class="wp-block-image size-large"><img decoding="async" src="https://www.ds-pedia.com/wp-content/uploads/2026/09/image01-62.jpg" alt="【ヒックの法則】選択肢の増えすぎと段階的開示（松竹梅の3択設計）の比較" /></figure>
<h3 class="wp-block-heading">実務での実践：松竹梅の3択設計と段階的開示</h3>
<p class="wp-block-paragraph">SaaSの料金プラン表や機能選択画面では、主要な選択肢を<strong>3つ程度（いわゆる松竹梅の構成）</strong>に絞り込むことが実務における標準的なアプローチです。<br />どうしても選択肢が多くなる場合は、最初からすべてを見せるのではなく、<strong>段階的開示（Progressive Disclosure）</strong>の手法を取り入れます。</p>
<p class="wp-block-paragraph">初期表示では最も利用頻度の高い主要項目だけを提示し、詳細な設定や高度なオプションはアコーディオンやモーダルで<strong>必要なときだけ展開</strong>させます。<br />実際にFigmaで画面を組む際も、初期状態の選択肢を3〜4個に制限するだけで、ユーザーテストでのタスク完了時間が大きく短縮されることを実感します。</p>
<p class="wp-block-paragraph">選択肢の絞り込みやあえて<strong>制約を設けるUX設計のアプローチ</strong>については、以下の記事でも詳しく解説しています。<br />現場での情報整理に迷ったときの指針として、ぜひ参考にしてみてください。</p>
<div class="blogcard ex">
        <a href="https://www.ds-pedia.com/2026/06/29/design-harness/" target="_blank" rel="noopener noreferrer"></p>
<div class="blogcard_thumbnail"><img decoding="async" src="https://www.ds-pedia.com/wp-content/uploads/2026/09/image-93-1024x572.jpg" alt="デザインハーネス入門｜AIのUI生成とレビュー停滞を解く4層構造【2026】" loading="lazy" onerror="this.onerror=null;this.src='https://www.ds-pedia.com/wp-content/themes/inspiro-child/assets/images/no_image.png';" /></div>
<div class="blogcard_content">
<div class="blogcard_title">デザインハーネス入門｜AIのUI生成とレビュー停滞を解く4層構造【2026】</div>
<div class="blogcard_excerpt">無限の選択肢による疲弊を防ぎ、あえて制約を設けることでUXを高めるフレームワークを解説。</div>
</p></div>
<div class="clear"></div>
<p>        </a>
    </div>
<h2 class="wp-block-heading">2. フィッツの法則（Fitts&#8217;s Law）｜移動距離とターゲットサイズで誤操作をゼロにする</h2>
<p class="wp-block-paragraph">フィッツの法則とは、ある目標（ターゲット）に素早く到達して選択するまでの時間は、<strong>目標までの距離に比例し、目標の大きさに反比例する</strong>という法則です。<br />1954年に心理学者のポール・フィッツが提唱したもので、マウスカーソルの移動やスマートフォンのタップ操作における基本中の基本となる指標です。</p>
<p class="wp-block-paragraph">この法則から導き出されるのは、<strong>「頻繁に押すボタンは大きく、指やカーソルに近い場所に置くべき」</strong>という極めて明快な設計原則です。<br />逆に、画面の端にある小さな文字リンクや、親指が届きにくい位置にある重要なCTAボタンは、操作時間を無駄に長引かせ、誤タップの原因になります。</p>
<figure class="wp-block-image size-large"><img decoding="async" src="https://www.ds-pedia.com/wp-content/uploads/2026/09/image02-65.jpg" alt="【フィッツの法則】スマートフォンの親指操作ゾーンと44ptタップ領域の基準" /></figure>
<h3 class="wp-block-heading">実務での実践：親指操作ゾーン（Thumb Zone）と44pt基準</h3>
<p class="wp-block-paragraph">スマートフォンアプリの設計では、片手持ちの親指が自然に届く<strong>画面下部エリア（親指操作ゾーン）</strong>に主要アクションを配置するのがセオリーです。<br />購入ボタンや送信ボタンをページ最下部の固定ボトムバーに配置する設計は、まさに<strong>フィッツの法則に基づいた移動距離の最小化</strong>の実践例と言えます。</p>
<p class="wp-block-paragraph">また、Appleのヒューマンインターフェイスガイドライン（HIG）が定める<strong>「最小タップ可能領域44×44pt」</strong>のルールも、フィッツの法則に直結しています。<br />Figmaでボタンコンポーネントを設計する際は、見た目のアイコンが小さくても、オートレイアウトの余白を含めた<strong>ヒットエリアを確実に44pt以上確保</strong>することが不可欠です。</p>
<p class="wp-block-paragraph">タップ領域の具体的な数値基準や<strong>HIGの設計思想</strong>については、以下の記事で体系化しています。<br />モバイルUIの操作性を引き上げるための基本ルールとして、あわせて確認してみてください。</p>
<div class="blogcard ex">
        <a href="https://www.ds-pedia.com/2026/04/13/apple-hig-design-system-philosophy/" target="_blank" rel="noopener noreferrer"></p>
<div class="blogcard_thumbnail"><img decoding="async" src="https://www.ds-pedia.com/wp-content/uploads/2026/04/eyecatch_hig_comfort-1024x572.jpg" alt="Apple HIG実務ガイド｜タップ領域44pt・文字11pt基準とiOSの基本原則【2026】" loading="lazy" onerror="this.onerror=null;this.src='https://www.ds-pedia.com/wp-content/themes/inspiro-child/assets/images/no_image.png';" /></div>
<div class="blogcard_content">
<div class="blogcard_title">Apple HIG実務ガイド｜タップ領域44pt・文字11pt基準とiOSの基本原則【2026】</div>
<div class="blogcard_excerpt">Appleが定める44ptタップ領域や文字サイズの論理的根拠と、iOS実務への落とし込み方を網羅。</div>
</p></div>
<div class="clear"></div>
<p>        </a>
    </div>
<h2 class="wp-block-heading">3. ヤコブの法則（Jakob&#8217;s Law）｜「既視感」を味方につけ、学習コストを最小化する</h2>
<p class="wp-block-paragraph">ヤコブの法則とは、ユーザーは他の無数のWebサイトやアプリで大半の時間を過ごしているため、<strong>あなたのサイトもそれらと同じように機能することを期待している</strong>という法則です。<br />ユーザビリティ研究の第一人者であるヤコブ・ニールセンが2000年に提唱したもので、Web標準やデザインシステムの重要性を端的に表しています。</p>
<p class="wp-block-paragraph">デザイナーが独自性や斬新さを求めすぎるあまり、一般的な操作ルールを逸脱してしまうと、ユーザーは<strong>強いストレスと学習コスト</strong>を強いられます。<br />たとえば、ヘッダー左上のロゴをクリックしてもトップに戻らない設計や、右上に置かれるはずの検索バーやカートアイコンがフッターの隅に隠れているような構成です。</p>
<h3 class="wp-block-heading">実務での実践：メンタルモデルの流用と独自性の住み分け</h3>
<p class="wp-block-paragraph">使いやすいUIを構築する近道は、ユーザーがすでに獲得している<strong>メンタルモデル（頭の中の操作イメージ）</strong>をそのまま流用することです。<br />ECサイトであれば「右上にカート」「画面下部に固定の購入ボタン」、メディアサイトであれば「左上にロゴ」「上部にグローバルナビゲーション」といった配置を素直に踏襲します。</p>
<p class="wp-block-paragraph">UIデザイナーがクリエイティビティを発揮すべき領域は、操作の基本構造ではなく、<strong>ブランドの世界観を伝えるビジュアルや丁寧なインタラクション</strong>です。<br />基本の導線ルールを業界標準にしっかりと揃えることで、ユーザーは使い方に悩むことなく、サービス本来の価値やコンテンツに集中できます。</p>
<h2 class="wp-block-heading">4. ミラーの法則（Miller&#8217;s Law）｜短期記憶の限界「マジックナンバー7」と情報のチャンキング</h2>
<p class="wp-block-paragraph">ミラーの法則とは、平均的な人間が一度に短期記憶（ワーキングメモリ）に保持できる情報の数は、<strong>「7加減2（5個から9個）」程度に限られている</strong>という心理学の基本法則です。<br />一般には<strong>「マジックナンバー7（マジカルナンバー7±2）」</strong>という呼び名でも広く親しまれており、1956年に認知心理学者のジョージ・ミラーが発表した論文に由来します。</p>
<p class="wp-block-paragraph">近年の認知心理学の研究では、複雑なUI環境においては保持できる数が<strong>さらに少ない「4±1個程度」</strong>とも言われています。<br />区切りのない数字の羅列や、整理されていない長大な箇条書きリストは、ユーザーの記憶のキャパシティをあっという間に圧迫してしまいます。</p>
<h3 class="wp-block-heading">実務での実践：情報のチャンキングとフォームのステップ分割</h3>
<p class="wp-block-paragraph">この記憶の負荷を軽減するための最も強力な手法が、複数の情報を意味のある塊にまとめる<strong>「チャンキング（Chunking）」</strong>です。<br />クレジットカード番号を4桁ずつハイフンで区切ったり、電話番号を市外局番ごとに分ける入力フォームの設計は、チャンキングの典型的な応用例です。</p>
<p class="wp-block-paragraph">また、20項目以上におよぶ会員登録やアンケートフォームを設計する際は、1画面にすべてを詰め込まず、<strong>3〜4ステップに分割して案内</strong>します。<br />Figma上でカード型UIをレイアウトする際も、1つのカード内に含める主要情報は3〜4要素以内に抑え、視覚的なグループを明確に分けることが大切です。</p>
<p class="wp-block-paragraph">実務で注意したいのは、画面上のUIは「記憶」ではなく「視覚認識」できるため、メニュー項目などを機械的に7個以下に制限する必要はない点です。<br />重要なのは数を無理に減らすことではなく、関連する項目同士を<strong>適切なチャンク（塊）に整理</strong>して、スキャンしやすい構造を作ることです。</p>
<h2 class="wp-block-heading">5. フォン・レストルフ効果（孤立効果）｜視覚的コントラストで最重要アクションを際立たせる</h2>
<p class="wp-block-paragraph">フォン・レストルフ効果（別名：孤立効果）とは、複数の似た要素が並んでいるとき、<strong>他と異なる視覚的特徴を持つ1つの要素が最も記憶に残り、注目を集める</strong>という効果です。<br />1933年に精神科医のヘドウィグ・フォン・レストルフによって発見され、CTAボタンの設計や価格表のレイアウトにおいて最も頻繁に活用される理論です。</p>
<p class="wp-block-paragraph">この効果をUIに応用する際の注意点は、画面内のあらゆる要素を目立たせようとして、<strong>有彩色や強いコントラストを多用しすぎないこと</strong>にあります。<br />すべてのボタンが同じ鮮やかなブルーで塗られている画面では、強調の効果が相殺され、結果としてユーザーはどこをタップすべきか迷ってしまいます。</p>
<figure class="wp-block-image size-large"><img decoding="async" src="https://www.ds-pedia.com/wp-content/uploads/2026/09/image03-65.jpg" alt="【フォン・レストルフ効果】全ボタン強調の失敗とPrimaryボタン単一塗りの視線誘導" /></figure>
<h3 class="wp-block-heading">実務での実践：Primaryボタンの孤立化と「おすすめ」バッジ</h3>
<p class="wp-block-paragraph">この効果を最大限に活かすためには、画面内で最優先してほしい操作（Primaryアクション）に対してのみ、<strong>明確な視覚的差異</strong>を与えます。<br />たとえば、主要な「購入する」「登録する」ボタンだけを鮮やかな塗りのボタンにし、キャンセルや戻るなどの副次的なボタンは枠線（Secondary）やテキストリンク（Tertiary）に抑えます。</p>
<p class="wp-block-paragraph">また、3つの料金プランが並ぶ比較表において、中央の推奨プランだけカードの枠線を太くし、上部に<strong>「人気No.1」といったバッジを付与する手法</strong>もフォン・レストルフ効果の実践です。<br />周囲を均一で控えめなトーンに整えておくことで、際立たせたい1点にユーザーの視線を自然かつ的確に誘導できます。</p>
<h2 class="wp-block-heading">実務で使える！デザインレビューを突破する「言語化フレーズ」早見表</h2>
<p class="wp-block-paragraph">認知心理学の知識は、実際の画面設計だけでなく、<strong>チーム内でのデザインレビューやクライアントへの提案</strong>において大きな力を発揮します。<br />感覚的な指摘を受けた際に、そのまま根拠として使える実践的な言語化フレーズを以下の表に整理しました。</p>
<figure class="wp-block-table">
<table>
<thead>
<tr>
<th>レビューで受ける主な指摘</th>
<th>根拠となる心理学法則</th>
<th>そのまま使える論理的な言語化フレーズ</th>
</tr>
</thead>
<tbody>
<tr>
<td>「選択肢が多くて迷いそう」</td>
<td>ヒックの法則</td>
<td>「初期表示を主要な3択に絞り、詳細設定は段階的開示（アコーディオン）で必要なときだけ展開させています。」</td>
</tr>
<tr>
<td>「スマホでボタンが押しにくい」</td>
<td>フィッツの法則</td>
<td>「親指が届きやすい画面下部の固定バーに配置し、タップ領域を44pt以上確保して指の移動時間を最小化しています。」</td>
</tr>
<tr>
<td>「他のサービスと似すぎている」</td>
<td>ヤコブの法則</td>
<td>「ユーザーが日常的に慣れ親しんでいるメンタルモデルを活用し、使い方に迷わせないよう基本配置を標準に合わせています。」</td>
</tr>
<tr>
<td>「情報がごちゃごちゃして見える」</td>
<td>ミラーの法則</td>
<td>「短期記憶の負荷を抑えるため、1ブロックあたり3〜4項目のチャンクに分割し、カード型で視覚的にグルーピングしています。」</td>
</tr>
<tr>
<td>「どれが最重要ボタンか分からない」</td>
<td>フォン・レストルフ効果</td>
<td>「Primaryボタンのみに鮮やかな塗りを適用し、孤立効果によってユーザーの視線を最優先アクションへ自然に誘導しています。」</td>
</tr>
</tbody>
</table>
</figure>
<p class="wp-block-paragraph">「なんとなく使いにくい」「自分の感覚と違う」といった主観的な指摘に対しても、<strong>心理学の法則に基づいた客観的な意図</strong>を返すことで、議論を建設的な方向へ進められます。<br />デザイナー自身が論理的な言葉を持つことは、デザインの品質を守り、チーム全員が納得して開発を進めるための確かな強みになります。</p>
<p class="wp-block-paragraph">デザインの意図をチームやクライアントに的確に伝え、合意形成をスムーズにするための<strong>言語化スキル</strong>については、こちらの記事でも詳しくまとめています。<br />レビューでの伝え方に課題を感じている方は、あわせて目を通してみてください。</p>
<div class="blogcard ex">
        <a href="https://www.ds-pedia.com/2026/09/20/progressive-disclosure-ux-guide/" target="_blank" rel="noopener noreferrer"></p>
<div class="blogcard_thumbnail"><img decoding="async" src="https://www.ds-pedia.com/wp-content/uploads/2026/09/image-123-1024x572.jpg" alt="段階的開示（プログレッシブディスクロージャー）入門｜情報過多を防ぐUI設計" loading="lazy" onerror="this.onerror=null;this.src='https://www.ds-pedia.com/wp-content/themes/inspiro-child/assets/images/no_image.png';" /></div>
<div class="blogcard_content">
<div class="blogcard_title">段階的開示（プログレッシブディスクロージャー）入門｜情報過多を防ぐUI設計</div>
<div class="blogcard_excerpt">UIの情報過多を防ぎ、シンプルさと多機能性を両立させる「プログレッシブディスクロージャー（段階的開示）」を解説。ヤコブ・ニールセン提唱の基本原則から実務の4大展開パターン、隠しすぎを防ぐ境界線ルールまで網羅します。</div>
</p></div>
<p>        </a>
    </div>
<div class="clear"></div>
<p>        </a>
    </div>
<h2 class="wp-block-heading">終わりに</h2>
<p class="wp-block-paragraph">最後までお読みいただき、ありがとうございます！</p>
<p class="wp-block-paragraph">UIデザインにおいて認知心理学の法則を学ぶことは、表現の幅を狭める制約ではなく、<strong>自信を持ってデザインを届けるための論理的な土台</strong>になります。<br />画面の向こう側にいるユーザーの脳や身体の仕組みに寄り添うことで、迷いのない心地よい操作体験を生み出すことができます。</p>
<p class="wp-block-paragraph">日々の制作の中で配置やサイズに迷ったときは、ぜひ今回紹介した<strong>5つの法則を振り返り</strong>、実務の設計に役立ててみてください。<br />これからも、論理的なUIデザインを一緒に楽しんでいきましょう。<br />それでは、良いデザインライフを！</p><p>The post <a href="https://www.ds-pedia.com/2026/09/17/ui-cognitive-psychology-laws/">UIデザインに効く認知心理学の法則5選｜ヒック・フィッツ・ヤコブの実務応用</a> first appeared on <a href="https://www.ds-pedia.com">デザペディア</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://www.ds-pedia.com/2026/09/17/ui-cognitive-psychology-laws/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
