#author("2026-06-22T22:11:03+09:00;2026-06-22T21:50:07+09:00","default:art-gs","art-gs") #author("2026-06-22T22:33:48+09:00;2026-06-22T22:11:03+09:00","default:art-gs","art-gs") *先行研究 [[姚欣艺]] ~ **『インタフェースデザインの心理学』[1]：ユーザーの習性 ~ 本稿は、『インタフェースデザインの心理学』を読んで、デザインについて考えたことをまとめたレポートです。UI/Webデザインやイラスト制作において、ユーザーの心理や行動特性を知ることはとても大切です。 今回読んだ章は、「画面上の文字をどう読むか」「人間の記憶の限界はどこか」という、デザインの基本を考える上での良いヒントになりました。気づいたポイントを以下に整理します。 ~ ***&scale(110){1.「読む」と「理解する」の違い（第14、18章）}; 本書の第14章では、「文章を読むこと」と「それを理解すること」は同じではないと述べられています。どれだけ文字が画面にきれいに並んでいても、長すぎる文章や難しい表現は、ユーザーが文字を目で追っているだけで、内容は頭に入っていきません。 また、第18章の理論によると、長い行に比べて短い行のほうが、ユーザーは心理的に「読みやすく、疲れにくい」と感じる傾向があります。 そのため、一文をシンプルにまとめ、適切な行幅で提示することで、ユーザーが直感的に意味を理解できる「読みやすさ（可読性）」を意識したデザインが大切であると分かりました。 ~ ***&scale(110){2. 記憶の限界と情報の提示（第19、20章）}; 本書の第19章および第20章では、人間の「ワーキングメモリ」は非常に脆弱であり、一度に記憶できる情報の数は、基本的には「4つ」までであると述べられています[2]。例えば、本の中では「日本の電話番号（090-XXXX-XXXX）」が3つのグループに分けられていることが、この理論の例として挙げられています。 これを読んで、中国の携帯電話番号も全く同じ仕組みだと気づきました。中国の番号は11桁ありますが、みんな自然に「3桁・4桁・4桁（180-XXXX-XXXX）」のように3つのグループに分けて覚えています。国が違っても、人間の記憶の限界に合わせて情報が整理されていることが分かります。 このように、人間の記憶の限界を考慮し、現代のUIやWebデザインでも、情報を4つ以下の塊（チャンク）にグループ化して整理することがとても重要です。私のサイト設計においても、「段階的開示（引き出しメニュー）」などを取り入れ、情報を一度にたくさん見せるのではなく、4つ以下にコントロールして画面をすっきりさせることで、ユーザーの認知負荷を抑えた見やすいデザインにつながると感じました。 ~ ***&scale(110){3. 情報は少ないほどきちんと処理される（第27章）}; 本書の第27章では、人間の脳が一度に意識して処理できる情報量は非常に限られており、情報は少ないほどきちんと処理されると述べられています。 人が1秒間に処理できる400億もの情報のうち、脳が意識的に処理できるのはわずか40に過ぎません[3]。そのため、Webデザインでは一度に大量の情報を与えてユーザーを圧倒しない工夫が必要です。 これを解決するのが、必要な情報だけを少しずつ见せる「段階的開示」です[4]。たとえば、長いスクロールが必要なページを避け、最初に各トピックの要約を表示する設計が効果的です。また、「クリック数は少ないほうが良い」と言われがちですが、クリックするたびに欲しい情報がしっかり手に入るなら、ユーザーはストレスを感じず、進んでクリックを繰り返してくれます。[5] 私が開発するWebサイトでは、長いスクロールを減らし、情報を一度にたくさん見せないようにします 。その代わりに、タブや「折りたたみメニュー」を使って、ユーザーがそのときに必要な情報だけを少しずつ見せるようにします 。これにより、ユーザーが情報が多すぎて疲れてしまうのを防ぎます 。 この効果を確かめるために、下半期の実験では「NASA-TLX」という評価方法を使います 。ユーザーがどれくらい頭を使ったか（精神的要求）や、どれくらいイライラしたか（フラストレーション）を数値にして、本当に負担が減ったかを評価します 。 ~ ***&scale(110){4. 注意力の持続時間は約10分である（第44章）}; 本書の第44章では、人間の脳がひとつのタスクに対して高い集中力を維持できる時間は、わずか10分程度であると述べられています。この時間を超えると注意力が低下するため、長時間のタスクでは10分ごとに「変化」や「区切り」を取り入れ、脳に新しい刺激を与えてリセットさせることが重要です。 初心者がイラスト学習（線画や着色など）を行う際、長時間の作業による集中力の途切れを防ぐため、サイト内の各学習ステップ（動画や図文解説の構成）を「7〜10分程度」で完結する小さなタスクに分割（タイム・チャンキング）して設計します。 この時間的なタスク分割の効果を検証するため、実験ではNASA-TLXの「時間的要求（Temporal Demand）」および「精神的要求（Mental Demand）」の指標を用います。タスクを10分以内に区切ることで、学習者が感じる時間的な焦りや精神的疲労（メンタルワークロード）が軽減されるかを定量的に評価します。 ~ ***&scale(110){５. 進行状況の可視化がモチベーションを高める（第55章）}; 心理学の「目標勾配効果」に基づき、人間は目標に近づくほど、それを達成しようとするやる気が指数関数的に高まると述べられています。また、わずかでも「進捗している感覚」を視覚的に提示するだけで、タスクを最後までやり遂げる確率が上がります。 初心者向けのイラスト学習では途中で挫折しやすいため、サイトのUIに明確なプログレスバーやステップインジケータ（例：「全4ステップ中、現在第2ステップ」など）を実装します。これにより、学習者が「あとどれくらいで完成するか」を常に視覚的に把握できるようにします。 進捗の可視化がユーザーに与える影響を検証するため、NASA-TLXの「努力（Effort）」および「作業パフォーマンス（Performance）」の指標を用います。ゴールが明確に見えることで、学習者が最後まで作業を続けるための「努力」が維持され、作業後の達成感や自己評価（パフォーマンスへの満足度）が向上するかを測定します。[6] ~ ~ &scale(120){本著の知見に基づく論文構成（第3章）の論理構築}; ~ ***3.1 認知心理学における「認知負荷理論（CLT）」手法（関連：第19、20、44、55章） まず大前提として、「人間のワーキングメモリは非常に脆弱である」という認知の限界（第19・20章）を提示します。この限界を踏まえ、初心者の学習意欲を阻害しないために、イラスト学習タスクに分割し（第44章）、適切な「フィードバック」を与える（第55章）ことで、脳にかかる外在的認知負荷を最小限に抑える必要性を論じます。 ~ ***3.2 情報デザインにおける「階層化」手法（関連：第14、18章） 3.1の認知負荷問題を「視覚・情報デザイン」の側面から解決するアプローチです。画面を見る際の「無意識の視線スキャン習慣」（第14章）や、読みやすさを左右する「行幅のコントロール」（第18章）といった心理規則を活用します。情報に明確な視覚的階層（ビジュアル・ヒエラルキー）を設けることで、直感的に理解できる画面設計の基準を定義します。 ~ ***3.3 UIデザイン原則と「段階的開示」の定義（関連：第27章） 3.1の認知負荷問題を「操作性」の側面から根本的に解決するため、UIデザイン原則である「段階的開示」（第27章）を導入します。クリック回数は増えますが、「毎回明確な見返り（情報）があればユーザーは疲れない」という心理的根拠を提示します。これは、下半期にサイトへ実装予定の「折りたたみメニュー」の重要な理論的根拠となります。 ~ ~ **『インタフェースデザインの心理学』[7]：ユーザーの習性 **『デザイン、新・100の法則』[7] ~ 本稿は、『デザイン、新・100の法則』を読み進める中で、Webサイトのインターフェース設計やイラスト学習における情報配置について考察したレポートです。 今回、本書に網羅されている多様なデザインの法則を精読したことで、ユーザーの認知プロセスを妨げない視覚配置や、インタラクション設計における「全体的な最適解」について、非常に解像度の高い知見を得ることができました。単に見栄えを整えるだけでなく、人間の行動特性をシステム側が先回りしてサポートするための強力なガイドラインとして、本研究（イラスト学習サイト）の実践を大きく前進させる確信へとつながっています。 ~ ***&scale(110){1. チャンキング（P30）}; 前著『インタフェースデザインの心理学』（第19・20章）では、「人間のワーキングメモリの限界は4つである」という認知的な制約が示されていました。これに対し、本作の「チャンキング（p.30）」は、その制約を克服し、情報を効率的に処理させるための具体的な情報設計の手法です。两著の理論を相互に補完させることで、本研究の学術的妥当性をさらに強固にしました。 視覚的分離効果による認知の疲れを防ぐため、イラスト画面とレイヤー領域が直感的に双方向連動するインタラクションを実装する。 例えば： １：イラスト上のクリック操作： ユーザーがイラストの特定のパーツ（例：影）をクリックすると、対応する右側の「レイヤー3（影）」が自動的にハイライトされ、そのレイヤーの描画構造が視覚的に強調される。 ２：レイヤー領域の操作： 右側の特定のレイヤーを選択すると、左側のイラストがその段階（例：線画のみの状態）に切り替わる。 チャンキングを取り入れた「4つ程度のステップに最適化されたレイヤー表示」と「双方向連動インタラクション」を実装したプロトタイプを用い、下半期の比較実験において、従来の静的な教程と比較して、NASA-TLXの「精神的要求（Mental Demand）」および「フラストレーション（Frustration）」が有意に軽減されるかを定量的に検証する。これにより、初学者が一度に処理する認知負荷を効果的に軽減する設計基準とします。 ~ ***&scale(110){2. ヒックの法則（P102）}; 本書の102ページにある「ヒックの法則」を読んで、私のイラスト学習サイトに使えるかどうかを考えました。結論として、この法則をサイト全体にそのまま使うのは良くないと判断しました。その理由と気づいたポイントを以下に整理します。 基本のルール： 選択肢が多ければ多いほど、人がどれを選ぶか決めるまでに時間がかかるという法則です。そのため、操作を早くするためには選択肢をできるだけ少なくすることが大切です。 この本の重要な指摘： 本書には、「難しい問題解決や、文章を読んでじっくり考えるタスクには、この法則は使えない」とはっきり書かれています。 イラストを描くときはじっくり考えることが多いため、この法則を無理に使うと逆効果になります。そのため、サイト内で以下のように分けて考えます。 1、イラストの構造学習エリア（法則を盲目的に適用しない領域）： イラストのレイヤー構造（下描き、線画、影、仕上げなど）や複雑な画面構成を分解して学ぶエリアは、深い認知を伴う「学習活動」の場です。教学用イラストは元々、複数の複雑な要素や階層的な情報が有機的に結合して成り立っています。ここでヒックの法則を機械的に適用し、情報量やレイヤーの選択肢を過剰に減らしすぎると、イラストの描き方の本質や全体像が伝わらなくなり、学習効果において逆効果になってしまうと思います。 2、ウェブサイトの機能操作エリア（法則を厳格に適用する領域）： 「次のステップへ進む」「カテゴリーを選択する」といった、ユーザーを迷わせたくないナビゲーションやシステム操作の領域には、ヒックの法則を厳格に適用します。UI上の選択肢やボタンの数を最小限に絞り込み、直感的に操作できるようにすることで、ユーザーがサイトの操作方法自体に脳のワーキングメモを消費してしまうのを防ぎます。これにより、初学者の余計な認知負荷を徹底的に排除し、イラスト学習そのものに集中できる環境を整えます。 **参考文献： ''[1]''Weinschenk, S. (2021). 『インタフェースデザインの心理学 第2版 ―ウェブやアプリに新たな視点をもたらす100の指針』 (武舎広幸, 武舎るみ, 阿部和也 訳). オライリー・ジャパン. ''[2]''Cowan,Nelson. (2001). The magical number 4 in short-termmemory: A reconsideration of mental storage capacity. Behavioral and Brain Sciences 24:87--185 https://www.cambridge.org/core/services/aop-cambridge-core/content/view/44023F1147D4A1D44BDC0AD226838496/S0140525X01003922a.pdf/the-magical-number-4-in-short-term-memory-a-reconsideration-of-mental-storage-capacity.pdf ''[3]''Wilson, T. D. (2002). Strangers to Ourselves: Discovering the Adaptive Unconscious. Belknap Press of Harvard University Press. ''[4]''Nielsen, J. (2006, December 3). Progressive Disclosure. Nielsen Norman Group. https://www.nngroup.com/articles/progressive-disclosure/ ''[5]''Porter, J. (2003, April 15). Testing the Three-Click Rule. User Interface Engineering (UIE). https://articles.centercentre.com/three_click_rule/ ''[6]''Weinschenk, S. (2021). 100 Things Every Designer Needs to Know About People. New Riders. Chapter 44: Sustained Attention Lasts About Ten Minutes. Chapter 55: People Are Motivated by Progress, Mastery, and Control.