Commit 1b36a7a

<html lang="ja">

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />

<title>Aifate HUB — 観測実験室 Prototype</title>

:root{

--bg:#061019;--panel:#0b1824;--panel2:#0d1e2c;--line:rgba(255,255,255,.10);

--text:#edf8ff;--muted:#88a0b4;--cyan:#74e9ff;--green:#63df9d;--yellow:#ffd66d;

--red:#ff7184;--violet:#b79cff;--shadow:0 18px 48px rgba(0,0,0,.34)

}

*{box-sizing:border-box}

html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -10%,rgba(50,135,190,.17),transparent 35%),linear-gradient(180deg,#07111a,#040a0f 70%);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif}

body{padding-bottom:env(safe-area-inset-bottom)}

button,select,input{font:inherit}

button{cursor:pointer}

a{color:inherit;text-decoration:none}

.shell{width:min(1180px,100%);margin:0 auto;padding:12px 14px 30px}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0 12px}

.brand{display:flex;align-items:center;gap:10px}.logo{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(116,233,255,.55);box-shadow:0 0 20px rgba(116,233,255,.15) inset}.logo:before{content:'A';font-weight:800}.brand b{display:block;font-size:14px;letter-spacing:.08em}.brand small{display:block;color:var(--muted);font-size:9px;margin-top:1px}.back{border:1px solid var(--line);background:rgba(255,255,255,.04);color:#bfd0dd;padding:8px 10px;border-radius:10px;font-size:10px}

.nav{display:flex;gap:7px;overflow:auto;padding:2px 0 12px;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}.nav button{flex:0 0 auto;border:1px solid var(--line);background:rgba(255,255,255,.035);color:#91a7b8;padding:9px 12px;border-radius:999px;font-size:10px}.nav button.active{color:#eaffff;border-color:rgba(116,233,255,.45);background:rgba(116,233,255,.10)}

.hero{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin:4px 0 12px}.hero h1{font-size:22px;margin:0 0 5px}.hero p{margin:0;color:#91a9ba;font-size:11px;line-height:1.6}.sample{flex:0 0 auto;border:1px solid rgba(255,214,109,.35);background:rgba(255,214,109,.08);color:#ffe6a1;border-radius:999px;padding:6px 9px;font-size:9px}

.grid{display:grid;grid-template-columns:1.15fr .85fr;gap:12px}.card{background:linear-gradient(180deg,rgba(13,30,44,.90),rgba(8,20,30,.90));border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:14px}.card h2{font-size:13px;margin:0 0 10px}.sub{color:#7f98aa;font-size:9px;letter-spacing:.11em;text-transform:uppercase;margin-bottom:5px}

.statuses{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.source{border:1px solid var(--line);border-radius:12px;padding:9px 10px;background:rgba(255,255,255,.025)}.source .line{display:flex;align-items:center;justify-content:space-between;gap:8px}.source b{font-size:10px}.source small{display:block;color:var(--muted);font-size:8px;margin-top:4px}.dot{width:7px;height:7px;border-radius:50%;display:inline-block}.ok{background:var(--green);box-shadow:0 0 10px rgba(99,223,157,.6)}.pending{background:var(--yellow);box-shadow:0 0 10px rgba(255,214,109,.5)}.later{background:#607789}

.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.field label{display:block;color:#8299aa;font-size:9px;margin:0 0 5px}.control{width:100%;border:1px solid var(--line);background:#09141e;color:#eaf7ff;border-radius:10px;padding:10px 10px;font-size:11px;outline:none}.control:focus{border-color:rgba(116,233,255,.45)}.wide{grid-column:1/-1}.hypo{min-height:74px;resize:none}.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.chip{border:1px solid rgba(116,233,255,.23);background:rgba(116,233,255,.07);color:#c8f8ff;border-radius:999px;padding:6px 8px;font-size:9px}.actions{display:flex;gap:8px;margin-top:12px}.primary,.secondary{border-radius:11px;padding:10px 12px;font-weight:700;font-size:10px}.primary{border:1px solid rgba(116,233,255,.42);background:rgba(116,233,255,.13);color:#eaffff}.secondary{border:1px solid var(--line);background:rgba(255,255,255,.04);color:#a9bdcb}

.obs-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.obs-head h2{margin-bottom:3px}.obs-title{font-size:15px;font-weight:750}.state{border:1px solid rgba(99,223,157,.30);background:rgba(99,223,157,.08);color:#a9f1c8;padding:5px 8px;border-radius:999px;font-size:9px}.meta{font-size:9px;color:#7f97a8;margin-top:4px}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.metric{padding:10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.022)}.metric b{display:block;font-size:17px}.metric span{display:block;color:#7f98aa;font-size:8px;margin-top:3px}.delta{margin-top:5px;font-size:9px;color:var(--green)}.delta.down{color:var(--red)}

.periods{display:flex;gap:6px;margin:12px 0 4px}.periods button{border:1px solid var(--line);background:transparent;color:#8298a9;border-radius:8px;padding:6px 9px;font-size:9px}.periods button.active{color:#eaffff;border-color:rgba(116,233,255,.4);background:rgba(116,233,255,.09)}

.chart{margin-top:10px;height:148px;display:flex;align-items:flex-end;gap:8px;padding:12px 4px 0;border-bottom:1px solid var(--line);position:relative}.chart:before,.chart:after{content:'';position:absolute;left:0;right:0;border-top:1px dashed rgba(255,255,255,.07)}.chart:before{top:36%}.chart:after{top:66%}.barset{flex:1;display:flex;align-items:flex-end;gap:3px;height:100%;position:relative;z-index:1}.bar{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,rgba(116,233,255,.92),rgba(116,233,255,.22));min-height:4px}.bar.alt{background:linear-gradient(180deg,rgba(183,156,255,.92),rgba(183,156,255,.22))}.xlabel{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:7px;color:#6f8596;white-space:nowrap}

.full{grid-column:1/-1}.toolbar{display:flex;gap:7px;flex-wrap:wrap;margin:2px 0 10px}.filter{border:1px solid var(--line);background:rgba(255,255,255,.025);color:#aebfcb;border-radius:9px;padding:7px 9px;font-size:9px}.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:12px}.table{min-width:780px;width:100%;border-collapse:collapse}.table th,.table td{text-align:left;padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.06);font-size:9px}.table th{color:#6f889a;font-weight:600;background:rgba(255,255,255,.025);position:sticky;top:0}.table tr:last-child td{border-bottom:0}.table td:first-child{font-size:10px;font-weight:650}.up{color:var(--green)}.dn{color:var(--red)}.tag{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:3px 6px;color:#9db1c0;font-size:8px}.tag.visit{color:#c9baff;border-color:rgba(183,156,255,.35);background:rgba(183,156,255,.07)}

.insight{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;border:1px solid rgba(116,233,255,.16);background:rgba(116,233,255,.045);border-radius:13px;padding:11px;margin-top:11px}.orb{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(116,233,255,.38);color:#dffcff;box-shadow:0 0 18px rgba(116,233,255,.12)}.insight b{font-size:10px}.insight p{font-size:9px;line-height:1.65;color:#91a7b7;margin:4px 0 0}

.footnote{margin-top:10px;color:#708797;font-size:8px;line-height:1.6}

@media(max-width:760px){.shell{padding:10px 10px 24px}.grid{grid-template-columns:1fr}.hero h1{font-size:18px}.hero p{font-size:10px}.statuses{grid-template-columns:1fr}.formgrid{grid-template-columns:1fr}.wide{grid-column:auto}.metric-grid{grid-template-columns:repeat(2,1fr)}.card{padding:12px;border-radius:14px}.hero{align-items:center}.sample{font-size:8px}.tablewrap{margin-left:-1px;margin-right:-1px}.actions{position:sticky;bottom:8px;z-index:5}.primary,.secondary{backdrop-filter:blur(12px)}}

@media(max-width:390px){.brand small{display:none}.hero{gap:8px}.hero h1{font-size:17px}.metric b{font-size:15px}.nav button{padding:8px 10px}.sample{padding:5px 7px}}

<div class="shell">

<div class="topbar">

<div class="brand"><div class="logo"></div><div><b>AIFATE HUB</b><small>GROWTH OBSERVATION LAB</small></div></div>

<a class="back" href="./index.html">← HOME</a>

</div>

<div class="nav">

<button>集客概況</button><button>回遊</button><button>広告</button><button class="active">実験室</button>

</div>

<div class="hero">

<div><h1>観測実験室</h1><p>仮説を固定し、記事群を同じ条件で観測して、次の一手につなげる。</p></div>

<div class="sample">SAMPLE DATA</div>

</div>

<div class="statuses">

<div class="source"><div class="line"><b>GA4 Data API</b><span class="dot ok"></span></div><small>既存接続を利用 / 流入・回遊・イベント</small></div>

<div class="source"><div class="line"><b>Search Console</b><span class="dot pending"></span></div><small>HUB API接続を追加 / 検索語句・表示・CTR・順位</small></div>

<div class="source"><div class="line"><b>AdSense</b><span class="dot later"></span></div><small>後段追加 / Page RPM・推定収益</small></div>

</div>

<div class="grid">

<section class="card">

<div class="sub">Create observation</div><h2>実験条件を固定する</h2>

<div class="formgrid">

<div class="field"><label>観測名</label><input class="control" value="三重県10記事テスト #01" /></div>

<div class="field"><label>対象媒体</label><select class="control"><option>Twinow</option></select></div>

<div class="field"><label>対象地域</label><select class="control"><option>三重県</option><option>愛知県</option></select></div>

<div class="field"><label>対象記事</label><select class="control"><option>10記事</option><option>20記事</option></select></div>

<div class="field"><label>観測期間</label><select class="control"><option>7日</option><option>14日</option><option>30日</option><option>60日</option><option>90日</option></select></div>

<div class="field"><label>比較基準</label><select class="control"><option>同カテゴリ直近平均</option><option>前期間</option><option>比較群B</option></select></div>

<div class="field wide"><label>仮説</label><textarea class="control hypo">現地取材・独自写真・周辺行動情報を追加した記事群は、AI調査のみの記事群より検索表示・CTR・回遊率が伸びる。</textarea></div>

</div>

<div class="chips"><span class="chip">Organic</span><span class="chip">グルメ</span><span class="chip">三重県</span><span class="chip">現地取材比較</span><span class="chip">Mobile含む</span></div>

<div class="actions"><button class="primary" id="startBtn">この条件で観測を開始</button><button class="secondary" id="saveBtn">下書き保存</button></div>

</section>

<section class="card">

<div class="obs-head"><div><div class="sub">Active observation</div><div class="obs-title">三重県10記事テスト #01</div><div class="meta">Twinow / 三重県 / 10記事 / Day 7 of 30</div></div><div class="state">観測中</div></div>

<div class="metric-grid">

<div class="metric"><b id="impressions">18,920</b><span>検索表示</span><div class="delta">+24.6%</div></div>

<div class="metric"><b id="ctr">5.4%</b><span>CTR</span><div class="delta">+1.8pt</div></div>

<div class="metric"><b id="circulation">34.1%</b><span>2ページ以上回遊</span><div class="delta">+8.2pt</div></div>

<div class="metric"><b id="store">96</b><span>店舗遷移</span><div class="delta">+31.5%</div></div>

</div>

<div class="periods"><button data-p="7" class="active">7日</button><button data-p="14">14日</button><button data-p="30">30日</button><button data-p="60">60日</button><button data-p="90">90日</button></div>

<div class="chart" id="chart"></div>

<div class="insight"><div class="orb">響</div><div><b>観測メモ</b><p id="insightText">現地取材あり5記事は、AI調査のみ5記事よりCTRと回遊率が高い傾向です。まだ7日なので結論は固定せず、14日まで同条件で観測を継続します。</p></div></div>

</section>

<section class="card full">

<div class="sub">Article comparison</div><h2>10記事を同じ条件で比較</h2>

<div class="toolbar"><button class="filter">地域：三重県</button><button class="filter">媒体：Twinow</button><button class="filter">流入：Organic</button><button class="filter">並び：変化率</button></div>

<div class="tablewrap">

<table class="table">

<thead><tr><th>記事</th><th>方式</th><th>表示</th><th>CTR</th><th>平均順位</th><th>回遊率</th><th>店舗遷移</th><th>変化</th></tr></thead>

<tbody>

<tr><td>伊勢のお参りに、甘いひと休み。赤福餅</td><td><span class="tag visit">現地取材</span></td><td>3,820</td><td>6.8%</td><td>9.7</td><td>41%</td><td>28</td><td class="up">↑ 32%</td></tr>

<tr><td>伊勢神宮のあとに食べたい伊勢うどん</td><td><span class="tag visit">現地取材</span></td><td>3,110</td><td>6.2%</td><td>10.8</td><td>38%</td><td>21</td><td class="up">↑ 27%</td></tr>

<tr><td>おかげ横丁で買う三重のお土産</td><td><span class="tag visit">現地取材</span></td><td>2,740</td><td>5.9%</td><td>11.2</td><td>36%</td><td>18</td><td class="up">↑ 19%</td></tr>

<tr><td>雨の日でも楽しめる伊勢周辺</td><td><span class="tag">AI調査</span></td><td>2,020</td><td>4.1%</td><td>15.4</td><td>29%</td><td>9</td><td class="up">↑ 7%</td></tr>

<tr><td>子連れで歩く伊勢エリア</td><td><span class="tag">AI調査</span></td><td>1,880</td><td>3.8%</td><td>17.1</td><td>26%</td><td>7</td><td class="dn">↓ 2%</td></tr>

<tr><td>伊勢市駅から始める半日プラン</td><td><span class="tag visit">現地取材</span></td><td>1,650</td><td>5.2%</td><td>12.6</td><td>35%</td><td>8</td><td class="up">↑ 14%</td></tr>

<tr><td>伊勢の駐車場を迷わず選ぶ</td><td><span class="tag">AI調査</span></td><td>1,420</td><td>3.5%</td><td>18.8</td><td>24%</td><td>3</td><td class="dn">↓ 4%</td></tr>

<tr><td>五十鈴川周辺でひと休み</td><td><span class="tag visit">現地取材</span></td><td>1,210</td><td>5.0%</td><td>13.9</td><td>33%</td><td>2</td><td class="up">↑ 11%</td></tr>

<tr><td>伊勢で今日買える手土産</td><td><span class="tag">AI調査</span></td><td>690</td><td>3.2%</td><td>21.4</td><td>19%</td><td>0</td><td class="dn">↓ 8%</td></tr>

<tr><td>伊勢から志摩へつなぐ寄り道</td><td><span class="tag">AI調査</span></td><td>380</td><td>2.9%</td><td>24.1</td><td>18%</td><td>0</td><td class="dn">↓ 12%</td></tr>

</tbody>

</table>

</div>

<div class="insight"><div class="orb">AI</div><div><b>次の仮説候補</b><p>「現地取材あり」が検索と回遊の両方で優位なら、次は鈴鹿・津で同じ5対5比較を再現。逆に差が薄ければ、取材有無ではなく画像・タイトル・内部リンク条件を1つずつ切り分ける。</p></div></div>

<div class="footnote">※ このページの数値は画面設計確認用のサンプルです。本実装ではGA4 / Search Console / HUB記事マスタの実データへバインドします。</div>

</section>

</div>

const chart=document.getElementById('chart');

const series={7:[32,44,38,57,49,66,72],14:[28,35,42,39,48,55,61,58,64,69,72,76,78,82],30:[18,22,26,24,31,35,39,42,45,49,52,55,59,61,63,66,69,72,75,77,79,81,84,86,88,90,91,93,95,97]};

function draw(days){const data=series[days]||series[30];chart.innerHTML='';const show=data.length>16?data.filter((_,i)=>i%Math.ceil(data.length/14)===0):data;show.forEach((v,i)=>{const s=document.createElement('div');s.className='barset';const a=document.createElement('div');a.className='bar';a.style.height=(v*.78)+'%';const b=document.createElement('div');b.className='bar alt';b.style.height=Math.max(12,(v-12)*.62)+'%';s.append(a,b);if(i===0||i===show.length-1){const x=document.createElement('span');x.className='xlabel';x.textContent=i===0?'START':'NOW';s.append(x)}chart.append(s)})}

document.querySelectorAll('.periods button').forEach(btn=>btn.addEventListener('click',()=>{document.querySelectorAll('.periods button').forEach(b=>b.classList.remove('active'));btn.classList.add('active');const p=+btn.dataset.p;draw(p);document.getElementById('insightText').textContent=p<=14?'まだ短期観測です。順位・CTR・回遊の方向は見え始めていますが、結論を固定せず同条件で継続します。':'観測期間が長くなったので、単発変動より傾向を重視します。記事群ごとの差と改善後の持続性を比較します。'}));