#author("2026-06-29T22:43:32+09:00","default:art-gs","art-gs") #author("2026-07-06T19:26:41+09:00","default:art-gs","art-gs") *先行研究2 [[姚欣艺]] ~ **『デザイン、新・100の法則』[1] ~ 本稿は、『デザイン、新・100の法則』を読み進める中で、Webサイトのインターフェース設計やイラスト学習における情報配置について考察したレポートです。 今回、本書に網羅されている多様なデザインの法則を精読したことで、ユーザーの認知プロセスを妨げない視覚配置や、インタラクション設計における「全体的な最適解」について、非常に解像度の高い知見を得ることができました。単に見栄えを整えるだけでなく、人間の行動特性をシステム側が先回りしてサポートするための強力なガイドラインとして、本研究（イラスト学習サイト）の実践を大きく前進させる確信へとつながっています。 ~ ***&scale(110){1. チャンキング（P30）};[2] 前著『インタフェースデザインの心理学』（第19・20章）では、「人間のワーキングメモリの限界は4つである」という認知的な制約が示されていました。これに対し、本作の「チャンキング（p.30）」は、その制約を克服し、情報を効率的に処理させるための具体的な情報設計の手法です。两著の理論を相互に補完させることで、本研究の学術的妥当性をさらに強固にしました。 視覚的分離効果による認知の疲れを防ぐため、イラスト画面とレイヤー領域が直感的に双方向連動するインタラクションを実装します。 例えば： １：イラスト上のクリック操作： ユーザーがイラストの特定のパーツ（例：影）をクリックすると、対応する右側の「レイヤー3（影）」が自動的にハイライトされ、そのレイヤーの描画構造が視覚的に強調されます。 ２：レイヤー領域の操作： 右側の特定のレイヤーを選択すると、左側のイラストがその段階（例：線画のみの状態）に切り替わります。 チャンキングを取り入れた「4つ程度のステップに最適化されたレイヤー表示」と「双方向連動インタラクション」を実装したプロトタイプを用い、下半期の比較実験において、従来の静的な教程と比較して、NASA-TLXの「精神的要求（Mental Demand）」および「フラストレーション（Frustration）」が有意に軽減されるかを定量的に検証する。これにより、初学者が一度に処理する認知負荷を効果的に軽減する設計基準とします。 ~ ***&scale(110){2. ヒックの法則（P102）};[3] 本書の102ページにある「ヒックの法則」を読んで、私のイラスト学習サイトに使えるかどうかを考えました。結論として、この法則をサイト全体にそのまま使うのは良くないと判断しました。その理由と気づいたポイントを以下に整理します。 基本のルール： 選択肢が多ければ多いほど、人がどれを選ぶか決めるまでに時間がかかるという法則です。そのため、操作を早くするためには選択肢をできるだけ少なくすることが大切です。 この本の重要な指摘： 本書には、「難しい問題解決や、文章を読んでじっくり考えるタスクには、この法則は使えない」とはっきり書かれています。 イラストを描くときはじっくり考えることが多いため、この法則を無理に使うと逆効果になります。そのため、サイト内で以下のように分けて考えます。 1、イラストの構造学習エリア（法則を盲目的に適用しない領域）： イラストのレイヤー構造（下描き、線画、影、仕上げなど）や複雑な画面構成を分解して学ぶエリアは、深い認知を伴う「学習活動」の場です。教学用イラストは元々、複数の複雑な要素や階層的な情報が有機的に結合して成り立っています。ここでヒックの法則を機械的に適用し、情報量やレイヤーの選択肢を過剰に減らしすぎると、イラストの描き方の本質や全体像が伝わらなくなり、学習効果において逆効果になってしまうと思います。 2、ウェブサイトの機能操作エリア（法則を厳格に適用する領域）： 「次のステップへ進む」「カテゴリーを選択する」といった、ユーザーを迷わせたくないナビゲーションやシステム操作の領域には、ヒックの法則を厳格に適用します。UI上の選択肢やボタンの数を最小限に絞り込み、直感的に操作できるようにすることで、ユーザーがサイトの操作方法自体に脳のワーキングメモを消費してしまうのを防ぎます。これにより、初学者の余計な認知負荷を徹底的に排除し、イラスト学習そのものに集中できる環境を整えます。 どの画面の選択肢を減らし、どの画面の選択肢を自由に選ばせるか。このバランスが適切かどうかを、下半期の実験（NASA-TLX）における、ユーザーの精神的負荷（Mental Demand）や努力（Effort）を測定して確かめます。 ~ ***&scale(110){3. 遂行の負担（P148）};[4] 「遂行の負担（Performance Load）」とは、ユーザーがある目標を達成するために必要とする精神的・肉体的な労力の総量を指します。本法則では、この負担が以下の2つの要素で構成されていると述べられています。 1.認知の負担（Cognitive Load）：知覚、記憶、思考、判断などの精神的な活動。 2.運動の負担（Kinematic Load）：身体的な動作、操作の回数、物理的なコントロールなどの肉体的な活動。 デザインにおいて全体の「遂行の負担」を軽減することは、ユーザーの作業効率を高め、エラーを減らし、学習や操作の成功率を向上させるための不可欠な原則です。 本研究で開発する初心者向けイラスト学習システムにおいて、既存の教材は、初心者に過度な「遂行の負担」を強いていると定義し、本理論をベースに以下の対策を最適化します。 1. 認知の負担の軽減： 複雑なイラストの制作工程を「チャンキング」によって4つ程度のステップに最適化し、「段階的開示」を用いた階層的な情報提示を行います。これにより、一度に脳に流れ込む情報量を制御し、初心者が情報の多さに圧倒されるのを防ぎます。 2. 運動の負担の軽減： イラスト画面とレイヤー領域が直感的に連動する「双方向連動インタラクション」を実装します。ユーザーが特定の描き方を確認する際、画面内を何度もクリックして探したり、視線を激しく往復させたりする無駄な探索行動を最小限に抑えます。 本理論が示す2つの負担を下半期の評価実験（NASA-TLX）における「精神的要求（Mental Demand）」「フラストレーション（Frustration）」、および「努力（Effort）」の各スコアの低減と直接対応させ、有効性を定量的に検証します。 ~ ***&scale(110){4. 画像の優位性（P152）};[5] 「画像の優位性（Picture Superiority Effect）」とは、文字よりも画像（イラストや写真）のほうが認識・記憶されやすいという法則である。特に「具体的で分かりやすい絵」と「言葉（文字）」が矛盾なく組み合わされた場合に効果が最大化し、逆に両者に不一致があると記憶の妨げとなります。 本研究のイラスト学習サイトでは、本法則をコンテンツおよびUI設計の基準として導入します。 1.絵と言葉の最適配置：各描画ステップにおいて、説明文と見本イラストを必ず一対一のセットで提示します。 2.情報の整合性（UI設計）：テキスト解説と提示されるイラストのステップを完全に一致させ、情報の干渉を未然に防ぎます。 絵と言葉の流暢な連動により、テキストから意味を推測する無駄な認知負荷を排除します。評価実験（NASA-TLX）における「精神的要求（Mental Demand）」および「努力（Effort）」の低減、ならびに「作業パフォーマンス（Performance）」の向上を定量的に検証するロジックとなります。 ~ ***&scale(110){5. シグナル・ノイズ比（Signal-to-Noise Ratio）（P182）};[6] 「シグナル・ノイズ比（以下、SN比）」とは、提示される情報において、ユーザーが受け取るべき適切なメッセージ（シグナル）と、それを阻害する不要な情報（ノイズ）の比率を指します。デザインの目的は、重要なシグナルを最大化し、不要なノイズを最小化すること（高SN比）です。画面内に余計な装飾、関連性の低いテキスト、複雑すぎるインターフェース（UI）が存在すると、ユーザーは情報の仕分けに余計なエネルギーを費やし、認知過負荷を引き起こす原因となります。 既存の教材は、プロ向けソフトの複雑な画面がそのまま掲載されており、初学者にとって「ノイズ」が多いです。これが外在的認知負荷を高め、学習意欲を削ぐ要因となっています。 解決策（SN比の向上）： 1.ノイズカット： 現ステップに不要な要素の非表示・簡略化。 2.シグナル強調： 「段階的開示」と「双方向連動インタラクション」による、対象レイヤー・描画手順の明示。 本設計によるSN比の向上は、不要な視覚情報の仕分けストレスを減らすことで、評価実験（NASA-TLX）における「精神的要求（Mental Demand）」および「フラストレーション（Frustration）」の負荷軽減を定量的に検証します。 ~ ~ **参考文献： ''[1]''ウィリアム・リドウェル，クリティナ・ホールデン，ジル・バトラー (著), 小竹由加里 (訳) (2004).『Design Rule Index デザイン、新・100の法則』ビー・エヌ・エヌ. ''[2]''Cowan, N. (2001). The magical number 4 in short-term memory: A reconsideration of mental storage capacity. Behavioral and Brain Sciences, 24(1), 87–114. ''[3]''Hick, W. E. (1952). On the rate of gain of information. Quarterly Journal of Experimental Psychology, 4(1), 11–26. Hyman, R. (1953). Stimulus information as a determinant of reaction time. Journal of Experimental Psychology, 45(3), 188–196. ''[4]''Norman, D. A. (1988). The Psychology of Everyday Things. Basic Books. Sanders, M. S., & McCormick, E. J. (1993). Human Factors in Engineering and Design (7th ed.). McGraw-Hill. ''[5]''Paivio, A. (1971). Imagery and Verbal Processes. Holt, Rinehart and Winston. Nelson, D. L., Reed, V. S., & Walling, J. R. (1976). Picture superiority in free recall: Imagery or dual coding? Journal of Experimental Psychology: Human Learning and Memory, 2(5), 523–528. ''[6]''Tufte, E. R. (1983). The Visual Display of Quantitative Information. Graphics Press. Green, D. M., & Swets, J. A. (1966). Signal Detection Theory and Psychophysics. John Wiley & Sons.