VTuberJapanPicked 2026.09.26

HIMEHINA Cover ALBUM「ヒメヒナウタミタ参」特設サイト

VTuber / 配信者のWebデザイン参考 — VTuber・音楽（カバーアルバム）

出典: spc.himehina.jp

HIMEHINA Cover ALBUM「ヒメヒナウタミタ参」特設サイトのPC版ファーストビュー

HIMEHINA Cover ALBUM「ヒメヒナウタミタ参」特設サイトのスマホ版ファーストビュー

Editor's note — 編集部の視点

カートに乗った2人の絵が、そのまま看板。

HIMEHINAのカバーアルバム『ヒメヒナウタミタ参』特設サイトは、お菓子とメガホンを抱えた2人のイラストを全面に置き、発売告知・商品・収録曲・シェアだけの短い1ページに絞っている。

BrunoStructure & IA

予約開始日と発売日を、タイトルのすぐ下に並べてるんだよね。いつ買えて、いつ届くかが商品カードより先にわかる。そのあと豪華盤と通常盤を比べる流れ。これはうまい。

1FV直下に黒地の電光掲示板風ティッカーで発売日を流す。絵を邪魔せず、日付だけは確実に目に入る
2ナビはTOP・RELEASE・TRACK LIST・SHAREの4つ。予約して、曲を知って、広める順番そのまま
3曲番号は黄色で大きく、未発表曲は「XXXXX」の伏せ字。発売までの楽しみを、リストに残している

Color

HIMEHINA Cover ALBUM「ヒメヒナウタミタ参」特設サイトの配色

Typography

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

本文・商品情報

Aa あア

使用: M PLUS Rounded 1c
代替: M PLUS Rounded 1c

ティッカーのドット文字

Aa あア

使用: DotGothic16
代替: DotGothic16

英字見出し・ナビ

Aa あア

使用: Unbounded
代替: Unbounded

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

見出しKatapick 型44px · 1.1 · 800
小見出しKatapick 型18.7px · 1.8 · 700
本文The quick brown fox — 参考を型にする16px · 1.8 · 400
注釈The quick brown fox — 参考を型にする12px · 1.4 · 700

Structure

ページ構成（上から順）

01
ヘッダー
左上にロゴ、TOP / RELEASE / TRACK LIST / SHARE を色付きのドットで区切った角丸のピル型ナビ。スクロール中も表示。SPは丸いハンバーガーボタン。
02
キービジュアル
ショッピングカートに乗り、お菓子やメガホンを抱えた2人のイラストを角丸で大きく見せ、右下にタイトルロゴ、左下にイラストレーターのクレジット。
03
ティッカー
黒に近い深緑の帯に「HIMEHINA COVER ALBUM「ヒメヒナウタミタ参」 2026.12.23 ON SALE」をドット文字で流す。
04
タイトル
水色〜黄色のグラデーションに同心円を重ね、タイトルロゴと「2026.12.23 WED RELEASE」「予約開始 2026.8.11 TUE」。
05
RELEASE
豪華盤・通常盤を横長のカードに分け、ジャケット、価格、仕様、特典の画像、「予約はこちら」ボタンを並べる。
06
TRACK LIST
深い青緑の地にCDジャケットと2列の曲目リスト。下端にイコライザーのようなドットの装飾。
07
SHARE
黄色の角丸パネルに、X でシェアするボタンを1つだけ置く。
08
フッター
黄色の地に巨大な「UTAMITA」とピンクの棒グラフ状のマーク、下にもう1本のティッカーとコピーライト。

Interaction

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

ティッカーは同じ文字列を横に並べ、@keyframes で translateX させる無限マーキー
ヘッダーのピル型ナビは固定表示で、各章へのアンカーリンクになっている
右下の「BACK TO TOP」は円周に沿って文字を配置した丸いボタン。SVG の textPath で作れる（raw のフォント使用箇所に textpath あり）
SPのキービジュアル上端に青いバーが見え、スクロール量を示すプログレスバーと思われる

スクロールのコマ撮り250–26000ms

HIMEHINA Cover ALBUM「ヒメヒナウタミタ参」特設サイトをスクロールしたときのフレーム1 — 01

HIMEHINA Cover ALBUM「ヒメヒナウタミタ参」特設サイトをスクロールしたときのフレーム2 — 02

HIMEHINA Cover ALBUM「ヒメヒナウタミタ参」特設サイトをスクロールしたときのフレーム3 — 03

HIMEHINA Cover ALBUM「ヒメヒナウタミタ参」特設サイトをスクロールしたときのフレーム4 — 04

HIMEHINA Cover ALBUM「ヒメヒナウタミタ参」特設サイトをスクロールしたときのフレーム5 — 05

HIMEHINA Cover ALBUM「ヒメヒナウタミタ参」特設サイトをスクロールしたときのフレーム6 — 06

検出された技術:Google Fonts

Reproduce

再現するときのポイント

01イラストは角丸で切り抜いて画面いっぱいに見せ、ロゴとクレジットだけを重ねる
02発売日の告知は DotGothic16 のドット文字で暗い帯に流し、電光掲示板のように見せる
03黄・水色・ピンクの3色を軸にし、テキストは黒ではなく深い青緑 #0c2a24 にする
04章は RELEASE・TRACK LIST・SHARE の3つに絞り、1ページで完結させる

再現MDに含まれるもの

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

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

himehina-utamita-3.katapick.md

1---
2title: "HIMEHINA Cover ALBUM「ヒメヒナウタミタ参」特設サイト 再現用デザイン仕様書"
3source: https://spc.himehina.jp/utamita3/
4katapick: https://katapick.com/sites/himehina-utamita-3
5category: VTuber / 配信者
6region: 国内 (JP)
7tags: [イラスト, ビビッド, マーキー, 固定ナビ, 角丸]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12estimated_hours: 16
13generator: Katapick
14---
15 
16# HIMEHINA Cover ALBUM「ヒメヒナウタミタ参」特設サイト — 再現用デザイン仕様書
17 
18> カートに乗った2人の絵が、そのまま看板。HIMEHINAのカバーアルバム『ヒメヒナウタミタ参』特設サイトは、お菓子とメガホンを抱えた2人のイラストを全面に置き、発売告知・商品・収録曲・シェアだけの短い1ページに絞っている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22