# 『18TRIP（エイトリ）』2周年特設サイト｜イベント / ライブのWebデザイン参考

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

- URL: https://2nd-anniv.18trip.jp/
- 解説ページ: https://katapick.com/sites/18trip-2nd-anniversary
- カテゴリ: イベント / ライブ / 地域: 国内（JP）/ 業種: スマートフォンゲーム
- テイスト: 周年、ミニマル、ビビッド
- 公開・リニューアル: 2026-05 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 20 時間）

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

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

## 配色
- #ffffff Departure White（ローディング背景 / 光）
- #ffb0ff Orchid Haze（グラデーション（左））
- #4dd6e5 Lagoon Aqua（グラデーション（右））
- #ff8688 Sunset Coral（グラデーション（下））
- #0c55a5 Compass Navy（エンブレム / 紋章 / 方位の文字）

## フォント
- 「2ND ANNIVERSARY」「PLZ SELECT TEAM」と N / E / S / W: 欧文セリフ（エンブレム・方位表記）（代替: Cormorant Garamond）
- ナビ・英字見出し: 欧文サンセリフ（チームページの英字）（代替: Space Grotesk）

## よくある質問
### 18TRIP 2周年特設サイトのトップはどんな構成？
グラデーションの背景にコンパス型のエンブレムを置き、四方の紋章から4つのチームページを選ぶ構成です。選んだチームのページで、ムービー・ニュース・キャラクターを見られます。

### 18TRIP 2周年特設サイトのようなグラデーション背景はどう作る？
ピンク・水色・コーラルなどの radial-gradient を画面の四隅に重ね、filter: blur で境界をぼかします。動かす場合は background-position を GSAP でゆっくりアニメーションさせます。

### このサイトのデザインはどんなサイトの参考になる？
ゲームやアイドルの周年サイト、チーム対抗・投票型のキャンペーンサイトなど、最初に“推し”や所属を選ばせたい特設サイトの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/18trip-2nd-anniversary からダウンロードできます。
出典: Katapick（https://katapick.com）