デザインしていて、大きさや色などを数値で設定すると思った感じにならないことってありますよね。（わたしはある！ｗ）

これは人間の認知が値に単純に比例して反応するのではなく、「強さの対数に比例する」からのようです。

• １００円持っていて１００円増えたら嬉しさ１００だった（🙂）

• ２００円持っていて１００円増えたら嬉しさ３７だった（🤔）

• ２００円持っていて２００円増えたら嬉しさ１００だった（🙂）

みたいな話です。これは生理的なもので人間の認知が電気や化学物質などによる物理現象、メカニカルな神経回路で出来ていることに起因しているようです。（気分とかココロではない）

調べるとこういうグラフがたくさんでてきました。

ウェーバー・フェヒナーの法則

たとえば、100の刺激が倍に増加して200になるときの感覚量と、200の刺激が倍に増加して400になるときの感覚量の変化は等しい。

ウェーバー・フェヒナーの法則は、「人間の感覚の大きさは、受ける刺激の強さの対数に比例する」という基本法則です。 人間の五感への中ぐらいの刺激に対しては、"ちょうど良い"近似となることが知られています。 ウェーバーの法則を弟子のフェヒナーが発展させて導き出したので、ウェーバー・フェヒナーの法則と呼ばれています。

認知心理学の定義

「認知」というのは心理学用語の１つで、「人間が何かを見たり聞いたりしたあと、それについて考えたり覚えたりすること」
認知心理学はコンピューターの発達、情報科学の発展に後押しされる形で生まれた分野で、認知心理学では人間の情報処理をコンピューター的に置き換えて理解しようとします。すなわち数値化して分析するわけです。

これってもしかして?🎮️

そういえば、これってゲーム制作をする時に作るレベルアップの経験値とかアイテムの値段と同じ。。。一定に数値を上げてもゲーム性が出ず、倍々ぎみにインフレさせる必要があります。このあたりのさじ加減が製作ノウハウになるのですが、人間はすぐに学習してしまうので更に敵の見た目やシナリオなどに合わせて人為的に波を付ける必要があったりします。

下のグラフはネットで見つけたドラクエ３の経験値グラフ。

こちらの記事には更に詳しい考察がありました。勉強になる！（笑

🎨デザインに応用！

つーことはですよ？これを利用してデザインすれば「わかりやすい」表示になるのでは？？？

フォントサイズに利用してみる

H1,H2などの見出しのサイズは感覚的に差が感じられないことが多く、不思議に思っていました。試しにChatGPTにh6が基本サイズの16pxでフェヒナーの法則で作成してもらったのが下の例です。

:root {
  /* H6を基準としたフォントサイズ (16px) */
  --font-size-h6: 16px;   /* 基準フォントサイズ */
  --font-size-h5: 18.9px; /* 16 * e^(1/4) */
  --font-size-h4: 22.3px; /* 16 * e^(1/3) */
  --font-size-h3: 27.3px; /* 16 * e^(1/2) */
  --font-size-h2: 36.3px; /* 16 * e^(2/3) */
  --font-size-h1: 58.0px; /* 16 * e^1 */
}

body {
  font-size: 16px; /* p, span の基準サイズ */
}

h6 {
  font-size: var(--font-size-h6);
}

h5 {
  font-size: var(--font-size-h5);
}

h4 {
  font-size: var(--font-size-h4);
}

h3 {
  font-size: var(--font-size-h3);
}

h2 {
  font-size: var(--font-size-h2);
}

h1 {
  font-size: var(--font-size-h1);
}

カラーテーマに応用

:root {
  /* 最も暗い色を基準に設定 */
  --base-hue: 207; /* メインテーマカラーの色相 (例: 青系) */
  --base-saturation: 70%; /* 彩度 */
  --base-lightness: 20%; /* 最も暗い明度 */
  --scale-factor: 2.718; /* ネイピア数 */

  /* 計算済みのテーマカラー */
  --color-dark-3: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) * 1));           /* 最も暗い色 */
  --color-dark-2: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) * 1.189));      /* e^(1/4) */
  --color-dark-1: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) * 1.414));      /* e^(1/3) */
  --color-main:   hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) * 1.732));      /* e^(1/2) */
  --color-light-1: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) * 2.0));       /* e^(2/3) */
  --color-light-2: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) * 2.718));     /* e^(1) */
}

body {
  background: var(--color-main);
}

.gradient {
  background: linear-gradient(
    to right,
    var(--color-dark-3),
    var(--color-dark-2),
    var(--color-dark-1),
    var(--color-main),
    var(--color-light-1),
    var(--color-light-2)
  );
}

良さそう。
人間の色や明るさの判定は均一ではないので色についてはさほど有用性は無いかもですが、アニメーションでは検討事項にしても良さそうです。

認知心理学の成果ではミュラー・リヤーの錯視など錯覚の存在が広く知られていますが、WebデザインでUIやCSS調整するのにすぐに使えるハックって無いでしょうか。

ChatGPT先生に文献を相談してみる

先生には無理を言って申し訳ないのですが、無いなりに頑張って提示してくださいましたね。ありがとう先生🤖

記事

こちらの記事が内容が広くて勉強になります。この中で気になるものを調べるのも良さそう。でもトリビア中心ですぐに使えるハック、という感じではありません。

本

２つ紹介してくれました。自分でも探しましたが、意外なほど出てこないですね。

論文ぽいもの

こちらもすぐに使えるハックみたいなのは意外なほど見つかりませんでした。

DEMO

あんまり人気がないのかなぁ。暇ができたら独自にCSSやツールを作ろうかな。デザインの本を読んでも論理的な理由の説明がほとんど無くオカルト状態になりやすいので、暇見て掘っていきたいなと思いました。