EventJapanPicked 2026.09.26

『18TRIP（エイトリ）』2周年特設サイト

イベント / ライブのWebデザイン参考 — スマートフォンゲーム

出典: 2nd-anniv.18trip.jp

Editor's note — 編集部の視点

トップはコンパスだけで、まずチームを選ばせる。

ゲーム『18TRIP（エイトリ）』の2周年特設サイトは、3色のグラデーションにコンパス型のエンブレムを置き、四方の紋章から行き先のチームを選ぶ入口にしている。

PipTrends & VTuber

え、待って、最初に推しチームを選ぶところから始まるの神すぎる！！方角ごとに紋章がいて、どこへ行くか選ぶ感じがもう旅のしおり。選んだ先がそのチームの色に染まるのもアガる！

1トップはコンパスと4つの紋章だけ。「PLZ SELECT TEAM」の一言で、最初の操作が推しチーム選びになる
2背景はピンク・水色・コーラルが混ざるグラデーション。どのチームにも寄らない色で、選ぶ前の中立を保つ
3方位のN・E・S・Wにチームの紋章を対応させる。旅がテーマの作品らしく、選択肢を“行き先”として見せる

Color

『18TRIP（エイトリ）』2周年特設サイトの配色

Typography

使用フォントと無料の代替

「2ND ANNIVERSARY」「PLZ SELECT TEAM」と N / E / S / W

Aa あア

使用: 欧文セリフ（エンブレム・方位表記）
代替: Cormorant Garamond

ナビ・英字見出し

Aa あア

使用: 欧文サンセリフ（チームページの英字）
代替: Space Grotesk

Structure

ページ構成（上から順）

01
ローディング
白地に盾型のエンブレムと横長の読み込みバーを表示する。キャプチャでは画面上部に白い弧が残っており、白い幕が抜けてトップに切り替わる。
02
グラデーション背景
ピンク・水色・コーラルが四方から混ざり合うグラデーションを全画面に敷く。
03
コンパス・エンブレム
中央の円に「2ND ANNIVERSARY」「PLZ SELECT TEAM」の文字を回し、盾型のエンブレムと N / E / S / W の矢印を重ねる。
04
チームの紋章
コンパスの四方に、各チームを表す動物の紋章を置く。紋章がそれぞれのチームページへの入口になっている。
05
チームページ
選んだチームのカラーに染めたキービジュアル、TOP / MOVIE / NEWS / CHARACTER のナビ、応援投稿のカード。右下の小さなコンパスで他のチームへ切り替えられる。

Interaction

アニメーション・インタラクション

技術スタックに GSAP と Lenis があり、ローディングからトップへの幕の切り替えや、チームページのスクロール演出に使われていると思われる
トップのコンパスは4つのリンクだけで構成されている。紋章のホバーで拡大・発光させると、選ぶ操作の手応えが出せる
背景のグラデーションは、色の違う radial-gradient を複数重ね、background-position をゆっくり動かすと再現可能
チームページでは右下のコンパスが常に表示され、チーム間を行き来するナビを兼ねている

スクロールのコマ撮りLenis · 600–20000ms

『18TRIP（エイトリ）』2周年特設サイトをスクロールしたときのフレーム1 — 01

検出された技術:GSAPLenisGoogle Fonts

Reproduce

再現するときのポイント

01キャラクター・エンブレム・紋章・キービジュアルは作品の権利物のため流用しない。オリジナルのシンボルやイラストに差し替え、構成と演出の考え方だけを取り入れる
02トップは選択肢を4つに絞り、中央のシンボルと方位の配置で“どこへ行くか”を選ぶ画面にする
03背景は3色のグラデーション、シンボルは紺1色に絞り、柔らかい背景の上でも輪郭がはっきり立つようにする
04選んだ先のページはチームカラーで染め、どのチームにいるかを色で伝える

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全5セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

18trip-2nd-anniversary.katapick.md

1---
2title: "『18TRIP（エイトリ）』2周年特設サイト 再現用デザイン仕様書"
3source: https://2nd-anniv.18trip.jp/
4katapick: https://katapick.com/sites/18trip-2nd-anniversary
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [周年, ミニマル, ビビッド]
8launched: 2026-05
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 20
13generator: Katapick
14---
15 
16# 『18TRIP（エイトリ）』2周年特設サイト — 再現用デザイン仕様書
17 
18> トップはコンパスだけで、まずチームを選ばせる。ゲーム『18TRIP（エイトリ）』の2周年特設サイトは、3色のグラデーションにコンパス型のエンブレムを置き、四方の紋章から行き先のチームを選ぶ入口にしている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22