WEBSITE · 24.0 KB
output/qa-export/index.html
Workspace snapshot · 08/31 23:51
Preview
Source
<!doctype html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>QA BtoB Service</title><meta name="description" content="実ブラウザQA用の納品LP"><meta property="og:type" content="website"><meta property="og:title" content="QA BtoB Service"><meta property="og:description" content="実ブラウザQA用の納品LP"><meta property="og:url" content=""><meta name="twitter:card" content="summary_large_image"><link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%23111'/%3E%3Cpath d='M17 18h30v8H27v20H17z' fill='%23fff'/%3E%3C/svg%3E"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600;800&family=Noto+Serif+JP:wght@500;700&display=swap" rel="stylesheet"><script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage","name":"QA BtoB Service","description":"実ブラウザQA用の納品LP"}</script><style>:root{--ink:#171717;--accent:#ff5b35;--paper:#f4f1e8;--line:color-mix(in srgb,var(--ink) 18%,transparent)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans JP',sans-serif;overflow-wrap:anywhere;word-break:normal;line-break:strict}.skip{position:fixed;z-index:99;left:12px;top:12px;padding:12px 16px;background:var(--ink);color:var(--paper);transform:translateY(-160%)}.skip:focus{transform:none}:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.site-header{position:sticky;z-index:20;top:0;min-height:68px;padding:12px clamp(20px,5vw,72px);display:flex;align-items:center;gap:28px;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.brand{margin-right:auto;color:inherit;text-decoration:none;font-weight:800}.site-nav{display:flex;gap:18px}.site-nav a{color:inherit;text-decoration:none;font-size:.82rem}.button,.lead-form button{display:inline-flex;align-items:center;justify-content:center;gap:24px;margin-top:24px;padding:15px 20px;border:0;background:var(--accent);color:var(--ink);font:inherit;font-weight:800;text-decoration:none}.section{border-bottom:1px solid var(--line)}.inner{width:min(1160px,calc(100% - 40px));margin:auto;padding:clamp(64px,8vw,112px) 0}.type-hero .inner{min-height:min(760px,86vh);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(28px,6vw,80px)}.hero-copy .section-visual{margin-top:30px}.section-heading{max-width:760px}.section-heading small{font-size:.72rem;letter-spacing:.14em;font-weight:700}.section-heading h1{margin:.25em 0;font-size:clamp(2.6rem,6vw,6.3rem);line-height:1.15;letter-spacing:0}.section-heading h2,blockquote{margin:.3em 0;font-size:clamp(2rem,4.5vw,4.5rem);line-height:1.28;letter-spacing:.01em}.lead{font-size:clamp(1rem,1.4vw,1.25rem);line-height:1.9}.proof{display:inline-block;padding:8px 11px;border:1px solid var(--line);font-weight:700}.section-visual{margin:0}.section-visual img{display:block;width:100%;height:auto;max-height:680px;object-fit:cover}.cards,.evidence,.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px}.cards article,.evidence article,.plans article{padding:24px;border:1px solid var(--line)}.cards h3{font-size:1.25rem;line-height:1.5}.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:36px 0;padding:0;list-style:none}.steps li{padding:24px;border:1px solid var(--line)}.steps span{font-size:2rem;font-weight:800}.table-wrap{overflow:auto;margin-top:36px}table{width:100%;border-collapse:collapse}th,td{padding:18px;border:1px solid var(--line);text-align:left}.type-form .inner,.variant-hero-form .inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,6vw,72px)}.lead-form{display:grid;gap:14px;padding:clamp(20px,4vw,40px);background:color-mix(in srgb,var(--paper) 86%,var(--ink))}.lead-form label{display:grid;gap:6px}.lead-form input,.lead-form textarea{width:100%;padding:12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit}.lead-form .consent{grid-template-columns:auto 1fr;align-items:start}.lead-form .consent input{width:auto}.lead-form .consent a{color:inherit}.form-note,.form-status{margin:0;font-size:.78rem;line-height:1.6}.faq{margin-top:30px}.faq details{padding:20px 0;border-top:1px solid var(--line)}.faq summary{cursor:pointer;font-weight:700}.type-cta{text-align:center;background:var(--ink);color:var(--paper)}.type-message .inner{display:grid;grid-template-columns:1.2fr .8fr;gap:50px}.variant-feature-zigzag .cards{grid-template-columns:1fr}.variant-reason-stack .cards article:first-child{grid-row:span 2}.variant-lineup-catalog .cards{grid-template-columns:repeat(4,minmax(0,1fr))}.variant-review-cards .evidence article{min-height:220px}.variant-price-lineup .plans{grid-template-columns:repeat(2,minmax(0,1fr))}.site-footer{padding:28px clamp(20px,5vw,72px);display:flex;justify-content:space-between;gap:20px}.site-footer a{color:inherit}@media(max-width:760px){.site-header{align-items:flex-start}.site-nav{display:none}.type-hero .inner,.type-form .inner,.variant-hero-form .inner,.type-message .inner{grid-template-columns:1fr}.type-hero .inner{min-height:auto}.inner{width:min(100% - 32px,1160px);padding:56px 0}.section-heading h1{font-size:clamp(2.45rem,12vw,4rem)}.cards,.evidence,.plans,.steps,.variant-lineup-catalog .cards{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}</style></head><body><a class="skip" href="#content">本文へ移動</a><header class="site-header"><a class="brand" href="#content">QA BtoB Service</a><nav class="site-nav" aria-label="メインナビゲーション"><a href="#mechanism">MECHANISM</a><a href="#difference">DIFFERENCE</a><a href="#proof">CASE STUDY</a><a href="#pricing">PRICE</a></nav><a class="button" href="#contact">相談する</a></header><main id="content"><style>.proof-points,.feature-grid,.usecase-grid,.authority-points,.reviews,.price-lineup,.segments,.alternative-matrix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.proof-points article,.feature-grid article,.usecase-grid article,.authority-points article,.alternative-matrix article,.price-lineup article,.segments article{padding:24px;border:1px solid var(--line)}.metric-band,.cost-stack{display:grid;grid-template-columns:repeat(4,1fr);margin:36px 0}.metric-band div,.cost-stack div{padding:24px;border:1px solid var(--line)}.metric-band dt,.cost-stack dt{font-size:.72rem;letter-spacing:.12em}.metric-band dd,.cost-stack dd{margin:12px 0 0;font-size:1.2rem;font-weight:800}.logo-wall{display:flex;flex-wrap:wrap;gap:1px;margin:32px 0;background:var(--line)}.logo-wall span{flex:1 1 160px;padding:24px;background:var(--paper);text-align:center;font-weight:700}.checklist,.risk-list,.reason-stack{display:grid;gap:10px;padding:0;list-style:none;margin:32px 0}.checklist li,.risk-list li,.reason-stack li{display:flex;align-items:center;gap:18px;padding:20px;border-bottom:1px solid var(--line)}.checklist li:before{content:'✓';display:grid;place-items:center;width:28px;height:28px;background:var(--accent);font-weight:800}.narrative,.editorial-message{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;margin-top:36px}.narrative blockquote,.editorial-message blockquote{margin:0}.timeline{position:relative;display:grid;gap:0;padding:0;list-style:none;margin:36px 0}.timeline li{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:20px;border-top:1px solid var(--line)}.timeline time{font-size:.75rem;font-weight:800}.before-after,.compare-split,.fit-split{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:36px 0;background:var(--line)}.before-after article,.compare-split article,.fit-split article{padding:32px;background:var(--paper)}.solution-map{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:1px;margin:36px 0;background:var(--line)}.solution-map>*{padding:22px;background:var(--paper)}.process-circles{display:flex;justify-content:space-between;padding:0;list-style:none;margin:36px 0}.process-circles li{display:grid;place-items:center;width:180px;aspect-ratio:1;border:1px solid var(--line);border-radius:50%;text-align:center}.process-circles span{font-size:2rem;font-weight:800}.zigzag{display:grid;gap:20px;margin:36px 0}.zigzag article{display:grid;grid-template-columns:80px 1fr 1.2fr;align-items:center;gap:24px;padding:22px;border-top:1px solid var(--line)}.story-rail,.lineup{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:16px;overflow:auto;margin:36px 0}.story-rail article,.lineup article{padding:24px;border:1px solid var(--line)}.catalog-thumb .section-visual{margin-bottom:18px}.case-featured,.expert-profile,.content-split,.metric-case{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:48px;margin-top:36px}.metric-case dl{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}.metric-case dl div{padding:24px;background:var(--paper)}.reviews figure{margin:0;padding:24px;border:1px solid var(--line)}.reviews blockquote{font-size:1.2rem}.estimate{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:36px 0;padding:32px;border:1px solid var(--line)}.estimate b{font-size:2rem}.cta-banner,.sample-cta{width:min(1160px,calc(100% - 40px));margin:auto;padding:clamp(64px,8vw,112px) 0;text-align:center}.hero-copy-led{grid-column:1/-1;max-width:980px}.product-stage{padding:20px;border:1px solid var(--line)}.content-editorial{max-width:840px}.content-editorial>p{font-size:1.15rem;line-height:2}@media(max-width:760px){.proof-points,.feature-grid,.usecase-grid,.authority-points,.reviews,.price-lineup,.segments,.alternative-matrix,.metric-band,.cost-stack,.before-after,.compare-split,.fit-split,.solution-map,.narrative,.editorial-message,.case-featured,.expert-profile,.content-split,.metric-case,.estimate{grid-template-columns:1fr}.process-circles{display:grid;grid-template-columns:1fr 1fr;gap:12px}.process-circles li{width:100%}.zigzag article{grid-template-columns:52px 1fr}.zigzag article .section-visual{grid-column:1/-1}.timeline li{grid-template-columns:74px 1fr}}</style><section id="hero" class="section type-hero variant-hero-form" data-role="読者の判断を一段進める" data-question="次に何を判断すべきか" data-layout="hero-form" data-implementation="PC/SP対応、情報の優先順位を維持" data-asset="確認済みの画面・資料"><div class="inner"><div class="hero-copy"><div class="section-heading"><small>01 / FIRST VIEW</small><h1>判断を、前へ。</h1><p class="lead">必要な情報と次の行動が、一つの流れで分かるBtoBサービスです。</p><p class="proof">確認可能な一次情報</p></div><a class="button" href="#contact">相談する<span aria-hidden="true">→</span></a><figure class="section-visual"><img src="images/hero.svg" alt="サービス利用場面" loading="eager" decoding="async"></figure></div><form id="hero-contact" class="lead-form compact" action="http://127.0.0.1:5184/thanks.html" method="post" data-success="1営業日以内に担当者からご連絡します。"><label><span>会社名</span><input name="field-1" type="text" required></label><label><span>お名前</span><input name="field-2" type="text" required></label><label><span>メールアドレス</span><input name="field-3" type="email" required></label><label><span>相談内容</span><textarea name="field-4" rows="4" required></textarea></label><label class="consent"><input type="checkbox" required><span><a href="http://127.0.0.1:5184/privacy.html" target="_blank" rel="noopener">個人情報の取り扱い</a>に同意する</span></label><button type="submit">送信する</button><p class="form-note">入力時間 約2分 / 送信後に受付完了を表示します</p><p class="form-status" role="status" aria-live="polite"></p></form></div></section><section id="trust" class="section type-trust variant-trust-metric-band" data-role="読者の判断を一段進める" data-question="次に何を判断すべきか" data-layout="trust-metric-band" data-implementation="PC/SP対応、情報の優先順位を維持" data-asset="確認済みの画面・資料"><div class="inner"><div class="section-heading"><small>02 / TRUST</small><h2>検討に必要な根拠を先に。</h2><p class="lead">導入数。継続率。顧客ロゴ。</p><p class="proof">確認可能な一次情報</p></div><dl class="metric-band"><div><dt>01</dt><dd>具体情報A</dd></div><div><dt>02</dt><dd>具体情報B</dd></div><div><dt>03</dt><dd>具体情報C</dd></div><div><dt>04</dt><dd>導入数</dd></div></dl><a class="button" href="#contact">相談する<span aria-hidden="true">→</span></a></div></section><section id="problem" class="section type-problem variant-pain-cards" data-role="読者の判断を一段進める" data-question="次に何を判断すべきか" data-layout="pain-cards" data-implementation="PC/SP対応、情報の優先順位を維持" data-asset="確認済みの画面・資料"><div class="inner"><div class="section-heading"><small>03 / PROBLEM</small><h2>判断が遅れる三つの理由。</h2><p class="lead">情報が散らばる。比較軸がない。社内説明が難しい。</p><p class="proof">確認可能な一次情報</p></div><div class="cards"><article><small>01</small><h3>具体情報A</h3></article><article><small>02</small><h3>具体情報B</h3></article><article><small>03</small><h3>具体情報C</h3></article><article><small>04</small><h3>情報が散らばる</h3></article></div><a class="button" href="#contact">相談する<span aria-hidden="true">→</span></a></div></section><section id="risk" class="section type-risk variant-risk-cost-stack" data-role="読者の判断を一段進める" data-question="次に何を判断すべきか" data-layout="risk-cost-stack" data-implementation="PC/SP対応、情報の優先順位を維持" data-asset="確認済みの画面・資料"><div class="inner"><div class="section-heading"><small>04 / RISK</small><h2>先送りのコストを可視化。</h2><p class="lead">機会損失。確認工数。対応の遅れ。</p><p class="proof">確認可能な一次情報</p></div><dl class="cost-stack"><div><dt>LOSS 1</dt><dd>具体情報A</dd></div><div><dt>LOSS 2</dt><dd>具体情報B</dd></div><div><dt>LOSS 3</dt><dd>具体情報C</dd></div><div><dt>LOSS 4</dt><dd>機会損失</dd></div></dl><a class="button" href="#contact">相談する<span aria-hidden="true">→</span></a></div></section><section id="mechanism" class="section type-mechanism variant-before-after" data-role="読者の判断を一段進める" data-question="次に何を判断すべきか" data-layout="before-after" data-implementation="PC/SP対応、情報の優先順位を維持" data-asset="確認済みの画面・資料"><div class="inner"><div class="section-heading"><small>05 / MECHANISM</small><h2>情報を、決定へ変える仕組み。</h2><p class="lead">入力。整理。比較。行動。</p><p class="proof">確認可能な一次情報</p></div><div class="before-after"><article><small>BEFORE</small><h3>具体情報A</h3></article><article><small>AFTER</small><h3>具体情報B</h3></article></div><a class="button" href="#contact">相談する<span aria-hidden="true">→</span></a></div></section><section id="difference" class="section type-differentiation variant-feature-zigzag" data-role="読者の判断を一段進める" data-question="次に何を判断すべきか" data-layout="feature-zigzag" data-implementation="PC/SP対応、情報の優先順位を維持" data-asset="確認済みの画面・資料"><div class="inner"><div class="section-heading"><small>06 / DIFFERENCE</small><h2>違いは、制作工程にある。</h2><p class="lead">理解。設計。検証。実装。</p><p class="proof">確認可能な一次情報</p></div><div class="zigzag"><article><span>01</span><h3>具体情報A</h3></article><article><span>02</span><h3>具体情報B</h3></article><article><span>03</span><h3>具体情報C</h3></article></div><a class="button" href="#contact">相談する<span aria-hidden="true">→</span></a></div></section><section id="process" class="section type-process variant-process-timeline" data-role="読者の判断を一段進める" data-question="次に何を判断すべきか" data-layout="process-timeline" data-implementation="PC/SP対応、情報の優先順位を維持" data-asset="確認済みの画面・資料"><div class="inner"><div class="section-heading"><small>07 / PROCESS</small><h2>導入は四つのステップ。</h2><p class="lead">相談。要件整理。試行。公開。</p><p class="proof">確認可能な一次情報</p></div><ol class="timeline process"><li><time>STEP 1</time><p>具体情報A</p></li><li><time>STEP 2</time><p>具体情報B</p></li><li><time>STEP 3</time><p>具体情報C</p></li><li><time>STEP 4</time><p>要件整理</p></li></ol><a class="button" href="#contact">相談する<span aria-hidden="true">→</span></a></div></section><section id="usecase" class="section type-usecase variant-usecase-story" data-role="読者の判断を一段進める" data-question="次に何を判断すべきか" data-layout="usecase-story" data-implementation="PC/SP対応、情報の優先順位を維持" data-asset="確認済みの画面・資料"><div class="inner"><div class="section-heading"><small>08 / USE CASE</small><h2>部門ごとの使い方。</h2><p class="lead">営業。マーケティング。事業責任者。制作。</p><p class="proof">確認可能な一次情報</p></div><div class="story-rail"><article><small>SCENE 1</small><h3>具体情報A</h3></article><article><small>SCENE 2</small><h3>具体情報B</h3></article><article><small>SCENE 3</small><h3>具体情報C</h3></article><article><small>SCENE 4</small><h3>マーケティング</h3></article><article><small>SCENE 5</small><h3>事業責任者</h3></article></div><a class="button" href="#contact">相談する<span aria-hidden="true">→</span></a></div></section><section id="comparison" class="section type-comparison variant-comparison-table" data-role="読者の判断を一段進める" data-question="次に何を判断すべきか" data-layout="comparison-table" data-implementation="PC/SP対応、情報の優先順位を維持" data-asset="確認済みの画面・資料"><div class="inner"><div class="section-heading"><small>09 / COMPARISON</small><h2>代替手段との違い。</h2><p class="lead">導入速度。情報量。更新性。支援範囲。</p><p class="proof">確認可能な一次情報</p></div><div class="table-wrap"><table><thead><tr><th>比較軸</th><th>本サービス</th><th>代替手段</th></tr></thead><tbody><tr><th>具体情報A</th><td>強みを記載</td><td>違いを記載</td></tr><tr><th>具体情報B</th><td>強みを記載</td><td>違いを記載</td></tr><tr><th>具体情報C</th><td>強みを記載</td><td>違いを記載</td></tr><tr><th>導入速度</th><td>強みを記載</td><td>違いを記載</td></tr></tbody></table></div><a class="button" href="#contact">相談する<span aria-hidden="true">→</span></a></div></section><section id="proof" class="section type-proof variant-case-study-featured" data-role="読者の判断を一段進める" data-question="次に何を判断すべきか" data-layout="case-study-featured" data-implementation="PC/SP対応、情報の優先順位を維持" data-asset="確認済みの画面・資料"><div class="inner"><div class="section-heading"><small>10 / CASE STUDY</small><h2>導入前後を、事実で比較。</h2><p class="lead">課題。実施内容。確認済みの結果。</p><p class="proof">確認可能な一次情報</p></div><article class="case-featured"><div><small>ISSUE / ACTION / RESULT</small><h3>具体情報A</h3><p>具体情報B。具体情報C。実施内容</p></div></article><a class="button" href="#contact">相談する<span aria-hidden="true">→</span></a></div></section><section id="pricing" class="section type-pricing variant-pricing-cards" data-role="読者の判断を一段進める" data-question="次に何を判断すべきか" data-layout="pricing-cards" data-implementation="PC/SP対応、情報の優先順位を維持" data-asset="確認済みの画面・資料"><div class="inner"><div class="section-heading"><small>11 / PRICE</small><h2>条件に合うプランを選ぶ。</h2><p class="lead">基本プラン。拡張プラン。個別見積もり。</p><p class="proof">確認可能な一次情報</p></div><div class="plans"><article><small>PLAN 1</small><h3>具体情報A</h3><p>月額9,800円から</p><a class="button" href="#contact">相談する<span aria-hidden="true">→</span></a></article><article><small>PLAN 2</small><h3>具体情報B</h3><p>月額9,800円から</p><a class="button" href="#contact">相談する<span aria-hidden="true">→</span></a></article><article><small>PLAN 3</small><h3>具体情報C</h3><p>月額9,800円から</p><a class="button" href="#contact">相談する<span aria-hidden="true">→</span></a></article></div></div></section><section id="faq" class="section type-faq variant-faq-list" data-role="読者の判断を一段進める" data-question="次に何を判断すべきか" data-layout="faq-list" data-implementation="PC/SP対応、情報の優先順位を維持" data-asset="確認済みの画面・資料"><div class="inner"><div class="section-heading"><small>12 / FAQ</small><h2>導入前の疑問に回答。</h2><p class="lead">開始時期。必要な素材。運用体制。契約条件。</p><p class="proof">確認可能な一次情報</p></div><div class="faq"><details><summary>Q1. 具体情報A</summary><p>回答を入力してください。</p></details><details><summary>Q2. 具体情報B</summary><p>回答を入力してください。</p></details><details><summary>Q3. 具体情報C</summary><p>回答を入力してください。</p></details><details><summary>Q4. 開始時期</summary><p>回答を入力してください。</p></details></div></div></section><section id="contact" class="section type-form variant-form-split" data-role="読者の判断を一段進める" data-question="次に何を判断すべきか" data-layout="form-split" data-implementation="PC/SP対応、情報の優先順位を維持" data-asset="確認済みの画面・資料"><div class="inner"><div><div class="section-heading"><small>13 / CONTACT</small><h2>まず、状況をお聞かせください。</h2><p class="lead">1営業日以内に担当者からご連絡します。</p><p class="proof">確認可能な一次情報</p></div><p>具体情報A。具体情報B。具体情報C。</p></div><form class="lead-form" action="http://127.0.0.1:5184/thanks.html" method="post" data-success="1営業日以内に担当者からご連絡します。"><label><span>会社名</span><input name="field-1" type="text" required></label><label><span>お名前</span><input name="field-2" type="text" required></label><label><span>メールアドレス</span><input name="field-3" type="email" required></label><label><span>相談内容</span><textarea name="field-4" rows="4" required></textarea></label><label class="consent"><input type="checkbox" required><span><a href="http://127.0.0.1:5184/privacy.html" target="_blank" rel="noopener">個人情報の取り扱い</a>に同意する</span></label><button type="submit">送信する</button><p class="form-note">入力時間 約2分 / 送信後に受付完了を表示します</p><p class="form-status" role="status" aria-live="polite"></p></form></div></section></main><footer class="site-footer"><span>© 2026 株式会社QA</span><a id="privacy" href="http://127.0.0.1:5184/privacy.html">個人情報の取り扱い</a></footer><script>document.querySelectorAll('.lead-form').forEach(function(form){form.addEventListener('submit',function(event){if(!form.getAttribute('action')){event.preventDefault();form.querySelector('.form-status').textContent='送信先が未設定です。管理者へお問い合わせください。';return}form.querySelector('.form-status').textContent='送信しています…'})});</script></body></html>