ホームページを作ってみよう7日チャレンジ
ゴールは、7日後にCodexで作った最初の1サイトをNetlifyで公開して、URLを1個持ってる状態です。
完璧じゃなくていいです。「作って、公開した」が一番の成果です。
使うツールはCodex（メイン）＋Netlify（公開）です。
チャレンジ開始前｜Codexの準備（15分）
初日より前にやっておくとスムーズです。
- ChatGPTアカウント作成（無料でOK）
- デスクトップに
hp-challengeフォルダを作成 - Codexを開いて、動作テスト（「テストページ」と表示する index.html を作ってもらう）
詳細は バイブコーディングでホームページを作る入門マニュアル の「Codexの準備」を見てください。
画面付きで進めたい人向け： Codex準備ガイド（実画面スクショ付き）
チャレンジのルール
- メインツールはCodex（文案だけChatGPTでもOK）
- 1日30分〜60分 でOK（忙しい日は15分でも続ける）
- 完璧を目指さない（60点で公開）
- 誰かに1回見せる（最終日）
- 詰まったら バイブコーディングでホームページを作る入門マニュアル を見る
- 公開手順は https://chottoirodori.com/1362.html
作るものを決める（事前準備）
次のどれか1つを選んでください。
- A. 好きなカフェ・飲食店（架空でもOK）
- B. 知人のお店（許可を取ってから）
- C. 自分の副業・ブログの紹介ページ
- D. 整体院・サロン（架空でもOK）※いずれも思いつかなければ、ＡＩに提案してもらえばよいです。
ちなみに僕のポートフォリオの場合は、いつもお世話になっている整体院の院長さんに無料モニターをお願いしてLPを作成したり、知人のミュージシャンのホームページを作らせてもらったりしました。
ほかにも、AIに架空のミュージシャンを設定してもらい、その人物のLPを作るなどして、ポートフォリオに掲載する制作実績を増やしていきました。
もし知人にお店や事業をされている方がいるのであれば、無料モニターとして、実際にサイトやLPを作らせてもらうのも個人的にはかなり有効な方法だと思います。
無料で制作する代わりに、完成後にしっかり口コミや感想をもらったり、可能であれば他のお店や知人を紹介してもらったりすることで、次の案件獲得につながる可能性もあります。
最初は実績がないからこそ、無料モニターをうまく活用して「実際に作ったもの」と「お客様の声」を一緒に増やしていくのがおすすめです。
DAY 1｜設計シートを埋める（コードを書かない日）
やること： 紙かメモアプリに、次を書くだけです。※最初なのでざっくりでＯＫ。
【ページの目的】
例：初めての人に来店してもらう
【届けたい人】
例：近所の30〜50代、カフェ好き
【載せたい情報】（3〜5個）
・店名・キャッチコピー
・こだわり
・メニュー or サービス
・営業時間・アクセス
・予約・問い合わせ先
【参考にしたいサイト】
URLを1つ（雰囲気だけ真似ればOK）AIに頼むなら（ChatGPT or Codex）：
上記の設計シートをもとに、
カフェ（または整体院）の1ページサイトの
セクション構成を提案してください。今日のゴール： 設計シートが埋まっていること
DAY 2｜設計書をもとにサイト作成（Codex）
やること：
hp-challengeフォルダを開いた状態でCodexを起動- 以下をCodexに送る
hp-challenge フォルダに、DAY1の設計シートに基づいて
○○○のホームページを index.htmlで作成してください。ここで、以下👇の内容と合わせて、
自分なりのサイトのイメージを一緒に伝えると効果的です。
僕の場合は「臨場感あふれる」「圧倒的な」「ダイナミックに」「動きのあるユニークな演出」などのイメージを大げさというか、ちょっとオーバーに指示してあげると、面白いサイトが仕上がってくる印象があります。
・店名・キャッチコピー・営業時間を表示
・スマホで見やすいレスポンシブ
・「詳しく見る」ボタンを1つ
- できた
index.htmlをブラウザで開いて確認
チェック：
- 店名・サービス名が読める
- スマホ幅で横スクロールしない
- ボタンが1つある（「詳しく見る」でOK）
今日のゴール： FVだけの index.html が動く
DAY 3｜「こだわり」セクションを追加（Codex）
Codexへの指示例：
hp-challenge/index.html の続きとして、
「こだわり3点」のセクションを追加してください。
見出し＋短い説明文×3。スマホで見やすく。コツ： 長文にしないことです。1項目2〜3行くらい。アイコンや絵文字は仮でOKです。
今日のゴール： お店らしさが伝わる
カフェなどのお店のホームページなら、マスターのこだわり日記みたいなものを掲載できるようにブログ機能や、お知らせ機能を追加するといいかもしれません。
DAY 4｜メニュー・サービス内容を追加（Codex）
Codexへの指示例：
メニューセクションを追加してください。
ドリンク3種、フード2種。価格込み。
スマホで見やすいカード型レイアウトで。今日のゴール： サービス内容が伝わる
DAY 5｜アクセス・問い合わせを追加（Codex）
Codexへの指示例：
hp-challenge/index.html に、アクセス・問い合わせセクションを追加してください。
・営業時間・住所（架空可）
・LINE or Instagram へのボタン（リンクは # で仮置き）僕の実績だと：
- 整体院はLINE予約が強い導線
- カフェはInstagramとの連携が多い
今日のゴール： ページ下部まで一通りつながる
DAY 6｜スマホ確認＆Netlify公開
やること：
- スマホ実機かブラウザの開発者ツールで表示確認
- 気になる箇所をスクショ(Windowsキー＋PrintScreenキー)を押して、Windowsマーク→エクスプローラー→下にスクロール→スクリーンショットフォルダの中のスクショ画像をCodexに貼り「〇〇〇を直して」と送る（1〜3点くらい）
- Netlify公開ガイド に沿って
hp-challengeフォルダ全体 を公開 xxxx.netlify.appのURLをメモ
今日のゴール： 公開URLが1つ手元にある
DAY 7｜誰かに見せる＆振り返り
やること：
- 家族・友人・オプチャの信頼できる人にURLを送る
- 「どこが分かりにくい？」と1つだけ聞く
- 以下をメモする
【7日チャレンジ振り返り】
・一番つまずいたところ：
・うまくいったところ：
・次に直したいところ1つ：
・このページを誰に見せたい？（将来の営業用）今日のゴール： フィードバックを1つもらう
チャレンジ完了後の「次の一歩」
| レベル | やること |
|---|---|
| 初級 | 別ジャンルでもう1枚作る（計2枚） |
| 中級 | 初受注5万円までのロードマップ のSTEP5リサーチをする |
| 上級 | 気になる店のデモを作って「見せる」 |
| 本気 | ぞろ屋教材 で体系的に学ぶ |
制作代行のクライアントワークやビジネス目的のサイト作りを考えてるなら、この教材は買ったほうがいいです。プロの知見が詰まってる分、自己流とは成果の出方が違います。友達に気軽にプレゼントするとか趣味で触るだけなら、無理に買う必要はないです。
よくある質問
Q. 7日間、忙しくて途切れそう…
A. 大丈夫です。8日目に戻ればいいだけです。止まらないことが大事です。
Q. デザインがダサい…
A. 最初は全員そうです。僕も同じでした。とりあえず公開しちゃいましょう。
Q. アドセンス審査と関係ある？
A. 直接は別スキルです。でも「作って公開する」経験自体は、ブログ運営の自信にもつながると思ってます。
Q. これで受注できる？
A. 1枚作っただけだと、正直まだ難しいです。でもデモを見せる準備にはなります。ロードマップのSTEP6を見てください。
チャレンジ完了証（自分用）
7日終わったら、自分にこう言ってあげてください。
「未経験だった自分が、Codexで7日、1枚公開した。次は2枚目。」
これだけで、十分すぎる前進です。
イロドリ