こんにちは『あの頃のときめきと同じくらい、思い通りに動いたコードに心が躍る。』でおなじみ（？）の綾祢です。
今回は、ちょっと遊び心のあるWebツールをひとつ作ってみました。
モテ期予報 💘
👉 https://ai.ayatabi.net/MotekiYohou/
名前を入れるだけで、「あなたのモテ期」がそっと表示される、ゆるっと楽しめる診断ツールです。
Contents
- モテ期予報ってなに？
- Vibe Codingって？
- 実装のしくみ（少し詳しく）
- 実はChatGPTにも相談してました
- シェアして遊ぶということ
- まとめ：ちょっと笑えて、ちょっと心がほぐれる
モテ期予報ってなに？
このツールは、ほんの少しの情報——あなたの名前と年齢（任意）を入れるだけで、
🩷 「○○さんのモテ期は2025年8月ごろに訪れます」
と、ちょっとポジティブな未来を届けてくれるもの。
コメントは日替わりおみくじのようにランダム。
恋の予感を感じる言葉もあれば、思わずクスッと笑えるようなメッセージも。
「SNSに何か投稿したいとき」にもぴったりな、軽やかなツールになっています。
Vibe Codingって？
今回の制作スタイルは、「Vibe Coding（バイブコーディング）」というアプローチを取り入れました。
これは、OpenAIの共同創業者であるアンドレイ・カルパシー氏が提唱した新しいプログラミング手法で、AIに自然言語で指示を出し、コードの生成や修正をAIに委ねるスタイルです。
具体的には、以下のような特徴があります：
- 自然言語での指示：たとえば「サイドバーのパディングを半分にしてください」といった簡単な指示をAIに与える。
- キーボードをほとんど使わない：音声認識ツールを用いてAIと対話し、手動でのコード入力は最小限に。
- 変更の即時受け入れ：AIが提案したコードの差分を確認せずに「すべて受け入れる（Accept All）」を選択。
- エラー処理の簡略化：エラーメッセージが出た場合、それをそのままAIにコピー＆ペーストして修正を依頼。
- コードの理解を後回し：生成されたコードが複雑になりすぎても、深く読まずに「動けばOK」とする。
このアプローチにより、開発者は技術的な詳細よりもアイデアや「雰囲気（vibe）」に集中し、AIがその実装を担うことが可能になります。
それはきっと、コードの正しさだけでなく、
“雰囲気”や”ノリ”を大切にして作ること。
- 完璧じゃなくてもいい
- 感情で書いてもいい
- 誰かの一日を、ちょっとだけ明るくできたら
そんなスタンスでコードを書き、形にする。
今回の「モテ期予報 💘」は、その想いをそのまま表現したツールです。
実装のしくみ（少し詳しく）
技術構成
- フロントエンド：HTML / CSS / JavaScript（Vanilla）
- バックエンド：PHP
- 診断結果：JSONで受け取り、非同期表示
- シェア機能＆画像保存：Twitter intent URL + html2canvas
UIについて
淡いピンクをベースに、グラデーションと丸みを意識したやさしいデザイン。
background: linear-gradient(135deg, #ffd1dc, #ffb7c5);
border-radius: 20px;
CSSのちょっとした加減で、「モテ期らしい空気感」を出しています。
ロジックの流れ
- 入力された名前と年齢をPHPで受け取る
- モテ期日付をランダムで生成
- コメントもシャッフルから選出
- JS側で非同期受信し、結果表示とアニメーション
技術的にはシンプル。でも、“見せ方”や”体験”にこだわりました。
SNSシェアについて
結果画面には、Twitterでそのまま投稿できるボタンを設置。
const shareText = `${nameText}さんのモテ期は${data.date}だった🤣 #モテ期予報\n${siteUrl}`;
intent URLを使って、気軽に「笑える未来」を共有できるようにしています。
なぜTwitter表記のまま？
今ではX.comが正式名称ですが、
このツールではあえて「Twitter」のまま使っています。
「Xでポストする」より「Twitterでシェア」の方が、言葉としてしっくりくる気がして。
懐かしさも愛おしさも、そのまま乗せておきたかったんです。
画像保存について
html2canvas を使い、結果画面を1枚の画像として保存できる機能も搭載。
SNSだけでなく、記念やネタ帳にもぜひどうぞ。
実はChatGPTにも相談してました
このツール、実はChatGPTにこんな相談から始まりました。
# 前提
あなたはAI利用の先生であり、ギャルです。
わかりやすく、フレンドリーに説明します。
## 依頼内容
AIエディタのCursorで作るPHPのWebアプリケーション100本ノックをしたいです。
1日1時間くらいの実作業量でリリースできるWebアプリケーションを100本連続して作ります。
先日ネームジェネレーターを作ったから「じゃあ2本目、何から作ろうか？」と会話を進めて、「占いみたいな診断は気軽に作れて楽しいかも」と思いついたのがきっかけ。
名前を入れて、ポンと結果が出て、
そのままSNSにシェアしたくなる……
そんな“ノリの良さ”を意識したツールになりました。
シェアして遊ぶということ
モテ期なんて、実際には誰にもわからない。
でも、「誰かから見たら、自分の魅力がキラッと光る瞬間」はきっとある。
このツールは、そんなきっかけを笑いながら待てる場所をつくれたらと思って作りました。
今さら感あるツールだけど、気軽に試して、笑って、そうやってSNSで広がっていく姿が、ちょっと見れると嬉しいです。
まとめ：ちょっと笑えて、ちょっと心がほぐれる
「モテ期予報 💘」は、ただの診断ツールかもしれません。
でも、ふとした一言や表示された日付が、誰かの一日をちょっとだけ軽くするかもしれない。
そんなふうに思いながら、Vibe Codingで楽しみながら作りました。
これからも、気の利いたWebアプリやくすっと笑えるツールを作っていけたらと思います。
また次の作品で、お会いしましょう✨
コメント