Design Story

作品の“温度”を宿す SIRUP『OWARI DIARY』特設サイトの設計思想

  • $toteのアイコンtote
15

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のページをめくる行為そのものを体験化し、触れることで発見が生まれ、自発的な発見が喜びに変わる構造をつくる。画面の随所に「思わず触ってみたくなる」仕掛けを施し、受動的に見るサイトではなく、能動的に思わず触ってみたくなる没入的なサイトとなることを目標に設計しました。アニメーションの順序や流れは細かく制御して、体験のテンポを重視しました。

――“触れて体験する”という言葉を、どのように具体化していったのでしょうか。

ページはドラッグで実際にめくることができる。
カセットという音楽的モチーフは音楽プレイヤーとして機能し、再生や停止という行為そのものを物理的に操作ができる。
ポラロイド写真は一見して気付けないが、実はクリックで切り替わり偶発的な出会いを生む。

触れられることを可視化した“DIARY”サイトの佇まい
初期に検討していたの演出案

これらの仕掛けは派手さのためではなく、“触ること”が「OWARI DIARY」の聴覚・視覚・嗅覚によるアルバム体験と重なるように設計されています。

同時に、多彩でボリュームのある情報を一度に扱うアルバム情報を集約したサイトとしての役割もあります。収録された全11曲の楽曲紹介のための歌詞、クレジット、サブスクやミュージックビデオなどへの各種リンクや、8周年記念で開催されるライブ情報、ライブで発売されるグッズ情報なども正確に即時に理解できるように掲載する必要があります。そのため、演出と視認性のバランスを徹底的に調整しました。世界観を優先しながらも、最低限のサイトとしての見やすさは守る。これは重要な設計思想でした。

“直筆”に宿る、体験の温度

本サイトで特に象徴的なのは、SIRUPさん直筆の日本語歌詞です。サイト制作にあたり、追加でセルフライナーノーツも直筆でご用意いただくこととなり、制作サイドとしては大歓喜でした。一般的なフォントの割り当てでは再現できないSIRUPさんにしかない筆跡の揺らぎや筆圧の強さを、デジタル空間の中でどう生かすか。そこにはアルバムへの親近感を生む非常に強い力があると感じました。アナログの持つ温度感を損なわず、Webという媒体で最大化する。それが本サイトの世界観の核です。

いかにSIRUPさんの日常が落とし込まれた「OWARI DIARY」という“日記”をただ読むのではなく、触れて体験することができるか。その再解釈が、このプロジェクトのコンセプトでした。

質感と負荷、そのあいだで
世界観を成立させるための設計

――あれだけの立体的な質感や物理的な挙動を持ちながら、世界観を構築するために意識したことは何でしたか。

本サイトはWebGLを用いた立体的な構造で設計しています。しかしWebGLサイトの最大の課題は、「やりたいことを全部やると重くて動かない」という現実です。質感、影、物理的挙動、音、情報量。それらをそのまま盛り込めば、ユーザー体験は破綻します。

WebGLで紙の質感を出そうとすれば、ポリゴン数もテクスチャも重くなる。影を増やせば処理は跳ね上がる。音を足せば同期が難しくなる。そのため内部構造では、同種のセクションを単位化してパッケージ化し、表示タイミングと描画負荷を統合的に制御する設計を採用しました。

――今の形に至るまでに、迷いや葛藤はありましたか。

制作初期には、よりシネマティックな演出も検討していました。SIRUPさんが部屋の中で動き、動くSIRUPさんの目線に合わせて視点が横にも縦にも変わる構造。加えて、窓から差し込む光で昼夜を表現する案もありました。しかしテスト段階で明確になったのは、主役の“DIARY”の存在感が薄まってしまうことでした。体験が冗長になり、“DIARY”のページを開く前に離脱が発生する可能性もあると気づきました。

そこで私たちは、表現を削る決断をしました。その代わりに取り入れたのが、“机の上のDIARYを見ているSIRUPさんの影”です。本人を直接登場させるのではなく、影だけを存在させる。日常の気配を残しつつ、主役はあくまで“DIARY”に据えました。

影の存在に、気配だけを残す演出

――世界観を形にしていく中で、特にこだわったポイントはどこでしたか。

質感づくりにも相当な時間をかけました。机の木目、ペンの質量感、DIARYの角の擦れ具合、紙の厚み。アルバムのジャケットやブックレットを手に取りながら、SIRUPさんの筆圧や余白の取り方、書き込み方の癖を観察し、どの程度の“ぼろぼろさ”が自然なのかを検討しました。少しでも違和感があると、世界観は一瞬で壊れます。納得のいく質感に辿り着くまで、選択と作り込みに約一週間を費やしました。

楽曲の世界観に呼応するUIデザインと直筆歌詞
デザインルーツのスクリーンショット:すべての要素が巧みにコラージュされている

“本”としての構造を、
どこまで持ち込むか

――デザイン性とナビゲーション性のバランスは、どのように考えましたか。

サイトの構成面では、ユーザーが慣れ親しんでいる“本”としての体験を踏襲しています。裏表紙や奥付けもページとして構成し、背表紙もつけて、実在する“本”の構造を取り込みました。目次を表紙裏に配置する案もありましたが、デザイン性と没入感を優先し、裏表紙に目次を配置。結果的にそれがグローバルメニューの役割を果たす設計となりました。

結果的に成功だったのは、“削る勇気”を持てたことです。失敗しかけたのは、初期段階で演出を盛り込みすぎたことです。このプロジェクトは、意思とは別に、足すことよりも引くことの連続でした。
重さと軽さ、演出と視認性、アナログとデジタル。その均衡点を探し続けた時間こそが、このサイトの本質です。“技術”ではなく、“温度”をどう残すか。それが最後まで向き合い続けた問いでした。

UIすべてが同じ世界観の中でビジュアル化されている
スマートフォン用デザイン:スクリーンサイズが変わっても、体験の温度は変えない

サイトの先にある体験
アルバムを聴きたくなる瞬間を

――最後に、完成後、どんな変化があったか教えてください

SIRUPさんには、すでに多くのファンの方がいらっしゃいます。
だからこそ私たちが目指したのは、既存のファンの方にアルバムをサイトでも体験して楽しんでいただくこと、そして国内外のファン予備軍の方にこのサイトを届けて楽曲試聴へと繋がるきっかけを作ることでした。その意味で、国内外のブックマークサイトへの掲載や、デザインアワードでの評価は大変嬉しく、ありがたいものでした。

ページをめくる体験の延長線上に、「アルバムを聴いてみよう」と思える瞬間が生まれること。それこそが最大の成果だと考えています。

音楽は今、SpotifyやApple MusicやYouTubeなどで日常的に享楽できる存在になりました。気軽に聴ける一方で、アルバムを最初から最後まで通して味わう体験は少しずつ薄れている気もしています。だからこそ私たちは、“アルバム”というストーリー性の高い楽曲の集合体として、そのコンセプトを存分に味わい立体的に体験してもらえるためにアルバム特設サイトを設計しています。

もう一つの成果は、“直筆文字”への反響でした。

AIやノーコードによる効率化が進む現在の制作環境において、あえて“直筆文字”を中心に据えた構成に、想像以上に多くの方から言及をいただきました。SIRUPさんがブックレット用に日本語歌詞を直筆でご用意されたこと自体、その労力から考えると、非常に稀有で尊い判断だと思っています。

サイトの中で各所で“直筆文字”を掲載するにあたり、こちらでもSIRUPさんの直筆文字を解析・分解して文字の揺らぎや余白をどう尊重するかを入念に検討しました。そこからレイアウトするにあたり、文字選びや字詰めやサイズ調整にかけた時間を含めると、おおよそ今回のサイト制作時間全体の1/4にも及びました。公開後も、間に合わなかった部分の直筆化の補完作業に一週間ほどかけています。その労力が、もし少しでも見る人の心に残る温度になっているのなら、それは何よりの成果です。

日常の中でふと「OWARI DIARY」を思い出し、もう一度アルバムを通して聴きたくなる。
このサイトがその循環が生まれるキッカケになることを心から願っています。

OWARI DIARY

3rd Album「OWARI DIARY」
2025.09.03 Release
CD:https://asab.lnk.to/SIRUP_OWARIDIARY
Streaming & DL:https://asab.lnk.to/OWARIDIARY

SIRUP

ラップと歌を自由に行き来するボーカルスタイルと、自身のルーツであるネオソウルやR&BにゴスペルとHIPHOPを融合した、ジャンルにとらわれず洗練されたサウンドで誰もがFEEL GOODとなれる音楽を発信している。

これまでにイギリス・韓国・オーストラリア・台湾などのアーティストとのコラボ曲をリリースしている他、アイリッシュ・ウイスキー「JAMESON」、オーディオブランド「BOSE」、自動車メーカー「MINI」とのタイアップ、2022年に自身初となる日本武道館公演を開催、2024年には中華圏最大の音楽賞「GMA」に楽曲がノミネートするなど、世界を舞台に活躍するR&Bシンガーとして音楽のみならず様々な分野でその活動を広げている。

Official Site:https://sirup.online/
Instagram:https://www.instagram.com/sirup_insta/
YouTube:https://www.youtube.com/@sirupofficial9121
X:https://x.com/IamSIRUP
TikTok:https://www.tiktok.com/@sirup_official

tote inc.

音楽業界を中心に、ビジュアルと体験設計を極めた没入型Webサイトを制作するクリエイティブ・スタジオです。訪れる人を自然とその世界観へ引き込み、記憶に深く刻まれる体験を設計します。
https://tote.design/

New Article

2026.04.02

作品の“温度”を宿す SIRUP『OWARI DIARY』特設サイトの設計思想

シェア