作品の“温度”を宿す SIRUP『OWARI DIARY』特設サイトの設計思想
tote
SIRUP 3rd Album「OWARI DIARY」特設サイトは、
“DIARY”という言葉が持つ手触りを起点に、音楽の世界観を立体的に再構築したプロジェクトです。
なぜ“本”というメタファーを選んだのでしょうか。
その中で、どのように演出のゴールを定めていったのでしょうか。
そして、なぜこのサイトにはこれほどまでに“温度”が宿っているのでしょうか。
制作を手がけたtoteの谷井さんに、その思考と葛藤のプロセスを伺いました。
10周年へと向かう
“接続点”としてのサイト
―― デビュー8周年の節目でもある中で、今回の特設サイトは、どのような背景から始まったのでしょうか。
SIRUPさんの3rd album「OWARI DIARY」は、“終わりの始まり”をテーマに、感情の深部へと踏み込んだ全11曲を収録するフルアルバムです。2023年の4th EP「BLUE BLUR」で提示された“ポジティブな絶望”のその先を描き、混沌とした世界の中で希望を見出そうともがく姿が、まるで一冊の日記のように綴られています。先行配信された5曲や全国ツアー「NEXT LIFE TOUR 2025」での披露を通して既に高い評価を得ており、本作はSIRUPさんの“今”を示す重要な一枚となりました。
本特設サイトは、SIRUPさんのデビュー8周年の記念日である2025年9月27日に公開しました。これまで5周年特設サイトや「BLUE BLUR」特設サイトを制作させていただいた流れの中で、本作は来るデビュー10周年へ向けた大切な接続点にあたります。そのため本サイトは、単なる情報整理の場ではなく、アルバムの世界観を十分に体現しながら、次のフェーズへと橋を架ける存在となることを目指しました。
―― 今回のサイトで、まず最初に定めた目的は何でしたか?
本プロジェクトで成し遂げたかった目的は、大きく三つあります。
一つ目は、アルバムの世界観を損なうことなく、その魅力を広く届けること。
二つ目は、すでに作品を聴いているファンのみなさんと深く共鳴し、ふとアルバムを思い出したときに訪れたくなる“居場所”をつくること。
三つ目は、SIRUPさんや本作をまだ知らない国内外のユーザーに対して、「聴いてみたい」と自然に思える入口を設計することでした。
音楽の純度を保ちながら、「OWARI DIARY」らしさを盛り込んだ体験として昇華させること。それが本サイト制作の出発点でした。そしてその体験とは、日記をめくるようにゆっくり噛みしめながら滞在してもらう時間をつくることでもあります。この前提が、実装面での設計思想そのものを決定づけ、サイト全体の体験設計へと繋がっていきました。
“本”のモチーフは王道
それでも選んだ理由
―― 単に“本のように見せる”のではなく、“本として体験させる”と語られています。その違いはどこにあると考えていますか?
アルバムタイトルが「OWARI DIARY」だと伺った瞬間から、「本」という物理的な存在を軸にした表現が向いているのではないかと想像していました。“DIARY”という言葉が持つ手触り、重さ、書き込んだりページをめくる仕草。そこには既に、デジタルではない時間の流れが宿っています。私たちにとってこの“ページをめくる時間”は単なる移動ではなく、“進んでいく時間軸”そのものとして設計すべき体験でした。
しかし同時に、“本”をモチーフにしたWeb表現は、国内外の凄腕制作者のみなさんが数多くの名作を残してきた分野でもあります。単に“本のように見せる”だけでは過去の名作に埋もれて目新しさや個性は生まれない。「OWARI DIARY」を“DIARY”として“本”として、どう再解釈するかが最大の懸念でした。
作品と向き合い、
身体が理解した先に見えてきたこと
―― 制作を進める中で、アルバムとはどのように向き合っていったのでしょうか。
その中で、コンセプトを定める前に大切にしていたことはありますか?
制作を本格的に開始したのは、ちょうどアルバムがリリース後でした。私たちは制作期間中、アルバムに収録された11曲をループで流し続けています。オープニングを飾る高揚感たっぷりの「UNDERCOVER feat. Ayumu Imazu」から、チルでエモーショナルなラストトラックの「今夜」までのアルバム自体のストーリー性や楽曲同士の心地よい繋ぎのリズム感などを自身に染み込ませて、それが制作時に自然に表現として出てくることを目指しています。また、「OWARI DIARY」を耳で聴くだけでなく、アルバムのジャケットを実際に手に取り、ブックレットを何度もめくり、質感を確かめながら制作を進めました。視覚・聴覚・触覚・嗅覚から身体の芯まで染み込ませるようにアルバムと向き合うことで、装飾ではなく体験としての方向性が自然と見えてきました。
最終的に定義したコンセプトは、アルバムの楽曲やブックレットの世界観を、インタラクティブに楽しめる体験としてWebに再構築すること。DIARYのページをめくる行為そのものを体験化し、触れることで発見が生まれ、自発的な発見が喜びに変わる構造をつくる。画面の随所に「思わず触ってみたくなる」仕掛けを施し、受動的に見るサイトではなく、能動的に思わず触ってみたくなる没入的なサイトとなることを目標に設計しました。アニメーションの順序や流れは細かく制御して、体験のテンポを重視しました。
―― “触れて体験する”という言葉を、どのように具体化していったのでしょうか。
ページはドラッグで実際にめくることができる。
カセットという音楽的モチーフは音楽プレイヤーとして機能し、再生や停止という行為そのものを物理的に操作ができる。
ポラロイド写真は一見して気付けないが、実はクリックで切り替わり偶発的な出会いを生む。
これらの仕掛けは派手さのためではなく、“触ること”が「OWARI DIARY」の聴覚・視覚・嗅覚によるアルバム体験と重なるように設計されています。
同時に、多彩でボリュームのある情報を一度に扱うアルバム情報を集約したサイトとしての役割もあります。収録された全11曲の楽曲紹介のための歌詞、クレジット、サブスクやミュージックビデオなどへの各種リンクや、8周年記念で開催されるライブ情報、ライブで発売されるグッズ情報なども正確に即時に理解できるように掲載する必要があります。そのため、演出と視認性のバランスを徹底的に調整しました。世界観を優先しながらも、最低限のサイトとしての見やすさは守る。これは重要な設計思想でした。
“直筆”に宿る、体験の温度
本サイトで特に象徴的なのは、SIRUPさん直筆の日本語歌詞です。サイト制作にあたり、追加でセルフライナーノーツも直筆でご用意いただくこととなり、制作サイドとしては大歓喜でした。一般的なフォントの割り当てでは再現できないSIRUPさんにしかない筆跡の揺らぎや筆圧の強さを、デジタル空間の中でどう生かすか。そこにはアルバムへの親近感を生む非常に強い力があると感じました。アナログの持つ温度感を損なわず、Webという媒体で最大化する。それが本サイトの世界観の核です。
いかにSIRUPさんの日常が落とし込まれた「OWARI DIARY」という“日記”をただ読むのではなく、触れて体験することができるか。その再解釈が、このプロジェクトのコンセプトでした。
質感と負荷、そのあいだで
世界観を成立させるための設計
―― あれだけの立体的な質感や物理的な挙動を持ちながら、世界観を構築するために意識したことは何でしたか?
本サイトはWebGLを用いた立体的な構造で設計しています。しかしWebGLサイトの最大の課題は、「やりたいことを全部やると重くて動かない」という現実です。質感、影、物理的挙動、音、情報量。それらをそのまま盛り込めば、ユーザー体験は破綻します。
WebGLで紙の質感を出そうとすれば、ポリゴン数もテクスチャも重くなる。影を増やせば処理は跳ね上がる。音を足せば同期が難しくなる。そのため内部構造では、同種のセクションを単位化してパッケージ化し、表示タイミングと描画負荷を統合的に制御する設計を採用しました。
―― 今の形に至るまでに、迷いや葛藤はありましたか?
制作初期には、よりシネマティックな演出も検討していました。SIRUPさんが部屋の中で動き、動くSIRUPさんの目線に合わせて視点が横にも縦にも変わる構造。加えて、窓から差し込む光で昼夜を表現する案もありました。しかしテスト段階で明確になったのは、主役の“DIARY”の存在感が薄まってしまうことでした。体験が冗長になり、“DIARY”のページを開く前に離脱が発生する可能性もあると気づきました。
そこで私たちは、表現を削る決断をしました。その代わりに取り入れたのが、“机の上のDIARYを見ているSIRUPさんの影”です。本人を直接登場させるのではなく、影だけを存在させる。日常の気配を残しつつ、主役はあくまで“DIARY”に据えました。
―― 世界観を形にしていく中で、特にこだわったポイントはどこでしたか?
質感づくりにも相当な時間をかけました。机の木目、ペンの質量感、DIARYの角の擦れ具合、紙の厚み。アルバムのジャケットやブックレットを手に取りながら、SIRUPさんの筆圧や余白の取り方、書き込み方の癖を観察し、どの程度の“ぼろぼろさ”が自然なのかを検討しました。少しでも違和感があると、世界観は一瞬で壊れます。納得のいく質感に辿り着くまで、選択と作り込みに約一週間を費やしました。
2026.04.02
作品の“温度”を宿す SIRUP『OWARI DIARY』特設サイトの設計思想