「Webサイトを作りたい。でも、コードは書けない」 本教材は、CODEXからの質問に答えながら、サイト設計・デザイン・実装・確認・公開まで進められるローコードWeb制作教材です。 作成されたソースには学習用の日本語コメントが入り、完成後はコードを読みながらプログラミングの理解も深められます。
プログラミング未経験から、Webサイトを公開まで。
本教材は、CODEXの質問に答えながら、Next.jsでWebサイトを制作・公開するローコードWeb制作教材です。
プログラムを一から書くのではなく、希望するサイトの内容やデザインをCODEXへ伝え、表示された画面を確認しながら進めます。
技術的な判断やコマンド操作は原則としてCODEXが担当するため、プログラミング未経験の方でも、自分のペースでWebサイト制作へ挑戦できます。
初回30名限定価格：9,800円（税込）
※限定販売終了後は15,800円（税込）を予定しています。
この教材を作った理由や、未経験からWebサイトを公開するまでの流れをnoteでもご紹介しています。ご購入前の参考として、ぜひあわせてご覧ください。
「自分のサイトを作ってみたい」で止まっていた人へ。 Codexと公開まで進める教材を作りました｜sb_halo自分のWebサイトを作りながら、ITを学んでみませんか。 プログラミングをしたことがなくても、Codexと一緒なら、サイトの設計やデザインから実装、公開まで一つずつ進められます。今回作ったのは、質問に答えながら自分だけのWebサイトを完成させ、その過程でソースコードの仕組みも学べるWebサイト制作教材です。 CODEX × Next.js Webサイト制作教材 【初回30名限定】 プログラミング未経験から、Webサイトを公開まで。 halo-artifacts.com Haloです。 今日も読みに来てくださって、ありがとうございます。 ここしばらく、僕外部リンク、新しいタブで開きます質問に答えながら制作できます
最初に、教材本編となる00_最初に読んでください.htmlを開きます。
HTML内には、環境準備から公開までの手順と、各Phaseで使用するプロンプトが収録されています。
基本的な進め方は次のとおりです。
教材HTMLで現在のPhaseを確認する
専用プロンプトをCODEXへ貼り付ける
CODEXからの質問に答える
CODEXがサイトを設計・実装する
表示されたURLをブラウザで確認する
修正を依頼する、または承認する
次のPhaseへ進む
一度にすべてを作るのではなく、段階ごとに確認しながら進めるため、途中でデザインや文章を調整できます。
P0〜P9で公開まで案内
教材は、次の10段階で構成されています。
P0｜環境準備
必要な開発環境を確認し、テンプレートを起動します。P1｜サイト要件設計
サイトの目的、対象者、ページ構成、必要な情報を決めます。P2｜理解とルール
文体、表現、制作ルール、禁止事項などを整理します。P3｜デザイン
色、文字、余白、雰囲気、動きなどを決めます。P4｜トップページ
トップページを実装し、実際の画面で確認します。P5｜追加ページ
P1で決めた構成に沿って必要なページを制作します。P6｜ブログ
必要な場合のみ、ファイル管理型のブログを追加します。P7｜全体チェック
デザインの微調整後、リンクや表示を総点検します。P8｜公開前監査
品質、秘密情報、ライセンス、公開前の安全性を確認します。P9｜公開
GitHubとVercelを使用してWebサイトを公開します。
各Phaseでは、実際のサイトをPC・スマートフォンの両方で確認し、購入者が承認するまで次へ進まない設計です。
ソースコード自体も学習教材に
自作ソースには、次のような内容を説明する日本語の教材コメントが入ります。
このファイルは何を担当しているのか
どのような処理を行っているのか
なぜこの処理が必要なのか
ほかのファイルとどう関係しているのか
変更すると、どこへ影響するのか
サイトを完成させるだけでなく、作成されたソースコードを読みながら「何をしているプログラムなのか」を確認できます。
Webサイト制作とあわせて、Next.js・TypeScript・コンポーネント構成などを学ぶためのプログラミング教育資料としても活用できます。
制作できるサイト
本教材では、次のようなWebサイトを制作できます。
企業・店舗・サービス紹介サイト
ポートフォリオ
個人サイト
ランディングページ
採用サイト
商品紹介サイト
お知らせ・ブログ
住所、電話番号、メールアドレス、営業時間、SNSリンクなどの静的な情報も掲載できます。
商品内容
P0〜P9一体型HTML教材
Next.js制作テンプレート
P0〜P9専用プロンプト
日本語の教材コメント入りソースコード
付属Excelワークブック
README・制作方針資料
利用条件
第三者ライセンス資料
GitHub・Vercel公開手順
Excelは、回答や素材、決定事項を整理するための付属資料です。制作手順とプロンプトはHTML教材だけでも確認できます。
テンプレートバージョン：v0.7
Product ID：halo.codex-nextjs-template
配布元：Halo
制作イメージ
本教材を使用したサイト制作例はこちらです。
※制作例は、本教材を使って作成できるサイトの一例です。
※制作例と同じデザインを配布する商品ではありません。
※完成するサイトは、回答内容、素材、希望するデザイン、利用環境によって異なります。
必要な環境
本教材は、パソコンでの利用を前提としています。
Windows 11、またはmacOS
メモリ8GB以上を推奨
空き容量5GB以上を推奨
安定したインターネット接続
Visual Studio Code
OpenAI（ChatGPT・CODEX）
Node.js 22・npm
Git
GitHub
Vercel
一般的なWebブラウザ
Microsoft Excelを推奨
動作確認環境：macOS Monterey 12.7.6／Intel Mac／メモリ16GB
上記はHaloによる動作確認実績であり、各ソフトウェアによる公式サポートを保証するものではありません。ご購入前に、使用するサービスの最新の対応環境もご確認ください。
CODEXの推奨設定
本教材では、安定したヒアリングと実装品質を得るため、次の環境を推奨しています。
ChatGPT Plus以上
GPT-5.6 Sol
推論強度「高」
ChatGPT Pro限定の商品ではありません。
ほかのモデルや低い推論強度でも実行できる場合がありますが、ヒアリング、設計判断、ソースコード、検査内容が簡略化される可能性があります。
OpenAIの利用状況や選択するモデルによって、利用上限に達する場合があります。その場合は、利用可能になるまで作業を中断する必要があります。
外部サービスの公式情報
各サービスの料金、利用条件、対応環境、仕様は変更される場合があります。購入前および利用時に、最新の公式情報をご確認ください。
各サービスのアカウント、利用料金、通信料金、独自ドメインなどの費用は、本商品の販売価格に含まれません。
無料プランを利用できるサービスもありますが、無料枠の内容や提供継続を保証するものではありません。
利用できる範囲
購入者は、本教材を使用して作成した完成サイトを、次の用途で利用できます。
自分のWebサイトとして公開する
事業や副業で商用利用する
顧客向けサイトを制作する
完成サイトを顧客へ納品する
作成した文章やデザインを変更する
顧客へ納品する場合は、教材本体、プロンプト、付属Excel、マスターテンプレート、秘密情報などを除いた、顧客サイト専用のコピーを使用します。
禁止事項
次の行為は禁止しています。
教材の共有、転載は禁止転載、再配布、再販売
テンプレートや配布ZIPの共有、再配布、再販売
プロンプトや付属Excelの共有、公開、販売
教材を第三者が利用できる状態にすること
テンプレート由来のGitリポジトリを公開すること
本教材を自作教材として販売すること
完成サイトの公開・商用利用・顧客納品を禁止するものではありません。
本教材に含まれない機能
次の機能は、本編の対象外です。
問い合わせフォームからのメール送信
ログイン・会員登録
予約機能
決済機能
EC機能
データベース
管理画面
外部CMS
独自のAI機能
個別の業務システム開発
今後、メンバーシップ向けの拡張教材を予定していますが、提供時期、内容、価格、継続的な提供を保証するものではありません。
提供形式
本商品は、購入後にダウンロードして使用するデジタル商品です。冊子や記録媒体などの物理商品は発送されません。
主なファイル形式は次のとおりです。
ZIP
HTML
Markdown
XLSX
Next.js・TypeScriptソースコード
購入、決済、ダウンロードは、購入ボタンから移動するBASE商品ページで行います。具体的な支払い方法、提供時期、返品・返金条件は、購入先の商品ページおよび利用条件をご確認ください。
サポートと更新
配布ファイルの不足、破損、ダウンロードに関する問題は、販売者へご連絡ください。
環境準備や各Phaseの進め方は、教材とCODEXが案内します。
次の内容は通常のサポートに含まれません。
個別のWebサイト制作代行
希望するデザインの無制限な修正
本編対象外機能の実装
購入者固有の環境に対する継続的な技術対応
外部サービスの障害や仕様変更への保証
無期限または無制限のサポート
将来のアップデート提供保証
購入前にご確認ください
本商品は、ボタン一つで完成するWebサイト自動生成サービスではありません。
CODEXとの質疑応答、文章や画像などの素材準備、画面確認、修正内容の判断、各Phaseの承認は購入者が行います。
AIによる生成結果にはばらつきがあり、同じプロンプトでも必ず同じ結果になるとは限りません。完成度や制作時間を保証する商品ではありません。
購入前に、商品内容、必要な環境、利用条件、外部サービスの条件、提供形式をご確認ください。