# IRIAM 7th Anniversary Project ミライト｜イベント / ライブのWebデザイン参考

> 右の余白に、全企画のステッカーを貼ってある。Vライバーアプリ IRIAMの7周年企画「ミライト」の特設サイトは、480px幅のカラムに企画カードを1枚ずつ積み、左右の余白を企画名の一覧とロゴに使っている。

- URL: https://miraito.iriam.com/2025
- 解説ページ: https://katapick.com/sites/iriam-miraito-2025
- カテゴリ: イベント / ライブ / 地域: 国内（JP）/ 業種: Vライバー配信アプリ・周年企画
- テイスト: イラスト、手書き文字、角丸、周年、ロングページ
- 公開・リニューアル: 2025-09 / Katapick掲載: 2026-09-28 / 最終確認: 2026-10-28
- 再現難易度: 3/5

## 編集部のひとこと（Pip）
「リス活のきろく」、ライバーさんとの1年がノートになって返ってくるの、リスナーなら絶対開いちゃうやつ！推しに使った時間が形に残るの、うれしすぎる！！

## デザインの見どころ
- テーマ「Colorful Notes」に合わせ、企画ごとに方眼や罫線のノート地のカードに。1企画を1ページとして読める
- カード左上に「EVENT」「SNS」「APP」のバッジ。リアルかSNSかアプリ内かを、本文より先に仕分けできる
- 開催期間は黒い小ラベルと大きな数字で統一。終わった企画もボタンを「終了しました」に替えて残す

## 配色
- #d8e5eb Mist Blue（カラム外のグラデーション背景（スクショから採色））
- #ffffff White（企画カード・ボタンの背景）
- #111111 Ink（本文・「開催期間」ラベルの地）
- #5d67bb Lavender Indigo（ロゴ・企画タイトルの青紫）
- #555151 Warm Gray（注釈テキスト）

## フォント
- 本文・見出し・開催期間: heisei-maru-gothic-std（平成丸ゴシック）（代替: Zen Maru Gothic）
- 英字ラベル（TITLE: ...）・日付の数字: bricolage-grotesque（代替: Bricolage Grotesque）
- FVの「Colorful notes」: 筆記体の手書き文字（画像と思われる）（代替: Dancing Script）

## よくある質問
### ミライト特設サイトはPCでどう見える？
PCでも幅480pxのスマホ幅カラムを画面中央に置き、左にロゴのステッカー、右に9つの企画名のステッカーを並べる構成です。カラムには企画カードを縦に積み、左右の余白は企画の一覧と装飾に使っています。

### たくさんの企画を1ページで見せるコツは？
企画ごとにノート地の色を変えた角丸カードにし、左上にEVENT・SNS・APPの種別バッジを付ける方法が参考になります。開催期間の表記とボタンの形をそろえ、どのカードも同じ順番で読めるようにしています。

### IRIAMとミライトとは？
IRIAMはVライブコミュニケーションアプリで、ミライトはその7周年を記念した企画です。サイトでは、リアルイベント「ミライトパーティ」やアプリ内イベント、SNS企画、限定ギフトなどを紹介しています。

### キャラクターのイラストを参考資料として使ってもいい？
キャラクターのイラストやロゴの権利はIRIAMの運営元に帰属します。参考にするのはカラム構成や配色、カードの設計にとどめ、画像は使用しないでください。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「デザイン分析MD」は https://katapick.com/sites/iriam-miraito-2025 からダウンロードできます。
出典: Katapick（https://katapick.com）