EventJapanPicked 2026.09.28

IRIAM 7th Anniversary Project ミライト

イベント / ライブのWebデザイン参考 — Vライバー配信アプリ・周年企画

サイトを見るmiraito.iriam.com

miraito.iriam.com/2025開く ↗

IRIAM 7th Anniversary Project ミライトのPC版ファーストビュー

サイトを開く ↗

IRIAM 7th Anniversary Project ミライトのスマホ版ファーストビュー

Editor's note — 編集部の視点

右の余白に、全企画のステッカーを貼ってある。

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

PipTrends & VTuber

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

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

Color

IRIAM 7th Anniversary Project ミライトの配色

Typography

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

本文・見出し・開催期間

Aa あア

使用: heisei-maru-gothic-std（平成丸ゴシック）
代替: Zen Maru Gothic

英字ラベル（TITLE: ...）・日付の数字

Aa あア

使用: bricolage-grotesque
代替: Bricolage Grotesque

FVの「Colorful notes」

Aa あア

使用: 筆記体の手書き文字（画像と思われる）
代替: Dancing Script

実測タイプスケール1440px幅 · 2026-09-27 計測

見出しKatapick 型16px · 1 · 400
小見出しKatapick 型15px · 1 · 800
本文The quick brown fox — 参考を型にする14px · 1.75 · 400

Structure

ページ構成（上から順）

01
カラム外の固定要素
淡い水色のグラデーションにシャボン玉・風船・リボン・星を散らす。左に「IRIAM 7th Anniversary Project ミライト Colorful notes」のロゴステッカー、左上に小さな英字表記、右に「ミライトパーティ開催決定!」「リス活のきろく」など9つの企画名ステッカーを2列で貼る。
02
FV
ロゴ「IRIAM 7th Anniversary Project ミライト」の下に、開いたノートと風船に囲まれたキャラクターのKV、その下にホログラム調の筆記体「Colorful notes」を大きく置く。
03
メッセージ
「はじめは真っ白なノートだった。」から始まる中央揃えの短い詩と、リングノートと羽根ペンのイラスト。
04
Thank you 7th ANNIVERSARY!
罫線ノートの地に、10月4日でIRIAMが7周年を迎えることと、周年企画ミライトの開催を伝える挨拶文。
05
EVENT：ミライトパーティ
紫の縁取りのカードに、人物シルエットとロゴ「ミライトパーティ Colorful Notes 開催決定!」、開催日時2026.2.8(日)・会場品川インターシティホール、「詳細はこちら」のピルボタン。
06
SNS企画
みんなのIRIAMノート（ピンクの方眼）、リス活のきろく（グリーンの方眼）、おもいでコラージュ（ブルーの方眼）を1枚ずつカード化し、スマホ画面風の結果イメージ、説明文、開催期間、ボタンを縦に並べる。
07
APP企画
7th Anniversary Event（描き下ろし広告・オールスターえきポス!の掲載イメージ、しらすぬいぐるみの告知）、ミライト限定ギフト、ぷくぷくチャレンジと、アプリ内の企画カードが続く。
08
連動企画・キャンペーン
「連動企画・キャンペーン」と「このほかにもIRIAMでは様々なアップデートを実施！」の見出しで、周年企画以外の取り組みをまとめて締める。

Interaction

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

左右のロゴ・企画ステッカー・シャボン玉は固定表示されている（フルページキャプチャで900pxごとに同じ位置に写り込んでいる）
右の企画ステッカーは、カラム内の各企画カードへのページ内リンクと思われる
「Colorful notes」の文字やボタンの地は、虹色がにじむホログラム調のグラデーション。linear-gradient を重ねて近い質感を再現できる
SPでは左右の装飾をなくし、右上のめくれたステッカー型「MENU」ボタンに企画一覧を収めていると思われる

スクロールのコマ撮り500–1500ms

IRIAM 7th Anniversary Project ミライトをスクロールしたときのフレーム1 — 01

IRIAM 7th Anniversary Project ミライトをスクロールしたときのフレーム2 — 02

IRIAM 7th Anniversary Project ミライトをスクロールしたときのフレーム3 — 03

IRIAM 7th Anniversary Project ミライトをスクロールしたときのフレーム4 — 04

IRIAM 7th Anniversary Project ミライトをスクロールしたときのフレーム5 — 05

IRIAM 7th Anniversary Project ミライトをスクロールしたときのフレーム6 — 06

検出された技術:Adobe Fonts

Reproduce

再現するときのポイント

01PCでは幅480pxのカラムを中央に置き、左にロゴステッカー、右に企画名ステッカーを2列で固定配置する
02企画は1つずつ角丸カードにし、方眼や罫線のノート地と背景色を企画ごとに変える
03カード左上に種別バッジ（EVENT・SNS・APP）、右上に「TITLE: ...」の英字ラベルを添えて、ノートの見出しのように見せる
04開催期間は黒地の小ラベル＋大きな数字で統一し、終了した企画はボタンの文言だけを「終了しました」に替える

デザイン分析MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全8セクションの仕様 / AIっぽさを消すルール / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 盗作を避ける差し替えリスト

Katapick のデザイン分析MDは何がすごい？ →

iriam-miraito-2025.katapick.md

1---
2title: "IRIAM 7th Anniversary Project ミライト デザイン分析書"
3source: https://miraito.iriam.com/2025
4katapick: https://katapick.com/sites/iriam-miraito-2025
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [イラスト, 手書き文字, 角丸, 周年, ロングページ]
8launched: 2025-09
9verified: 2026-10-28
10measured: 2026-09-27 (Chromium 1440x900)
11difficulty: 3/5
12generator: Katapick
13---
14 
15# IRIAM 7th Anniversary Project ミライト — デザイン分析書
16 
17> 右の余白に、全企画のステッカーを貼ってある。Vライバーアプリ IRIAMの7周年企画「ミライト」の特設サイトは、480px幅のカラムに企画カードを1枚ずつ積み、左右の余白を企画名の一覧とロゴに使っている。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-27 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22