雨音のピアノの鍵盤：鍵の数と画面の幅の関係

鍵の数と幅をつなぐ式

画面の横幅を W、左右の余白を片側 m、見えている白鍵の数を n とします。単位はすべてCSSピクセル（ブラウザが基準にする仮想の画素。実機の物理画素とは別です）です。このとき、白鍵1本の幅はおおよそ次のとおりです。

白鍵の幅 ＝（W − 2m）÷ n

黒鍵は白鍵の境目に重なる細い鍵です。実物のピアノでも白鍵より細く作られています。画面上の比率は作品ごとに違うはずなので、ここでは仮に「白鍵の0.6倍」と置きます。この0.6は計算を示すための仮定で、作品の実際の値ではありません。

次の表は、W と n を変えたときの算術例です。W=360、余白 m=8 は仮の数字で、特定の端末や作品の実測値ではありません。

• 7、白鍵の幅（W=360）：約49.1、黒鍵の幅（0.6倍）：約29.5、白鍵の幅（W=780、横向き想定）：約109.1、黒鍵の幅（0.6倍）：約65.5
• 14、白鍵の幅（W=360）：約24.6、黒鍵の幅（0.6倍）：約14.7、白鍵の幅（W=780、横向き想定）：約54.6、黒鍵の幅（0.6倍）：約32.7
• 21、白鍵の幅（W=360）：約16.4、黒鍵の幅（0.6倍）：約9.8、白鍵の幅（W=780、横向き想定）：約36.4、黒鍵の幅（0.6倍）：約21.8

鍵の数が2倍になれば、幅は半分になります。縦持ちの狭い画面で白鍵を14本並べると、黒鍵はかなり細くなります。この表の中で、黒鍵が先に限界を迎えることは読み取れます。

比べる基準も用意します。タッチ操作の目標の大きさについては、公開されている指針があります。

• WCAG 2.2の「ターゲットのサイズ（最小）」は、24×24 CSSピクセルを下限の目安にしています。
• AppleのHuman Interface Guidelinesは、44×44ポイントを推奨としています。
• GoogleのMaterial Designは、48×48dpを目安にしています。

どれも「押す対象が単独で置かれている」ことを前提にした目安です。鍵盤のように隣と接して並ぶ配置では、実際の押しやすさは鍵の高さや押す位置にも左右されます。これらは合否の線ではなく、比べるための物差しとして使います。

雨音のピアノのキー割り当てから読めること

作品の確認済みの仕様には、PCキーボードの割り当てがあります。A W S E D F T G Y H U J の12個で、音域はZとXで動かします。

この並びを鍵盤に重ねてみます。A S D F G H J の7個が白鍵、W E T Y U の5個が黒鍵に当たります。合わせて12個で、ピアノの1オクターブ分の音（白7、黒5）と数が一致します。

ここから「設計から読み取れること」として言えるのは次の点です。キーボード操作は1オクターブ分を手元に置き、音域の移動をZとXに任せる作りになっています。広い音域を一度に並べないことは、画面の鍵を太く保つ方向の設計とも読めます。

ただし、これはキー割り当てからの推測です。画面に表示される鍵の数が7本なのか、それ以上なのかは、確認済み事項にありません。縦持ちと横持ちで鍵の数が変わるのか、鍵盤が横にスクロールするのかも同様です。この部分は作品を開いて確かめます。

手順：画面の幅を測り、押し間違いを数える

以下の手順は、2段で構成します。まず「鍵を数えて幅を出す」、次に「押し間違いを数える」です。

手順1：鍵を数えて幅を求める

準備するものは、確かめたい端末、スクリーンショットを撮る手段、記録用の表です。表の列は次のようにします。

• 端末名（または画面サイズ）
• 縦持ちか横持ちか
• 画面の幅（CSSピクセル）
• 見える白鍵の数と黒鍵の数
• 白鍵の幅と黒鍵の幅（CSSピクセル）

手順は次のとおりです。

1. 作品を開き、端末を縦に持った状態で、画面に見えている白鍵と黒鍵を数えます。数え方は、左端から順に指でなぞるのが確実です。
2. 同じ状態でスクリーンショットを撮ります。画像の横幅（ピクセル）を、端末の画素比（devicePixelRatio）で割ると、おおよそのCSSピクセル幅になります。画素比はスマホで2〜3前後のことが多く、端末ごとに違います。端末の仕様か、ブラウザの開発者ツールで確認します。
3. 画像上で鍵盤の左端と右端のピクセル位置を読み、画素比で割って鍵盤全体の幅を出します。これを白鍵の数で割れば、白鍵1本の幅が出ます。黒鍵は画像上で1本の幅を直接読み、同じく画素比で割ります。
4. 横持ちでも同じ記録を取ります。

式の確認用に、手元で動く最小の計算ページを置きます。保存して .html として開けば動き、外部通信もありません。

<!doctype html>
<meta charset="utf-8">
<title>鍵幅の計算</title>
<p>
  <label>画面の幅 <input id="w" type="number" value="360"></label>
  <label>片側の余白 <input id="m" type="number" value="8"></label>
  <label>白鍵の数 <input id="n" type="number" value="7"></label>
  <label>黒鍵の比 <input id="r" type="number" step="0.1" value="0.6"></label>
</p>
<pre id="out"></pre>
<script>
const $ = id => document.getElementById(id);
function calc() {
  const W = +$("w").value, m = +$("m").value;
  const n = +$("n").value, r = +$("r").value;
  const white = (W - 2 * m) / n, black = white * r;
  const mark = (v, t) => v >= t ? "以上" : "未満";
  $("out").textContent =
    "白鍵: " + white.toFixed(1) + " px\n" +
    "黒鍵: " + black.toFixed(1) + " px\n" +
    "白鍵は24pxに対して" + mark(white, 24) + "、44pxに対して" + mark(white, 44) + "\n" +
    "黒鍵は24pxに対して" + mark(black, 24) + "、44pxに対して" + mark(black, 44);
}
document.addEventListener("input", calc);
calc();
</script>

この計算ページは予測用です。実測で出した値と並べて、式がどれだけ実際に近いかも確かめられます。ずれが大きければ、鍵盤の左右に余白があるか、鍵の間に隙間があるかを疑います。

手順2：押し間違いを数える

幅が分かっても、押しやすさは別に確かめる必要があります。ここでは「狙った鍵と違う音が鳴った回数」を数えます。

押す位置は、次の3種類に分けます。

• 白鍵の中央
• 白鍵のうち、黒鍵に接する縁に近い位置
• 黒鍵

各位置を1セット10回ずつ押します。1回ごとに、狙った音と実際に鳴った音が同じかを記録します。音の判断が難しい場合は、2人組にします。1人が押し、もう1人が画面の反応を見て記録します。作品の録音機能（30秒・128音まで）で押した音を残し、再生して聞き直す方法も使えます。画面の反応の見え方や、再生時の表示は、作品を開いて確かめます。

条件は次の2軸で変えます。

• 持ち方：片手で持って親指で押す場合と、持った手と反対の人差し指で押す場合
• 向き：縦持ちと横持ち

集計の単位は「押した10回のうち、違う音が鳴った回数」です。条件の組み合わせごとに別の行に書き、押す日や時間帯が違っても比べられるようにします。1条件につき3セット行い、平均よりも最大値と最小値の幅を見ると、安定しているかが分かります。

結果の読み方と起こりやすい誤り

結果の読み方は、次の観点で整理します。

• 白鍵の幅が44前後以上、黒鍵の幅が24以上あり、違う音が鳴る回数が少ない場合：その向きと持ち方では、鍵の幅が押しやすさを損なっていない可能性が高いと判断します。
• 黒鍵の幅だけが24を下回り、間違いが黒鍵と白鍵の境目に集中する場合：黒鍵の細さが原因です。同じ式で、鍵の数を減らすか画面幅を広げれば改善する余地があると読みます。
• 幅は十分なのに間違いが多い場合：幅以外が原因です。鍵の高さ、押した位置の判定のしかた、持ち方による指のずれなどを疑い、幅の議論を切り離します。
• 縦と横で間違いの回数が大きく違う場合：画面幅が効いています。横持ちで鍵が太くなる分、縦の高さは減るので、高さ側の使いやすさも見ます。

起こりやすい誤りもあります。

• スクリーンショットのピクセルをそのままCSSピクセルとして扱ってしまうことです。必ず画素比で割ります。
• PCのブラウザで窓を狭めてマウスで押し、指の代わりにしてしまうことです。マウスの先は指よりずっと細いため、押し間違いの傾向が実機と大きく違います。窓を狭める方法は、鍵の数や幅の確認までにとどめます。
• 黒鍵の比率を「仮定」のまま結論に使ってしまうことです。0.6はあくまで計算用で、作品の実際の比率は画面で測った値を使います。
• 画面の拡大を使うと、見える鍵の数や実効の幅が変わる場合があります。拡大の状態を揃えて記録するか、拡大の前後を別条件として扱います。拡大時の挙動は作品を開いて確かめます。
• 1回の試行で結論を出してしまうことです。10回×3セットで、ばらつきも見ます。

次の行動

まず自分のスマホで「雨音のピアノ」を縦持ちで開き、見えている白鍵と黒鍵を数えてください。それから、スクリーンショットで白鍵と黒鍵の幅を求め、上の式の予測と並べてみます。余裕があれば、横持ちでも同じ記録を取り、押し間違いの回数を比べてみます。

参考資料

• W3C「Web Content Accessibility Guidelines (WCAG) 2.2」達成基準 2.5.8 ターゲットのサイズ（最小）
• Apple「Human Interface Guidelines」のタッチ操作とコントロールのサイズに関する指針
• Google「Material Design」のタッチターゲットのサイズに関する指針