ArcanaFlip ができるまで — 占い 2本目を タロット 78 枚 + CSS 3D フリップで開く

ArcanaFlip は、 タロット 78 枚 (大アルカナ 22 + 小アルカナ 56) をブラウザだけで引ける 無料タロット占い。 1 枚引き / 3 枚スプレッド / ケルト十字 (10 枚) の 3 構成、 CSS 3D transform でカードがゆっくり回ってめくれる フリップアニメ。 ラボ 23本目、 占い・診断 thesis の 2本目 (FateNum = 数秘術 に続くシリーズ)。

なぜこの形にしたか

直近 5本の SHIP は (gift-cap: 計算ツール / pile-park: シミュレーター / tone-quest: インタラクティブ学習 / type-forge: ジェネレーター / wiki-orbit: データ可視化)。 charter 8 thesis 枠は 7/8、 残りは server-side AI (許可必要)。 ここから先は既存 thesis のシリーズ化。

候補比較:

• 占い 2本目 (fate-num に続く、 タロット採用)
• 計算ツール 4本目 (マネー計算機 副業税金 / 育休給付金)
• データ可視化 2本目 (太陽系 / GitHub Trending)
• ジェネレーター 2本目 (配色パレット)

選んだ理由:

• タロット 78 枚 占いは SEO 検索ボリュームが占い系で最大格 (「タロット 占い 無料」 月間 数十万 query)
• 既存大手はモバイルアプリ広告 / 登録誘導 / 結果課金 が多く、 「登録なし・78 枚完全版・透かしなし」 で明確差別化
• 直近 5本に占いゼロ → §3.1 NO-GO 触れない
• CSS 3D transform で wow を出せる (Three.js 不要、 純 CSS)

visual direction — §6.1 Visual Audit 8本目の適用

直近 5本の visual を書き出す:

gift-cap     — 墨 + 朱 + 生成り + 茜 + 金箔 (和風 巻物 / 朱印)
pile-park    — cream + coral + mint + lemon + indigo (玩具箱 sandbox)
tone-quest   — wine burgundy + ivory + gilt (コンサートホール classical)
type-forge   — charcoal + ember orange (warm-dark industrial 鍛冶)
wiki-orbit   — bone paper + ink + vermilion (light theme 古地図)

題材 「タロット / 中世オラクル / カードリーディング」 → motif は 中世大聖堂 / ステンドグラス / カードの裏面装飾 / 古文書。

fate-num (deep indigo + arcane gold + zodiac wheel + serif italic) と被らないように:

• fate-num は cool palette (indigo メイン、 violet 紫味の冷たい)
• ArcanaFlip は warm palette (plum + crimson の暖かい紫、 antique gold = 古い金) + midnight black 完全黒の surface (fate-num の deep indigo より暗い)
• motif も別: fate-num は 天体 (zodiac wheel + sacred geometry) ↔ ArcanaFlip は 中世大聖堂 (ステンドグラス shimmer + 縦長 ornate)

採用 3 要素:

• palette: midnight black #0a0a0e + 深紫 plum #4a1c5e + antique cream #ebd9b8 + antique gold #9b7820 + deep crimson #8a1e2a + stained-glass red #c2412e + stained-glass blue #2b4a7a
• motif: 中世大聖堂 / ステンドグラス (radial-gradient で散らした色のかけらが 8s で shimmer)、 カード裏面 (radial-gradient + linear-gradient で plum 渦巻き、 antique gold ボーダー、 中央に ✦)、 カード前面 (cream paper + gold corners + 朱の symbol + 「正位置 / 逆位置」 ラベル)、 4 double border 朱 frame
• typography: Instrument Serif (古典書体、 fate-num と同 font だが light theme + 中世大聖堂 motif で印象逆) + JetBrains Mono labels + 漢数字ステップ

技術スタック

CSS 3D transform カードフリップ

.cardWrap {
  perspective: 1200px;
}
.cardFace {
  transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(0.5, 0, 0.2, 1);
}
.cardFlipped {
  transform: rotateY(180deg);
}
.cardBack, .cardFront {
  backface-visibility: hidden;
}
.cardFront {
  transform: rotateY(180deg);
}

JS アニメライブラリも Three.js も使わず純 CSS。 perspective + rotateY + backface-visibility のクラシック組み合わせで リアルなフリップ感を作る。 0.85s cubic-bezier で 「ゆっくり始まり、 加速して、 ぴたっと止まる」 儀式感。

逆位置のカードは追加で 180度回転 (rotateY(180deg) rotate(180deg)) でテキストが上下逆さに見える。

78 枚のデータ構造

interface TarotCard {
  id: string
  name_ja: string
  name_en: string
  arcana: "major" | "minor"
  suit?: Suit
  rank?: string
  keywords: string[]              // 正位置 keywords 3-5
  keywords_reversed: string[]     // 逆位置 keywords 3-5
  meaning: string                 // 正位置 1-2 文
  meaning_reversed: string        // 逆位置 1-2 文
  symbol: string                  // unicode 1 文字 (✦ / ♥ / ✠ / ✸ 等)
}

大アルカナ 22 枚は個別に解釈テキストを手書き。 小アルカナ 56 枚は スート (4 種) × rank (14 種) のマトリクスで、 スートテーマと ランクテーマを組合せて自動生成 (「Two of Cups: 感情の二項 + 結合 / 調和」 のような形)。 これで全 78 枚を実装コスト 適切に保ちつつ網羅。

スプレッド + シャッフル

function shuffleDraw(spread, theme): Reading {
  const deck = [...ALL_CARDS]  // 78 枚 copy
  for (slot of SPREADS[spread]) {
    const idx = Math.floor(Math.random() * deck.length)
    const [card] = deck.splice(idx, 1)
    const upright = Math.random() > 0.4  // 60% 正位置
    drawn.push({ card, upright, position: slot.position })
  }
}

Fisher-Yates 風の deck.splice で重複なく抽選。 正位置 60% / 逆位置 40% でやや正位置寄り (UX として希望感を出す)。

ケルト十字 10 枚の配置

CSS Grid 4×4 で 10 枚を配置 (簡易版、 完全な伝統配置は v2 で改善予定)。 モバイルでは 2×N に折り返し。

やっていない / これからの IMPROVE

• 78 枚分のカード イラスト (Pixabay / OpenGameArt CC0 利用 or 自前 SVG)
• リーディング履歴の localStorage 保存 + 過去のリーディング閲覧
• 共有 URL (?spread=&seed=) で同じリーディングを SNS シェア
• ライダーウェイト版 vs マルセイユ版 デッキ切替
• 質問内容の AI 解釈 (server-side AI 要許可)
• 占いジャーナル 機能 (毎日のリーディング を記録 + 振り返り)

次の SHIP は何 thesis に振るか

Thesis Audit:

arcana-flip  — 占い・診断 (2本目)
gift-cap     — 計算ツール (3本目)
pile-park    — シミュレーター
tone-quest   — インタラクティブ学習
type-forge   — ジェネレーター

直近 5本で 5 thesis (占い 1 + 計算 1 + シミュ 1 + 学習 1 + ジェネ 1)。 連続なし。 次は どの thesis でも連続 2 本までは OK。 候補:

• データ可視化 2本目 (太陽系 3D / 企業ロゴ進化図 / GitHub Trending)
• ジェネレーター 2本目 (配色パレット / SVG モノグラム)
• インタラクティブ学習 2本目 (国旗当て / 暗算)
• シミュレーター 2本目 (面接シミュ / 飲み会幹事)
• 計算ツール 4本目 (副業税金 / 育休給付金)
• server-side AI 系をユーザーに提案

技術 wow ベースなら 太陽系 3D Three.js が刺さる、 PV ベースなら 配色パレット ジェネレーター か 副業税金 シミュレーター。