手拍子でリズムを作ってから、画面に置く
遊びを見つける執筆にClaudeを使用しています。
16個のマスが並んだ画面を前にすると、「どこに置けばいいのか」が分からなくなりがちです。空いているマスを順に埋めたくなり、気づくと全部のマスに音が入っていて、ただ忙しいだけのループになっていることがあります。 この記事で確かめるのは、先に手拍子でリズムを決めておけば、画面ではそれを写すだけで済むのではないか、という点です。体で作ったリズムには、「ここは叩かない」という休みの位置がすでに含まれています。休みを先に決めておけば、マスを埋めたい衝動に流されにくくなります。 流れは3つです。手拍子を作り、16ステップの番号に数え直し、「WAVE / WAVE」に置いて聴き比べます。数え直しの手伝いとして、キーボードで叩いた位置を16マスに変換する短いHTMLも用意しました。コードなしでも、紙とペンがあれば進められます。
準備するもの
- 「WAVE / WAVE」を開いたブラウザ。4つの音を16ステップに並べてループ再生するリズムスタジオです。
- 紙とペン。16マスの表を手書きします。
- 静かな場所。手拍子の音と、ループの音を聴き分けるためです。
- 任意で、後述のHTMLファイルを保存するテキストエディタ。
「WAVE / WAVE」には保存機能があります。作ったパターンは次に開いたときも引き継げます。ただし、4つの音がそれぞれどんな音色かは、この記事では扱いません。作品を開いて、音を鳴らして確かめてください。
16ステップと手拍子の対応を決める
数え直しに入る前に、画面の16ステップと手拍子の関係を整理します。
1小節を4拍と考えると、1拍を4つに割ったものが1ステップです。16ステップは4拍分に当たります。4拍の声かけは次のとおりです。
ステップ: 1 2 3 4 | 5 6 7 8 | 9 10 11 12 | 13 14 15 16
声かけ : 1 e & a | 2 e & a | 3 e & a | 4 e & a「1・2・3・4」と言う位置が、ステップ1・5・9・13です。つまり拍の頭はいつも4つおきに来ます。覚えておくのはこれだけです。
テンポ（BPM）と1ステップの長さの関係は、次の計算で出せます。
- 90、1拍の長さ：約667ミリ秒、1ステップの長さ：約167ミリ秒
- 120、1拍の長さ：500ミリ秒、1ステップの長さ：125ミリ秒
式は「60000 ÷ BPM ÷ 4」です。テンポを上げるほど1ステップは短くなり、手拍子のずれが目立ちます。最初は90前後のゆるやかなテンポで始めるのが無難です。
手順：手拍子を作って、紙に写す
- テンポを決めます。 画面を見ずに、足で一定の拍を刻みます。そのまま「1・2・3・4」と数えられる速さにします。
- 4拍のカウントを体に入れます。 足で拍を刻みながら、声を出さずに4拍数えます。これを数回繰り返して、1小節の長さを体で覚えます。
- 1小節の手拍子パターンを作ります。 叩く回数は4〜7回程度にします。すべての拍の頭で叩くだけでも成立します。1か所だけ拍の間に入れると、一気に「自分のリズム」になります。
- 同じパターンを3回続けて叩きます。 毎回同じ位置で叩けるかを確かめます。2回目で変わってしまう場所があれば、そこは自分でも決まっていない場所です。いったん休みにして、先へ進みます。
- 声かけをつけて叩き直します。 「1 e & a 2 e & a…」と声に出し、叩いた瞬間の声かけを覚えます。たとえば「1」「&」「2」「3」で叩いたなら、叩いた位置はステップ1・3・5・9です。
- 紙に16マスを書いて印をつけます。 上段にステップ番号、下段に「叩く＝x」「休み＝.」を書きます。
番号: 1 2 3 4 | 5 6 7 8 | 9 10 11 12 | 13 14 15 16
紙 : x . x . | x . . . | x . . . | . . . .この例は説明用の形です。実際のパターンは、自分の手拍子から作ってください。
手順：叩いた位置をコードで16マスに変換する
声かけで位置を特定するのが難しい場合は、機械に数えてもらう方法があります。スペースキーを手拍子の代わりに叩くと、叩いた時刻から16ステップ上の位置を計算して表示するHTMLです。
1小節のカウント後、2小節ぶん叩きます。同じステップに2回とも叩けた場合は「x」、片方だけなら「?」、叩かなければ「.」と表示します。
<!doctype html>
<meta charset="utf-8">
<title>16ステップ変換</title>
<p>BPM <input id="bpm" type="number" value="90" min="60" max="160">
<button id="go">開始</button></p>
<p id="msg">開始後、4拍のカウントのあと2小節の間、スペースキーで叩きます。</p>
<pre id="out"></pre>
<script>
const $ = id => document.getElementById(id);
let t0, stepMs, taps = [], running = false;
$("go").onclick = () => {
if (running) return;
const beatMs = 60000 / $("bpm").value;
stepMs = beatMs / 4;
taps = []; running = true;
t0 = performance.now() + beatMs * 4;
let n = 0;
const tick = () => {
if (n === 12) { clearInterval(timer); return finish(); }
$("msg").textContent = n < 4 ? "カウント " + (n + 1) : "録音中 " + (n - 3) + "/8";
n++;
};
const timer = setInterval(tick, beatMs);
tick();
};
addEventListener("keydown", e => {
if (e.code === "Space" && running && !e.repeat) {
e.preventDefault();
taps.push(performance.now());
}
});
function finish() {
running = false;
const c = Array(16).fill(0);
taps.forEach(t => {
const i = Math.round((t - t0) / stepMs);
if (i >= 0 && i < 32) c[i % 16]++;
});
const row = c.map(v => v >= 2 ? "x" : v === 1 ? "?" : ".");
$("msg").textContent = "終了。x＝2回とも一致、?＝片方のみ、.＝休み";
$("out").textContent = row.join("").replace(/(.{4})/g, "$1 ");
}
</script>テキストエディタに貼り付け、「step.html」のような名前で保存し、ブラウザで開くと動きます。外部ライブラリは使いません。
表示の読み方
結果の見方は次の基準で判断します。
- 「x」が並んでいる位置は、2小節とも同じ場所で叩けています。これが手拍子の骨格です。
- 「?」が多い場合は、叩く位置が安定していません。テンポを下げるか、パターンの叩く回数を減らして再挑戦します。
- 全体が1ステップずつ前後にずれている場合は、押し始めが早い、または遅いという癖の可能性があります。ステップの長さの半分を超えてずれると、隣のマスに丸められます。90BPMなら約83ミリ秒が目安です。
- キーボードの入力にはわずかな遅れがあります。 手拍子の音そのものとは、ずれが出る場合があります。機械の結果は絶対の答えではなく、紙に書いた印と食い違うところを見つける道具として使ってください。
手順：「WAVE / WAVE」に置く
紙の16マスが決まったら、画面に移します。
- 「WAVE / WAVE」を開き、まずテンポを決めた値に合わせます。 テンポの調整欄があります。数値の入力方法や操作の形は、作品を開いて確認してください。
- 4つの音のうち、どれを手拍子の役にするかを決めます。 全部の音を鳴らして聴き、手拍子に近い短い音を選びます。どの音が何に近いかは、作品を開いて確かめてください。
- 紙の「x」の位置だけに音を置きます。 狭い画面ではステップが横に流れ、スクロールが必要です。どこまで置いたか分からなくなったら、4ステップごとに紙へ印をつけながら進めてください。
- ループ再生し、自分の手拍子を重ねます。 画面の音と自分の手拍子が同じ位置で鳴れば成功です。ずれる場所があれば、紙の印と画面を見比べます。
- 1か所ずつ直します。 置き間違いなら位置を直します。直せないほど違和感があれば、取り消しで戻せます。
- 残りの3つの音は、手拍子のすき間に足します。 手拍子の「x」と同じ位置に重ねるか、「.」の位置にずらして置くかで、聞こえ方が変わります。トラックごとのミュートを使って、1つずつ鳴らしたり止めたりしながら確かめてください。
お手本とスウィングの使いどころ
「WAVE / WAVE」には3つのお手本があります。自作のパターンを置く前に、お手本のどこに音が置かれ、どこが空いているかを見ます。自分の紙の16マスと見比べると、「休みの置き方」の参考になります。具体的な内容は、作品を開いて確かめてください。
スウィングの設定もあります。手拍子が少し跳ねる感じ（拍の間が均等でなく、片方が長い感じ）なら、スウィングで合わせる手があります。ただ、効き方の細部は作品ごとに違うため、実際に動かして確かめてください。スウィングを入れる前後で、手拍子と画面のずれが減るかどうかが判断基準です。
パッド演奏の録音も使えます。手拍子を直接ステップに置く代わりに、パッドを叩いて録音する方法です。録音がどう反映されるかは、一度試して確認してください。
起こりやすい失敗
- 手拍子を作る前に画面を開く。 これでは、冒頭の問題がそのまま残ります。最初の2つの手順は、画面なしで行ってください。
- 叩く回数が多すぎる。 叩く回数が8を超えると、画面に置いたときの密度が高くなります。手拍子は少なめに作り、画面で足すのがおすすめです。
- 拍の頭を数え間違える。 「1・2・3・4」の位置は、ステップ1・5・9・13の4つおきです。ここが1つずれると、すべてがずれます。
- ループが1周したとき、最後のステップから最初のステップへのつなぎを忘れる。 手拍子のパターンの最後に休みが多いと、ループの頭の音が目立ちます。通しで何周か聴いて確認します。
- 一度に全部を決めようとする。 手拍子の骨格だけを先に置き、他の音は後から重ねてください。
次の行動
まず足で拍を刻み、1小節ぶんの手拍子パターンを3回続けて叩けるか確かめてください。次に、紙の16マスに印をつけ、「WAVE / WAVE」で同じ位置に音を置いて聴き比べます。位置の確認が難しければ、上のHTMLで叩いた位置を表示させ、紙と見比べてみてください。
