Shopippi.com
2026.11.01
写真を 1 枚も使わない HERO。スクロールで奥から回って並ぶ立方体。流れていくレコードのジャケット。全部ひとりで、最初から最後まで組み直したときの、こだわりの記録です。
「写真を並べるポートフォリオ」をやめて、「触ると動くもの」を置くことにしました。
前のサイトは、制作物の写真を大きく載せる作りでした。見やすいけれど、どこかで見たことのある形でもありました。今回は逆に、画像をほとんど使わず、光と質感と動きで「この人はこういうものを作る」が伝わるページを目指しています。HERO に写っているものは全部、ブラウザがその場で描いています。
読み込んだ瞬間、中央に凝縮していたものが、ほどけて広がる。
最初の一画面は、ガラスの結び目、液体のように形を変えるクローム、溝まで刻んだレコード盤、メビウスの帯、コイル、玉虫色に光るガラス玉。同じ形をひとつも繰り返さないように選びました。ページが開くと全部が中央にぎゅっと集まって脈打ち、ページ遷移の幕が明けた合図で、弾むようにそれぞれの位置へ散っていきます。
照明は、暗い部屋に大きなソフトボックスを 4 枚置いた撮影スタジオを、そのままブラウザの中に組んでいます。ガラスの縁に走るハイライトや、クロームに映り込む光の形は、この 4 枚の反射です。背景が白いサイトなので、ガラスは厚いところほど灰色に沈む設定にして、白の上でも輪郭が消えないようにしました。主光はゆっくり弧を描いて動いているので、同じ場所を見続けていても表情が変わります。
マウスを近づけると、物体のほうが静かに避けます。7 秒に一度、どれかひとつが半回転します。下にスクロールすると全体が奥へ沈んでいきます。どれも「気づく人だけ気づく」くらいの強さにしています。
スマホでは、線画で登場して、質感をまとう。
スマホは画面が縦長なので、ひとつの結び目に絞りました。読み込み中は黒い線だけの線画で勢いよく回り、だんだん減速して、落ち着いたところで金属の質感をまといます。そのあとは画面をタップするたびに、クローム → ガラス → 黒鉛 → 陶器 → 金属と、質感がじゅわっと移り変わります。
カードではなく、箱。スクロールすると奥から半回転しながら手前に飛んできます。
「できること」の 4 つは、平らなカードをやめて本物の立方体にしました。6 面すべてに面があり、スクロールに合わせて奥(画面の 5 つぶん先)から 180° 回りながら近づいてきて、階段状に並びます。止まったときはほぼ正面ですが、下の面の縁がわずかに右上がりの線として見える角度に止めてあります。厚みの気配だけ残す、という調整です。
正面の図形も、線画ではなく小さな立体です。陶器の球とすりガラスの立方体、黒い経緯線に包まれたガラスの地球儀、線だけの立方体の中で光るクロームの球、重なるガラスの板。HERO と同じ照明で描いているので、ページ全体で光の向きがそろっています。
カーソルを乗せる(スマホではタップする)と、箱そのものが 90° 回って、黒い面に説明文が現れます。この章の背景が黒に変わったのは、その面の色です。
持っている盤を全部、流れるジャケットで。
趣味のレコードは、一覧ではなく「棚の前を歩く」感じにしました。ジャケットが段ごとに左右逆の向きで流れていて、タップすると止まって詳細が開きます。HERO の「RECORD COLLECTION」のボタンにカーソルを乗せると、ジャケットが 4 枚、扇のように顔を出します。
詳細には Apple Music へのリンクを付けました。配信にない盤は、ボタンを薄く表示して押せないようにしています。ENV のページには、普段聴いている再生環境(アンプ、スピーカー、プレーヤー)も載せています。
目立たないところほど、時間をかけました。