開発 / J01

このポートフォリオサイトができるまで

音楽、プログラミング、生成AIというJpの活動を、ひとつのサイトにまとめるまでの考え方と工夫を紹介します。

01

ひと目でJpらしさが伝わる場所に

このサイトをつくるとき、最初に考えたのは「何をしている人なのかが、すぐに伝わること」でした。音楽、プログラミング、生成AIという3つの活動を、別々に見せるのではなく、ひとつにつながった表現として紹介しています。

情報をたくさん並べるよりも、大きな文字と余白を使い、作品の雰囲気をゆっくり感じられる画面を目指しました。履歴書のようなサイトではなく、サイトを開いた瞬間からJpの世界観に入れることを大切にしています。

02

本当に公開している作品を載せる

掲載しているのは、yamii.jp、web.yamii.jp、YouTube、ニコニコ動画などで実際に公開している作品です。気になった作品から、そのまま公開先へ移動できるようにしています。

音楽、Webサイト、映像と種類が違っても、作品ごとに見どころや制作意図が分かるようにまとめました。専門知識がなくても、何をつくったのか、どんな思いを込めたのかを追いやすい構成です。

03

音楽と画面をひとつの体験に

入口では、音楽ありと音楽なしを選べます。音楽を選ぶと、背景の波形や光、文字、3つのシグナルノードが曲のリズムに合わせて変化します。

ただ派手に動かすのではなく、バスドラムやクラップなどのリズムを中心に反応させています。音楽を止めたいときは、画面下のBGMボタンからいつでも切り替えられます。

04

どの画面でも同じ雰囲気を

大きな4KモニターからWQHD、一般的なパソコン、タブレット、スマートフォンまで、文字の大きさや配置を画面ごとに調整しました。大きな見出しや音に反応する演出が重ならず、読みやすさを保てるようにしています。

作品を探す、プロフィールを見る、SNSへ移動する、問い合わせるといった基本的な操作も、迷わず進めることを意識しました。音楽なしでも内容がきちんと伝わるようにしています。

05

完成ではなく、育っていくサイト

このサイトは一度つくって終わりではありません。新しい曲やWeb作品、制作の裏側をこれからも追加し、Jpの活動と一緒に育てていきます。

見た目や動きも、作品が増えるたびに少しずつ更新していく予定です。このサイトそのものも、Jpがつくる作品のひとつです。

← ジャーナル一覧へ