「自分のサイトを作ってみたい」で止まっていた人へ。 Codexと公開まで進める教材を作りました
自分のWebサイトを作りながら、ITを学んでみませんか。
プログラミングをしたことがなくても、Codexと一緒なら、サイトの設計やデザインから実装、公開まで一つずつ進められます。今回作ったのは、質問に答えながら自分だけのWebサイトを完成させ、その過程でソースコードの仕組みも学べるWebサイト制作教材です。
Haloです。
今日も読みに来てくださって、ありがとうございます。
ここしばらく、僕はこの教材を作っていました。
最初は、サイト制作に必要なプロンプトを順番に用意して、それをCodexへ渡せば、一つの教材として形になると思っていたんです。ところが、実際に最初から動かしてみると、プロンプトの内容以前に決めなければならないことがかなりありました。
どのタイミングでプロンプトを貼るのか。Codexから質問されたら、どこまで自分で考え、分からないときはどう答えればいいのか。サイトが表示されたあと、何を見れば「次へ進んで大丈夫」と判断できるのか。Node.jsやGitが入っていない人へ、いきなり専門用語を並べずに案内するにはどうすればいいのか。
作る側から見ると当たり前になっていることでも、初めて触る人には、その一つ手前から分からないことがあります。僕が作りたかったのは、詳しい人だけがうまく使えるプロンプト集ではなかったので、そこを曖昧なままにしておくわけにはいきませんでした。
説明の順番を直し、プロンプトを実行する場所を見直し、環境によってファイル名の扱いが変わって検査が止まったときは、その違いを吸収できるように修正しました。入口になるHTMLだけを開けば、P0からP9まで迷わず進められる形に変え、ソースコードのコメントも、単に「ここでデータを取得します」と書くのではなく、そのファイルが何のためにあり、ほかのファイルとどう関係しているのかまで読めるようにしています。
作っては確認し、少し違うと思ったところを直して、また最初から動かす。文章にすると数行ですが、正直、かなり時間がかかりました。
それでも続けたのは、「自分のサイトを作ってみたい」と思った人が、プログラミング未経験というだけで最初の一歩を諦めなくてもいいものにしたかったからです。難しい部分はCodexに手伝ってもらいながら、自分で考えたものが画面になり、最後は誰かに見てもらえるURLになる。そこまでを、できるだけ手軽に経験できる教材を目指しました。
自分のサイトが欲しくても、なかなか動き出せない
Webサイトを持ちたい理由は、人によって違います。
自分の仕事や活動を紹介したい人もいれば、作品をまとめたポートフォリオが欲しい人、店舗やサービスの案内を載せたい人、SNSとは別に自分の情報をきちんと置いておける場所が欲しい人もいると思います。
今は無料で使えるサービスもありますし、SNSだけで発信することもできます。ただ、自分の名前や活動を検索したときに見てもらえる場所、サービスの内容や連絡先を一つにまとめた場所、自分の考えで少しずつ育てられる場所として、WebサイトにはSNSとは違う良さがあります。
とはいえ、いざ作ろうとすると、最初に費用の壁があります。
ホームページ制作の金額は、ページ数、デザイン、写真や文章の用意、必要な機能、依頼先によって大きく変わります。
比較的シンプルなサイトでも10万円から30万円ほどになることがあり、作り込みや機能が増えれば、それ以上になることも珍しくありません。
たとえば、エックスサーバーが公開している制作案件の価格帯でも、5ページ以上のパンフレット程度のホームページは10万円以上30万円未満の案件が多いと紹介されています。
もちろん、制作会社や制作者が高い金額を付けている、という話ではありません。目的を聞き、構成を考え、デザインし、コードを書き、表示や動作を確認する。写真や文章までお願いするなら、その準備も必要になります。誰かが時間を使って作る以上、それなりの費用がかかるのは自然なことです。
ただ、個人で活動を始めたばかりの人や、小さなサービスを試してみたい人にとって、10万円、20万円という金額は簡単には出せません。まだ売上があるかも分からない段階なら、なおさらです。サイトが欲しい気持ちはあっても、「もう少し形になってから」「余裕ができたら」と先送りになり、そのまま何年か経ってしまうこともあります。
費用だけではなく、調整にも時間がかかります。
頭の中にある雰囲気を言葉で説明し、最初に出てきたデザインを見て、少し違うと思ったところを伝え、また直してもらう。制作者が悪いわけでも、依頼者の説明が悪いわけでもないのに、見えている完成形が最初から同じとは限りません。「もう少し柔らかく」「もっと落ち着いた感じで」と伝えても、その言葉から想像するものは人によって違います。
何度か修正をお願いするうちに、こちらも申し訳なくなり、完全には納得していないけれど「これで大丈夫です」と言ってしまうこともあるかもしれません。公開したあとに文章を少し変えたくなっても、自分では触れず、また依頼が必要になる場合もあります。
僕は、制作を依頼する方法を否定したいわけではありません。事業の顔になるサイトをプロに任せたほうがよい場面はありますし、写真、文章、集客、SEOまで含めて相談できることは大きな価値です。
ただ、その選択しかないわけでもないと思いました。
パソコンと必要な環境があり、制作の順番と確認方法が分かれば、Codexに技術的な部分を手伝ってもらいながら、自分でWebサイトを作ることもできます。色を変えたいと思ったら、その場で相談できる。文章を直したいと思ったら、自分の言葉ですぐに直せる。何より、自分の中にある「こんなサイトにしたい」を、画面を見ながら少しずつ形にできます。
この教材は、制作会社へ依頼する場合と同じ成果を保証するものではありませんし、プロの仕事を不要にするものでもありません。それでも、金額の面で手が伸びなかった人や、まずは自分で作ってみたい人にとって、一つの現実的な選択肢にはできると思っています。
プログラミングを学びたいけれど、どこから始めればいいか分からない
もう一つ、この教材を届けたいのが、プログラミングを学んでみたい人です。
本屋へ行けば、プログラミングの入門書はたくさんあります。動画教材もありますし、オンラインスクールや通学型のスクールもあります。学ぶ方法が少ないわけではありません。むしろ多すぎて、最初にどれを選べばいいのか分からなくなることがあります。
HTMLから始めるのか、JavaScriptを覚えるのか、先に環境構築をするのか。Next.jsという名前を見つけても、その前にReactを勉強したほうがいいと書かれていて、さらに調べるとTypeScriptも出てくる。知らない言葉を調べているうちに、サイトを作りたかったはずなのに、何を勉強するかを決めるだけで疲れてしまいます。
スクールへ通えば、順番に教えてもらえる安心感があります。ただ、受講料だけでなく、決まった時間を確保することも必要です。仕事をしながら学ぶ人にとっては、お金と時間の両方を用意することが難しく、興味はあっても申し込むところまで進めないことがあります。
独学もスクールも、それぞれに良さがあります。基礎から体系的に学びたいなら、本や講座のほうが向いている部分も多いです。この教材だけでプログラミングのすべてを理解できる、と言うつもりもありません。
それでも僕は、プログラミングを覚える入口として、まず実際に触ってみることはかなり大事だと思っています。
説明を読んでいるだけでは分からなかったことが、自分のサイトを動かしたあとに見ると急につながることがあります。トップページに表示されている文章が、どのファイルに書かれているのか。ページが変わっても同じヘッダーが出てくるのはなぜか。画像の場所はどこで決まり、ボタンを押したときの移動先はどこに書かれているのか。
最初から自分で全部書けなくても、動いているものとソースコードを見比べると、「この処理が、画面のここにつながっているのか」が少しずつ見えてきます。知らない言葉が出てきても、目の前に自分で作ったサイトがあるので、何のために使われている言葉なのかを想像しやすくなります。
この教材では、自作した主要なソースコードに日本語の教材コメントを入れています。
ファイル名、概要、作成日や更新日、そのファイルが担当している役割、ほかのファイルとの関係。関数やコンポーネントについても、何を受け取り、何を返し、画面のどこで使われるのかを確認できるようにしています。難しいコードを一行ずつ暗記するためではなく、まず全体の流れを追えるようにするためです。
プログラミングを学ぶ近道が一つだけあるとは思いません。ただ、実際に作った経験は、そのあとに本を読んだり、動画を見たりするときの理解を助けてくれます。「これは見たことがある」「自分のサイトにも似た処理があった」と思えるだけで、まったく知らない状態から読むより、ずいぶん入りやすくなります。
僕は、結局のところ、経験に勝る教材はないと思っています。実際にサイトが作られていく流れを肌で感じ、最後に完成したものを見たときの達成感は、次も少し触ってみようと思える理由になります。最初のサイトを完成させることが、そのまま次の学びの入口になる。今回の教材には、そういう役割も持たせました。
この環境で、公開まで進めます
商品名は「Halo | CODEX × Next.js Webサイト制作教材」です。
教材の本編は、00_最初に読んでください.htmlという一つのHTMLにまとめています。このHTMLを開き、現在のPhaseにあるプロンプトをコピーしてCodexへ貼り付ければ、質問、制作、確認、公開まで順番に進められます。
利用する主な環境
Windows 11またはmacOSのパソコン
インターネット接続
Node.js 22系・npm・Git
Microsoft Excel（付属資料を使う場合に推奨）
OpenAIはPlus以上のプランを推奨しています。Pro限定ではありませんが、制作中はCodexを何度も使うため、利用量によって制限に達する場合があります。制作時点ではGPT-5.6 Sol、推論レベル「高」を推奨していますが、利用可能なモデルやプランは変わる可能性があるため、購入前にOpenAI公式のCodexプラン案内も確認してください。
実際の動作確認には、macOS Monterey 12.7.6、Intel Mac、メモリ16GBの環境も使用しています。各サービスが対応するOSや推奨環境は変更される場合があるため、購入前に公式情報をご確認ください。
制作の流れ
制作は、P0からP9までの10段階です。
P0｜環境準備：必要なソフトやファイルを確認し、テンプレートを起動します
P1｜サイト要件設計：目的、ターゲット、必要なページを決めます
P2｜理解とルール：文章、素材、更新など、サイト全体の方針を決めます
P3｜デザイン：色、文字、余白、写真、動きなどを決めます
P4｜トップページ：サイトの中心となるページを作ります
P5｜追加ページ：会社概要、プロフィール、サービス紹介などを追加します
P6｜お知らせ・ブログ：必要な場合だけ作成し、不要ならスキップできます
P7｜全体チェック：デザインの微調整後、リンクやスマートフォン表示を点検します
P8｜公開前監査：品質、安全性、秘密情報、ライセンスなどを確認します
P9｜公開：GitHubとVercelを使い、実際のURLを公開します
各Phaseでは、次の流れを繰り返します。
HTMLから専用プロンプトをコピーする
Codexへ貼り付け、質問に答える
分からない項目は「おまかせ」と伝える
Codexが設計・実装・検査を行う
確認用URLをPCとスマートフォンで見る
気になるところを修正し、問題がなければ承認する
承認するまでは、Codexが勝手に次のPhaseへ進まないようにしています。難しいコードを自分で書くのではなく、表示されたものを見ながら、色、文章、写真、ページ構成などを決めていきます。
ここまで進めるために、事前のプログラミング知識は必要ありません。
実際に、このようなサイトが作れます
教材の流れで制作したサイトの一例です。
全員が同じデザインになるわけではありません。企業・店舗・サービス紹介、ポートフォリオ、個人サイト、LP、採用サイト、商品紹介、お知らせ・ブログの中から目的を選び、Codexからの質問に答えながら、自分の文章、写真、色、雰囲気を反映できます。
さらにデザインやページ構成を作り込めば、僕が運営しているHalo Artifactsのように、情報量が多く、動きのあるサイトを目指すこともできます。
ただし、本教材に含まれるのはWebサイトの制作と公開までです。問い合わせ送信、ログイン、予約、管理画面、決済、EC、データベース、外部CMS、独自AIなどの機能は含まれていません。Halo Artifactsと同程度という表現は、見た目やページ構成の作り込みを指し、決済や管理機能まで同じものを作れるという意味ではありません。
サイトを作りながら、ソースコードも学べます
自作した主要なソースコードには、日本語の教材コメントを入れています。
そのファイルは何のためにあるのか
どのような処理をしているのか
ほかのファイルとどうつながっているのか
関数やコンポーネントが何を受け取り、何を表示するのか
完成した画面とコードを見比べることで、Webサイトがどのように組み立てられているのかを確認できます。すべてを最初から理解する必要はありません。まずは気になったページを開き、画面の文字がどこに書かれているかを探すところから始められます。
教材に含まれるもの
Next.jsサイト制作用テンプレート
P0からP9までをまとめた教材HTML
各Phaseのプロンプト原本
制作ルールと関連ドキュメント
利用条件と第三者ライセンス資料
回答、素材、スクリーンショットを整理する付属Excel教材
テンプレートは、ソースコードの品質、秘密情報、第三者ライセンス、配布禁止ファイル、PC・スマートフォン表示、リンクやボタンなどを検査しています。配布ZIPも別のフォルダへ展開し、インストール、ビルド、ブラウザ表示まで再確認しています。
AIを利用するため、毎回まったく同じ結果になるとは限りません。問題が見つかった場合は無理に先へ進まず、Codexが停止して状況を案内し、修正後に再確認する流れにしています。
完成したサイトは、商用利用や顧客への納品もできます
教材を使って完成させたサイトは、自分の活動、事業、副業などに利用できます。顧客向けのサイトを制作し、納品することも可能です。
ただし、教材、テンプレート、プロンプト、Excel資料、配布ZIPそのものの共有、転載、再配布、再販売は禁止しています。顧客へ納品する場合は、教材や秘密情報を除いた別のコピーを使用します。
最初の30名は9,800円で販売します
「Halo | CODEX × Next.js Webサイト制作教材」は、
最初の30名限定で9,800円、その後は15,800円での販売を予定しています。
この教材だけで急にプログラマーになれるとは言いませんし、何も確認しなくても理想のサイトが自動で完成するわけでもありません。それでも、自分が考えたサイトがブラウザに表示され、PCとスマートフォンで確認でき、最後にURLを誰かへ渡せるところまで進めた経験は、次に何かを作るときの距離をかなり縮めてくれると思います。
この教材は、公開して終わりではありません
今後、Webサイト制作をさらに広げていくためのメンバーシップを開設する予定です。
メンバーシップでは、会員向けに拡張プロンプトや追加教材を提供していきたいと考えています。今回の教材で一つのサイトを作り、公開したあとに、「もっと機能を追加したい」「自分の活動に合わせて育てたい」と思ったとき、その先へ進める場所にする予定です。
管理画面、より本格的なブログ運用、問い合わせ、予約、決済、会員向けページ、ポータルサイトなど、Webサイトにはまだ多くの拡張の可能性があります。最初から全部を入れると初心者向けの範囲を超えてしまうため、まずは本教材で制作と公開までを経験し、その後に必要な機能を一つずつ追加できる形を考えています。
提供する機能や時期は、安全性や外部サービスの仕様も確認しながら順次決めていくため、現時点ですべてを約束するものではありません。それでも、この教材は完成したZIPを一度渡して終わるものではなく、利用する人と一緒に成長していける教材にしたいと思っています。
メンバーシップの公開までは、もうしばらくお待ちください。準備が整い次第、noteやHalo Artifactsでお知らせします。
サイトを作りたいけれど、外注する金額にはまだ手が伸びない。プログラミングを学びたいけれど、何から始めればよいのか分からない。AIでコードを作れることは知っているけれど、どう頼み、どこを確認すればよいのか分からない。
この教材は、そういうところで止まっていた人のために作りました。
ITをすべて理解してから始めなくても、作りながら分かっていくことはあります。まずはサイトが作られていく流れを実際に見て、最後に自分のサイトが完成したときの達成感を味わってもらえたらうれしいです。
最後まで読んでくださって、ありがとうございました。
いいなと思ったら応援しよう！
いつも読んでくださってありがとうございます。
いただいたチップは、これからの活動や新しいツールづくりに大切に使わせていただきます😊