ウラシルに「吉方位マップ」機能を追加しました。生年月日から本命星を自動算出し、現在地を起点にした8方位の吉凶をGoogle Maps上に可視化するツールです。

きっかけ

九星気学のページを作っているとき、ふと思ったのです。「吉方位は北西です」と文字で伝えても、実際にどの方角がどこなのか、すぐにはピンとこない。北西ってどっちだっけ、と。

特に引越しや旅行の方角を気にする方にとって、地図の上で「ここが吉方位ですよ」と見せられたら、もっと実用的になるのではないか。そう考えて、吉方位マップの開発を始めました。

8方位の線を引く — 思ったより難しい「方角」の話

最初は単純に考えていました。中心点から北・北東・東……と45度ずつ線を引けばいい、と。ところが実際にやってみると、意外なところでつまずきます。

九星気学の方位は均等な8分割ではなく、北・南・東・西が各30度、北東・南東・南西・北西が各60度という不均等な分割です。これは「四正」と「四隅」で扱いが違うため。この仕様を正確に反映するだけで、かなりの試行錯誤がありました。

さらに、地図上の方位線は直線ではなく測地線（地球の丸みを考慮した曲線）で引く必要があります。東京を中心に北西方向へ200km引いた線が、実際にはどのあたりを指すのか。Google Maps APIの google.maps.geometry.spherical を使って正確な方位を計算しています。

本命星の自動判定

九星気学の本命星は生まれ年で決まりますが、ひとつ厄介なルールがあります。「立春（2月4日頃）」を年の区切りとするため、1月1日〜2月3日生まれの方は前年の星で計算する必要があるのです。

西暦から本命星を算出する計算式自体はシンプルですが、この節分ルールを正確に組み込むのに気を遣いました。ユーザーが生年月日を入力したら自動で本命星が判定され、即座に方位盤が切り替わる。この体験をスムーズにすることを最優先にしています。

色分けのデザイン

方位の吉凶を地図上にどう表現するか。ここはデザイン面で最も悩んだポイントです。

最初は赤・青・黄色でベタ塗りにしていたのですが、地図の情報が読めなくなってしまう。かといって薄すぎると吉凶がわからない。最終的には、半透明のグラデーション扇形を重ねる方式に落ち着きました。大吉は淡いゴールド、吉は控えめな緑、凶はうっすらとしたグレー。地図の可読性を保ちながら、直感的に方位の良し悪しが伝わるバランスを探りました。

「占いツール」と「実用ツール」のあいだ

開発中、ずっと意識していたのは「実用性」です。吉方位マップは、占いの要素を持ちつつも、引越し先を探すとき・旅行先を選ぶとき・日帰りの行き先を決めるときに「実際に使える」ツールであるべきだと考えました。

だから地図は本物のGoogle Mapsを使い、住所検索もできるようにしています。「北西の吉方位に温泉がある」とわかったら、そのまま行き先を決められる。占いと日常がつながる瞬間を作りたかったのです。

静的サイトでの実装

ウラシルはAstroで構築した静的サイトです。サーバーサイドの処理は一切ありません。吉方位の計算もすべてクライアントサイドのJavaScriptで完結しています。

本命星の算出、方位の吉凶判定、扇形の描画、地図へのオーバーレイ。これらをすべてブラウザ上で行うため、APIキー以外の外部依存がありません。ページを開いた瞬間にすべてが動く。この軽快さは静的サイトならではの強みです。

これからのこと

現在は本命星に基づく「一生変わらない吉方位」を表示していますが、将来的には年盤・月盤・日盤を重ねた「今日の吉方位」も実装したいと考えています。毎日チェックして、その日のお出かけ先を決める。そんな使い方ができたら、九星気学がもっと身近になるはずです。

ウラシルに「ホロスコープ作成」機能をリリースしました。生年月日・出生時刻・出生地を入力すると、その瞬間の天体配置を本格的なネイタルチャートとして描画するツールです。外部APIを一切使わず、すべてブラウザ上のJavaScriptだけで完結しています。

なぜ「作成機能」なのか

ウラシルの星座占いは太陽星座をベースにしたものです。おひつじ座、おうし座……と12星座で運勢を出す。これはこれで十分に楽しめるのですが、占星術を少し知っている方なら「月星座は？」「アセンダントは？」と気になるはずです。

太陽星座だけでは見えない「もうひとつの自分」を知ってもらいたい。そのためには、ホロスコープそのものを作れる場所が必要でした。

天体の位置を計算する — 天文学との格闘

ホロスコープを描くには、まず指定された日時における太陽・月・水星・金星・火星・木星・土星・天王星・海王星・冥王星の黄道座標を求める必要があります。

天文暦（エフェメリス）のデータをJavaScriptで扱えるようにするのが最初の関門でした。精度と容量のバランスが難しく、高精度な天文計算ライブラリは数MBになることもあります。

最終的には、必要十分な精度を保ちつつファイルサイズを抑えた簡易計算方式を採用しました。太陽と月は誤差1度以内、外惑星はやや大きくなりますが、個人のネイタルチャートとしては十分に実用的です。

SVGでチャートを描く

チャート図はすべてSVGで描画しています。12星座の区分、天体のシンボル、アスペクト線、ハウスの区切り。これらを座標計算しながら動的に生成するのですが、見た目の美しさと情報の読みやすさを両立させるのに苦労しました。

特に悩んだのが天体シンボルの重なり問題です。たとえば太陽と水星が同じ星座の近い度数にいる場合、シンボルが重なって読めなくなる。これを避けるために、近接する天体を自動的にずらして配置するロジックを入れています。地味ですが、この処理がないとチャートとして成立しません。

出生時刻がわからない場合

ホロスコープ作成で意外と多いのが「出生時刻がわからない」というケースです。母子手帳が手元にない方、そもそも記録されていない方もいらっしゃいます。

出生時刻がないとアセンダント（上昇星座）やハウスの計算ができません。だからといって「時刻必須」にすると、多くの方が使えなくなってしまう。そこで「出生時刻がわからない」チェックボックスを用意し、チェックを入れた場合は太陽・月・惑星の星座配置だけを表示するモードに切り替わるようにしました。

できることを最大限に見せつつ、できないことは正直に伝える。この設計方針はウラシル全体で大切にしていることです。

アスペクトの計算と表示

天体同士が特定の角度を取ると「アスペクト」と呼ばれる関係が生まれます。合（0°）・六分（60°）・矩（90°）・三分（120°）・衝（180°）が主要なものです。

10天体の全組み合わせ（45通り）について角度を計算し、許容範囲（オーブ）内のものをアスペクトとして検出します。チャート上ではアスペクトの種類ごとに線の色とスタイルを変えて表示しています。調和的なアスペクトは青い線、緊張を伴うアスペクトは赤い線。一目で全体の傾向がつかめるようにしています。

解釈テキストの設計

チャートを描くだけでは「きれいな図」で終わってしまいます。大切なのは「だから何なのか」を伝えること。太陽がおひつじ座にあるということは、どんな性質を持つのか。月がかに座にあるとは、感情面でどういう傾向があるのか。

各天体×各星座の組み合わせ（120通り以上）の解釈テキストを用意し、チャート生成と同時に表示するようにしました。テキストはウラシルの編集方針に沿って、断定しすぎず、読んだ方が「そうかもしれない」と自分で感じられるトーンで書いています。

画像保存と全画面表示

作ったチャートを手元に残したい、という要望は最初から想定していました。SVGをCanvasに変換してPNG画像としてダウンロードする機能を実装しています。スマートフォンでもワンタップで保存できます。

また、チャートをタップすると全画面でオーバーレイ表示される機能も追加しました。スマートフォンの小さな画面でも、天体の配置やアスペクト線をじっくり確認できます。

静的サイトでここまでできる

ホロスコープ作成といえば、通常はサーバーサイドで天文計算を行い、結果を返すという構成が一般的です。ウラシルではこれをすべてクライアントサイドで完結させています。

サーバーへの通信が一切ないため、ページを開いた瞬間に使えます。通信環境が不安定でも問題ありません。入力した個人情報（生年月日や出生地）がサーバーに送られることもないので、プライバシーの面でも安心して使っていただけるはずです。

「占いサイトに本格的なチャート作成機能がある」。この意外性が、ウラシルらしさだと思っています。

ウラシルに「姓名判断」機能を追加しました。姓と名を漢字で入力すると、五格（天格・人格・地格・外格・総格）を算出し、それぞれの運勢を表示するツールです。

「画数を数えるだけでしょ？」— 甘かった

姓名判断の開発を始めるとき、正直に言うと少し楽観的でした。漢字の画数を数えて、足し算をして、結果を出す。ロジックとしてはシンプルなはず、と。

ところが調べ始めてすぐに壁にぶつかります。「旧字体の画数を使うのか、新字体の画数を使うのか」という問題です。

たとえば「澤」と「沢」。現代の辞書では「沢」は7画ですが、姓名判断の世界では旧字体の「澤」として16画で数える流派があります。これは「本来の字の持つ意味と力は旧字体にある」という考え方に基づくもの。

さらにややこしいのが「さんずい」の扱い。通常は3画ですが、「水」の変形とみなして4画と数える流派もある。「くさかんむり」は3画か4画か6画か。流派によって違うのです。

五格の計算 — 一文字姓と三文字姓の罠

五格の計算式は、姓と名がそれぞれ二文字の場合はわかりやすいのですが、一文字姓（林、森など）や三文字姓（長谷川、小笠原など）になると、計算方法が変わります。

一文字姓の場合は「仮成数」として1を足す流派、足さない流派、姓の文字を2回数える流派……。開発中に何度も「結局どれが正しいの？」と頭を抱えました。

最終的には、最も広く使われている計算方式を採用しつつ、画数テーブルは旧字体ベースで整備しました。どの方式を採用したかは、ページ上に明記しています。占いは流派があるからこそ面白いのですが、開発者としてはなかなかの修行でした。

画数テーブルの整備 — 地味すぎる作業

姓名判断で最も時間がかかったのは、実はロジックではなく「画数テーブル」の整備です。日本の人名で使われる漢字を網羅し、それぞれに旧字体ベースの画数を設定する。

常用漢字だけでも2,000字以上。さらに人名用漢字、旧字体、異体字……。ひとつずつ確認しながらテーブルに登録していく作業は、正直なところ心が折れそうになる場面もありました。

でも、ユーザーが自分の名前を入力して「この漢字は未対応です」と出たら、その瞬間に信頼を失う。だから手を抜くわけにはいきません。

結果テキストの設計 — 81画分の運勢

姓名判断では、各格の画数（1〜81画）ごとに運勢の意味が定められています。1画は「太陽」で大吉、2画は「月」で波乱含み……というように。

これを81画分、五格それぞれの文脈に合わせたテキストとして用意する必要があります。天格（家系運）と地格（基礎運）では、同じ画数でも伝えるべきニュアンスが違う。

ウラシルの編集方針として「悪い結果でも否定しない」というルールがあるので、凶数の表現には特に気を遣いました。「困難が多い数ですが、それを乗り越える粘り強さも持っています」のように、読んだ方が前を向けるトーンを心がけています。

入力UIのこだわり

姓名判断は「名前を入力する」というシンプルな操作ですが、だからこそUIに気を遣いました。姓と名を別々の入力欄にして、入力するとリアルタイムで画数が表示される。結果画面では五格をビジュアルで見せ、各格をタップすると詳細な解説が展開される。

地味な機能ですが、入力から結果表示までの体験がスムーズであること。これが「もう一回やってみよう」「友達の名前も調べてみよう」という行動につながると考えています。

ウラシルに「私のトリセツ診断」をリリースしました。20の質問に答えると、性格・恋愛・仕事・お金の使い方まで、自分だけの「取扱説明書」が完成する診断コンテンツです。

「トリセツ」というフォーマットの面白さ

占い診断は世の中にたくさんありますが、結果の見せ方はだいたい「あなたは○○タイプです」で終わりがちです。それはそれで楽しいのですが、もう少し「自分ごと感」のある形にできないかと考えていました。

そこで思いついたのが「取扱説明書」というフォーマットです。家電の取説のように「基本スペック」「使い方のコツ」「故障かな？と思ったら」と項目が並ぶ。自分自身を「製品」に見立てて説明するという、ちょっとシュールだけど愛着の湧く形式です。

実際にプロトタイプを作って周囲に見せたところ、「これ面白い」「SNSに載せたい」という反応が多く、方向性は間違っていないと確信しました。

質問設計 — 20問で「あなた」を浮かび上がらせる

20問という数には理由があります。10問では浅すぎて個性が出ない。30問では途中で離脱される。20問は「ちょっと多いかな」と思いつつも最後まで答えてもらえるギリギリのライン。

質問は「基本性格」「恋愛」「仕事」「ライフスタイル」「ストレス耐性」の5カテゴリに分け、各カテゴリ4問ずつ。カテゴリが変わるたびに画面の雰囲気も切り替わるので、「次は何を聞かれるんだろう」というワクワク感を保てるようにしました。

質問文は最後まで悩みました。「あなたの性格は？」と直接聞くのではなく、「朝起きて最初にすることは？」「友達と遊ぶなら何人がベスト？」のように、具体的なシチュエーションを提示する。そうすることで回答者が「うーん、どっちだろう」と自分を振り返る時間が生まれます。

結果生成 — 組み合わせは数十億通り

20問×4択＝約1兆通りの回答パターンがあり得ます。もちろんすべてのパターンに個別のテキストを用意するのは不可能です。

そこで採用したのは「パーツ組み立て方式」。回答傾向から複数の性格軸（外向/内向、直感/論理、計画/即興など）のスコアを算出し、各軸のスコアに応じたテキストパーツを組み合わせて「トリセツ」を生成する。

たとえば「基本スペック」のセクションでは、外向性スコアに応じた「社交性」の記述と、直感/論理スコアに応じた「判断スタイル」の記述を組み合わせる。こうすることで、わずかな回答の違いでも結果が微妙に変わり、「自分だけのトリセツ」感が出るようになっています。

「故障かな？と思ったら」セクションが一番ウケた

トリセツの各セクションの中で、SNSでの反応が最も大きかったのが「故障かな？と思ったら」のセクションです。

「急に無口になる → 充電切れです。そっとしておいてください」「予定を詰め込みすぎる → オーバーヒート気味。空白の予定を入れてあげてください」のように、自分の「不調パターン」とその対処法をユーモラスに表現しています。

自分の弱点やクセを「故障」として肯定的に表現する。これは編集方針の「悪いことも否定しない」を診断コンテンツに落とし込んだ結果です。欠点ではなく「仕様」として受け入れてもらう。このニュアンスは個人的にとても気に入っています。

シェア画像の自動生成

診断結果をSNSでシェアしてもらうには、見栄えのする画像が必要です。Canvas APIを使って、トリセツ風のデザインで結果を画像化する機能を実装しました。

ここで地味に苦労したのが日本語フォントの描画です。Canvas上でのテキスト描画は、Webフォントの読み込みタイミングに左右されます。フォントが読み込まれる前に描画すると文字化けする。かといって長すぎるウェイトを入れるとUXが悪くなる。

最終的には、フォントの読み込み完了を検知してから画像生成を行うようにしました。ほんの数百ミリ秒の遅延ですが、確実にきれいな画像が生成される安心感には代えられません。

トリセツの「その先」

リリース後、「友達と結果を見せ合って盛り上がった」という反応をいただきました。自分のトリセツを読んで「わかる……」と笑い、友達のトリセツを読んで「だからか！」と納得する。そういうコミュニケーションのきっかけになれたなら、作った甲斐があったと感じます。