ClaudeCode × 個人ホームページ 活用事例

🌐 とくじぃのホームページ
誕生の記録

コードを一行も書かずに、自分のドメインつきHPが完成した

0
コード知識
1
日で完成
無料
ホスティング
📝
出発点：ブログとSNSだけ
ClaudeCode導入以前
🙋
Seesaaブログやnoteでの発信はしていましたが、「自分のホームページ」は持っていませんでした。
HPを作るにはコードを書く知識が必要だと思っていて、なかなか一歩が踏み出せずにいました。
Claudeに頼んでみた
1
Claudeへの指示①：全部まとめてお願い
ClaudeCode（最初のセッション）
🗣 Claudeへの指示
「ホームページ作成をお願いします。
無料ドメイン tokuji.com を取得してください。

現在作成中のブログ・note・リベシティの自己紹介などで
とくじぃのホームページを作成してください。

ホームページのテイストを調べてみたいので、
60〜70代の元気なリタイヤ前後の方の個人HPを紹介してください。」
💡
デザインの参考にしたい、という気持ちをそのまま伝えるだけでOK。
Claudeが実際にネット上の参考サイトを調べ、テイストを提案してくれました。
↓
2
Claudeへの指示②：素材のURLを渡す
同セッション内
🗣 URLを渡しただけ
「ブログ・note・リベシティのプロフィールはここです」
ブログ https://blog.seesaa.jp/
note https://note.com/tokupapa
リベシティ libecity.com/user_profile/...
※ Claudeが各URLの内容を読み取り、プロフィール・ブログ記事・活動内容を自動でHPに反映してくれました
😲
URLを貼るだけで、ブログの内容・プロフィール・SNSへのリンクを自動でHPに組み込んでくれました。
文章を一から書き直す必要はゼロ。
完成
🌐
tokupapa.com ── 完成
Cloudflare（無料ホスティング）＋ 独自ドメイン
🌐 tokupapa.com ／ とくじぃのホームページ 公開中
tokupapa.com のスクリーンショット
🌐 クリックしてサイトを開く
👆 クリックすると tokupapa.com が開きます
Cloudflare Pages（無料） 独自ドメイン tokupapa.com Next.js コード知識ゼロ
🎯 Claudeがやってくれたこと
  • 参考サイトを調べてデザインを提案 — 60〜70代の方の個人HPを実際に検索・比較してくれた
  • URLを読み込んでコンテンツを自動構成 — ブログ・note・リベシティから情報をまとめてHP化
  • Cloudflareへの公開手順を案内 — アカウント作成からデプロイまでステップバイステップで
  • ドメイン取得も一緒にサポート — tokupapa.com の取得・設定手順を案内
  • スマホ対応・見やすいデザイン — PCでもスマホでも読みやすいレイアウトに自動対応
🎉 コードなし・知識ゼロで、自分のHPが持てた
「自分のホームページ」は、エンジニアだけのものだと思っていた。
でも ClaudeCode に頼んだら、デザイン選びからドメイン取得・公開まで全部やってくれた。
今ではリベシティのプロフィールにも tokupapa.com を載せられている。
0円
ホスティング費用
0行
自分で書いたコード
1日
完成までの時間
🌐 tokupapa.com を見る
← とくじぃのAIライフへ戻る