旅行の計画、いつも自分が立てる係になってないモン？

友達との旅行あるある。「どこ行く？」「何でもいいよ」「任せる」。

結局、言い出しっぺが全部調べて、ルートを組んで、宿を探して、予算を計算する。

正直、旅行の計画って楽しい反面、めちゃくちゃ面倒です。

特に何泊もする旅行だと、1日ごとのスケジュールを考えるだけで何時間もかかる。

そこで、福岡→大阪・京都の7泊8日旅行を計画するとき、ChatGPTの旅行特化GPTsにプランを丸投げしてみました。

結論から言うと、「下書きとしては優秀。でもそのまま使うのは危険」でした。

結論：「丸投げ」はダメだが「下書き」としては最強

先に結論です。

スケジュールの「骨組み」を作ってもらって、価格や最新情報は自分で確認する。 これがAI旅行プランの正しい使い方です。

ChatGPTの旅行GPTsとは

GPTs（ジーピーティーズ）は、ChatGPTの中にある特化型のAIアシスタントです。
「旅行プラン作成」に特化したGPTsが複数公開されていて、旅行先や予算を伝えるだけで、スケジュールを自動で組んでくれます。

ChatGPTのGPTsストアで「travel」や「旅行」と検索すると、たくさん出てきます。

自分が使ったのは日本語対応の旅行プランナー系のGPTs。

無料プランでもGPTsは使えます（回数制限あり）。有料のChatGPT Plusに入っていなくても試せるので、ハードルは低い。

実際に使ったプロンプト

大阪旅行のプランを作ってもらうために、以下の条件を伝えました。

大阪・京都旅行のプランを作ってください。

条件：
- 出発地：福岡
- 日数：7泊8日
- 予算：合計5〜6万円（交通費・宿泊費・食費・観光すべて込み）
- 人数：1人
- 時期：2月
- 属性：大学生
- 宿泊：できるだけ安く（カプセルホテル、ドミトリー可）うち最初の3日は友達の家に宿泊する予定(京都市内)
- 必ず行きたい場所：道頓堀、ユニバーサル・スタジオ・ジャパン、清水寺
- 興味：食べ歩き、観光、写真
- 移動手段の希望：行きはJALスカイメイト、帰りは夜行バス 

1日ごとの詳細スケジュール（時間帯付き）と、
各日の予算目安を出してください。

プロンプトの書き方で学んだことを活かして、条件をかなり具体的に伝えました。

「大阪旅行のプランを作って」だけだと、ふわっとした提案しか返ってこないので、予算・人数・時期・行きたい場所を全部指定するのがポイント。

GPTsが出してきたプランの評価

良かった点

①観光スポットの提案が具体的

「1日目：錦市場 → 八坂神社 → 祇園・花見小路散策」みたいに、具体的なスポット名と順番を出してくれました。
特にエリアごとにまとめてくれるのが便利。エリアごとに行ける場所を一気にリストアップしてくれるので、移動効率が良いルートになる。

自分で調べると「京都 観光スポット」で検索 → 30ヶ所くらい出てくる → どれを同じ日に回せるか考える、という作業が必要。GPTsはこの作業を一瞬でやってくれます。

②1日ごとのタイムスケジュールが合理的

「11:00 友人宅へ荷物を預ける → 12:00 錦市場で昼食・食べ歩き → 14:00 八坂神社→ 16:00 祇園・花見小路散策・写真撮影 → 18:00 京都駅周辺で夕食」みたいな、時間帯付きのスケジュール。

移動時間を考慮してルートを組んでくれているのがありがたい。「清水寺の後に嵐山に行って、その後に伏見稲荷」みたいな非効率なルートにはなっていなかった。

③「7泊8日の長期旅行」のスケジュール配分

3〜4日の短期旅行なら自分で組めるけど、7泊8日ともなると「中盤をどう過ごすか」が難しい。

GPTsは全体のメリハリを考えたプランを出してくれました。

7泊8日のスケジュールを一瞬で組んでくれるってすごいモン！

微妙だった点

①予算感がズレていた

これが一番の問題。「予算5〜6万円」と伝えたのに、GPTsが提案する食事は1食1,500〜2,500円の店ばかり。大学生の旅行で毎食そんなに使わない。

ランチ800円、夕食1,200円くらいが現実的な予算感なんですが、AIはどうしても「おすすめの有名店」を出しがちで、結果的に食費が予算オーバーするプランになっていました。

②AIは待ち時間を考慮してくれない

GPTsが提案したスポットの中には、待ち時間が発生する場所が含まれていました。AIは待ち時間を考慮していない為、プラン通りにいかない場合がある。待ち時間が発生してしまった場合は自分でそのあとのプランを考えなければいけません。

③宿泊先の「具体的な候補」までは出てこなかった

「最初の3日は友達の家に泊まる」「カプセルホテル、ドミトリー可」とプロンプトに書いたら、前半3日の宿泊費ゼロも、残り4泊のカプセル・ドミトリー提案もちゃんと反映してくれました。ここまではOK。

でも「じゃあ具体的にどこのカプセルホテルがいいのか」までは調べてくれない。「大阪市内のカプセルホテル（1泊2,000〜3,000円目安）」みたいなざっくりした提案で終わる。結局、楽天トラベルやじゃらんで自分で検索して、実際に空いている宿を探す作業が必要でした。

AIは「こういう種類の宿に泊まるといいよ」とは言えるけど、「この宿が空いていて安いよ」とは言えない。 リアルタイムの空室情報や価格は、予約サイトを自分で見るしかない。

④最新の情報が反映されていなかった

GPTsが提案したスポットの中に、臨時休業中の施設が含まれていました。AIの学習データには反映されていない変更がある。営業時間や定休日は、必ず公式サイトで自分で確認する必要がある。

⑤クーポンやキャンペーンの情報がない

旅行の節約で大事な「今使えるクーポン」「期間限定のキャンペーン」の情報はAIから出てこない。宿泊予約サイトのクーポンや学割情報は、結局自分で調べる必要がありました。

実際の旅行と比較してどうだったか

GPTsのプランと、実際の旅行を比較してみます。

観光ルートと日程配分はかなり参考になった。 「前半3日は京都、中盤は大阪市内、この日はUSJ」みたいな大枠の組み方はGPTsのプランをほぼそのまま採用しました。

一方で、食事と宿泊はGPTsの提案をほぼ無視して、自分の予算感に合った選択をしました。ここが「下書きとしては優秀、そのまま使うのは危険」の意味です。

今ならClaudeでも試してみたい

この旅行をしたとき、実はまだClaudeの存在を知りませんでした。当時はChatGPTしか使っていなかった。

今はClaudeをメインで使っているので、「同じ条件でClaudeにプランを作ってもらったらどうなるか」は気になるところ。特にClaudeは壁打ちの質が高いので、「このプランの予算感、大学生にとって現実的？」みたいな深掘り相談ができそう。

ただし、旅行GPTsのような「専門特化型」のモードはClaudeにはないので、プロンプトの書き方でカバーする必要があります。その分、自由度は高い。

AIツールの使い分けについては、NotebookLMとClaudeの使い分け記事やAIツール比較記事で詳しく比較しているので、興味がある人はそちらも読んでみてください。

旅行GPTsは「旅行に特化した案内人」、Claudeは「何でも相談できる先輩」。どっちも使い方次第だモン！

AIで旅行プランを作るときのコツ

実際に使ってみてわかったコツを5つまとめます。

コツ①：条件は具体的に伝える

❌ 「大阪旅行のプランを作って」
✅ 「大阪7泊8日、予算5万円、大学生1人、2月、
   カプセルホテル可、行きは飛行機・帰りは夜行バス」

条件が曖昧だと、AIは「安全な提案」（＝高めのホテル、有名レストラン）を出しがち。

自分の条件を全部伝えると、それに合わせたプランが出てくる。

コツ②：出てきたプランをそのまま使わない

AIのプランは骨組みとして使う。肉付け（具体的な店の選定、予約、クーポン確認）は自分でやる。

コツ③：宿泊費・交通費は必ず自分で確認

AIが提示する金額は目安であって、実際の予約サイトの料金とは違うことが多い。特に宿泊費は時期によって大きく変動するので、楽天トラベルやじゃらんで自分で検索してください。

＞＞ 大学生が旅行を安くする方法で、具体的な節約術をまとめています。

学んでみた 大学生が旅行を安くする方法｜福岡→大阪 7泊8日を5万円台で行けた節約術 はじめに：旅行に行きたい。でもお金がない。 大学生あるあるだと思います。友達が「夏休み、大… hitoblog.site

コツ④：「修正してもらう」を前提にする

最初のプランが完璧なことはまずない。「食費をもっと抑えて」「この日は京都じゃなくて奈良に変えて」と修正指示を出す前提で使う。3〜4回やり取りすると、かなり良いプランになります。

コツ⑤：複数のAIに聞いてみる

余裕があれば、ChatGPTとClaude（またはGemini）の両方にプランを作ってもらう。

同じ条件でもAIによって提案が違うので、良いとこ取りができます。

まとめ：AIは「旅行計画のたたき台マシン」として最強

AIに旅行プランを「丸投げ」するのはダメ。でも「下書き」として使うなら最強。

旅行の計画が面倒で「もういいや、ノープランで行こう」となりがちな人ほど、AIにたたき台を作ってもらう価値がある。ゼロから計画を組むのと、下書きを修正するのでは、かかる時間がまったく違います！

次の旅行計画、まずはAIに「条件」を投げるところから始めてみてください！

AIに丸投げはダメだけど、下書きとしては最強だモン！

関連記事

• 大学生が旅行を安くする方法｜福岡→大阪 7泊8日を5万円台で行けた節約術 — 安くする具体的な方法はこちらにまとめてます！
• 【大学生向け】AIへの「聞き方」を変えたら回答の質が激変した話｜プロンプト改善Before/After — 旅行プランの質もプロンプトの書き方で変わる！
• NotebookLMとClaude、大学生はどう使い分ける？ — AIツールの使い分け方の記事はこちら！
• 【2026年版】AIツールのおすすめと使い分け方を学生が本音で比較してみた — ChatGPT vs Claude の詳しい比較記事
• 大学生がAIに月いくら課金してる？ — GPTsは無料でも使えるけど、課金のコスパも知っておくべき！

学んでみた 大学生が旅行を安くする方法｜福岡→大阪 7泊8日を5万円台で行けた節約術 はじめに：旅行に行きたい。でもお金がない。 大学生あるあるだと思います。友達が「夏休み、大… hitoblog.site

学んでみた 【大学生向け】AIへの「聞き方」を変えたら回答の質が激変した話｜プロンプト改善Before/After はじめに：「AIって使えなくない？」と思っていた時期があった ChatGPTに「経済学のレポートの… hitoblog.site

学んでみた NotebookLMとClaude、大学生はどう使い分ける？目的別のリアルな結論 はじめに：「結局どっちがいいの？」に答えたい NotebookLMで試験勉強してみた記事を書いたとき… hitoblog.site

学んでみた 【2026年最新版】AIのおすすめと使い分け方を学生が本音で比較してみた はじめに：AIツールが多すぎて「どれを使えばいいの？」状態だった ChatGPT、Claude、Gemini、C… hitoblog.site

学んでみた 大学生がAIに月いくら課金してる？使い分け・節約術・解約したものを全部公開！ はじめに：「AIに課金する大学生」のリアル 友達に「AIに毎月お金払ってる」と言ったら、こんな… hitoblog.site

Vercelにデプロイして、URLが発行された瞬間は感動しました。

「自分が作ったツールが、世界中からアクセスできる！」

……でも現実は甘くなかった。

公開してから数日、アクセスは自分のテスト閲覧だけ。

URLがあるだけじゃ誰も来ないモン…「作る」と「使ってもらう」は全然違ったモン…

0PV。当たり前ですよね。

URLが存在するだけでは、その存在を誰も知らない。

「作る」と「使ってもらう」は、まったく別のスキルだった。

この記事では、Claude Codeで作ったAdSense診断ツールを公開してから、

182PV・65訪問者を獲得するまでにやったことを全部書きました。

大きな数字ではないですが、「ゼロから人に使ってもらえるようになるまで」のリアルな記録として読んでほしいです。

結論：「Xの固定ポスト」が想像以上に強かった

先に結果からです。

※VercelのAnalytics画面のスクリーンショット

約1ヶ月で182PV・65訪問者。

大きな数字ではないですが、注目してほしいのは流入元の内訳。

t.co（X）からの訪問者が47人で全体の72%を占めています。

正直に言うと、追加の宣伝ツイートは一切していません。

固定ポスト1本を置いただけ。それでプロフィールを見に来た人が「なんだろう」とクリックしてくれた。

個人開発者にとって、Xの固定ポストは無料の看板広告みたいなものです。

やったこと（効果があったもの）

施策①：Xで公開報告 → そのまま固定ポストに

これが一番効果がありました。ツールを公開した日に、Xで1ツイートしてそのまま固定ポスト化。

実際のツイートがこちら。

「AdSense審査に受かりそうですか？」という問いかけから入って、ツールの画面キャプチャを添付しています。

この固定ポストの数字：

やったことは本当にこれだけです。追いツイートで何度も宣伝したりもしていません。

唯一やったのは、固定ポストのリプライに

「あくまで参考値です」「学生がコツコツ作ったツールなので、温かい目で使ってもらえたら嬉しいです」

と補足を付けたこと。

これは宣伝ではなく、ツールの立ち位置を正直に伝えるため。

「未完成でも正直に出す」姿勢が、逆に共感を呼んだのかもしれません。

なぜ固定ポストが効くのか？

自分の通常のツイートに興味を持ってプロフィールを見に来た人が、固定ポストに目を留めてくれる。

つまり、普段の発信がそのまま集客活動になるんです。

アナリティクスの数字でも、t.co（Xのリンク短縮）からの訪問者が65人中47人で72%。

圧倒的にXからの流入がメインでした。

施策②：ツイートにツールの画面キャプチャを添付

固定ポストには、ツールの画面キャプチャを画像として直接添付しました。
以下は添付した画像３枚のスクショです。

ホーム画面と診断結果画面（97点のスコア表示）、診断する10項目の一覧が一目でわかるスクリーンショットです。

ここで注意したいのが、Xでは画像を添付するとOGP（リンクプレビュー）は表示されないということ。

つまりOGP画像をどれだけ凝って作っても、画像付きツイートでは見えません。

自分の場合、OGP画像も一応設定しましたが、固定ポストでは一度も表示されてませんでした。

実際にクリックを生んだのは、ツイートに直接貼った画面キャプチャでした。

画面キャプチャの方がOGPよりも効く理由は、ツールの「中身」が見えるから。

「97点 / 100点」「合格圏内です！」という実際の結果画面は、「自分のブログでもやってみたい」という気持ちを直接引き出してくれます。

一応、作っておいたOGP画像もここに貼っておきます。

施策③：ブログ記事の中にツールへのリンクを設置

ヒトブログの関連記事にAdSense診断ツールへのリンクを貼りました。

ポイントは「宣伝っぽくしない」ことを意識しました。

記事の文脈の中で「例えばこういうものを作りました」と自然に出す。

……ただし正直に書くと、ブログ経由の流入はたった3訪問でした。

設置はしたものの、テキストリンクだけだと気づかれにくい。これについては後の「改善点」で詳しく書きます。

施策④：ツール紹介記事を書く

ツールそのものの使い方を解説する記事を書きました。これはSEO経由の流入を狙う施策です。

「AdSense 診断」「アドセンス 合格 チェック」のようなキーワードで検索する人が、記事経由でツールに辿り着く導線。

Bing検索からは既に2訪問が来ていて、検索エンジンにインデックスされ始めている手応えがあります。

Google検索はまだこれからですが、時間が経つほど増えていくのがSEOの特性。

ここは焦らず待つフェーズだと思います。

Adsense合格診断サイトを作成したときの裏話はこちら！

作ってみた AdSenseに2回落ちた大学生が、合格診断ツールを自作した話 はじめに：「何がダメなのか」がわからない AdSenseに2回落ちました。 1回目は「有用性の低いコ… hitoblog.site

データから見えた改善点

ブログからの導線が弱い（3訪問 → もっといける）

正直、ブログ記事からの流入が3人しかいなかったのは予想外でした。

記事にリンクは貼っているのに、ほとんどクリックされていない。

原因を考えると、

テキストリンクだけでは存在に気づかれにくい。

記事を読むのに集中していると、文中のリンクはスルーされがち。

改善策として考えているのは

・ボタン型のCTAを設置する

「AdSense診断ツールを使ってみる →」のような目立つボタンを、記事の適切な位置に置く。
テキストリンクとボタンでは、視認性がまったく違います。

・記事の内容とツールの接続を強くする

たとえばAdSense関連の記事なら「ここで紹介した内容をセルフチェックできるツールを作りました」のように、

読者が「使ってみたい」と思うタイミングで提示する。

ブログの月間PVを考えれば、導線を改善するだけで3人→20〜30人くらいには増やせるはず。

ここが一番伸びしろがある部分だと思っています。

ツールからブログへの逆導線がまだない

今のAdSense診断ツールには、ブログへのリンクがほぼありません。ツールを使った人が「これ誰が作ったんだろう？」と思っても、飛び先がない状態。

これからやりたいのは

フッターに設置するイメージ：
「このツールはヒトブログの管理人がClaude Codeで作りました。
作り方の詳細はこちら → ブログ記事リンク」

ツール → ブログ → 他の記事 → 別のツール、という回遊ループを作れば、1人のアクセスが2〜3PVに化ける。

直帰率28%は悪くない数字ですが、逆導線があればさらに改善できるはず。

アクセスの内訳分析

182PV・65訪問者の内訳をアナリティクスで確認しました。

ページ別の訪問者数

このデータから読み取れること

① Xの固定ポスト1本で、全体の7割を集めている

追加の宣伝ツイートなし、広告費ゼロ。

普段のツイートでプロフィールに来てくれた人が、固定ポストを見てアクセスしてくれている。

ブログの運営で毎日Xに投稿していたことが、間接的にツールの集客にもなっていた。

② 65人中45人（69%）が診断を最後まで実行している

これは嬉しい数字。トップページに来た人の約7割が、実際にURLを入力して結果ページまで到達している。

「来てくれた人がちゃんと使ってくれている」ことがデータで確認できた。

来てくれた人の69%が最後まで使ってくれたモン！これは嬉しいモン！

③ 直帰率28%は個人開発ツールとしては優秀

一般的なWebサイトの直帰率は40〜60%と言われているので、28%はかなり良い数字。

ツールの使い方がわかりやすいか、固定ポストの画面キャプチャで「何ができるか」を事前に伝えられているか、が効いていると思います。

④ ブログからの流入は伸びしろ

3人は正直少なすぎる。ブログ記事を読んでいる人に「このツール使ってみたい」と思わせる導線設計ができていない。ここを改善するのが次の課題。

⑤ 検索流入はこれから

Bingから2人が来ているということは、検索エンジンにインデックスされている証拠。

Google検索の結果に乗ってくれば、ここが安定した流入源になるはず。

グラフを見ると、公開直後（5月20日頃）に訪問者が10人を超えるスパイクがあり、その後は1日1〜5人のペースで安定しています。SNS流入の特徴的なパターンで、固定ポストがある限りジワジワとアクセスが続く構造になっている。

個人開発の集客で大事なこと

①「作る前」にユーザーを想像する

「こういう人が困っているから、これを作る」という明確な想定ユーザーがいると、ブログ記事も書きやすいし、SNSでの紹介文も刺さりやすい。

AdSense診断ツールの場合は「ブログを始めたばかりで、AdSenseに受かるか不安な人」が想定ユーザー。

自分自身がそのユーザーだったから、ニーズがわかっていた。

② 普段の発信が集客になる構造を作る

今回わかったのは、「ツールを宣伝するツイート」よりも「普段の発信 + 固定ポスト」の方が圧倒的に効くということ。

追いツイートで何度も宣伝すると、フォロワーに嫌がられる。

でも固定ポストなら、プロフィールを見に来た人だけが自然に目にする。

普段の発信の質を上げることが、そのままツールの集客になる。

③「メディア」を持つ

ブログ、SNS、YouTube、何でもいい。ツールの「存在」を伝える場所を持っておく。

個人開発の最大のボトルネックは技術ではなく「知ってもらうこと」です。

自分の場合、ブログからの流入はまだ3人ですが、導線を改善すればもっと増やせる。ブログを運営していること自体が将来の資産になる。

④ 数字に一喜一憂しない

182PV・65訪問者。正直、大きな数字ではありません。でも「ゼロから」を考えれば、確実に前に進んでいる。

それに、65人中45人が最後まで使ってくれている。

「たくさんの人に届ける」よりも「使ってくれた人に満足してもらう」方が、個人開発では大事だと思っています。

これからやりたいこと

特にCTAボタンの設置は、今すぐできて効果が出やすい施策。

ブログの読者は既にいるのに、ツールへの導線が弱いせいで取りこぼしている状態。

ここを改善するだけで数字は変わるはず。

就活でのアピールも大きな副産物。
「個人で作ったWebツールがあり、実際に65人が使ってくれて、69%が最後まで利用した」と言えるのは、面接で強い武器になるはずです。

まとめ：「公開して終わり」ではなく「知ってもらう」までが個人開発

自分の場合、やったことはほぼ「Xで固定ポストにしただけ」です。それで65人が来て、45人が使ってくれた。

特別なマーケティングスキルは要りません。普段の発信を続けて、固定ポストでツールを知ってもらう。ブログがあれば記事で紹介する。

「自分が作ったもので、誰かの役に立つ」
——この体験は、個人開発のモチベーションを一番上げてくれるものだと思います。

182PVは小さい数字かもしれないけど、ゼロから65人に使ってもらえたのは確実に前進だモン！

まだ公開したツールにアクセスが来ていない人は、まずXの固定ポストと画面キャプチャの添付から試してみてください。それだけで変わります。

\\まだアドセンス合格診断ツールを使ったことがない人は使ってみてください！//

・関連記事

• AIで作ったWebツールを無料で公開する全手順【GitHub × Vercel】 — ツールの公開方法はこちら
• AIでWordPressの自作テーマを作ってみた全手順【バイブコーディング】 — テーマを自作してみたい人はこちらから
• Claude Codeの始め方【学生向け】 — まだClaude Codeを使っていない人はこちらから

作ってみた AIで作ったWebツールを無料で公開する全手順【GitHub × Vercel】 はじめに：作ったものを「世界に公開」する感動 Claude Codeでバイブコーディングを始めてから… hitoblog.site

作ってみた AdSenseに2回落ちた大学生が、合格診断ツールを自作した話 はじめに：「何がダメなのか」がわからない AdSenseに2回落ちました。 1回目は「有用性の低いコ… hitoblog.site

学んでみた 【学生向け】Claude Codeの始め方！デスクトップアプリで今日からバイブコーディング！ はじめに：ターミナルが怖くても大丈夫だった Claude Codeの紹介記事を書いたとき、友達から一… hitoblog.site

Claude Codeでバイブコーディングを始めてから、Webツールを作れるようになりました。

でも最初は「自分のパソコンでだけ動くもの」だったんです。ブラウザでlocalhost:3000を開いて「おお、動いた！」と喜んでいても、友達に見せるには「僕のパソコンの前に来て」と言うしかない。

作ったものをURLにして、誰でもアクセスできるようにしたい。

調べてみたら、Vercelというサービスを使えば無料でWebサイトやツールを公開（デプロイ）できることがわかりました。GitHubと連携するだけで、コードを更新すれば自動で公開サイトにも反映される。

実際にやってみたら、思ったより簡単でした。僕が作ったAdSense診断ツールもこの方法で公開しています。

結論：GitHubにコードを置いて、Vercelで「Deploy」を押すだけ

先に結論です。

合計10分以内（ツール制作時間を除く）で、URLが発行されて世界中からアクセスできるようになります。費用は無料（Hobbyプラン）。

VercelとGitHubって何？

知っている人は飛ばしてOKです。ざっくり説明します。

GitHubは、コードを保存・管理する場所です。「コードのクラウドストレージ」だと思ってください。バージョン管理ができるので、「さっきの状態に戻したい」が簡単にできます。

Vercelは、そのコードを自動でWebサイトとして公開してくれるサービスです。GitHubにコードを置いておけば、Vercelが勝手にビルド（変換）して、URLを発行してくれます。

この2つを連携させると、GitHubにコードをアップロードするだけでサイトが自動更新される仕組みができます。

実際の手順：全体の流れ

STEP 1：GitHubでリポジトリを作成する

まだGitHubアカウントを持っていない場合は、github.comで無料アカウントを作成してください。

ログイン後、右上の「+」ボタンから「New repository」を選択。リポジトリ名は英語で、プロジェクトの内容がわかる名前にします。

例：adsense-checker
例：blog-ogp-generator
例：portfolio-site

「Add a README file」にチェックを入れて「Create repository」をクリック。

STEP 2：Claude Codeでツールを作ってGitHubにプッシュする

Claude Codeの始め方で紹介した手順で、ツールを作ります。

作成したリポジトリをクローン（ダウンロード）してから作業を始めます。

このリポジトリをクローンして：
https://github.com/自分のユーザー名/adsense-checker

ツールが完成したら、GitHubにプッシュ（アップロード）。

変更をGitHubにプッシュして。
コミットメッセージは「初期構築：AdSense診断ツール」で。

Claude Codeがクローンもプッシュも代行してくれるので、Gitコマンドを覚える必要はありません。

Gitコマンドを覚えなくても、Claude Codeに「プッシュして」って言うだけでOKだモン！

STEP 3：Vercelのアカウントを作成する

vercel.comにアクセスして、「Sign Up」→ 「Continue with GitHub」を選択。GitHubアカウントで認証するだけで、Vercelのアカウントが作成されます。

プランは「Hobby」（無料）を選択。個人プロジェクトならこれで十分です。

STEP 4：GitHubリポジトリをVercelに接続する

Vercelのダッシュボードで「Add New…」→「Project」を選択。

「Import Git Repository」の画面で、STEP 1で作ったリポジトリが一覧に表示されるので、「Import」をクリック。

STEP 5：設定を確認して「Deploy」を押す

プロジェクトの設定画面が表示されます。Next.jsのプロジェクトなら自動認識されるので、設定は何も変えなくてOK。

「Deploy」ボタンを押すと、Vercelが自動でビルドを開始します。1〜2分待つと……

URLが発行されて、サイトが公開されます。

発行されるURLは https://プロジェクト名.vercel.app という形式。このURLを誰かに送れば、世界中どこからでもアクセスできます。

「Deploy」を押しただけで、自分のツールにURLがついたモン！世界中からアクセスできるモン！

独自ドメインを設定する

Vercelが自動で発行してくれる *.vercel.app のURLでも十分使えますが、独自ドメインを設定することもできます。

僕の場合、ヒトブログのサブドメイン tools.hitoblog.site を使っています。

DNS設定はドメインを管理しているサービス（ConoHaやお名前.comなど）の管理画面から行います。
わからなければ、Claude Codeに「このドメインをVercelに紐づけるDNS設定を教えて」と聞けば手順を教えてくれます。

つまづきやすいポイント

ビルドエラーが出て公開できない

一番多いトラブル。Vercelのビルドログを確認して、エラーメッセージをClaude Codeに貼り付ければ解決策を教えてくれます。

Vercelで以下のビルドエラーが出ました。
原因と修正方法を教えてください。

Error: Cannot find module 'next/image'

よくある原因は、package.jsonの依存関係の不足や、Node.jsのバージョン違い。←自分もこれでした。

エラーメッセージをそのままClaude Codeに貼るのが一番早いモン！自分で読み解く必要はないモン！

環境変数が設定されていない

APIキーなどの環境変数（.envファイルの中身）は、GitHubにはプッシュしません（セキュリティ上）。代わりにVercelの管理画面で設定する必要があります。

Vercelのプロジェクト設定 → 「Environment Variables」で、.envの中身を登録。

GitHubの認証でつまずく

STEP 2でClaude CodeからGitHubにプッシュするとき、認証エラーが出ることがあります。Claude Codeに「GitHubの認証設定を手伝って」と頼めば、GitHub CLIのインストールから認証まで案内してくれます。

Vercel無料プラン（Hobby）の制限

2026年6月時点の情報です。

個人ブログのサブツールや、ポートフォリオ程度なら完全に無料枠内で収まります。僕のAdSense診断ツールも無料プランで問題なく動いています。

公開したら何ができるか

URLがあるということは、こういうことができます。

特に就活では、「動くURLがある」と「コードだけある」では説得力がまったく違います。面接官にスマホで見せられるのは強い。

まとめ：作ったものに「住所」をつけよう

自分のパソコンだけで動いていたツールに「URL」という住所がつく。
その瞬間、個人開発者としてのステージが一段上がる感覚があります。

まだlocalhostで満足している人は、ぜひ一度Vercelにデプロイしてみてください。世界中からアクセスできるURLを手に入れた瞬間の感動は、プログラミング未経験者でも味わえます。

みんなも一度Vercelにデプロイしてみるモン！初めてデプロイしたときの感動はすごいモン！

・関連記事

Claude Codeを始めたい人はこちら！

学んでみた 【学生向け】Claude Codeの始め方！デスクトップアプリで今日からバイブコーディング！ はじめに：ターミナルが怖くても大丈夫だった Claude Codeの紹介記事を書いたとき、友達から一… hitoblog.site

WordPressテーマもClaude Codeで作れます！

作ってみた AIでWordPressの自作テーマを作ってみた全手順【バイブコーディング】 はじめに：既存テーマに限界を感じた話 ヒトブログを始めたとき、最初は無料テーマ(Cocoon)を使… hitoblog.site

ビルドエラーの解決にもプロンプト力が効く！

学んでみた 【大学生向け】AIへの「聞き方」を変えたら回答の質が激変した話｜プロンプト改善Before/After はじめに：「AIって使えなくない？」と思っていた時期があった ChatGPTに「経済学のレポートの… hitoblog.site

Vercelは無料、Claude Codeは有料。コスト感の全体像はこちら！

学んでみた 大学生がAIに月いくら課金してる？使い分け・節約術・解約したものを全部公開！ はじめに：「AIに課金する大学生」のリアル 友達に「AIに毎月お金払ってる」と言ったら、こんな… hitoblog.site

自作テーマは完成した。高速化もした。

見た目は気に入っているし、表示速度も改善された。でもふと他のサイトを見ていて、気づいてしまったんです。

最近のサイト、大体ダークモードある。

前回のテーマ自作ではリポジトリを3回作り直したり、アップロードしたらWordPressが死んだり、それなりに苦労しました。だから今回もそれくらいかかるだろうと覚悟していたんですが……。

拍子抜けするほど簡単に終わりました。笑

前回あんなに苦労したのに、今回は本当にこれだけで終わるモン…？

結論：プランモードに聞いて、推奨を選ぶだけだった

先に結論です。正直に書きます。

前回のテーマ自作記事では「リポジトリを3回作り直した」「WordPressが死んだ」と苦労話を書きました。今回はその続編なので、同じくらいの苦労話を期待している人もいるかもしれません。

すみません、今回はほぼ何もしていません。

以下、本当にやったことだけを紹介します。

そもそもダークモードってどう作るの？

実装の話に入る前に、仕組みだけざっくり説明しておきます。これを知っておくと、AIがやってくれたことの意味がわかります。

基本は「色の変数を2セット用意して切り替える」だけ

CSSには「変数（カスタムプロパティ）」という機能があります。色を直接書く代わりに、名前をつけて管理できる仕組みです。

/* ライトモードの色 */
:root {
  --bg-color: #FFFDF7;      /* 背景：クリーム色 */
  --text-color: #333333;     /* 文字：濃いグレー */
  --accent-color: #FF8C00;   /* アクセント：オレンジ */
}

/* ダークモードの色 */
[data-theme="dark"] {
  --bg-color: #1a1a2e;       /* 背景：暗い紺 */
  --text-color: #e0e0e0;     /* 文字：明るいグレー */
  --accent-color: #FFB347;   /* アクセント：やわらかいオレンジ */
}

ライト用とダーク用の色を用意しておいて、data-theme="dark" がつくとダーク用の色に切り替わる。やっていることはこれだけです。

切り替えの流れ

ボタンを押す → HTMLに data-theme="dark" がつく → CSSの色が切り替わる → 画面の色が変わる。

この仕組みを頭に入れておくと、Claude Codeが作った計画書の内容がすんなり理解できます。

実際にやったこと、全部見せます

盛りません。本当にこれだけです。

やったこと①：プランモードで「できる？」と聞いた

Claude Codeには「プランモード」という機能があります。いきなりコードを書き始めるんじゃなくて、まず実装の計画を立ててくれるモードです。

僕がやったのは、こう聞いただけ。

今のブロモンテーマにダークモード追加できる？

これだけです。細かい技術仕様も、ファイル構成の説明も、何も伝えていません。

するとClaude Codeがテーマのコードベースを自動で分析して、こんな報告をしてくれました。

• style.cssの色は約95%がすでにCSS変数で管理されている（変数化の手間がほぼない）
• body_class()のフィルターが既にあり、クラス追加の仕組みが整っている
• localStorageの読み書きパターンも既に実装済みで流用できる
• ハードコードされた色が40箇所超あるので、そこをダーク用に上書きする必要がある

つまり「このテーマはダークモード実装に非常に向いています」という診断結果。テーマを自作したときに、意図せず土台ができていたみたいです。

やったこと②：聞かれた質問に「推奨」を選んだ

分析のあと、Claude Codeが3つの質問をしてきました。

全部「推奨」を選びました。考えた時間、合計30秒くらいです。

すると、これらの選択に基づいた実装計画書（Planエージェント）が自動で作成されました。FOUC対策の早期スクリプト、ダークパレットの設計、ハードコード色の洗い出し……全部入った計画書です。

推奨ボタンを3回押すだけでプロの設計書ができるの、すごいモン！

やったこと③：計画書を読んで、実行した

計画書の内容を一通り読みました。正直、全部は理解できていません。でも大まかに「こういう手順でやるのね」というのはわかりました。

で、実行。

Claude Codeが計画に沿ってファイルを編集していく様子を眺めていただけです。style.cssにダーク用のカラーパレットが追加されて、header.phpに切り替えボタンが設置されて、JavaScriptが組み込まれて……。

数分で、ダークモードが動いていました。

やったこと④：気になるところだけ修正を頼んだ

ほぼ完成していたんですが、2点だけ気になるところがありました。

• 吹き出し内の文字がダークモードで読めなくなっていた
• 「学生の成長記録ブログ」セクションの背景の緑色がダークモードと相性が悪かった

これもスクリーンショットを撮って「ここだけ修正してほしい」と伝えたら、すぐに直してくれました。

以上です。本当にこれで終わりました。

ダークモード実装後は、吹き出しやボタンの文字色も必ずチェックするのがおすすめだモン！

地味に大事な「設定を覚えておく」仕組み

せっかくなので、Claude Codeが実装してくれた中で「これは知っておくと良いな」と思った仕組みを紹介します。

ダークモードに切り替えても、ページを移動したりリロードすると元に戻ってしまったら不便ですよね。これを解決するのがlocalStorageです。

// ユーザーの選択を保存
localStorage.setItem('theme', 'dark');

// ページ読み込み時に復元
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
  document.documentElement.setAttribute('data-theme', savedTheme);
}

ブラウザにデータを保存しておく仕組みで、ページを閉じてもデータが残ります。「ユーザーが選んだモードを保存 → 次のページ読み込みで復元」。これだけで設定が維持されます。

ちなみに今回のテーマでは、初回訪問時はOS設定に追従する仕組みにもなっています（Windowsのダークモード設定がオンなら、初回からダークで表示される）。こういう細かい配慮も、Claude Codeが計画に含めてくれていました。

つまづきポイントは……ほぼなかった

正直に書きます。

前回のテーマ自作記事では「つまづいたポイント3つ」を紹介しました。あの記事ではリポジトリを3回作り直したし、WordPressが死んだし、それなりに修羅場がありました。

今回はほぼつまづいていません。

強いて言えば、さっき書いた「吹き出しの文字が読めない」「背景の緑がダークと合わない」の2点くらい。でもこれもスクショを送ったら一発で直ったので、「つまづいた」というほどでもないです。

なぜ今回はスムーズだったのか？

理由は2つあると思っています。

1つ目は、テーマの設計がよかった（らしい）。

Claude Codeの分析によると、ブロモンテーマは色のCSS変数化が約95%できていて、クラス追加の仕組みも整っていたそうです。テーマ自作のときに意図してやったわけじゃないんですが、結果的にダークモード実装の土台ができていました。

2つ目は、プランモードの力。

いきなりコードを書き始めるんじゃなくて、まずコードベースを分析して、質問をして、計画を立ててから実行する。この手順のおかげで、「やってみたら動かない → やり直し」のサイクルがほぼ発生しませんでした。

テーマ自作のときは「画像を渡してテンプレート作って」とざっくり投げて、出てきたものを見て「違う」を繰り返していました。プランモードを使うかどうかで、こんなに変わるんだなと実感しました。

前回の苦労があったからこそ、今回の楽さが際立つんだモン！経験値ってやつだモン！

完成！ビフォーアフター

実装完了後のビフォーアフターです。

状態	ライトモード	ダークモード
背景	クリーム色（#FFFDF7）	暗い紺（#1a1a2e）
文字	濃いグレー	明るいグレー
アクセント	鮮やかなオレンジ	やわらかいオレンジ
ブロモン	そのまま	ドロップシャドウ追加
切り替えボタン	表示	表示

切り替えた瞬間の気持ちよさ、やばいです。スッと色が変わって、

「一気にそれっぽいサイトになった」という実感がありました。

正直、機能的には必須じゃないかもしれません。でもダークモード対応しているだけで、サイトの「ちゃんと作ってる感」がかなり上がる。夜にブログを読む読者にとっても、目に優しい選択肢を用意できている。

これが実作業1時間で実装できたのは、ちょっと衝撃でした。

まとめ：バイブコーディングは「慣れる」ともっと楽になる

テーマ自作記事では「20~30時間かかった」と書きました。

今回は1時間以下。この差は、AIとの付き合い方がわかってきたことと、プランモードの存在が大きいです。

バイブコーディングのコツは、最初から完璧を求めないこと。

でもそれ以上に大事なのは、AIに良い聞き方をすること。

「ダークモード追加できる？」と聞くだけで、AIが現状分析して、質問して、計画を立てて、実行してくれる。自分は判断するだけ。

テーマ自作 → 高速化 → ダークモード。やるたびにAIとの連携がスムーズになってきている実感があります。次は何を実装しようかな。

テーマ自作→高速化→ダークモード、どんどん成長してるモン！次も一緒にがんばるモン！

・関連記事

・テーマ改善シリーズの第1回。こっちは苦労話多めです！ぜひ読んでみてください！

作ってみた AIでWordPressの自作テーマを作ってみた全手順【バイブコーディング】 はじめに：既存テーマに限界を感じた話 ヒトブログを始めたとき、最初は無料テーマ(Cocoon)を使… hitoblog.site

・テーマ改善シリーズの第2回！ページ読み込みの最適化の記事はこちら！

つまづいた話 【WordPress高速化】自作テーマが遅すぎたのでAIと一緒に直してみた はじめに：テーマは完成した。でも、なんか遅い AIで自作テーマを作ったときは、正直めちゃくち… hitoblog.site

・ClaudeCodeの始め方ガイドはこちら！

学んでみた 【学生向け】Claude Codeの始め方！デスクトップアプリで今日からバイブコーディング！ はじめに：ターミナルが怖くても大丈夫だった Claude Codeの紹介記事を書いたとき、友達から一… hitoblog.site

ヒトブログを始めたとき、最初は無料テーマ(Cocoon)を使っていました。

見た目はそれなりにきれいだし、設定画面でポチポチすれば色やレイアウトも変えられる。
でもしばらく使っていると、「ここをもうちょっとこうしたいのに……」が積もってきたんです。

カテゴリページの表示形式を変えたい。カード型レイアウトを微調整したい。
でも無料テーマのカスタマイズ範囲には限界があって、CSSをいじっても根本的な構造は変えられない。

「自作テーマを作ればいいんだ」という答えはわかっていました。でも僕はプログラミング未経験。PHPなんて1行も書いたことない。テーマの自作は「プロか、少なくとも経験者がやるもの」だと思い込んでいました。

PHPなんて1行も書いたことないのに、自作テーマなんてできるモン…？

でも、Claude Codeを使ったらできてしまったんです。

ClaudeCodeが何か知らない方はこちらの記事からどうぞ！

学んでみた Claude Codeを学生が使ってみた！感想と活用法を紹介【プログラミング初心者でもOK】 はじめに：「AIがコードを書いてくれる」って本当だった プログラミングに興味はあるけど、何か… hitoblog.site

結論：プログラミング未経験でも、AIがあればテーマは作れる

先に結論です。

「AIに全部お任せで完璧なものが一発で出る」わけではなくて、何度も修正を繰り返す根気は必要です。正直に言うと、今の形になるまでにリポジトリを3回作り直しています。でも、以前は「プロに頼むしかない」と思っていたことが自分の手でできるようになった。この感覚はかなり大きいです。

ちなみにテーマはまだ完成形ではなくて、今も改善を続けています。「完璧になってから公開」じゃなくて「使いながら育てる」スタイルです。

3回も作り直したから今のテーマになったんだモンね！最初から完璧にはいかないモン！

以下、実際の制作手順を紹介していきます。

そもそもWordPressテーマの自作って何をするの？

いきなり作り始める前に、テーマの仕組みをざっくり理解しておきましょう。全部わかる必要はありません。
「こういうファイルがあるんだな」くらいで大丈夫です。

WordPressテーマは、いくつかのファイルの集まりです。

……と聞くと難しそうですが、大事なのは「全部理解しなくていい」ということ。AIに任せる部分と、自分で決める部分を分ければいいんです。自分が決めるのは「どんな見た目にしたいか」「どんな機能が欲しいか」。コードを書くのはAIの仕事。

設計図は自分で描く。建てるのはAIにお願いする。それがバイブコーディングだモン！

使ったツールと環境

Claude Codeの始め方は、Claude Codeの始め方【学生向け】で詳しく紹介しています。

必要な前提知識

正直に言うと、ほぼゼロでした。HTMLの基本構造（headとbodyがある、divでブロックを作る程度）は知っていましたが、PHPもJavaScriptも書いたことはありません。それでもなんとかなりました。

実際の制作フロー

ここからが本題。時系列で紹介していきます。

STEP 1：GPT image 2.0でデザインカンプを作る

まず最初にやったのは、コードを書くことでもテキストで指示を出すことでもなく、デザインの「完成イメージ画像」をAIに生成してもらうことでした。

使ったのはChatGPTのGPT image 2.0。「こういう雰囲気のブログトップページを作りたい」とイメージを伝えて、デザインカンプ（完成予想図）の画像を生成してもらいました。

テキストだけで伝えるより、画像があったほうが圧倒的に完成イメージがブレません。「百聞は一見にしかず」は、AIへの指示でもそのまま当てはまります。

ただし、画像生成AIも万能ではありません。思い通りのデザインにならないこともあって、何度かプロンプトを調整しながら「これだ！」と思える画像ができるまで繰り返しました。

※最初に生成したブロモン入りのWordPressテーマデザイン

STEP 2：デザイン画像をClaude Codeに丸投げする

できあがったデザインカンプの画像を、そのままClaude Codeに投げました。プロンプトはこれだけ：

添付した画像のようなWordPressテンプレートを作成して

たったこの一行です。

Claude Codeがデザイン画像を読み取って、style.css、index.php、header.php、footer.php、single.php、functions.php……必要なファイルを一式生成してくれました。この時点でローカル環境のWordPressにテーマフォルダを置いて有効化すると、もう基本的なブログの形は見えていました。

ただし、ここで問題発生。AIが画像を「忠実に」再現しすぎたんです。

デザインカンプにはダミーとしてTwitterやInstagramのアイコンが入っていたんですが、Claude Codeはそれも含めてそのまま再現。結果、なぜか見知らぬSNSアイコンが並んだテーマができあがりました。画像生成AIが入れたダミー要素を、コード生成AIがそのまま実装してしまったわけです。

いらないSNSアイコンまで再現されてるモン！？忠実すぎるモン！

この「AIが忠実すぎる」問題は、デザイン画像をもとにコーディングするときの”あるある”だと思います。不要な部分は「これは除外して」と明示するのが大事です。

STEP 3：ブロモンのマスコット画像を組み込む

ヒトブログといえばブロモン。サイドバーやフッターにマスコット画像を表示させたかったので、その要望もClaude Codeに伝えました。

サイドバーにマスコットキャラクターの画像を表示してほしい

たった一言だけでClaudeCodeが画像を挿入するファイルまで作成して自分は画像を挿入するだけで完成しました。

STEP 4：カテゴリページ・記事ページのカスタマイズ

基本形ができたあとは、細かいカスタマイズ。

ここでも僕がやったのは「こういう機能が欲しい」と伝えるだけ。具体的なコードはClaude Codeが書いてくれました。

STEP 5：レスポンシブ対応とバグ修正

スマホで表示したときのレイアウト崩れを修正するフェーズ。ここが一番時間がかかりました。

「スマホで見たらサイドバーが記事の上に被ってる」「メニューが画面からはみ出す」といった問題をスクリーンショットと一緒にClaude Codeに伝えて、修正してもらう。直ったと思ったら別の箇所が崩れる……の繰り返し。

でもこのデバッグのサイクルは、AIなしでやったら何倍もかかっていたと思います。

つまづいたポイント3つ

スムーズにいったように見えるかもしれませんが、しっかりつまづきました。

① 最初のテーマはAI感満載だった

正直に告白します。最初に作ったカスタムテーマは、ブロモンもいない、AI感満載のテンプレート感丸出しのデザインでした。

よくある「AIで作りました」感のあるサイト、見たことありますよね。整ってはいるけど個性がない、どこかで見たような見た目。最初はまさにそれでした。

「これじゃない」と思ってリポジトリを作り直し。デザインを変えてまた作り直し。結局、GitHubのリポジトリを3回作り直して、ようやく今のブロモンがいるオリジナルテーマにたどり着きました。

ここで学んだのは、AIに丸投げするだけでは「自分のブログ」にはならないということ。「ブロモンを入れたい」「この色にしたい」「この配置がいい」と自分の意志を入れていくことで、初めてAIの出力が「自分のもの」になっていきました。

② テーマをアップロードしたらWordPressが死んだ

これが一番焦りました。

ローカル環境で作ったテーマファイルを本番のサーバーにアップロードしたところ、WordPressが完全に真っ白に。管理画面（/wp-admin/）にもアクセスできない。ログインすらできない状態です。

頭が真っ白になりましたが、なんとか解決方法を見つけました。

対処法： ロリポップのFTPサーバーに直接アクセスして、テーマファイルの問題箇所を修正。具体的には、wp-content/themes/ フォルダの中にある自作テーマのファイルをFTP経由で編集して、エラーの原因を取り除きました。管理画面に入れないときは、FTPが最後の命綱です。

これはローカル環境では起きなかった問題なので、本番にアップする前にバックアップを取ること、そしてFTPアクセスの方法を事前に確認しておくことを強くおすすめします。

管理画面にもアクセスできない…ログインすらできなくて焦ったモン…！

③ CSSの優先順位で意図通りにならない問題

自分で書いたCSSが、テーマのCSSやWordPress本体のCSSに上書きされてしまうことがよくありました。CSSには「詳細度（specificity）」というルールがあって、どのスタイルが優先されるかが決まっています。

対処法： 「このスタイルが効かない」とAIに相談すれば、詳細度を上げた書き方を提案してくれます。ただし「なぜ効かないのか」を自分でも理解しておくと、同じ問題で何度もハマらなくなります。

完成したテーマのビフォーアフター

実際にテーマを切り替えた前後で、ブログの見た目は大きく変わりました。

デザインの自由度が上がっただけでなく、
不要な機能を削ぎ落としたことでページの表示速度も改善しました。
無料テーマは便利な反面、使わない機能も読み込んでいるので、軽量なテーマにすると速度面でもメリットがあります。

ただし繰り返しになりますが、このテーマはまだ「完成」ではありません。
記事を書きながら「ここの余白もうちょっと広げたいな」「この表示もう少し改善できそう」と手を入れ続けています。完璧を待たずにまず公開して、使いながら育てる。これがバイブコーディングの良いところだと思っています。

最初から完璧を目指さなくていいモン！まずは作って、使いながら育てるのがおすすめだモン！

まとめ：まずはローカル環境で試してみよう

プログラミング未経験でも、AIがあればWordPressテーマは作れます。ただし、最初から完璧なものはできません。僕もリポジトリを3回作り直しています。完璧を目指さず、まずはローカル環境で「トップページだけ」作ってみるところから始めてみてください。

次に挑戦してみたいのは、WordPressプラグインの自作。テーマ開発でAIとのやりとりの流れがわかったので、プラグインもいけるんじゃないかと思っています。できたらまた記事にします。

・関連記事

今回使ったツールのセットアップから基本操作まで解説した記事はこちら！

学んでみた 【学生向け】Claude Codeの始め方！デスクトップアプリで今日からバイブコーディング！ はじめに：ターミナルが怖くても大丈夫だった Claude Codeの紹介記事を書いたとき、友達から一… hitoblog.site

テーマ開発以外の活用法も知りたい人へ

作ってみた Claude Codeを学生生活で活用する5つの方法【プログラミング未経験でもOK】 はじめに：Claude Codeは「プログラマー専用」だと思っていた Claude Codeの始め方の記事でイン… hitoblog.site

AIへの指示の出し方を改善するコツはこちらの記事で！

学んでみた 【大学生向け】AIへの「聞き方」を変えたら回答の質が激変した話｜プロンプト改善Before/After はじめに：「AIって使えなくない？」と思っていた時期があった ChatGPTに「経済学のレポートの… hitoblog.site

・そもそもブログをどう立ち上げたかはこちら！

作ってみた WordPressでブログを立ち上げた全手順 はじめに：「1日でブログが立ち上がる」は本当だった——でも1日丸ごとかかった 「WordPressは1日… hitoblog.site

テスト前あるあるなんですけど、「あのとき先生が言ってた大事なやつ、どこにメモしたっけ……」ってなること、ありませんか。

僕はまさにそれでした。

ルーズリーフに手書きで書いたり、スマホで板書を撮ったり、たまにパソコンでメモしたり。方法がバラバラだから、情報もバラバラ。写真フォルダを500枚くらいスクロールして「これ何の授業だっけ」ってなる日々。

ノート整理しなきゃとは思うものの、整理する時間がもったいなくて結局やらない。そしてテスト前に泣く。毎学期これを繰り返していました。

ある日ふと思ったんです。「ノートを整理する作業って、AIに任せられないか？」と。

結論から言うと、Notion × Claudeの組み合わせで、ノート整理の苦痛がほぼなくなりました。

結論：授業後5分で、見返しやすいノートが完成する

先に結論です。

やっていることはシンプルで、授業中のメモ → Claudeに投げて整形 → Notionに貼って蓄積。たったこれだけ。

初回のセットアップ（Notionのデータベース作成＋プロンプトのテンプレ化）に30分ほどかかりますが、一度仕組みを作ればあとは毎回5分で回せます。

以下、具体的なやり方を紹介していきます。

今回やったことの全体像

ワークフローはこの3ステップです。

授業中：雑にメモを取る（走り書きでOK）
    ↓
授業後：メモをClaudeに投げて整形してもらう
    ↓
整形後：Notionに貼って蓄積する

ポイントは、自分でノートを「きれいに書く」必要がないこと。授業中はとにかく聞くことに集中して、メモは雑でいい。整理はAIの仕事です。

使ったツール

ChatGPTやGeminiでも代用できますが、僕はClaudeの文章整理が一番好みだったので使っています。Notionを触ったことがなくても、ページを作ってテキストを貼り付けるだけなのですぐ慣れます。

実際にやってみた手順

STEP 1：授業メモをClaudeに読み込ませる

授業中に取った走り書きメモを、そのままClaudeに渡します。

手書きノートの場合： 写真を撮ってClaudeにアップロード。Claudeは画像の中のテキストをかなり正確に読み取ってくれます。

パソコンでメモした場合： テキストをそのままコピペすればOK。

雑でも大丈夫です。「先生がなんか言ってた」レベルのメモでも、前後の文脈から意味を補ってくれます。

ただし、あまりに断片的すぎるメモ（単語が3つだけとか）だと、さすがにAIも推測できません。キーワードだけでなく、文の断片もメモしておくのがコツです。

STEP 2：プロンプトで「どう整形するか」を指示する

ここが一番大事なポイント。Claudeへの指示（プロンプト）で「どういう形にまとめてほしいか」を具体的に伝えます。

僕が毎回使っているプロンプトはこれです。

以下は今日の〇〇学の授業メモです。
これを以下のルールで整理してください。

・見出し（H2）で大きなトピックを分ける
・重要な用語は太字にする
・各トピックの最後に1行の要約をつける
・メモに書いていない情報は補足しないでください
 （メモの情報だけで構成すること）

---
（メモを貼り付け）

最後の「メモに書いていない情報は補足しない」が大事です。
これを言わないと、AIが親切心で教科書的な情報を足してしまい、
「先生が言っていたこと」と「AIが足したこと」の区別がつかなくなります。

STEP 3：Notionのデータベースに流し込む

Claudeが出力したMarkdown形式のノートを、Notionにコピペします。

僕はNotionに「授業ノートデータベース」を作っていて、こんなプロパティを設定しています。

新しいページを作って、科目と日付を選んで、Claudeの出力を貼り付ける。

これだけです。慣れれば1回の授業につき5分もかかりません。

STEP 4：試験前に「穴埋め問題」を自動生成する

ノートが蓄積されてくると、テスト前にまとめて見返せるのが便利です。

さらに僕がやっているのは、テスト前にClaudeにノートをまとめて渡して、穴埋め問題を自動生成してもらうこと。

以下の授業ノート（第1回〜第7回分）を読んで、
重要な用語の穴埋め問題を15問作ってください。

条件：
- 難易度は中程度
- 回答も一緒に出力
- 問題文は授業ノートの文脈に沿ったものにすること

これがめちゃくちゃテスト対策に効きます。自分のノートから出題されるので、授業の内容とズレません。

自分のノートが問題集に変身する……未来だモン……！

うまくいったこと・いかなかったこと

よかった点

復習にかかる時間が激減した。
以前はテスト前に「まず情報を探す → 整理する → 覚える」という3ステップが必要だったのが、
「Notionを開く → 覚える」の2ステップになりました。
探す時間と整理する時間がまるごとなくなったのは大きいです。

ノートの質が安定した。
走り書きメモのクオリティは日によってバラバラですが、
Claudeに整形してもらうことで出力は毎回同じフォーマット。見返しやすさが段違いです。

ノート整理が「面倒」から「ちょっと楽しい」に変わった。
雑なメモがきれいなノートに変わる瞬間、地味にうれしいんですよね。

注意点

AIの要約を鵜呑みにすると、大事な部分が抜けることがある。 特に先生が「ここテストに出ます」と言っていた箇所が、AIにとっては「些細な補足」に見えてカットされることがありました。
出力をそのまま信じるのではなく、自分のメモと見比べて「抜けてないか」を確認する工程は必要です。

音声だけの授業は相性が悪い。 板書がなく先生が話すだけの授業は、メモの密度が薄くなりがちで、AIに渡しても情報が足りないことがあります。
こういう授業では、スマホの録音（許可を取って）を併用するか、メモの量を意識的に増やす工夫が必要です。

おすすめのプロンプト例3つ

僕が実際に使っているプロンプトを3つ共有します。コピペして【】の部分を書き換えて使ってください。

① ノート要約用

以下は今日の【授業名】のメモです。
以下のルールで整理してください。

・大きなトピックごとにH2見出しで分ける
・重要な用語は太字にする
・各トピックの末尾に1文の要約をつける
・メモにない情報は絶対に補足しないこと

---
（メモを貼り付け）

② 穴埋め問題生成用

以下の授業ノートから、
重要な用語や概念の穴埋め問題を【数】問作成してください。

条件：
- 問題文は授業ノートの文脈に沿ったものにする
- 難易度は中程度
- 回答は問題の下にまとめて記載

---
（ノートを貼り付け）

③ 用語集自動作成用

以下の授業ノート（第1回〜第【数】回分）に出てくる
専門用語を抽出して、用語集を作ってください。

形式：
- 用語：1〜2文の定義
- 五十音順に並べる
- 授業ノートの文脈での使われ方がわかるようにする

---
（ノートを貼り付け）

プロンプトの書き方全般については、プロンプトの書き方を変えたら結果が変わった話でもっと詳しく紹介しています。

プロンプトの書き方の記事はこちら！

学んでみた 【大学生向け】AIへの「聞き方」を変えたら回答の質が激変した話｜プロンプト改善Before/After はじめに：「AIって使えなくない？」と思っていた時期があった ChatGPTに「経済学のレポートの… hitoblog.site

まとめ：仕組みを一度作れば、あとは毎回5分

大事なのは、

AIにノートを「作ってもらう」のではなく、自分のメモを「整理してもらう」

という使い方。
授業中にちゃんとメモを取る → それをAIで構造化する。
この流れを習慣にできると、テスト前の焦りが本当に減ります。

ノート整理で消耗している大学生、ぜひ一度試してみてください！

・関連記事

・今回使ったプロンプトの「なぜそう書くか」がわかる記事はこちら！

学んでみた 【大学生向け】AIへの「聞き方」を変えたら回答の質が激変した話｜プロンプト改善Before/After はじめに：「AIって使えなくない？」と思っていた時期があった ChatGPTに「経済学のレポートの… hitoblog.site

ノート整理の次は、レポート作成でのAI活用！活用した記事はこちら！

つまづいた話 「AIに書かせればラクじゃん」を本気で試したら、意外な結果になった！ はじめに：正直に言います。最初は「丸投げ」を考えていました レポートの締め切りが3つ重なっ… hitoblog.site

・AIの活用は勉強だけじゃない。ブログ制作にも使える！

作ってみた AIでWordPressの自作テーマを作ってみた全手順【バイブコーディング】 はじめに：既存テーマに限界を感じた話 ヒトブログを始めたとき、最初は無料テーマ(Cocoon)を使… hitoblog.site

・バイブコーディングの始め方ガイドの記事はこちら！

学んでみた 【学生向け】Claude Codeの始め方！デスクトップアプリで今日からバイブコーディング！ はじめに：ターミナルが怖くても大丈夫だった Claude Codeの紹介記事を書いたとき、友達から一… hitoblog.site

WordPressでブログを立ち上げた直後、
「便利そう」と思ったプラグインを片っ端から入れました。

その数、15個。

結果、サイトの表示速度がガクッと落ちました。
ページを開くのに5秒以上かかる状態。
スマホだともっと遅い。

まだサーバーを契約していない方は、初期設定まで一括で完了するConoHa WINGがおすすめです！

（当時の本音）
「プラグインって入れれば入れるほどいいんじゃないの？」
……違いました。

その後、調べて整理して、本当に必要な7個に絞りました。
この記事では、初心者が最初に入れるべきプラグインを
「なぜ必要なのか」も含めて紹介します。

プラグインって入れれば入れるほどいいと思ってたモン…違ったモン…

結論：プラグインは「最小限」が正解。まず7個あれば十分

先に結論です。

WordPressのプラグインは少なければ少ないほどいい。
入れすぎるとサイトが重くなり、
プラグイン同士が干渉してエラーの原因にもなります。

僕が実際に使っている7個を、目的別に紹介します。

目的別：最初に入れるべきプラグイン7選

① SEO対策：SEO SIMPLE PACK

何をするプラグインか
記事ごとにタイトルタグやメタディスクリプションを設定できるようにするプラグインです。

なぜ必要か
SEOの基本を学んだ記事で書きましたが、
メタディスクリプションはGoogle検索の結果に表示される説明文です。
これを記事ごとに設定できないと、SEO対策ができません。

WordPressの標準機能にはこの設定画面がないため、プラグインが必要です。

選んだ理由
SEO系のプラグインは「Yoast SEO」「All in One SEO」なども有名ですが、
SEO SIMPLE PACKは日本語対応で設定項目がシンプル。
初心者が迷わずに使えます。

（補足）
Google Search Consoleを導入したとき、
認証コードの貼り付け場所もこのプラグインの設定画面にありました。
SEO系の設定が一箇所にまとまるのも便利です。

② セキュリティ：Wordfence Security

何をするプラグインか
不正ログインやハッキングからサイトを守るプラグインです。

なぜ必要か
WordPressは世界中で使われているため、
自動化された攻撃（ブルートフォース攻撃など）の標的になりやすいです。

「個人ブログなんて狙われないでしょ？」と思っていましたが、
Wordfenceを入れてログを見ると、
毎日のように不正ログインの試行が記録されていました。

選んだ理由
無料版でも十分な機能がある。
ファイアウォール、ログイン制限、マルウェアスキャンが一括でできます。

③ スパム対策：Akismet Anti-Spam

何をするプラグインか
コメント欄のスパム（迷惑書き込み）を自動で判定・ブロックするプラグインです。

なぜ必要か
ブログにコメント機能を開放していると、
「お金が稼げます！」のような怪しいコメントが大量に来ます。
手動で削除するのは現実的ではありません。

選んだ理由
WordPressにデフォルトでインストールされているので、
有効化してAPIキーを設定するだけで使えます。
個人ブログなら無料で利用できます。

④ お問い合わせフォーム：Contact Form 7

何をするプラグインか
お問い合わせフォームを作成するプラグインです。

なぜ必要か
ブログにお問い合わせフォームを設置するのは、
Googleアドセンスの審査や企業からの連絡窓口として重要です。

また、ブログの信頼性を高める効果もあります。
「この人にはちゃんと連絡が取れる」と読者に思ってもらえるので。

選んだ理由
日本語の情報が多く、カスタマイズの解説記事が豊富。
初心者でも設定しやすいです。

⑤ 画像軽量化：EWWW Image Optimizer

何をするプラグインか
画像をアップロードしたとき、自動で圧縮・軽量化してくれるプラグインです。

なぜ必要か
ブログの表示速度に一番影響するのは画像のファイルサイズです。

スマホで撮ったスクリーンショットは1枚1〜3MBあることもあります。
これをそのまま10枚載せたら、ページが重くなるのは当然です。

スマホで撮ったスクショは1枚1〜3MBもあるモン！そのまま載せたら重くなるモン！

アイキャッチ画像を作った記事でも触れましたが、
画像の軽量化はSEOにも直結します。
Googleは表示速度が遅いサイトを検索順位で下げる傾向があります。

選んだ理由
アップロード済みの過去画像も一括で圧縮できる機能がある。
WebP形式への変換にも対応しています。

⑥ サイトマップ生成：XML Sitemap Generator for Google

何をするプラグインか
サイトマップ（サイト内の全ページのリスト）を自動生成するプラグインです。

なぜ必要か
Search Consoleを導入したときにサイトマップを送信しました。
このサイトマップがないと、Googleがサイト内のページを見つけにくくなります。

新しい記事を公開するたびに、自動でサイトマップが更新されるので、
一度設定すれば放置でOKです。

選んだ理由
設定がシンプルで、デフォルトのまま使えること。
余計な設定項目がないので、初心者が迷わない。

（注意）
お使いのテーマやSEOプラグインにサイトマップ生成機能が
含まれている場合は、このプラグインは不要です。
機能が重複すると不具合の原因になるので確認しましょう。

⑦ バックアップ：UpdraftPlus

何をするプラグインか
サイトのデータを自動でバックアップしてくれるプラグインです。

なぜ必要か
WordPressの更新やプラグインの相性問題で、
サイトが表示されなくなることがあります。

僕も一度、テーマを更新した直後にトップページが真っ白になりました。
バックアップがあったから復旧できましたが、
なかったら全データを失うところでした。

テーマ更新したらトップページが真っ白に…バックアップがなかったらと思うと怖いモン…

選んだ理由
無料版でもGoogleドライブやDropboxに自動バックアップできる。
復元もワンクリックでできるので、初心者に優しい。

おすすめ設定
週1回の自動バックアップ＋保存先はGoogleドライブ。
これだけで「もしもの時」に備えられます。

プラグインを入れるときの3つの注意点

注意①：入れすぎない（10個以内を目安に）

冒頭で書いた通り、プラグインは入れすぎるとサイトが重くなります。

目安として10個以内に抑えるのが良いとされています。
僕は現在7個で運用しています。

「あったら便利かも」程度のプラグインは入れない。
「ないと困る」ものだけに絞りましょう。

プラグインは10個以内が目安だモン！「ないと困る」ものだけに絞るのがおすすめだモン！

注意②：更新されていないプラグインは避ける

プラグインの詳細ページに「最終更新日」が表示されています。
1年以上更新されていないプラグインは避けた方が安全です。

更新が止まっているプラグインは、
セキュリティの脆弱性が放置されている可能性があります。

注意③：機能が重複するプラグインを入れない

SEO系のプラグインを2つ入れたり、
キャッシュ系のプラグインを2つ入れたりすると、
機能が衝突してエラーの原因になります。

同じ目的のプラグインは1つだけにしましょう。

プラグインの入れ方（基本操作）

WordPress管理画面からの操作手順です。

1. 管理画面の左メニューから「プラグイン」→「新規追加」をクリック
2. 検索窓にプラグイン名を入力
3. 該当するプラグインの「今すぐインストール」をクリック
4. インストールが完了したら「有効化」をクリック
5. 必要に応じて設定画面で初期設定を行う

有効化しただけでは設定が不十分なプラグインもあるので、
必ず各プラグインの設定画面を確認してください。

まとめ：プラグインは「厳選して入れて、定期的に見直す」

初心者向けにWordPressのプラグインを7つ紹介しました。

大事なのは「たくさん入れること」ではなく、
「必要なものだけを入れて、ちゃんと設定すること」です。

まずはこの7つを入れて、ブログ運営を安全に始めましょう。
慣れてきたら、必要に応じて追加・入れ替えすればOKです。

・関連記事

作ってみた WordPressでブログを立ち上げた全手順 はじめに：「1日でブログが立ち上がる」は本当だった——でも1日丸ごとかかった 「WordPressは1日… hitoblog.site

＞＞サーバー選びで迷ったらConoHa WINGがおすすめです＜＜

学んでみた Google Search Consoleの導入で知ったブログの「現実」｜初心者がまず見るべき3指標 はじめに：「ブログのPV」は見ていたが「検索の裏側」は盲点だった SEOを学んだ記事で「検索か… hitoblog.site

Claude Codeの始め方の記事でインストール方法を紹介しました。

でも、インストールした後に思ったんです。

「で、何に使えばいいの？」

コーディング支援ツールって言われても、プログラミングしない僕に関係あるモン…？

Claude Codeは「コーディング支援ツール」と紹介されることが多い。
だから、プログラミングをしない人には関係ないと思っていました。

でも実際に使ってみると、
プログラミング経験がなくても活用できる場面がたくさんある
ことに気づきました。

この記事では、僕が学生生活で
実際にClaude Codeを使っている5つの方法を紹介します。

結論：「プログラミングができない人」にこそ価値がある

先に結論です。

Claude Codeの一番の価値は、
「プログラミングができなくても、
プログラミングでしかできなかったことができるようになる」
ということです。

日本語で「こうしてほしい」と伝えるだけで、
Claude Codeがコードを書いて実行してくれます。

僕はプログラミング経験がほぼゼロですが、ファイル整理もWebサイト制作もデータ集計も
全部Claude Codeにやってもらいました。

なぜClaude Codeは学生に向いているのか

① 日本語の指示だけで動く

「このフォルダのPDFを日付順に並べ替えて」
「アンケート結果をCSVからグラフにして」

こうした自然な日本語で指示を出すだけ。
プログラミング言語を覚える必要はありません。

② 自分のパソコン上で直接作業できる

普通のClaude（チャット画面）は
テキストをやり取りすることしかできません。

Claude Codeはパソコン上のファイルを直接操作できるので、
ファイルの作成・編集・整理・変換が全部できます。

③ お金をかけずに「それっぽいもの」が作れる

Webサイト制作を業者に頼めば数万〜数十万円。
Claude Codeなら、Proプランの月額約3,400円だけで
自分でサイトが作れます。

Claude CodeでWebサイトを作った記事が
まさにその実例です。

活用法①：レポートや資料のファイル整理

こんな経験ありませんか？

大学のレポートや資料がデスクトップに散乱している。
「レポート_最終版.docx」「レポート_最終版_v2.docx」
「レポート_本当の最終版.docx」が3つ並んでいる。

僕は毎学期こうなっていました。

Claude Codeでやったこと

「ダウンロードフォルダにあるPDFファイルを、
ファイル名に含まれる科目名ごとにフォルダを作って振り分けて」

この一言で、Claude Codeが——

1. ダウンロードフォルダ内のPDFを全部スキャン
2. ファイル名から科目名を推測
3. 科目ごとのフォルダを自動作成
4. それぞれのフォルダにファイルを移動

手作業なら30分以上かかる整理が、数秒で完了しました。

30分かかるファイル整理が数秒！？これはすごいモン！

他にも——

• 「このフォルダの画像ファイルを全部JPEG→WebPに変換して」
• 「レポートのWordファイルの文字数を一覧で表示して」
• 「ファイル名の先頭に日付を追加して」

こうしたファイル操作系のタスクはClaude Codeが本当に得意です。

活用法②：簡単なWebサイトを作る

ポートフォリオサイトを30分で作った

就活やインターンの応募で
「ポートフォリオサイトはありますか？」と聞かれることがあります。

ゼロから作るのは大変ですが、
Claude Codeなら日本語の指示だけで作れます。

「シンプルなポートフォリオサイトを作って。
名前は〇〇、大学は△△大学□□学部。
スキル：Webライティング、WordPress、AI活用。
実績：ブログ運営（月間〇〇PV）、クラウドワークスで記事執筆。
デザインはシンプルでモダンにして。」

これだけで、
レスポンシブ対応のポートフォリオサイトができました。

「AI感」の問題はありますが、
たたき台としては十分すぎる品質です。

あとは自分のプロフィール写真を入れて、
キャッチコピーを自分の言葉に書き換えるだけ。

ブログのカスタマイズにも使える

WordPressの構築記録で作ったブログの
ちょっとしたカスタマイズにも使えます。

「このCSSを修正して、見出しの下に線を入れて」
「フッターに著作権表示を追加して」

こうした細かい修正を
自分でCSSを調べなくてもできるのは本当に楽です。

活用法③：データの集計・グラフ化

アンケート結果の集計に使った

ゼミの研究でアンケートを実施したとき、
結果の集計に困りました。

Excelでも集計できますが、
関数を調べるのが面倒。
特にクロス集計やグラフの作成は時間がかかります。

Claude Codeに頼んだのはこうです。

「このCSVファイルを読み込んで、
質問1の回答を円グラフにして。
質問2と質問3のクロス集計も作って。
結果をPNGの画像として保存して。」

Claude CodeがPythonのスクリプトを自動で書いて実行し、
きれいなグラフが数秒で生成されました。

Excelで1時間かかっていた作業が、
指示を出してから完成まで2分でした。

授業のデータ分析課題にも

統計の授業でRやPythonを使う課題が出たとき、
コードの書き方がわからなくて困りました。

Claude Codeに「このデータの平均値、中央値、標準偏差を計算して。
ヒストグラムも作って」と頼むだけで
正しいコードが動く状態で生成されます。

ただし、コードの中身を理解することが大事です。
丸投げではなく「Claude Codeに書いてもらって、自分で中身を読んで学ぶ」使い方が正解です。
（注意点は後述します。）

活用法④：面倒な繰り返し作業を自動化する

具体例：ブログ画像のリサイズ

画像のファイルサイズはブログの速度に直結します。

新しい記事を書くたびに
画像を1枚ずつリサイズして、WebPに変換して……
毎回これをやるのが面倒でした。

Claude Codeで自動化しました。

「このフォルダ内の画像を全部、
横幅800pxにリサイズして、
WebP形式に変換して、
元のファイル名_optimized.webpとして保存して」

10枚の画像処理が10秒で完了。
しかもClaude Codeが作ったスクリプトを保存しておけば、
次回からは自分で実行するだけです。

他にも自動化できること

• メモ帳のテキストをMarkdown形式に一括変換
• 複数のCSVファイルを1つに結合
• フォルダ内のファイル名を一括でリネーム
• 特定のキーワードを含むファイルだけ抽出

「同じ作業を2回以上やりそうだな」と思ったら、
Claude Codeで自動化を検討する価値があります。

活用法⑤：プログラミングの勉強に使う

「写経」より「対話」で学ぶ

プログラミングの勉強で挫折する一番の原因は、
エラーが出たときに自分で解決できないことだと思います。

教科書通りに書いたのに動かない。
エラーメッセージの意味がわからない。
ここで心が折れます。

Claude Codeがあると——

「このPythonコードを実行したらエラーが出た。
原因と修正方法を教えて」

エラーの原因を説明してくれて、
修正したコードを提案してくれて、
さらに「なぜこの修正が必要なのか」まで教えてくれます。

コードの解説をしてもらう

授業で配られたサンプルコードの意味がわからないとき——

「このPythonコードを1行ずつ解説して。
プログラミング初心者にわかるように」

変数の意味、関数の役割、処理の流れを
初心者にわかる言葉で説明してくれます。

「作りたいもの」から逆算して学ぶ

僕のおすすめの勉強法は、
「作りたいものをClaude Codeに作ってもらって、そのコードを読んで学ぶ」
というやり方です。

たとえば「じゃんけんゲームをPythonで作って」と頼んで、
できたコードを1行ずつ読む。

教科書の例題より
自分が作りたかったもののコードの方が理解するモチベーションが全然違います。

Claude Codeを使うときの注意点

① 大学のレポートを丸投げしない

これは絶対に守ってください。

Claude Codeでレポートのコードを丸ごと生成して
そのまま提出するのは、学業上の不正行為になる可能性があります。

AIツール使い分けの記事でも書きましたが、
AIは「壁打ち相手」として使うのが正しい使い方です。

• ◎ エラーの原因を聞く → 理解して自分で修正する
• ◎ コードの書き方を相談する → 参考にして自分で書く
• ✕ コードを全部生成してそのまま提出する

大学のAI利用ポリシーを確認した上で、
「学ぶための道具」として使うことを意識しましょう。

AIは「壁打ち相手」として使うのが正しい使い方だモン！丸投げはダメだモン！

② 重要なファイルは必ずバックアップ

Claude Codeはファイルを直接操作するツールです。
指示を間違えると、ファイルを上書きしてしまう可能性があります。

大事なファイルは必ずコピーを取ってから作業してください。

権限モードを「Suggested」にしていれば
実行前に確認が出ますが、
念のためバックアップは取っておくのが安全です。

③ 個人情報を含むファイルの扱いに注意

Claude Codeで処理するファイルの内容は
Anthropicのサーバーに送信される可能性があります。

他人の個人情報が含まれるファイル（名簿、成績表など）は
Claude Codeで処理しないようにしましょう。

まとめ：「AIを使いこなす力」は学生のうちに身につけたい

Claude Codeの学生向け活用法をまとめます。

Claude Codeは「プログラマー専用」のツールではありません。
「やりたいことを日本語で伝えるだけ」でパソコン作業を自動化できるツールです。

AIツールは今後さらに進化していきます。
「AIを道具として使いこなす力」は、
学生のうちから身につけておいて損はないはずです。

まずは始め方の記事を読んで
インストールするところから始めてみてください。

・関連記事

学んでみた 【学生向け】Claude Codeの始め方！デスクトップアプリで今日からバイブコーディング！ はじめに：ターミナルが怖くても大丈夫だった Claude Codeの紹介記事を書いたとき、友達から一… hitoblog.site

学んでみた Claude Codeを学生が使ってみた！感想と活用法を紹介【プログラミング初心者でもOK】 はじめに：「AIがコードを書いてくれる」って本当だった プログラミングに興味はあるけど、何か… hitoblog.site

作ってみた Claude CodeでWebサイトを作ってみた！”AI感”の正体と消し方を実例で解説 はじめに：AIでWebサイトが作れる時代、実際に作ってみた AIツールでWebサイトが作れる時代にな… hitoblog.site

ブログのPVが伸びません。

記事を投稿してもSNSで少し読まれて終わり。 リピーターがほとんどいないのが課題でした。

記事を書いても読まれて終わり…また来てもらえる理由がないモン…

「記事を読んだら離脱」を繰り返すだけでは、 PVは記事数に比例するだけです。 毎日来る理由がないと成長しない。

そんなとき思いついたのが占い機能でした。

「1日1回だけ占える」という仕組みなら、 毎日訪問するきっかけになるのでは？ しかもヒトブログにはマスコットキャラ「ブロモン」がいます。 ブロモンが占ってくれる——ブログの個性とも自然につながると思いました。

この記事では、企画→設計→実装→公開まで 全過程を体験したことをベースに書いていきます。

結論：占いは「技術」より「企画」が大事

先に結論です。

占い機能の実装自体は JavaScript＋ショートコードで意外とシンプルでした。

難しかったのはむしろ企画の部分。 「どんな占いにするか」 「60パターンのメッセージをどう作るか」 コンテンツ設計に一番時間がかかりました。

でも「ブログのコンセプトと接続する」 という視点で設計したことで、 ただの遊びではなく リピーター獲得の仕組みになったと感じています。

なぜブログに占い機能をつけたのか

ブログの課題：読んだら離脱

ヒトブログの課題は明確でした。

記事を読んでくれる人はいる。
でも読み終わったらそのまま離脱する。
「また明日も来よう」という理由がない。

ブログを成長させるには、新規読者だけでなく
リピーターを増やす必要があります。

「毎日来る理由」を作りたかった

占い機能は1日1回の制限と相性がいいです。

「今日の運勢を見たい」
→毎朝ブログにアクセス
→ついでに新しい記事も読む
→「ちょっと詳しい自分」になる

このループを作りたかったのが
占い機能を導入した一番の理由です。

別サイト vs ブログ内：統合を選んだ理由

占いを別サイトで作る案もありました。 以前ツールを作ったときは 別ドメイン（tools.hitoblog.site）に設置しました。

でも今回はヒトブログ本体に統合しました。 理由は3つです。

・PVの受け皿になる

占い目的の訪問がそのままブログのPVになります。

・運用コストが低い

別サイトだとデプロイや管理が二重になります。 WordPress内ならテーマファイルの編集だけです。

・ドメインパワーに貢献する

訪問頻度が上がればGoogleの評価にもつながります。

占いの企画・コンテンツ設計

占いのテーマは「成長運」

占いのテーマ選びは重要です。

恋愛運？金運？いろいろ考えました。 でもヒトブログのコンセプトは 「学生の”やってみた”記録」です。

ここに一番合うのは「成長運」でした。 「今日はどんな成長ができるか」という占いなら、 ブログの世界観と自然につながります。

5段階の運勢レベル

運勢は5段階に設定しました。

「ハズレ」を作りたくなかったので、 どの結果でもポジティブなメッセージにしています。 「充電日」でも落ち込まないような言い回しです。

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シェア機能に固定ハッシュタグをつけたのは

を狙ったからです。

占い結果をシェアしてくれた人のポストを見た人が「自分もやってみよう」と思う—— 占い→シェア→拡散→新規訪問→占いのループが理想の形です。

つまづいたポイント

PC版でのレイアウト崩れ

最初はヒーローセクション（トップ画像）の直下に占い機能を設置しました。

でも余白がありすぎて浮いて見える。 ヒーロー画像と占いの間に大きな空白ができてしまいました。

解決策： PC版ではヒーローセクション内に占い機能を統合しました。 スマホ版はそのまま縦積みです。 デバイスごとに配置を変える方針にしたことで自然な見た目になりました。

レスポンシブ対応の難しさ

占い結果の表示エリアはテキスト＋画像＋ボタンで構成されています。 PC版では横並び、スマホ版では縦積みにする必要があり、 メディアクエリの設定に苦戦しました。

PC版とスマホ版、両方きれいに見せるのって思ったより難しいモン…

特にブロモンの画像サイズが問題でした。 PC版で適切なサイズがスマホでは大きすぎる。 逆にスマホに合わせるとPC版で小さすぎる。

解決策： 画像サイズをビューポート幅に対する 相対値（vw）で指定し、max-widthで上限を設けることで どちらのデバイスでも適切に表示されるようになりました。

まとめ：ブログに「また来たい」を作る方法

占い機能の実装を振り返ります。

合計約2時間半で完成しました。

技術的にはJavaScript＋ショートコードで意外とシンプルな構成です。

Claude Codeを活用すれば

プログラミング経験が浅くても実装できます。

大事なのは「ブログのコンセプトとの接続」です。

ヒトブログの「成長」というテーマと占いの「成長運」を結びつけたことで、

ただの遊びではなく、ブログの一部として機能しています。

記事だけがブログのコンテンツではありません。

「体験」を提供することで

リピーターが生まれます。

今後はパターンの追加や季節イベント対応（お正月占い、夏休み占いなど）も展開していく予定です。

「自分のブログにも何か仕掛けを作りたい」と思った人は、
まずClaude Codeを使ってみた！を読んで環境を整えるところから始めてみてください！

・関連記事

学んでみた Claude Codeを学生が使ってみた！感想と活用法を紹介【プログラミング初心者でもOK】 はじめに：「AIがコードを書いてくれる」って本当だった プログラミングに興味はあるけど、何か… hitoblog.site

・アドセンス診断合格サイトをClaudecodeを使って作成した方法↓

作ってみた AdSenseに2回落ちた大学生が、合格診断ツールを自作した話 はじめに：「何がダメなのか」がわからない AdSenseに2回落ちました。 1回目は「有用性の低いコ… hitoblog.site

AdSenseに2回落ちました。

1回目は「有用性の低いコンテンツ」。 2回目も同じ理由でした。

Googleからの不合格メールには、 具体的に何を直せばいいのか書いてありません。

「プライバシーポリシーが足りないの？」 「記事数が少ないの？」 「そもそもサイトの作り自体がダメなの？」

全部わからない。

2回も落ちて、何がダメなのか全然わからない…これは辛いモン…

ネットで調べても「記事を増やしましょう」「独自性を出しましょう」みたいな 抽象的なアドバイスばかりでした。

「自分のブログの何がダメなのか、 具体的にチェックしてくれるツールがあればいいのに」

探してみたけど、満足できるものが見つかりませんでした。

じゃあ——自分で作ろう。

Claude Codeを使えばWebサイトが作れることは経験済みだったので、 「診断ツールも作れるのでは？」と思い立ちました。

結論：「自分の困りごと」が一番良いツールを生む

先に結論です。

AdSenseに落ちた悔しさから作ったツールは、 X（Twitter）で540インプレッション、55PVを記録しました。

「自分が欲しかったもの」を作ると、 同じ悩みを持つ人にも届くということを実感しました。

技術的にはNext.js + cheerioという構成で、 開発期間は約3時間ほど。 プログラミング経験が浅い僕でも、 Claude Codeの力を借りれば作れました。

何を診断するか決める：10項目の設計

AdSense審査で見られるポイントをリサーチ

まず「AdSense 審査基準」でとにかく情報を集めました。

Google公式のAdSenseヘルプページを軸に、 合格者のブログ記事や解説動画を合わせて 30以上の情報源を読み込みました。

見えてきたのは、 審査で見られるポイントが 大きく3つのカテゴリに分かれることです。

3カテゴリ × 10項目に整理

最初は20項目以上ありました。 でも「URLを入力するだけで自動チェックできるか」を基準にフィルタリングしました。

※結果的に決まった10項目の画像

たとえば「記事の独自性」は重要ですが、 機械的に判定するのが難しいので外しました。 逆に「SSL対応」「プライバシーポリシーの有無」は HTMLを解析すれば判定できます。 自動チェック可能な項目に絞ったのがポイントです。

技術選定：なぜこの構成にしたか

使った技術スタック

診断ツールにはサーバー側の処理が必要です。 ユーザーが入力したURLにアクセスしてHTMLを取得する処理は、 ブラウザ側ではCORSという制約があってできません。 Next.jsのAPIルートならこれを簡単に解決できるのが決め手でした。

cheerioはNode.js用のHTMLパーサーで、 取得したHTMLの中から「プライバシーポリシーへのリンクがあるか」 「メタディスクリプションが設定されているか」を効率的にチェックできます。

開発中につまづいたポイント

① CORSエラーで画面が真っ白になった

最初はフロントエンド側で 直接ユーザーのURLにfetchしていました。

結果——CORSエラー。 ブラウザが外部サイトへの直接アクセスをブロックしてしまい、 「URLを入力しても何も表示されない」という最悪の状態に。

URLを入力しても何も表示されない！？何が起きてるモン！？

解決策： Next.jsのAPIルート（/api/diagnose）を作り、 サーバー側でHTMLを取得する構成に変更しました。 フロントエンドはAPIルートだけを呼び出すのでCORSの問題が発生しません。

これはClaude Codeに相談してすぐに原因と解決策がわかりました。 一人で悩んでいたら数時間かかっていたと思います。

② HTMLの構造がサイトによってバラバラ

「プライバシーポリシーページがあるか」を判定するために、 ナビゲーションやフッターのリンクをcheerioで探す処理を書きました。

でも、サイトによってHTMLの構造が全然違います。 あるサイトは<nav>タグの中、別のサイトは<footer>の中、 さらに別のサイトは<div class="menu">の中にリンクがある。

解決策： 特定のHTML構造に依存せず、 ページ全体のリンクテキストとURLを 全部取得してキーワードで判定する方式に変えました。

「privacy」「プライバシー」「個人情報」 といったキーワードを含むリンクがあれば 「プライバシーポリシーあり」と判定します。

完璧ではありませんが、 8割以上のサイトで正しく判定できるようになりました。

③ Vercelの無料枠でタイムアウトする

診断処理は外部サイトのHTMLを取得するため、レスポンスが遅いです。

Vercelの無料枠ではサーバーレス関数のタイムアウトが10秒。 表示速度が遅いサイトを診断するとタイムアウトしてしまいました。

解決策： HTMLの取得にタイムアウト設定（5秒）を追加し、 取得できなかった項目は「チェックできませんでした」と表示する仕様にしました。

全項目を完璧にチェックすることより、 ユーザーを待たせないことを優先した判断です。

完成したツールの紹介

使い方は3ステップ

1. AdSense合格診断ツールにアクセス
2. 診断したいブログのURLを入力
3. 「診断する」ボタンを押す

たった10秒で診断結果が表示されます。

診断結果の見方

10項目それぞれに対して、 合格（◎）/ 要改善（△）/ 不合格（✕） の3段階で判定されます。

さらに、不合格・要改善の項目には 具体的な改善ヒントが表示されます。

たとえば「プライバシーポリシーが見つかりません」と判定された場合—— 「固定ページでプライバシーポリシーを作成し、 フッターにリンクを設置しましょう」 という次にやるべきことが表示されます。

「何がダメかわからない」という 僕自身が一番苦しかった部分を解決するツールです。

公開してみた反応

X（Twitter）で告知した結果

ツールが完成した日にX（Twitter）で告知ポストを投稿しました。

インプレッション540に対してPV55。 約10%の人がリンクをクリックしてくれました。 フォロワーが少ない段階でこの反応をもらえたのは嬉しかったです。

翌日には改善ヒントも追加したことで、診断後にすぐ改善することができるような設計にしました。

「作って公開する」ことの価値

正直、ツールの完成度は プロのエンジニアが作ったものには遠く及びません。

でも「公開した」という事実が ポートフォリオとしての価値を生みました。

「AdSenseに落ちた→悔しい→ツールを作った」 このストーリーが、ブログのコンテンツにもなっています（この記事がそうです）。

まとめ：学生でもWebツールは作れる

AdSense合格診断ツールの開発を振り返ります。

合計約３時間で、アイデアから公開まで完了しました。

プログラミング経験が浅くても、 Claude Codeを活用すれば自分のアイデアを形にできます。

大事なのは

から始めること！

自分が本当に欲しいツールは、 同じ悩みを持つ誰かにとっても価値があります。

一番いいツールのアイデアは「自分が本当に困ったこと」から生まれるモン！

・関連記事

作ってみた Claude CodeでWebサイトを作ってみた！”AI感”の正体と消し方を実例で解説 はじめに：AIでWebサイトが作れる時代、実際に作ってみた AIツールでWebサイトが作れる時代にな… hitoblog.site

学んでみた Claude Codeを学生が使ってみた！感想と活用法を紹介【プログラミング初心者でもOK】 はじめに：「AIがコードを書いてくれる」って本当だった プログラミングに興味はあるけど、何か… hitoblog.site