沼ペディア
沼ペディア NUMAPEDIA
👁️ ABYSS UI DESIGN SYSTEM

沼ペディア UIデザインシステム

ネット深淵事典「沼ペディア」で使用するダークサイバーカラー、装飾コンポーネント、執筆ルールの公式カタログです。

🎨 深淵カラーパレット

沼ペディアの世界観（漆黒×狂気の深淵バイオレット×ネオンピンク）を構築するデザイントークンです。

#8B5CF6
深淵バイオレット
brand.main / numa.purple
主要ボタン、見出しアクセント、光彩境界線に適用
#6D28D9
深淵バイオレットダーク
brand.mainDark / numa.purpleDark
グラデーション末端、ダークモードの境界線に適用
#EC4899
サイバーネオンピンク
brand.accent / numa.accent
危険アラート、アバター外枠、重要ホバーエフェクトに適用
#0F172A
漆黒スレート
numa.dark
ダークコンテナ、カード背景、ヘッダー・フッターに適用
#EF4444
狂気の警告レッド
numa.red
危険度判定、トラウマ注意枠、即死トラップ警告に適用
#F8FAFC
ライト背景スレート
numa.bg
ライトモード閲覧時のベース背景

💬 会話ふきだし (Balloon)

厳守ルール: 45文字以内 / 最大2文以下

専属ナビゲーター「あのちゃん」による客観的かつ鋭い深淵コラム一撃。

あのちゃん 案内人
あのちゃん
ネットの深淵を覗くときは、画面の明るさを落として深呼吸してから進むんだょ！ 
<Balloon name="あのちゃん" badge="案内人">
  ネットの深淵を覗くときは、画面の明るさを落として深呼吸してから進むんだょ！
</Balloon>

💡 二段構え結論要約 (QuickSummary)

客観結論定義直下に配置し、ネットミームや事件のコアファクトを30秒で把握させる要約枠です。

💡 深淵要約

30秒でわかる深淵カルテ結論

✔ 発祥は2000年代前半の2ちゃんねるオカルト板。元ネタは海外都市伝説の改変
✔ 検索危険度は『レベル3（精神的ブラクラ）』。グロ画像ではなく不気味な心理ホラー
✔ 現在はデジタル民俗学のアーカイブとして客観的学術分析が進む 
<QuickSummary
  title="30秒でわかる深淵カルテ結論"
  badge="深淵要約"
  highlights={[
    "発祥は2000年代前半の2ちゃんねるオカルト板。元ネタは海外都市伝説の改変",
    "検索危険度は『レベル3』。グロ画像ではなく不気味な心理ホラー"
  ]}
/>

📦 キャプションボックス (CapBox)

深淵カルテの解剖ポイント・危険度警告枠です。

type="point"（深淵解剖・重要事実）
💡 デジタル民俗学の視点
集団幻覚としてのネット怪談は、当時のネット社会が抱えていた匿名性の不安を象徴しています。
type="warning"（閲覧注意・検索トラップ）
⚠️ 検索時の即死トラップ警告
類似の偽ドメインやウイルス配布サイトが多数存在します。安易な直接検索は推奨しません。

⚠️ 親指タップ判定ギミック (InteractiveChecklist)

読者の電脳どっぷり度や沼落ち危険度を判定するタップギミックです。

⚡ ⚠️ あなたの「ネット深淵どっぷり度」判定チェック

当てはまる項目にチェックを入れてください

タップで即判定
📊 危険度メーター 0 / 3 項目該当（安全）
SAFE

🌱 健全！現実にしっかり足がついています

ネット深淵に呑まれることなく、健全な距離感を保てています。 

<InteractiveChecklist
  title="⚠️ あなたの「ネット深淵どっぷり度」判定チェック"
  checklistId="abyss-addiction-check"
  themeColor="purple"
  items={[
    { text: "深夜2時以降にまとめサイトを巡回してしまう", severity: "warning" },
    { text: "夜中に検索して後悔したことがある", severity: "danger" }
  ]}
/>

📊 感情エンゲージメント投票 (EmotionPoll)

ネット民の共感と本音を可視化する投票ギミックです。

💘 ネット民の本音投票

リアルタイム集計中

❓ よくある質問 (FaqAccordion)

schema.org/FAQPage 構造化データを自律出力するアコーディオン枠です。

❓ よくある質問（Q&A・FAQ）
Official Q&A
Q 沼ペディアの記事にはグロテスクな生画像が含まれていますか？
A
いいえ。沼ペディアではトラウマや不快感を防ぐため、過激な生画像を完全排除し、客観テキストと安全な図解・解説のみで構成しています。
Q 検索危険度レベル（1〜7）の基準は何ですか？
A
ネットコミュニティでの一般的な認知度、視覚的ショック度、および法的な悪質性を客観的に総合評価した独自指標です。

🚀 CTAボタン (CtaButton)

深淵バイオレットグラデーションの誘導ボタンです。

🔒 閲覧注意・真相開閉枠 (SpoilerAccordion)

都市伝説の結末や未解決事件の真相など、読者が任意で開く閲覧注意枠です。

⚠️
深淵閲覧注意 ⚠️ 事件の結末とネット民が突き止めた真相（タップして展開）
▼
後年、当時の投稿者本人によって語られた真相と、創作であった証拠の数々を客観的に解説しています。
📋 沼ペディア執筆 ＆ 装飾重要ルール
1. 会話ふきだし文字数制限 ふきだし内のテキストは「45文字以内 / 最大2文以下」を厳守。長文解説は地の文で行います。
2. YMYL完全回避・非医療境界線 「依存症」「治療」「精神科」等の医療用語は全面禁止。「ネットカルチャー」「人間の業」として解説します。
3. 過激生画像の完全排除 トラウマ・不快感を防ぐため、公序良俗に反する生画像の直貼りは完全禁止。安全なAIアート・図解のみを使用します。
4. 内部リンクはルート相対パス統一 `https://numapedia.com/` を直書きせず、必ず `/slug/` のルート相対パスで記述します。