推し相撲

「好き」が伝わる。導入演出から回遊まで設計。

Overview

大好きな力士を「紹介する」だけでなく、まさに“推し出す”感覚を形にすることをテーマに制作しました。
写真を主役にしつつ、TOPから詳細ページに入るまでの演出も含めて、 “見て楽しい”だけでなく“入り込める”体験を目指しています。

Challenge

ビジュアルを強くすると、情報が読まれず「ただ派手」になりやすいのが課題です。
熱量は保ちつつ、プロフィールや説明など必要情報が迷わず追える構造を作る必要がありました。

Solution

• 力士ごとに主役級のビジュアルを置き、第一印象で魅力が伝わる配置を優先しました。
• TOPの導入、遷移時の演出、詳細ページ冒頭のフラッシュ演出を組み合わせ、ファンサイトらしい没入感を強化しました。
• 情報ブロックは読みやすい順序で固定し、ビジュアルが強くても迷わない導線を設計しました。

Highlights

• 導入演出から詳細ページまで、熱量が途切れない体験を設計。
• 一覧→詳細→回遊の導線を固定し、迷いを最小化。
• 写真の強さと可読性を両立し、“推しが主役”に見えるUIへ整理。

Design

“推し”が主役になるよう、写真の存在感と余白のバランスを調整しました。
楽しさを出しつつも、見づらさが出ないよう可読性と情報の階層を整えています。

Result

熱量が伝わるビジュアルと、迷わず情報に辿り着ける構成に加え、 導入演出によって“推しの世界に入っていく感覚”まで表現できました。
好きという感情を、UIと動きの両面から形にした制作事例になっています。

Role & Deliverables

• 企画：推し視点の世界観設計と回遊導線
• UI設計：一覧→詳細→回遊、導入演出、ギャラリー進行の見せ方
• 実装：HTML / CSS / JavaScript