はじめに：「また来たい」と思わせる仕掛けが欲しかった
ブログのPVが伸びません。
記事を投稿してもSNSで少し読まれて終わり。 リピーターがほとんどいないのが課題でした。
「記事を読んだら離脱」を繰り返すだけでは、 PVは記事数に比例するだけです。 毎日来る理由がないと成長しない。
そんなとき思いついたのが占い機能でした。
「1日1回だけ占える」という仕組みなら、 毎日訪問するきっかけになるのでは？ しかもヒトブログにはマスコットキャラ「ブロモン」がいます。 ブロモンが占ってくれる——ブログの個性とも自然につながると思いました。
この記事では、企画→設計→実装→公開まで 全過程を体験したことをベースに書いていきます。
この記事でわかること
- 占い機能の企画・コンテンツ設計
- 占いデータ60パターンの設計方法
- WordPress（自作テーマ）への実装方法
- 1日1回制限・Xシェア機能の作り方
- PC/スマホ両対応で詰まったポイントと解決策
結論：占いは「技術」より「企画」が大事
先に結論です。
占い機能の実装自体は JavaScript＋ショートコードで意外とシンプルでした。
難しかったのはむしろ企画の部分。 「どんな占いにするか」 「60パターンのメッセージをどう作るか」 コンテンツ設計に一番時間がかかりました。
でも「ブログのコンセプトと接続する」 という視点で設計したことで、 ただの遊びではなく リピーター獲得の仕組みになったと感じています。
なぜブログに占い機能をつけたのか
ブログの課題：読んだら離脱
ヒトブログの課題は明確でした。
記事を読んでくれる人はいる。
でも読み終わったらそのまま離脱する。
「また明日も来よう」という理由がない。
ブログを成長させるには、新規読者だけでなく
リピーターを増やす必要があります。
「毎日来る理由」を作りたかった
占い機能は1日1回の制限と相性がいいです。
「今日の運勢を見たい」
→毎朝ブログにアクセス
→ついでに新しい記事も読む
→「ちょっと詳しい自分」になる
このループを作りたかったのが
占い機能を導入した一番の理由です。
別サイト vs ブログ内：統合を選んだ理由
占いを別サイトで作る案もありました。 以前ツールを作ったときは 別ドメイン（tools.hitoblog.site）に設置しました。
でも今回はヒトブログ本体に統合しました。 理由は3つです。
・PVの受け皿になる
占い目的の訪問がそのままブログのPVになります。
・運用コストが低い
別サイトだとデプロイや管理が二重になります。 WordPress内ならテーマファイルの編集だけです。
・ドメインパワーに貢献する
訪問頻度が上がればGoogleの評価にもつながります。
占いの企画・コンテンツ設計
占いのテーマは「成長運」
占いのテーマ選びは重要です。
恋愛運？金運？いろいろ考えました。 でもヒトブログのコンセプトは 「学生の”やってみた”記録」です。
ここに一番合うのは「成長運」でした。 「今日はどんな成長ができるか」という占いなら、 ブログの世界観と自然につながります。
5段階の運勢レベル
運勢は5段階に設定しました。
| レベル | 意味 | 出現率の目安 |
|---|---|---|
| 大成長 | 最高の1日。新しいことに挑戦すべき | 約10% |
| 成長 | いい流れ。積極的に動くといい | 約25% |
| コツコツ | 地道な努力が実る日 | 約30% |
| 準備中 | インプットに最適な日 | 約25% |
| 充電日 | 休息も大事。エネルギーを貯める日 | 約10% |
「ハズレ」を作りたくなかったので、 どの結果でもポジティブなメッセージにしています。 「充電日」でも落ち込まないような言い回しです。
60パターンのメッセージ作成
60パターンのメッセージ＋ラッキーアクションは Claude OPUS 4.6の拡張思考を使って生成しました。
なぜClaudeを使ったかというと、
自然な日本語を生成してくれるからです。
しかもブロモンの口調ルールを指定すれば
キャラクターに合った文体で出力されます。
ブロモンの口調ルールはこんな感じです。
- 語尾に「モン」をつける
- 前向きで応援する言葉を使う
- 学生に寄り添うトーンにする
Claudeに60パターン生成してもらった後、 最終仕上げだけ自分で調整しました。 違和感のある表現や重複を修正する作業です。
ブロモンの画像を7枚用意
運勢ごとにブロモンの表情を変えたかったので、 7パターンの画像を用意しました。
大成長のときは目をキラキラさせた表情。 充電日のときはリラックスした表情。
結果画面の印象がテキストだけのときより格段に良くなりました。
技術的な実装方法
ショートコード方式を選んだ理由
WordPressでの実装方法はいくつかありますが、 僕はショートコード方式を選びました。 [fortune_telling]と書くだけでどのページにも設置できるからです。
トップページに置くか、専用の固定ページに置くか、 後から自由に変えられるのが利点です。
1日1回制限：LocalStorageで実装
占いを1日1回に制限するためにLocalStorageを使いました。
仕組みはシンプルです。 占い実行時に「今日の日付」をLocalStorageに保存し、 次回アクセス時に日付を比較して、 同じ日付なら結果をそのまま再表示します。
// 簡略化したイメージ
const today = new Date().toDateString();
const saved = localStorage.getItem('fortune_date');
if (saved === today) {
// 保存済みの結果を表示
} else {
// 新しい占いを実行
localStorage.setItem('fortune_date', today);
}
CookieではなくLocalStorageを選んだ理由は、 Cookieバナー（同意取得UI）が不要だからです。 LocalStorageはブラウザ内に閉じたデータなので、 プライバシー規制の対象外になるケースが多いです。
占い結果自体は日付をシード値にした擬似ランダム関数で決定しているため、 LocalStorageが消えても同じ日なら同じ結果が再現されます。
占い結果の決定ロジック
占い結果はランダムですが、
同じ日に同じ結果が出る必要があります。
日付をシード値にした擬似ランダム関数を使いました。
日付が変わるまでは何度アクセスしても同じ結果です。
これによりLocalStorageが消えても同じ日なら同じ結果が再現されます。
UIフロー：4つの状態遷移
占い機能のUIは4つの状態があります。
① 待機状態
「今日の運勢を占う」ボタンが表示されます。
② 占い中（演出）
ボタンを押すと1.5秒の演出が入ります。
ブロモンが考えているようなアニメーションです。
この「待つ時間」がワクワク感を生みます。
③ 結果表示
運勢レベル、メッセージ、ラッキーアクション、
ブロモンの画像が表示されます。
④ 再訪問時
同じ日にアクセスすると
占い済みの結果がそのまま表示されます。
占い中の演出で「ワクワク感」を作る
ボタンを押すとすぐ結果を表示するのではなく、 1.5秒の演出を挟んでいます。 ブロモンが考えているようなアニメーションです。
この「待つ時間」がワクワク感を生みます。 技術的には不要な待機ですが、体験としては必要な間です。
Xシェアボタンの実装
結果画面にXシェアボタンをつけました。 実装にはIntent URL方式を使っています。
const text = `今日のブロモン占い結果は「${result}」モン！`;
const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&hashtags=ブロモン占い`;
「#ブロモン占い」ハッシュタグの狙い
シェアテキストに占い結果を含めることで、 「自分もやってみたい」という興味を引く仕組みです。
Xシェア機能に固定ハッシュタグをつけたのは
UGC（ユーザー生成コンテンツ）を狙ったからです。
占い結果をシェアしてくれた人のポストを見た人が「自分もやってみよう」と思う—— 占い→シェア→拡散→新規訪問→占いのループが理想の形です。
つまづいたポイント
PC版でのレイアウト崩れ
最初はヒーローセクション（トップ画像）の直下に占い機能を設置しました。
でも余白がありすぎて浮いて見える。 ヒーロー画像と占いの間に大きな空白ができてしまいました。
解決策： PC版ではヒーローセクション内に占い機能を統合しました。 スマホ版はそのまま縦積みです。 デバイスごとに配置を変える方針にしたことで自然な見た目になりました。
レスポンシブ対応の難しさ
占い結果の表示エリアはテキスト＋画像＋ボタンで構成されています。 PC版では横並び、スマホ版では縦積みにする必要があり、 メディアクエリの設定に苦戦しました。
特にブロモンの画像サイズが問題でした。 PC版で適切なサイズがスマホでは大きすぎる。 逆にスマホに合わせるとPC版で小さすぎる。
解決策： 画像サイズをビューポート幅に対する 相対値（vw）で指定し、max-widthで上限を設けることで どちらのデバイスでも適切に表示されるようになりました。
まとめ：ブログに「また来たい」を作る方法
占い機能の実装を振り返ります。
| フェーズ | やったこと | 期間 |
|---|---|---|
| 企画 | テーマ決め・運勢設計・口調ルール策定 | 30分 |
| コンテンツ | 60パターン生成・画像7枚用意 | 10分 |
| 実装・改善 | ショートコード・LocalStorage・UI | 1時間 |
| 公開 | テスト・レスポンシブ修正・X告知 | 1時間 |
合計約2時間半で完成しました。
技術的にはJavaScript＋ショートコードで意外とシンプルな構成です。
Claude Codeを活用すれば
プログラミング経験が浅くても実装できます。
大事なのは「ブログのコンセプトとの接続」です。
ヒトブログの「成長」というテーマと占いの「成長運」を結びつけたことで、
ただの遊びではなく、ブログの一部として機能しています。
記事だけがブログのコンテンツではありません。
「体験」を提供することで
リピーターが生まれます。
今後はパターンの追加や季節イベント対応（お正月占い、夏休み占いなど）も展開していく予定です。
「自分のブログにも何か仕掛けを作りたい」と思った人は、
まずClaude Codeを使ってみた！を読んで環境を整えるところから始めてみてください！
・関連記事
・アドセンス診断合格サイトをClaudecodeを使って作成した方法↓
コメントを残す