カードの角の丸みを変えると、作品はどう見えるか

問いを一つに絞る

問いは次の一文に絞ります。「同じ内容のカードで角の半径だけを変えたとき、『やわらかい』と『まじめ』の評価はどう動くか」。

ここで二つの評価を別の軸として扱うことが大切です。「やわらかい」の反対を「まじめ」とみなすと、一本の物差しに押し込めることになります。やわらかくてまじめな印象は両立しえますし、かたくてくだけた印象もありえます。2つの質問を独立に尋ねれば、丸みが2つの印象に同じ向きで効くのか、別々に効くのかを読み取れます。

比べる条件は、半径0、4、12、24、40pxの5つにします。0は直角の基準で、40は大きめの丸みです。差が小さすぎると見分けにくくなるので、間隔は等間隔にせず広げています。

• A、半径：0px、ねらい：直角の基準
• B、半径：4px、ねらい：ほぼ直角に見える微小な丸み
• C、半径：12px、ねらい：一般的な控えめな丸み
• D、半径：24px、ねらい：はっきり丸いと分かる
• E、半径：40px、ねらい：大きな丸み

準備するもの

• 評価してくれる人を5人以上。ゲームを作る友人でも、普段あまりゲームをしない人でも構いません。ただし、全員が同じ種類の人に偏らないようにします。
• 同じ画面サイズで見られる環境。可能なら全員に同じ端末と同じ拡大率で見てもらいます。
• 下のHTMLファイル。ブラウザで開くだけで動き、外部ライブラリも通信も使いません。
• 紙かメモアプリ。評価者の属性（ゲームをよく遊ぶか、など）を記録するために使います。

カードの中身は、実際に自分が作る作品のタイトルと一行説明に差し替えてください。実際の素材で試すほど、判断に直結する答えが得られます。

<!doctype html>
<meta charset="utf-8">
<title>角丸の実験</title>
<style>
body{font-family:sans-serif;max-width:480px;margin:2em auto}
.card{width:240px;height:160px;padding:16px;box-sizing:border-box;background:#f4efe6;border:2px solid #4a3f35;margin:16px 0}
label{display:block;margin:6px 0}
</style>
<h1>角丸の実験</h1>
<div class="card" id="card"><b>月夜の配達</b><p>小包を三つ運ぶ経路パズル</p></div>
<div id="ui"></div>
<pre id="out"></pre>
<script>
const radii=[0,4,12,24,40];
const items=["やわらかい","まじめ"];
let order=radii.slice().sort(()=>Math.random()-.5);
let i=0, rows=[];
const card=document.getElementById("card");
const ui=document.getElementById("ui");
function show(){
 if(i>=order.length){ui.textContent="終了";
  document.getElementById("out").textContent="radius,"+items.join(",")+"\n"+rows.join("\n");return;}
 card.style.borderRadius=order[i]+"px";
 ui.innerHTML=items.map((t,k)=>`<label>${t}（1=全く違う〜7=とてもそう）<input type="number" min="1" max="7" id="q${k}"></label>`).join("")+'<button id="next">次へ</button>';
 document.getElementById("next").onclick=()=>{
  const v=items.map((_,k)=>document.getElementById("q"+k).value);
  if(v.some(x=>!x))return;
  rows.push(order[i]+","+v.join(","));i++;show();};
}
show();
</script>

このコードは、開くたびに5つの半径を順不同で1枚ずつ表示し、2つの質問に1〜7で答えてもらい、最後に「半径,やわらかい,まじめ」のCSV形式で結果を表示します。保存はしないので、終了画面の文字をコピーして控えてください。順序の入れ替えは簡易的なものなので、厳密に均等にしたい場合は、後述の順序の対策を手作業で併用します。

手順と記録の取り方

評価者には、実験の狙いを伝えずに画面を渡します。「角の丸みを調べている」と知らせると、丸みに注目して答えてしまうからです。伝えるのは「カードの印象を、直感で1〜7で答えてください」だけにします。

手順は次のとおりです。

1. 評価者に画面を渡し、1枚ずつ表示される5枚のカードに、2つの質問へ1〜7で答えてもらいます。
2. 終了画面のCSVをコピーして、評価者の名前（仮名で構いません）とともに控えます。
3. 評価者を変えて、同じ手順を繰り返します。ページを読み込み直すと並び順が変わります。
4. 全員分が終わったら、半径ごとに「やわらかい」と「まじめ」の平均を出します。ばらつきも見たいので、最小値と最大値も併せて書き出します。

記録の単位は「評価者1人×半径1つ×質問1つ」で1件です。5人が5条件に答えると、質問2つで合計50件になります。まず条件ごとの平均を見て、そのあとで評価者ごとの動き方を確認します。平均だけでは、全員が少しずつ動いたのか、一人だけが大きく動いたのかを区別できないからです。

同じ人に別の日にもう一度やってもらえば、答えが安定しているかも確認できます。評価が日によって大きく変わるなら、印象の差を丸みの効果とみなすのは慎重にしたほうがよい、という判断材料になります。

結果の読み方

平均を半径の順に並べ、「やわらかい」と「まじめ」を別々に折れ線として見ます。読み取りは、次のように分岐して考えます。

• 半径が増えるほど「やわらかい」が右肩上がりに増える場合：丸みは連続的に効いています。作品の雰囲気に合う位置を、自由に選べます。
• 0pxと4pxは同程度で、12px付近から急に上がる場合：4px程度の丸みは印象としては直角と変わらず、はっきり丸いと見えるには一定以上の半径が必要だと読めます。
• 24pxと40pxに差がない場合：頭打ちです。大きく丸める意味が薄いので、小さいほうを選んでも印象は変わりません。
• 「やわらかい」は上がるのに「まじめ」はほぼ動かない場合：2つの軸は別物だと分かります。まじめさは、丸みではなく色や文字で決めるほうが効くかもしれません。
• 「やわらかい」が上がるほど「まじめ」が下がる場合：両者がトレードオフになっています。作品が目指す印象に合わせて、どちらを優先するかを決めます。

評価者間でばらつきが大きい場合は、平均の差を過信しないでください。たとえば、ある条件の評価が1と7に割れているなら、その丸みは見る人によって受け取り方が違うということです。人数が5人程度では、差があるように見えても偶然の範囲かもしれません。差が小さいときは「違いがある」とは断定せず、人数を増やして再度測るのが妥当です。

誤りやすい点

実験を台なしにしやすいのは、次の点です。

• 丸み以外が変わっている：色、影、枠線の太さ、文字が条件ごとに違うと、何が効いたのか分からなくなります。変えてよいのは border-radius の値だけです。
• カードの大きさで印象が変わる：丸みは、カードの大きさとの比で見え方が決まります。CSSの角丸は短辺の半分を超えると見た目が同じになるため、高さ160pxのカードでは80px以上を試しても意味がありません。大きさの違う別のカードに結果を当てはめるときは、半径をそのまま流用せず、比率で考え直してください。
• 順序効果：先に見た直角のカードが基準になり、次のカードが相対的に丸く感じられることがあります。ランダムな順序で多人数に見てもらうと、この影響は薄まります。人数が少ないときは、評価者ごとに表示順を変えて偏りを避けてください。
• 質問の言い方が誘導的になる：「丸いカードのほうがやわらかいですよね」のような聞き方は避けます。1〜7の数字だけを答えてもらってください。
• 見る環境の違い：スマートフォンとパソコンで見え方が変わります。作品を遊ぶ環境が主にどちらなのかを決め、その環境で評価してもらうのが確実です。
• 評価者が作り手に気を使う：知り合いは、好意的な点を付けがちです。「正解はありません」と一言添え、名前は仮名で記録します。

次の行動

まず、いま作っている作品のタイトルと一行説明でカードを作り、半径を5段階に振って、身近な3人に見てもらってください。そこで差が見えたら人数を増やし、見えなかったら丸みよりも色や文字に時間をかけるという判断ができます。結果が出たら、選んだ半径を作品の紹介素材に反映し、公開前の下書きで見え方を確かめてみてください。