// ===== NEXTAGE shared data + primitives ===== const AURAS = [ { id: 'em', name: 'エメラルド', c: 'oklch(0.78 0.17 163)' }, { id: 'sky', name: 'スカイ', c: 'oklch(0.75 0.15 235)' }, { id: 'amber', name: 'アンバー', c: 'oklch(0.82 0.16 75)' }, { id: 'rose', name: 'ローズ', c: 'oklch(0.72 0.19 355)' }, { id: 'violet', name: 'バイオレット', c: 'oklch(0.68 0.19 295)' }, { id: 'flame', name: 'フレイム', c: 'oklch(0.7 0.2 35)' }, ]; const auraC = (id) => (AURAS.find(a => a.id === id) || AURAS[0]).c; // 設定（cfg）の「グラスの色」または「縁の色」から、次へ・達成ボタンの配色と白・黒フラグを判定する関数 // cfg: オーナーの設定オブジェクト（{ plan, glassColor, frameStyle }） // 戻り値: { color: CSSカラー値, isWhite: 真偽値, isBlack: 真偽値 } function getButtonTheme(cfg) { // 設定が未ロードの場合はデフォルトのエメラルドグラス色を適用 if (!cfg) return { color: 'oklch(0.62 0.14 165)', isWhite: false, isBlack: false }; // 有料プラン（PRO）の場合は設定された「グラスの色」を採用 // 無料プランの場合は「縁の色（白または黒）」を採用する（料理で言えばお皿の材質に合わせてカトラリーを選ぶイメージ） const isPro = cfg.plan === 'pro'; let color = isPro ? (cfg.glassColor || 'oklch(0.62 0.14 165)') : (cfg.frameStyle === 'black' ? '#0d0f0e' : '#ffffff'); // 白系統判定（#ffffff, white, または明度0.95以上のoklch） // 背景の白に同化しないよう、特別な境界線と影を付与するためのフラグ const lower = String(color).toLowerCase().trim(); const isWhite = lower === '#ffffff' || lower === '#fff' || lower === 'white' || lower.includes('0.98') || lower.includes('0.97') || lower.includes('0.99'); const isBlack = lower === '#0d0f0e' || lower === '#000000' || lower === '#000' || lower === 'black' || lower.includes('0.32'); return { color, isWhite, isBlack }; } const S = (k, a, h, tpl) => ({ k, a, h, tpl }); const INITIAL_ROADMAP = { id: 'rm1', title: '声活アクションプラン', owner: 'たちばな', slug: 'tachibana/seikatsu', published: true, stages: [ { id: 's1', title: '声の土台をつくる', aura: 'em', steps: [ S('01 BODY', '鏡の前で、肩の力を抜いてまっすぐ立つ', '頭のてっぺんが透明な糸で吊られているイメージ', 0), S('02 BREATH', 'お腹に手を当てて、4秒かけて深く吸う', '肩が上がらないよう横隔膜の広がりを意識', 2), S('03 BREATH', '8秒かけて一定の息で「スー」と吐き切る', '最後まで音の太さとスピードを変えないのがコツ', 0), S('04 LOOP', '吸う→吐くの呼吸を丁寧に5セット繰り返す', '終わったら首と肩を脱力して軽く回しましょう', 3), S('05 CHECK', '今日の体の軽さ・姿勢を10段階でメモ', '毎日の感覚の差を記録して自分の調子を知る', 1), S('06 HABIT', '明日も同じ時間にアラームをセットする', 'プロの声は毎日の小さな継続から生まれます', 4), ]}, { id: 's2', title: '毎日の発声ルーティン', aura: 'sky', steps: [ S('01 MOUTH', '割りばしを軽くくわえて「あえいうえおあお」', '口角が下がらないよう笑顔の表情筋をキープ', 2), S('02 LIP', '唇を震わせるリップロールを連続30秒キープ', '途中で止まったら息のスピードを一定に調整', 0), S('03 PITCH', '一番低い音から高い音まで「ん〜」と滑らかに移行', '喉を締めず、鼻の奥（鼻腔共鳴）に響かせる感覚', 2), S('04 BASE', '普段話す高さ（地声のキー）を1音決める', 'ピアノアプリで音名（CやDなど）を記録', 1), S('05 READ', '外郎売（ういろううり）の冒頭をノーミスで1回読む', '上手さよりも、言葉の子音を粒立ちよく立てる', 3), S('06 SLOW', 'もう1回、半分のスピードで一音一音丁寧に読む', '舌と唇の可動域を限界まで使って発声する', 2), S('07 TIME', '今日のルーティンにかかった時間を記録する', '毎日15分以内を目安に習慣化しましょう', 4), ]}, { id: 's3', title: '録音して客観的に聴く', aura: 'amber', steps: [ S('01 PREP', 'スマホのボイスメモを開いて機内モードにする', '着信や通知の振動が入らないように準備', 3), S('02 REC', '外郎売の冒頭を「撮り直しなし」で1回録音', '完璧を目指さず、今のリアルな声を残す勇気', 0), S('03 LISTEN', 'イヤホンをして、耳を澄ませて1回通して聴く', '最初は恥ずかしくて当然。それが上達の第一歩', 1), S('04 FOCUS', '直したいポイントを「1つだけ」ノートに書き出す', '改善点を1つに絞ることが最短上達の秘訣', 2), S('05 SAVE', '音源ファイル名に日付をつけてクラウド保存', '1か月後の自分の声と聴き比べる宝物になります', 4), ]}, { id: 's4', title: 'ボイスサンプルを作る', aura: 'rose', steps: [ S('01 CHARACTER', '自分の声に似合うキャラクター・役を3つ選定', '「人からよく言われる声の印象」を素直に入れる', 0), S('02 SCRIPT', '1役につき15秒程度の短いセリフを用意する', '喜怒哀楽の感情がはっきり伝わるセリフに絞る', 2), S('03 REC', '部屋の反響を抑えて3役を順番に録音する', 'クローゼットや布団を活用するだけで音質劇的向上', 3), S('04 EDIT', '冒頭と末尾の余計な無音部分をトリミング', '頭の無音は0.3秒〜0.5秒だけ残すのが業界標準', 1), S('05 FEEDBACK', '信頼できる友人1人に聴いてもらい感想を聞く', '「どの役が一番自然に聞こえたか」だけを尋ねる', 2), S('06 FINISH', '最高テイクを書き出してポートフォリオ完成', 'いつでも送れるように共有URLを控えておく', 4), ]}, { id: 's5', title: 'オーディションに応募する', aura: 'violet', steps: [ S('01 TARGET', '応募したいオーディションや事務所を3つリストアップ', '所属声優のボイスサンプルを聴いて傾向をリサーチ', 0), S('02 GUIDELINE', '募集要項の形式（mp3/wav/尺）を再確認する', '提出ミスを防ぐため形式のチェックリストを作成', 1), S('03 SUBMIT', '自信を持ってボイスサンプルを1社に提出する', '送った日時と提出したファイル名を必ず記録', 2), S('04 NEXT', '結果を待たずに次の応募日をカレンダーに入れる', '1社に固執せず、行動し続けることで道が開けます', 4), ]}, ], }; // 受講者の初期進捗（デモ用）: stageId -> cleared count, 'new' flags const INITIAL_PROGRESS = { s1: 6, s2: 3, s3: 0, s4: 0, s5: 0 }; // ===== primitives ===== function Logo({ size = 18, color, mark = true, style }) { return ( {mark && } NEXTAGE ); } function LogoPattern({ opacity = 0.05, color = '#0f1f19', rows = 16 }) { const row = Array.from({ length: 10 }, (_, i) => NEXTAGE); return (
{Array.from({ length: rows }, (_, r) =>
{row}
)}
); } // スライド右側に配置する近未来アニメ調の図解ビジュアル（SVG） // ステップの内容（姿勢、呼吸、共鳴、ループ等）に合わせて最適なダイアグラムを動的描画します function SlideVisual({ type = 'generic' }) { if (type === 'posture') { // 姿勢・軸ガイドダイアグラム return ( VERTICAL AXIS 90° ); } if (type === 'breath') { // 呼吸リズム波形ダイアグラム return ( IN 4s OUT 8s ); } if (type === 'sound') { // 音響・共鳴レゾナンスダイアグラム return ( ACOUSTIC SPECTRUM ); } if (type === 'loop') { // 習慣・反復ループダイアグラム return ( HABIT FORMATION ); } // generic: 万能オーラヘキサゴン＆オービット return ( ); } // スライド1枚を表示するコンポーネント（Neo-Action Slide System） // 引数: step（スライドのデータ情報）, idx（現在のスライド番号 0始まり）, total（全体の枚数）, style（CSSスタイル） function Slide({ step, idx, total, style }) { if (!step) return null; // 画像が登録されている場合は実画像スライドとして表示 if (step.image) { return (
{step.a
{String(idx + 1).padStart(2, '0')} / {String(total).padStart(2, '0')}
); } // ステップの種類やキーワードからビジュアル種別を動的判定 const text = ((step.k || '') + ' ' + (step.a || '')).toUpperCase(); let vizType = 'generic'; if (text.includes('POSTURE') || text.includes('BODY') || text.includes('立') || text.includes('姿')) vizType = 'posture'; else if (text.includes('BREATH') || text.includes('息') || text.includes('吸') || text.includes('吐')) vizType = 'breath'; else if (text.includes('RESONANCE') || text.includes('PITCH') || text.includes('REC') || text.includes('録音') || text.includes('声') || text.includes('MOUTH')) vizType = 'sound'; else if (text.includes('LOOP') || text.includes('HABIT') || text.includes('TIME') || text.includes('時間') || text.includes('継続')) vizType = 'loop'; return (
{/* 背景のアンビエント光彩とテックグリッド */}
{/* スライド番号バッジ（右上） */}
{String(idx + 1).padStart(2, '0')} / {String(total).padStart(2, '0')}
{/* メインコンテンツ（左側） */}
{step.k && (
{step.k}
)}
{step.a}
{step.h && (
POINT {step.h}
)}
{/* 右側のスタイリッシュな図解ダイアグラム */}
); } function CheckIcon({ size = 14, color = '#fff' }) { return ( ); } function Chevron({ dir = 'r', size = 14 }) { const r = { r: 0, l: 180, d: 90, u: -90 }[dir]; return ( ); } // 縁 (frame) — the core product surface function Frame({ cfg, stage, cleared, total, compact, children, frameRef, onSlideClick, fx }) { const isPro = cfg.plan === 'pro'; const style = isPro ? 'glass' : (cfg.frameStyle === 'black' ? 'black' : 'white'); const gc = cfg.glassColor; const pct = total ? (cleared / total) * 100 : 0; const fill = style === 'glass' ? '#fff' : auraC(stage.aura); return (
{children}
{stage.title}
{isPro && (
{cleared}/{total}
)} {(!isPro || cfg.poweredBy) && (
Powered by
)}
{fx}
); } Object.assign(window, { AURAS, auraC, getButtonTheme, INITIAL_ROADMAP, INITIAL_PROGRESS, Logo, LogoPattern, Slide, CheckIcon, Chevron, Frame });