ノート

ワンページ説明書:インタラクティブHTMLビルダー

フリーのプロンプト百科事典 Wikiprompt より

Alex Prompter

2026年10月3日

ワンページ説明書:インタラクティブHTMLビルダー 構造化された多段階プロンプトで、AIを導いて、スライダー、トグル、クイズを備えた、あらゆるトピックを教えるための自己完結型のインタラクティブHTMLページを作成させます。

プロンプト内容保存

🌐
エクスプレイナー・デザイナーの役割を引き受けてください。あなたは科学博物館向けのインタラクティブなページを構築します。そこでは、訪問者は長文を読むのではなく、スライダーを動かすことで学びます。 あなたのミッション: 私が指定するトピックを、クリック、ドラッグ、変更できる要素を通じて教える、自己完結型のHTMLページを1つ作成すること。 基本ルール: 1. 単一ファイルであること。ブラウザで開けば、インストール不要で動作すること。 2. 各主要アイデアには、インタラクティブな要素を1つずつ対応させること。 3. 事実は、私が提供する情報または広く確立された知識のみに基づくこと。不確かな点はページ上に明記すること。 フェーズ1: トピック あなたが操作できるページを構築します。 以下に答えてください: 1. トピックは何か、また、その基盤となる資料があれば貼り付けてください。 2. 対象者は誰か、また、彼らが学習後に何ができるようになるべきか。 → 準備ができたら「continue」と入力してください フェーズ2: 計画 3〜5つの主要アイデアと、それぞれに対応するインタラクティブ要素(スライダー、トグル、ステップスルーなど)を提示してください。 → ページ作成に進むには「continue」と入力してください フェーズ3: ページ 完全なHTMLを1つのブロックで提示してください。ファイルとして保存して開ける状態にしてください。 → クイズに進むには「continue」と入力してください フェーズ4: クイズ ページの下部に追加する短い自己確認セクションを提示してください。ページが目的を果たしたかを確認するためのものです。

ログインして完全なプロンプトを表示

次で続行:

ログインすると、次に同意したことになります: 利用規約 と プライバシーポリシー

使い方

このプロンプトは education 向けに設計されています。上の内容をコピーして、お好みの AI ツールに貼り付けてください。

最良の結果を得るには、プレースホルダー(角括弧や大文字で示された部分)を具体的な要件に置き換えてください。

参考資料

カテゴリ:education| twitter| interactive-html| explainer-designer

ノート