使い方：この1ファイルの
<style> をそのままコピー＝デザインシステム完成。
あとは下の各コンポーネントHTMLを組み合わせるだけ。文字は必ずHTML／イラストは透過PNG＋filter:var(--sh-char) で立体化。
絵柄は1枚を参照画像に固定して統一（→ Codex生成）。
| まーしー式 | LPコンポーネント | 用途 |
|---|---|---|
| G01 表紙 | C2 ヒーロー | 第一印象・主コピー＋キャラ |
| G03 中扉 | C1 セクション見出し | 各セクションの導入 |
| G04/G13 インパクト・問いかけ | C3 中央パンチ | 1フレーズで刺す |
| G05/G07/G08 カード・課題 | C4 立体バッジカード | 課題・特徴の羅列 |
| G11 / S05 / S22 フロー | C5 縦フロー3ステップ | 手順・使い方 |
| S01 / S17 表・項目比較 | C6 比較表(勝ち列) | 競合比較で優位を可視化 |
| G09 / S07 VS・ビフォーアフター | C7 VS対比パネル | 人vsAI／Before-After |
| S14 数式 | C8 計算ブロック | コスト・効果を数式で納得 |
| S18 / S19 規模比較 | C9 比較バー / C10 大数字 | 差の大きさを一撃で |
| S12 マトリクス | C11 2×2マトリクス | ポジショニング |
| S03 ピラミッド | C12 ピラミッド | 優先順位・階層 |
| G14 Q&A・CTA | C13料金 / C14 Q&A / C15 CTA | クロージング |
影：--sh(標準) / --sh-lift(浮き上げ) / --sh-char(透過キャラ用drop-shadow) 書体：見出し=--serif（明朝）／本文=--sans
SUCH A WASTE
「使いこなせていない」のは、
あなたのせいではありません
あなたのせいではありません
たぶん、こんな状態ではないでしょうか。
HTMLを見る
<div class="kick">SUCH A WASTE</div>
<div class="h2"><span class="nb">見出し前半、</span><br><span class="nb">見出し後半</span></div>
<p class="lead">リード文</p>名刺は「交換したあと」を、誰も自動化していないだけ。
HTMLを見る
<div class="punch">通常テキスト<span class="terra">強調</span>だけ。</div>📇💤
束のまま放置
引き出しに眠ったまま
🗂️❓
データ化もゼロ
誰がどこか分からない
HTMLを見る
<div class="cards">
<div class="pcard">
<div class="pbadge">📇<span class="psub">💤</span></div>
<div class="tt">タイトル</div><div class="ds">説明</div>
</div>
</div>1
名刺を撮る
スマホで撮るだけ、AIが文字起こし
2
AIが調べて書く
相手をリサーチ→個別文面を作成
3
本人の名前で送る
確認して自分のアドレスから送信
HTMLを見る
<div class="steprow">
<div class="step"><div class="num">1</div>
<div><div class="st">見出し</div><div class="sd">説明</div></div>
</div>
</div>| 紙の名刺 | 管理アプリ | 👑 AI名刺 | |
|---|---|---|---|
| 連絡先が分かる | ○ | ○ | ○ |
| 相手をリサーチ | × | × | ○ |
| 個別メールを作る | × | × | ○ |
HTMLを見る
<table class="ctbl">
<tr><th class="lbl"></th><th>競合A</th><th class="win">👑 自社</th></tr>
<tr><td class="lbl">項目</td><td class="x">×</td>
<td class="win"><span class="o">○</span></td></tr>
</table>👤 人に頼むと…
✕そもそも、やってくれない
✕ミスが起こる
🤖 AI名刺なら
○取り込むだけで全自動
○いつも同じ品質
HTMLを見る
<div class="vs2">
<div class="vspanel human"><div class="vsh">👤 見出し</div>
<div class="vsitem"><span class="vsmark">✕</span><span>課題</span></div></div>
<div class="vspanel ai"><div class="vsh">🤖 見出し</div>
<div class="vsitem"><span class="vsmark">○</span><span>解決</span></div></div>
</div>10分×70枚＝約12時間
約12時間×時給1,500円＝約18,000円
＝ 毎月かかる人件費
HTMLを見る
<div class="calc">
<div class="calc-row"><span class="calc-a">A</span><span class="calc-x">×</span>
<span class="calc-a">B</span><span class="calc-eq">＝</span>
<span class="calc-r big">結果</span></div>
<div class="calc-note">注記</div>
</div>HTMLを見る
<div class="tbar">
<div class="tbar-row"><div class="tbar-lbl">A</div>
<div class="tbar-bar tbar-a">大きい方</div></div>
<div class="tbar-row"><div class="tbar-lbl">B</div>
<div class="tbar-bar tbar-b">小さい方</div></div>
</div>1/5
人件費に対して
70枚
毎月の処理数
0分
教える手間
HTMLを見る
<div class="stats">
<div class="stat"><div class="big">1/5</div><div class="cap">説明</div></div>
</div>しまう
名刺管理アプリ
ばらまく
一斉配信
放置
紙のまま
届ける
AI名刺
HTMLを見る
<div class="matrix">
<div class="mcell"><div class="mh">見出し</div><div class="mm">補足</div></div>
<div class="mcell hot">...自社の象限...</div>
</div>核自分たちで回す
仕組み自動で届く
土台名刺を撮るだけ
HTMLを見る
<div class="pyramid">
<div class="plevel l1">頂点<small>補足</small></div>
<div class="plevel l2">中段</div>
<div class="plevel l3">土台</div>
</div>🎫 スタート3ヶ月パック
¥9,900
税込・月あたり ¥3,300 × 3ヶ月
名刺 70枚/月まで 送信OK
4ヶ月目以降はいつでも解約OK。71枚目〜¥80/件。
HTMLを見る
<div class="price">
<div class="ph">プラン名</div>
<div class="pb"><div class="amt"><small>¥</small>9,900</div>
<div class="pill">含まれる量</div>
<div class="fine">注記</div></div>
</div>Q勝手にメールが送られませんか？
いいえ。下書きに保存され、あなたが確認してボタンを押すまで送信されません。
QGmailでも使えますか？
はい。フリーアドレスでも、あなた本人のアドレスから届きます。
HTMLを見る
<div class="faq">
<details class="qa"><summary><span class="q">Q</span>質問</summary>
<div class="a">回答</div></details>
</div>
無料で個別相談を予約する ▶
スタート3ヶ月 ¥9,900予約する ▶
HTMLを見る
<a class="cta" href="予約URL">無料で個別相談を予約する ▶</a>
<!-- スマホ固定バーは position:fixed;bottom:0 を付与 -->
キャラ透過部品の作法：Codexで「背景透過・影なし・単体切り抜き」で生成 →
<img> に filter:var(--sh-char) を当てて初めて立体になる。
複数素材は必ず1枚を参照画像に固定して絵柄・配色を統一。
絵に文字を焼き込まないこと（崩れる・修正できない）。