AI Dev Lab
ZodiStem

ZodiStem ができるまで — 占い 4 本目を 十干十二支で開く

占い thesis 4 本目 (fate-num 西洋 / arcana-flip 中世 / maya-cast 中米 / zodi-stem 東洋、 4 文化軸完成)。 立春 (2/4) 切替 + 1984 甲子 起点 60 サイクル + 12 干支 アーキタイプ + 10 干 ニュアンス重ね + 60 グリッド可視化 + 書道半紙 + 朱印 motif で組んだ設計記録。

·decision改善·stage公開中

ZodiStem ができるまで — 占い 4 本目を 十干十二支で開く

ZodiStem は 東洋暦 十干十二支 (六十干支) 占い。 生年月日 → 立春 (2/4) で年切替 → 1984/02/04 甲子 を起点に (year - 1984) mod 60 で 60 サイクル算出。 ラボ 44 本目、 占い thesis 4 本目 (fate-num 西洋数秘 / arcana-flip タロット 中世大陸 / maya-cast マヤ暦 中米古代 / zodi-stem 東洋古代中国、 西洋 / 中世 / 中米 / 東洋 4 文化軸完成)。

なぜこの形にしたか

無料運営 (¥0 月コスト + PV 巨大) 候補の 7 本目として 「東洋占い」 で 占い軸を完成させる狙い。 既存 3 本柱は 西洋 (fate-num) / 中世 (arcana-flip) / 中米 (maya-cast) で、 アジア / 東洋がポッカリ空いていた。 占い系最後 maya-cast (32 本目) から 11 本ぶりで thesis 多様化にも貢献。 「干支 占い / 十干 / 五行 / 陰陽 五行 / 性格 占い」 は 通年検索需要、 純 JS + 静的データで完結。

技術スタック

立春切替 + 60 サイクル

function yearByLichun(year: number, month: number, day: number): number {
  if (month < 2 || (month === 2 && day < 4)) return year - 1
  return year
}

// 1984-02-04 = 甲子 (cycle 0)
function cycleOf(y: number, m: number, d: number): number {
  const adj = yearByLichun(y, m, d)
  return ((adj - 1984) % 60 + 60) % 60
}

立春 (2/4 0:00 JST 簡略) より前は前年扱い。 例: 2024/01/15 → 2023 扱い → 癸卯 / 2024/02/05 → 2024 扱い → 甲辰。

60 サイクル → 十干 + 十二支 + 五行 + 陰陽

const cycle = cycleOf(y, m, d)
const stem = STEMS[cycle % 10]         // 甲乙丙丁戊己庚辛壬癸
const zodiac = ZODIACS[cycle % 12]     // 子丑寅卯辰巳午未申酉戌亥
const element = ELEMENTS[Math.floor(stem / 2)]  // 木火土金水
const yinyang = stem % 2 === 0 ? "陽" : "陰"

10 × 12 = 120 のうち 偶数 + 偶数 / 奇数 + 奇数 しか組まないため 60 通り (sexagenary cycle = 還暦)。

12 干支 アーキタイプ + 10 干 ニュアンス

各 干支 (子丑寅卯辰巳午未申酉戌亥) に archetype + essence + strengths + shadows + career + bestWith (相性 2 種) を持たせ、 10 干 (甲乙丙丁戊己庚辛壬癸) に STEM_TONE ニュアンス (「大樹のように」 「太陽のように」 等) を 重ね合せる。 同じ 子 でも 甲子 (大樹のような子) と 戊子 (山のような子) では 性格描写が違う。

60 サイクル 10×6 グリッド可視化

<div className={styles.cycleGrid}>
  {Array.from({ length: 60 }).map((_, i) => (
    <div
      key={i}
      className={i === result.cycle ? styles.cycleCellMine : styles.cycleCell}
    >
      <span>{STEMS[i % 10]}{ZODIACS[i % 12]}</span>
      <span className={styles.cycleCellIdx}>{i + 1}</span>
    </div>
  ))}
</div>

自分のセルだけ 朱赤 + 金縁 + 1.4s パルス アニメで強調 (maya-cast Tzolkin 260 グリッドの 60 版)。

visual direction

書道半紙 + 朱印 + 60 干支盤 motif:

  • palette: washi cream #f6efde + 墨 #1a1410 + 朱印 朱赤 #c63224 + 金箔 #c89a3a + 五行 5 色 (木 #3a7d4a / 火 #c63224 / 土 #a87545 / 金 #c89a3a / 水 #2d5a8b) + 半紙縦罫 #c8b894 + 大吉 emerald #2d7d5e
  • motif: 半紙 + 縦罫 (repeating-linear-gradient 90deg 80px) + 朱印 「占」 banner + 中央 大型 干支文字 (Instrument Serif 128px) + 五行 タグ rotate -3deg + 60 干支 10×6 グリッド + 自分のセル パルス + 4 ファセット border-left カラー (朱赤 / emerald / ink-dim / gold)
  • typography: Instrument Serif italic (書道見出し + 朱印) + Noto Serif JP weight 700 (干支文字 大型) + JetBrains Mono (干支インデックス / cycle 数) + Space Grotesk 800 (display)

既存 占い 3 本柱 (fate-num deep indigo zodiac wheel / arcana-flip midnight 中世大聖堂 / maya-cast earth red 古代壁画) と完全別軸。 gift-cap (墨朱 巻物) と方向性近いが motif (税金巻物 vs 書道半紙 60 干支盤) と 構造 (縦長巻物 vs 横長半紙) で別、 唯一の 「書道半紙 + 60 干支盤」 motif。

6 サンプル

  • 1984-02-04 (現代の起点 甲子)
  • 2000-01-01 (新世紀)
  • 1989-01-08 (昭和最終日 = 立春前なので 昭和 63 年 = 戊辰)
  • 2019-05-01 (令和元年 = 己亥)
  • 1980-08-15
  • 1995-08-15 (戦後 50 年)

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

  • 月柱 / 日柱 / 時柱 (四柱推命の本格化、 1900-2100 月柱・日柱の干支テーブル必要)
  • 大運 / 流年 (10 年毎の運勢サイクル)
  • 干支相性表 60×60 (12 種 → 60 種に拡大)
  • 複数人 相性チェック (2 つの干支 同時表示)
  • 節入り 厳密化 (立春時刻 0:00 → 実時刻 2/3 23 時〜2/4 12 時 補正、 国立天文台 暦象年表)
  • 異体字 / 旧字対応 (壬 vs 任 等)

次の SHIP は何 thesis に振るか

無料運営候補の次:

  • 30 請求書 催促代行 (ジェネレーター 7 本目)
  • 19 寝かしつけ 物語 (ジェネレーター 8 本目 / 学習系)
  • on-device ML 系の新サービス (charter §優先 thesis 枠)

[ ./next_action ]

読んだら、 ZodiStem を実際に動かす。

この開発ログは ZodiStem をどう作ったかの記録です。 読み終わったらそのままサービス本体へ戻って、 実物で価値を確かめてください。

[ ./related_logs ]

関連する開発ログ

all logs →
BioWave

BioWave ができるまで — バイオリズムを正弦波で描く

生年月日からの経過日数を使い、 身体23/感情28/知性33日の sin 波で調子を計算。 ゼロ交差を要注意日として抽出し、 2人の誕生日差から cos で位相一致度=相性を算出。 占い手帳 motif で 組んだ サービス設計記録。

read log →
GanttPad

GanttPad ができるまで — 日付軸タイムラインのレイアウト計算

タスクの開始/終了日から全体期間を求め、 各バーの offset(日数) と duration を算出して SVG に配置。 期間に応じて日/週/月の目盛りを自動切替し、 今日ライン・週末シェード・進捗塗りを描く。 プランニングボード motif で 組んだ サービス設計記録。

read log →
HeirShare

HeirShare ができるまで — 相続税の早見表ロジックを実装する

家族構成から法定相続人と法定相続分を判定し、 基礎控除 → 課税遺産総額 → 法定相続分按分 → 速算表 → 相続税の総額 → 配偶者の税額軽減 (法定相続分 or 1.6億) という早見表と同じ流れを純 JS で実装。 相続関係図 motif で 組んだ サービス設計記録。

read log →
ChromaLens

ChromaLens ができるまで — 色覚シミュレーションとダルトナイズ補正

色覚特性 (1型/2型/3型) を 3×3 色変換行列でシミュレートし、 ダルトナイズ法 (失われる色差を別チャンネルへ再配分) で 区別しやすく補正。 画像処理は全て Canvas で端末内。 検眼/カラーチャート motif で 組んだ サービス設計記録。

read log →
GridNine

GridNine ができるまで — 唯一解の数独をブラウザで生成する

MRV バックトラッキングで完成盤を作り、 セルを抜くたびに解の個数を 2 で打ち切り数えて『唯一解』を保ったまま穴掘り。 候補メモ・重複ハイライト・ヒント・タイマーを 文庫パズル誌 motif で 組んだ サービス設計記録。

read log →
PlotPad

PlotPad ができるまで — ブラウザで動く関数グラフ電卓

式の解析・評価・記号微分は mathjs に委譲し、 canvas に 1 ピクセル刻みでサンプリング描画 (発散点で線を切る) + ドラッグ平行移動 + カーソル基準ズーム + 導関数の重ね描き を 自前実装。 グラフ用紙 motif で 組んだ サービス設計記録。

read log →