音楽に合わせてサイトが動くまで

音楽を目でも楽しめるように

このサイトのBGMは、ただ後ろで流れているだけではありません。曲が鳴ると、背景の波形や光、文字がリズムに合わせて動き、音楽を目でも感じられるようになっています。

Jpの活動には音楽とプログラミングの両方があります。そこで、聴く体験と見る体験をひとつにつなげ、このサイトそのものにも作品らしさを持たせました。

サイトに入るときは、「音楽あり」と「音楽なし」を選べます。突然音が鳴ることはなく、そのときの場所や気分に合わせて楽しみ方を決められます。

音楽ありで入った場合は、別のページへ移動しても曲が途中で切れません。画面下のBGMボタンからいつでも再生と停止を切り替えられます。

大きな見出しはバスドラムに合わせて沈み込み、小さな文字はクラップに合わせて軽く跳ねます。トライアングルのような高い音には、細かな光のきらめきを割り当てました。

メロディまで拾って常に動いてしまわないように、リズム楽器らしい瞬間だけを見つけています。曲の中でそれぞれの音が鳴ったときに、違う場所から反応が返ってくる仕掛けです。

動きが大きすぎると文字が読みにくくなり、小さすぎると音楽とのつながりが伝わりません。何度も見比べながら、リズムを感じられて、文章も無理なく読める強さに整えました。

大きなモニターでは動きを少し控えめにし、スマートフォンでは文字同士が重ならないようにしています。端末で動きを減らす設定を使っている場合は、強い演出も自動的に抑えられます。

画面の色や形だけでなく、BGMとその反応まで含めて、このポートフォリオの雰囲気をつくっています。同じページでも、曲の展開によって少し違った表情が見えてきます。

作品を見る合間に、どの音で文字や光が反応しているかにも注目してみてください。音楽とWeb表現を一緒に楽しめることが、このサイトならではの体験です。