クモのようにコツコツと

フロントエンドエンジニア イイダリョウのブログ。略称「クモコツ」

【Tone.js】和音楽器に五和音(テンションコード)他を追加する

Tone.jsの続きです。前回は和音楽器に四和音(セブンス、シックスス)を追加しました。今回は五和音(テンションコード)などを追加してみます。それでは行きましょう!

【目次】

前回記事
※参考:【Tone.js】和音鍵盤に四和音(セブンス、シックスス)を追加する - クモのようにコツコツと

※参考:Tone.jsを習得するためにやった事まとめ qiita.com

前回のおさらい

前回の最後の状態はこちら

See the Pen tone.js-12cord- 17 by イイダリョウ (@i_ryo) on CodePen.

三和音(トライアド)四和音(セブンス、シックスス)の切り替えボタンを追加している。

詳細はこちら
※参考:【Tone.js】和音鍵盤に四和音(セブンス、シックスス)を追加する - クモのようにコツコツと

ルートとパワーコードを追加

五和音を追加する前に、ルート(根音)を追加した。和音の構成音を確認する上で構成音の数が増えるとわかりにくいのえ単音と聞き比べたくなったため。

また、おまけでパワーコードも追加した。パワーコードは三和音(トライアド)の二番目の音(3度)を抜いたルート音と5度の音の二和音で「5」と表記する。

See the Pen tone.js-12cord- 19 by イイダリョウ (@i_ryo) on CodePen.

例えばCメジャーセブンス(M7)の構成音「1,5,8,12」を確認するときにルート音のCから鍵盤数を数えると「C,E,G,B」とわかる。これで構成音と和音を聴き比べることができる。

HTMLコード

   <dl>
        <dt>根音</dt>
        <dd>
            <label><input type="radio" id="code_R" name="code_type" value="ルート(R)" onchange="codeTypeSelect()" checked>(R)</label>
            <label><input type="radio" id="code_5" name="code_type" value="パワーコード(5)" onchange="codeTypeSelect()">5</label>
        </dd> 
    </dl>

前回のHTMLコードの「三和音」の上にルートとパワーコードを追加。形式はこれまでと同じ。

JSコード

//コードタイプ
var codeTypes = [
        //ルート音
    {'codeName': '(R)',
        'codeKeys': [1]},
    {'codeName': '(5)',
        'codeKeys': [1,8]},      
        //三和音〜(後略)
]

JSも前回の変数codeTypesの三和音の上にルートとパワーコードの構成音の配列を追加。形式はこれまでと同じでcodeNamecodeKeysからなる連想配列。

ルートとパワーコードの構成音まとめ

単音〜二和音でシンプルな内容だが前回の記事と同じ表でまとめる。

コード名 略称 構成音 備考
ルート (R) 1 根音。和音の一番下の音。(例:「Cメジャー」などの「C」の部分)
パワーコード 5 1,8 ルート音と完全5度の二和音(メジャー、マイナーを決める3度の音がない)

ルート(根音)はコードを探る上での要となる音。ベースの小節頭はルート音になることが多い。

※参考:ルートとは?度とは?/初心者集まれ!指板図くんのギター・コード講座 第5回 | 指板図くんのギター・コード講座 | ギター・マガジン

パワーコードは先ほども書いたようにメジャー、マイナーを決める三度の音がないが安定したパワフルな響きになる。

※参考:ロックには欠かせないパワーコードを使いこなそう! | ビギナーズ

ギターではコードの押さえ方がシンプルで平行移動するだけでコードチェンジができる!

自分はギターはさっぱり弾けないのだが、パワーコードのおかげでNIRVANAの「Smells Like Teen Spirit」のナンちゃってイントロが弾けた!

この曲の実際のコード進行は「Fm→B♭m→A♭→D♭」とマイナーコードとメジャーコードが入り混じっているのだが…

※参考:「Smells Like Teen Spirit」(スメルズ・ライク・ティーン・スピリット) Nirvana(ニルヴァーナ) (ギターコード / ピアノコード) | 楽器.me

右手を「F5→B♭5→A♭5→D♭5」とパワーコードで平行移動するとカート・コバーンになりきることができるw ありがとう、パワーコード!

音名の対応表

音名にはいろいろな表記法がある。和音の構成音を調べる際に知っておくとわかりやすいのでまとめる。

f:id:idr_zz:20200105071056p:plain

和音鍵盤上の表示は英語にしている。

英語 イタリア語 日本語 音度 音程
C I 完全一度
C♯/D♭ ド♯/レ♭ 嬰ハ/変ニ ♭II 増一度/短二度
D II 長二度
D♯/F♭ レ♯/ミ♭ 嬰二/変ホ ♭III 短三度
E III 長三度
F ファ IV 完全四度
F♯/G♭ ファ♯/ソ♭ 嬰へ/変ト ♭V 増四度/減五度
G V 完全五度
G♯/A♭ ソ♯/ラ♭ 嬰ト/変イ ♭VI 増五度/短六度
A VI 長六度
A♯/B♭ ラ♯/シ♭ 嬰イ/変ロ ♭VII 短七度
B VII 長七度
  • イタリア語の「ド」は英語では「C」、日本語では「イ」
  • イタリア語の「ラ」は英語では「A」、日本語では「ハ」
  • 白鍵から半音上がった黒鍵は「♯」、日本語では「嬰」
  • 白鍵から半音下がった黒鍵は「♭」、日本語では「変」
  • 音度の黒鍵は「♭」のみで表記
  • 音程の「長」の半音下げは「短」、「短」の半音上げは「長」
  • 音程の「 完全」の半音上げは「増」、「完全」の半音下げは「減」

いろんな呼び名があってとてもややこしいが、どれも同じ意味になる。(ただし「音頭」と「音程」はルートCからの相対的な呼び名!)

コード名は英語がベースになる。メロディ(音階)はイタリア語がベースになる。日本語は「ト音記号」「ハ長調」など楽譜に多く使われる。

音名の呼び名の違いについてはこちら
※参考:https://yukbass.com/pitch-name/
※参考:http://www.tajima-d.jp/music/basic/05.html

長短、増減などについては前回記事参照
※参考:【Tone.js】和音鍵盤に四和音(セブンス、シックスス)を追加する - クモのようにコツコツと

ピアノの白鍵黒鍵はルートCからのメジャースケールになる。1オクターブの半音数は12音階だがほとんどの音名はこのメジャースケールの8音階がベースになっている。ややこししい。。

※参考:メジャースケールの内容とその覚え方、割り出し方、なぜ必要なのか?について | うちやま作曲教室

ところでドレミはなぜA(イ)からではなく、C(ハ)から始まるのだろうか(これもややこしい。。)

中世における理論家たちが定めた最低音が「A」であったこと、その後、旋法が整理され長調と短調に収斂していった際、「C」を主音とする長調が理論の中心的な存在となったこと。

※参考: 音の呼び方:初学者のための音楽講義

なるほど、作曲の音域としての最低音と長調短調などの理論は確立した時代が違うわけか!

五和音(テンションコード)を追加

次に五和音(テンションコード)を追加してみる。ジャズなどでよく使われる複雑な響き。(クラシックでは不協和とされていた)

See the Pen tone.js-12cord- 20 by イイダリョウ (@i_ryo) on CodePen.

「四和音」の下に「五和音」の選択ボタンを増やした。選択すると

HTMLコード

   <dl>
        <dt>五和音</dt>
        <dd>
            <label><input type="radio" id="code_M9" name="code_type" value="メジャーナインス(M9)" onchange="codeTypeSelect()">M9</label>
            <label><input type="radio" id="code_9" name="code_type" value="ナインス(9)" onchange="codeTypeSelect()">9</label>
            <label><input type="radio" id="code_7_f9" name="code_type" value="セブンス・フラット・ナインス(7(-9))" onchange="codeTypeSelect()">7(-9)</label>
            <label><input type="radio" id="code_7_s9" name="code_type" value="セブンス・シャープ・ナインス(7(+9))" onchange="codeTypeSelect()">7(+9)</label>
            <label><input type="radio" id="code_m7_11" name="code_type" value="マイナー・セブンス・イレブンス(m7(11))" onchange="codeTypeSelect()">m7(11)</label>
            <label><input type="radio" id="code_7_s11" name="code_type" value="セブンス・シャープ・イレブンス(7(+11))" onchange="codeTypeSelect()">7(+11)</label>
            <label><input type="radio" id="code_M7_13" name="code_type" value="メジャー・セブンス・サーティーンズ(M7(13))" onchange="codeTypeSelect()">M7(13)</label>
            <label><input type="radio" id="code_M7_13" name="code_type" value="セブンス・サーティーンズ(M7(13))" onchange="codeTypeSelect()">7(13)</label>
            <label><input type="radio" id="code_M7_f13" name="code_type" value="セブンス・フラット・サーティーンズ(M7(-13))" onchange="codeTypeSelect()">7(-13)</label>
            <label><input type="radio" id="code_69" name="code_type" value="シックス・ナインス(69)" onchange="codeTypeSelect()">69</label>
            <label><input type="radio" id="code_m69" name="code_type" value="マイナー・シックス・ナインス(m69)" onchange="codeTypeSelect()">m69</label>
        </dd>
    </dl>

前回の四和音(セブンス)までは和音の構成音が1オクターブに納まっていたが、テンションは2オクターブ目の音も重ねる。そのため鍵盤の上の方まで行くと3オクターブ目まで突入する。

3オクターブ目の音階を増やす。

//音階
var scale = [
  //休符
  'null', 
  //1オクターブ目
  'C4', 'C#4', 'D4', 'D#4', 'E4', 'F4', 'F#4', 'G4', 'G#4', 'A4', 'A#4', 'B4',
  //2オクターブ目
  'C5', 'C#5', 'D5', 'D#5', 'E5', 'F5', 'F#5', 'G5', 'G#5', 'A5', 'A#5', 'B5',
  //3オクターブ目
  'C6', 'C#6', 'D6', 'D#6', 'E6', 'F6', 'F#6', 'G6', 'G#6', 'A6', 'A#6', 'B6',
];

1オクターブ目は「C4〜」、2オクターブ目は「C5〜」、3オクターブ目は「C6〜」

次に五和音(テンションコード)の構成音を追加する。

//コードタイプ
var codeTypes = [
        //ルート音〜四和音(前略)     
        //五和音
      {'codeName': 'M9',
            'codeKeys': [1,5,8,12,15]},
      {'codeName': '9',
            'codeKeys': [1,5,8,11,15]},
      {'codeName': '7(-9)',
            'codeKeys': [1,5,8,11,14]},
      {'codeName': '7(+9)',
            'codeKeys': [1,5,8,11,16]},
      {'codeName': 'm7(11)',
            'codeKeys': [1,4,8,11,18]},
      {'codeName': '7(+11)',
            'codeKeys': [1,5,8,11,19]},
      {'codeName': 'M7(13)',
            'codeKeys': [1,5,8,12,22]},
      {'codeName': '7(13)',
            'codeKeys': [1,5,8,11,22]},
      {'codeName': '7(-13)',
            'codeKeys': [1,5,8,11,21]},
      {'codeName': '69',
            'codeKeys': [1,5,8,10,15]},
      {'codeName': 'm69',
            'codeKeys': [1,4,8,10,15]},
];

これで五和音(テンションコード)の音が鳴るようになった!

五和音の構成音まとめ

テンションとは何か

  • テンションとは1オクターブよりもさらに上(2オクターブ目)の音のこと
  • テンションの基本はナインス(9th)、イレブンス(11th)、サーティーンズ(13th)の三音
  • ナインス(9th)の1オクターブ下は2nd
  • イレブンス(11th)の1オクターブ下は4th
  • サーティーンズ(13th)の1オクターブ下は6th
  • ナチュラルテンションから上下に半音移動するとアルタードテンションになる

テンションとは1オクターブより上、2オクターブ目の音をことだが使われるのはナインス(9th)、イレブンス(11th)、サーティーンズ(13th)の3音が基本となる。この三つの音を1オクターブ下げると2th、4th、6thになる。それ以外の音はセブンスコードまでの構成音(1st、3rd、5th、7th)で1オクターブ上のユニゾンとなる。

※参考:テンションコードの決まりごと!これさえ分かれば構成音も簡単理解!

1オクターブ内で近接する和音だと音が濁るが2オクターブ目に離れることで緩和されてより豊かな響きが生まれる。

テンションについてはトライアド、セブンスの時も参考にしたこちらのサイトの解説がわかりやすい。

※参考:3-7. テンションコードを知ろう | ポップスのピアノ伴奏を作ろう!

ルートCにおけるテンションのうち白鍵を「ナチュラルテンション」、黒鍵を「アルタードテンション」という。

※参考:3-8. テンションコードの押さえ方を知ろう(オルタード) | ポップスのピアノ伴奏を作ろう!

ナチュラルテンションとアルタードテンションの判断基準として、こちらの解説が音付きでとてもわかりやすい!

四和音との関係が「短九度」だと不協和になるので避ける。

しかしながらセブンスはそれ自体が不安定な響きなので短九度も許容される。

ナインス(9th)系のテンションコード

四和音(セブンス)系の上にナインス(9th)系のテンションを重ねる。

コード名 略称 構成音 備考
メジャーナインス M9 1,5,8,12,15 メジャーセブン(1,5,8,12)にナインス(15)を加える
ナインス 9 1,5,8,11,15 セブンス(1,5,8,11)にナインス(15)を加える
セブンス・フラット・ナインス 7(-9) 1,5,8,11,14 セブンス(1,5,8,11)にフラット・ナインス(14)を加える
セブンス・シャープ・ナインス 7(+9) 1,5,8,11,16 セブンス(1,5,8,11)にシャープ・ナインス(16)を加える
  • ナチュラルテンションのナインスの場合はセブンスまでの表記は省略になる。
  • メジャーセブンスにはMが付き、セブンスは無印
  • アルタードテンションはセブンスまで表記し、(-9)、(+9)とカッコで括ってナ♯が♭ナインスに付くことを明示する

※参考:3-8. テンションコードの押さえ方を知ろう(オルタード) | ポップスのピアノ伴奏を作ろう!

セブンス・シャープ・ナインス|7(+9)は通称「ジミヘンコード」と言われる。テンションを足すと独特な響きになる。

※参考:ジミヘンコードの正体とは!? | GHCネット(ギター&マーケティングのビギナーズラック)

イレブンス(11th)系のテンションコード

四和音(セブンス)系の上にイレブンス(11th)系のテンションを重ねる。

コード名 略称 構成音 備考
マイナー・セブンス・イレブンス m7(11) 1,4,8,11,18 マイナー・セブンス(1,4,8,11)の上にイレブンス(11)を重ねる
セブンス・シャープ・イレブンス 7(+11) 1,5,8,11,19 セブンス(1,5,8,11)の上にシャープ・イレブンス(+11)を重ねる

マイナー・セブンス(m7)はナチュラル(11)、セブンスはアルタード(+11)になる。

※参考:3-8. テンションコードの押さえ方を知ろう(オルタード) | ポップスのピアノ伴奏を作ろう!

サーティーンズ(13th)系のテンションコード

四和音(セブンス)系の上にサーティーンズ(13th)系のテンションを重ねる。

コード名 略称 構成音 備考
メジャー・セブンス・サーティーンズ M7(13) 1,5,8,12,22 メジャー・セブンス(1,5,8,12)の上にサーティーンズ(22)を重ねる
セブンス・サーティーンズ M7(13) 1,5,8,11,22 セブンス(1,5,8,11)の上にサーティーンズ(22)を重ねる
セブンス・フラット・サーティーンズ M7(-13) 1,5,8,11,21 セブンス(1,5,8,11)の上にフラット・サーティーンズ(21)を重ねる

メジャー・セブンスはナチュラルの13のみ。セブンスは13と-13を重ねられる

シックス・ナインス系のテンションコード

最後はセブンスではなくシックスス系の上にナインス系のテンションを重ねる

コード名 略称 構成音 備考
シックス・ナインス 69 1,5,8,10,15 シックスス(1,5,8,10)の上にナインス(15)を重ねる
マイナー・シックス・ナインス m69 1,4,8,10,15 マイナー・シックスス(1,4,8,10)の上にナインス(15)を重ねる

シックスス(6th)の1オクターブ上はサーティーンズ(13th)になるので、先ほどのサーティーンズ系のテンションからセブンス(7th)を抜いてナインス(9th)を加えたような響きになる。

※参考:6/9(シックスナインス)コード/音楽理論講座

転回形は今後の課題に。。

実際にコードを演奏するときは、伴奏の音が移りすぎないように和音の構成音のオクターブをズラしたりする。これを「転回形」という。

※参考:3-4. コードの転回系をマスターして表現の幅をアップ | ポップスのピアノ伴奏を作ろう!

また、和音の構成音を1オクターブを超えるように配置して両手で豊かな響きを鳴らす「オープン・ボイシング」という方法もある。

※参考:音楽理論_コードヴォイシング CapmNetwork

※参考:一番多い質問「両手でのバッキングの音使いがわからない」にお答えしました。 | ジャズピアノのはじめかた

しかし、今回作った和音楽器はルート(根音)の上に「配列のn番目」という感じに音を重ねる単純な仕組みなのため、転回形を再現することが難しい。今後の課題としたい。。

最後に

f:id:idr_zz:20200105120207p:plain

和音楽器を作りながら、和音の構成音にもかなり詳しくなれました!実際に音を鳴らしながら構成音を確認するとわかりやすいですね。コード名の記号もチンプンカンプンだったのがだいぶ読めるようになりました。

コードを鳴らす時、ギターはコードフォームが複雑で難しかったです。ピアノも白鍵黒鍵の位置関係がズレるのがハードルに感じていました。この和音楽器を使えば知っている曲のコード進行を鳴らして研究することができます!

次回からはTone.jsでリズム音を鳴らすことにトライしたく思います。それではまた!


※参考:Tone.jsを習得するためにやった事まとめ qiita.com