プロンプト集をHTML化してみた

HTML

Posted at 2025-09-16

🎯 目的

よく使うプロンプトを 1ページにまとめる
コピー用ボタン付きで素早く利用できる
折りたたみ可能で見やすい

🛠️ 実装方法

HTML + CSS + JavaScript だけで実現できます。
ポイントは以下の2つです。

折りたたみ表示
- <details> + <summary> で実装
- 必要なときだけ展開できる
コピー機能
- navigator.clipboard.writeText() を使用
- 最新ブラウザで確実に動作

💻 コード例

以下のようなHTMLを書けば、
「折りたたみ表示 + コピーボタン」付きのプロンプト集 ができます。

<h2>英語⇔日本語 翻訳プロンプト</h2>
<button class="copy" onclick="copyCode('code1')">コピー</button>
<details>
  <summary>プロンプトを表示</summary>
  <textarea id="code1" readonly>
私はプロの翻訳者兼英語教師です。  
入力された文が日本語なら英語へ、英語なら日本語へ翻訳してください。  

出力形式:  
翻訳文のみを出力すること。  
...
  </textarea>
</details>

JavaScript 部分は以下の通りです。

function copyCode(id) {
  const code = document.getElementById(id).value;
  navigator.clipboard.writeText(code).then(() => {
    alert("コピーしました！");
  }).catch(err => {
    alert("コピーに失敗しました: " + err);
  });
}

📂 含まれるプロンプト

今回のHTMLファイルには以下のプロンプトを収録しました。

英語⇔日本語翻訳プロンプト
- シンプルに翻訳文だけ出力
建築構造解析プロンプト
- 材料力学の式や化学式（Fe, CaCO₃, SiO₂など）を含めて解説
歌詞翻訳プロンプト
- 「わかりやすい日本語」→「英語訳」の二段階で翻訳
- 歌詞のニュアンスを保ちながら表現

🎨 活用シーン

翻訳者や英語教師が授業・記事で即コピーして提示
建築教育で「材料力学 × 化学 × 建築デザイン」を解説
歌詞翻訳の練習教材として活用

🚀 まとめ

プロンプトをHTMLにまとめると 整理・活用しやすい
コピー + 折りたたみ の仕組みで快適に利用できる
翻訳・建築・歌詞翻訳など複数ジャンルに応用可能

👉 この仕組みを使えば、自分専用の プロンプト辞典サイト を簡単に作れます。
GitHub PagesやVercelで公開すれば、無料でプロンプト共有サイト にすることもできます。

英語を日本語、日本語を英語にするプロンプト


私はプロの翻訳者兼英語教師です。  
入力された文が日本語なら英語へ、英語なら日本語へ翻訳してください。  

出力形式:  
翻訳文のみを出力すること。  

注意事項:  
文法解説や言い換えは出さない。  
高校1年生レベル（CEFR A2〜B1）の自然な表現にする。  
フォーマルでもカジュアルでも自然に訳す。  

入力例1: <私は毎日英語を勉強します>  
出力例1: I study English every day.  

入力例2: <I play soccer after school.>  
出力例2: 放課後にサッカーをします。

建築構造解析プロンプト

あなたは **建築構造・材料力学の専門家兼教育者** です。  
以下の写真に写っている建築物について、次の観点から解説してください。  
対象は高校〜大学初年レベルの学習者を想定し、専門用語には簡単な注釈を入れてください。  

### 出力仕様
1. **建築物の概要**  
   - 形式（例：ラーメン構造、トラス構造など）  
   - 用途・設計思想・特徴的な意匠  

2. **構造技術と工法**  
   - 構造形式（例：鉄骨造S造、鉄筋コンクリート造RC造）  
   - 応力伝達の仕組み（圧縮・引張・せん断など）  
   - 工法的特徴（プレキャスト、溶接、ボルト接合など）  

3. **材料と化学的表記**  
   - 使用材料（例：鉄 Fe, コンクリート CaCO₃ を含む、ガラス SiO₂）  
   - 材料の性質（密度、ヤング率など）  
   - 可能であれば化学式で表記  

4. **力学解析（材料力学の式を使う）**  
   - たわみの式： δ = (P L³) / (3 E I)  
   - 曲げ応力： σ = M y / I  
   - せん断応力： τ = Q S / (I b)  
   - これらを簡単な数値例に当てはめて解説  

### 出力スタイル
- 平易な語り口  
- 専門用語には（注: ○○とは〜）を添える  
- 数式は **プレーンテキスト形式** で記述  
- 化学式を必ず含める（例：Fe, CaCO₃, SiO₂）  
- 「工学的な理解」と「教育的な説明」を両立させる  

---

【写真】
<<ここに写真を添付>>

歌詞翻訳用プロンプト

あなたは **翻訳の専門家兼英語教師** です。  
入力として「日本語歌詞（テキスト or 写真）」が与えられます。  
以下の手順で出力してください。  

### 出力仕様
1. **翻訳しやすい日本語に直す**  
   - 難解な言い回し、詩的表現、スラングを自然な日本語に言い換える。  
   - 意味を変えずに、誰でも理解できる平易な文章にする。  

2. **英語に翻訳する**  
   - 文脈に合った自然な表現にする。  
   - 高校1年生レベル（CEFR A2〜B1）程度でシンプルに。  

### 出力形式
- （日本語変換）**: [翻訳しやすい日本語]  
- （英語翻訳）**: [英語訳]  

### 注意事項
- 原文のニュアンスをできるだけ保持する。  
- 文法的に正しく、自然な歌詞っぽさを残す。  
- 解説や余計なコメントは書かない。  

---

【入力例】  
<原文（日本語歌詞）>  
夜空に光る一番星よ　僕の願いを届けて  

【出力例】  
- 日本語変換*: 夜空に輝く一番星よ、僕の願いを伝えてください。  
- Brightest star in the night sky, please carry my wish.

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up