ChatGPT 向け Web デザインプロンプト
まず Web サイトの構想を明確な要件にし、現在のツールで作成できる成果物を求めます。入力、出力ファイル、ブラウザー確認、実装への引き継ぎをそれぞれ確認しましょう。
2026 年 10 月 9 日確認。機能はアカウントやバージョンにより異なるため、リンク先の公式資料をご確認ください。
動くページを出発点に
動く HTML ページをプレビューし、ソースと付属プロンプトを使ってコーディングエージェントで手法を試せます。
Skills は引き続きログイン不要で無料閲覧・コピーできます。テンプレートのプレビューは公開されています。ソースと付属プロンプトのダウンロードにはアカウントと対象の購入権限またはプランが必要です。 ソースの利用条件と料金
Web サイトの要件を伝える
対象者、目的、セクション、提供する文章、主な行動を指定します。視覚的な方向は少数の具体的な選択で説明します。商品情報、価格、既存リンクを守り、不足情報は質問として挙げてもらい、架空の評価や機能を追加させません。
ファイルと利用可能なプレビューを確認する
ファイル名と開き方を求めます。OpenAI は、対応する環境でのファイルビューアー内 HTML プレビューを説明しています。コードだけが返った場合は保存してローカルで開きます。Sites は別の制作・ホスティングの流れで、プロンプトだけでは公開されません。
見えている問題を一つ修正する
画面幅、対象のセクション、期待する結果を伝えます。例えば 320 ピクセルで横にはみ出すメモだけを修正し、デスクトップの文字やリンクは維持します。変更後のファイルを開きましょう。CSS の説明だけではブラウザー検証になりません。
ファイルと制約を実装へ渡す
実際のファイル、要件、素材一覧、未解決事項をコーディングエージェントに渡します。既存フレームワークとルートを調べ、認証、価格、バックエンドの契約を守って実装させます。実プロジェクトでリンク、モバイル表示、キーボード操作を確認します。
書き換えて使えるオリジナルの練習
Neruve が作成した英語の入力例です。実行結果や有料テンプレートのプロンプトではありません。架空の情報を実際の情報に置き換えてください。
ChatGPT：Web サイトの要件
Create an original website brief for Fieldnote, a fictional research-notes app.
Audience: small product teams. Explain collect → compare → decide.
Output: one self-contained HTML/CSS file if your current tools can create files;
otherwise provide complete code and explain how to open it locally.
Use warm paper, ink text and one clearly fictional research-note specimen.
Sections: introduction, specimen, three-step workflow and a closing workflow link.
The primary action is “Explore the workflow” and targets #workflow.
Include semantic headings, a skip link, visible focus and reduced motion.
Support 1280, 390 and 320 px. Do not add signup, prices, customer logos or metrics.
List the output files and the checks actually performed.ChatGPT：モバイルの問題を一つ修正
Review the current Fieldnote output. At 320 px, the note specimen extends
beyond the viewport. First identify the specific element and sizing rule.
Change only the specimen layout; preserve desktop typography, all copy and links.
Use wrapping or responsive sizing instead of hiding content or clipping the page.
Return the changed file, then repeat 320, 390 and 1280 px checks.
If you cannot open the result in a browser, mark those checks as not performed.
Do not describe proposed CSS as a verified fix.実際の演習：CodexでFieldnoteを生成
Fieldnote では独自の入力、未編集の Codex HTML、デスクトップとモバイルの確認記録を公開しています。frontend-design Skill は使用していません。ChatGPT や Claude Design の実測ではありません。
実際の演習：CodexでFieldnoteを生成よくある質問
このプロンプトで公開済みのサイトができますか？
有効なツールと実際に行った作業によります。要件、生成ファイル、プレビュー、ホスティング済みサイトは別の成果物です。ここでの例は ChatGPT で未実行です。リンク先の Fieldnote は独立した Codex 実行記録です。
デザインと付属プロンプトを見る
Neruve の公開カタログではサイトのデザイン、利用可能な対応プロンプト、Skills ディレクトリを提供しています。操作可能なプレビューにログインは不要です。対応するプロンプトにはアイテムとプランの利用条件が適用されます。このワークフローでは自分の開発ツールを使うため、公開された Neruve サイト生成機能は必要ありません。
公式資料
外部ツールやスキルは各作者に帰属します。参照リンクは提携や利用権の付与を意味しません。