# なつありうむっ！ Varium 1st Live｜イベント / ライブのWebデザイン参考

> 開いた瞬間、青空と海でいきなり夏休み。VTuberグループVariumの初ライブ「なつありうむっ！」の特設LPは、青空と海を白い弧で切り、日付と会場を中央に積んで、高揚感と公演情報を一画面で両立させる。

- URL: https://summer-firstlive.varium.jp/
- 解説ページ: https://katapick.com/sites/varium-1st-live
- カテゴリ: イベント / ライブ / 地域: 国内（JP）/ 業種: VTuberグループ・ライブイベント
- テイスト: イラスト、ビビッド、ブルー基調、固定CTA、カルーセル、ロングページ
- 公開・リニューアル: 2026-05 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 26 時間）

## 編集部のひとこと（Pip）
え、待って、ABOUTのまわりに過去の配信画像が散らばってるの、ずっと見てきた勢は泣くやつ……！すりガラス越しに思い出がにじむ感じ、エモすぎる！！

## デザインの見どころ
- FVの下端を白い弧で切り、日付・会場・時刻を中央に積む。絵を見た目線が、そのまま公演情報に落ちる
- キャストは少しずつ傾けたポラロイド風のカード。並べただけの紹介が、夏のアルバムに見えてくる
- チケット購入は右下のオレンジのボタンに固定。水色の画面で浮く補色が、どこまで読んでも手の届く位置にある

## 配色
- #00bcff Summer Sky（セクション背景（NEWS・CAST）/ 英字見出し）
- #ffffff White（背景 / カード枠）
- #cbf1ff Pale Aqua（サブ背景 / 枠内の地色）
- #f291bb Candy Pink（ボタン・アクセント）
- #fc8596 Coral Pink（日付・キャッチコピー）
- #f98b12 Sunset Orange（固定CTAのグラデーション（スクショから採色））

## フォント
- 和文本文・見出し: M PLUS 1p（代替: M PLUS 1p）
- 英字見出し・ナビ・日付: ads-dada（Adobe Fonts）（代替: Mochiy Pop One）

## よくある質問
### なつありうむっ！特設サイトで使われているフォントは？
和文は M PLUS 1p、英字見出しやナビ、日付には Adobe Fonts の丸みの強い書体（CSS上の名前は ads-dada）が使われています。無料で近づけるなら英字に Mochiy Pop One が合わせやすいです。

### このサイトの夏らしさはどこで出している？
青空と海の背景、水色の面、波形のセクション区切り、水面模様の背景、砂浜のようなベージュのグッズ欄など、色と形のモチーフを夏の水辺に統一している点です。

### キャラクターのイラストを参考資料に使ってもよい？
キャラクターの権利は所属事務所に帰属します。参考にするのはレイアウトや配色、カードの見せ方までにとどめ、イラストやロゴ自体は使わないでください。

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