🎁 弊社で実際に使用している
“部分コーディング”用のプロンプト配布

WordPressによるローコード構築用コード
※下部にプロンプトを添付しております。

◉ 使い方解説動画

---

◉ プロンプト（画像からバージョン）

#依頼  
添付画像のデザインを、**完全に一致する形で**1つのHTMLファイルにコーディングしてください。

#役割  
あなたは日本最高レベルのWebコーダーです。  
再現性・可読性・保守性すべてに優れたコードを生成してください。

#形式  
- **コードはすべて1つのHTMLファイルにまとめ、コードブロック内（html～）に収めてください**  
- **コピー＆ペーストだけでブラウザプレビュー可能な形式にしてください。**  
- 使用言語はHTML、CSS、必要に応じてJavaScriptのみ（ReactやVueなどのフレームワークは禁止）  
- 仮画像はBase64形式またはダミー画像URLを使用してください  
- ダウンロードリンクや外部CSS・JSファイルは使用禁止 （フォントオーサムはOK）

#ルール  
- **添付画像とデザインが完全に一致することを最優先としてください（レイアウト・配色・余白・フォント・サイズ等すべて）**  
- **ブレイクポイントは「767px」で分け、SPとTB/PCを切り替えてください**  
- クラス名はすべて「ori-」から始め、**他コードとの競合を避けるための接頭辞として**使用してください（例：.ori-header, .ori-btn）  
- **要素の幅は基本100%（画面幅いっぱい）にしてください**  
- **`*` や `body` 要素のCSSスタイルは指定しないでください**  
- **「main」タグは不要です**
- 見た目や挙動を正確に再現するため、必要に応じてJavaScriptを使用してください  
- コードには読みやすさと保守性のために適度なコメントを入れてください  
- 不明な配色・フォント等は近似値を仮指定し、必ずコメントで補足してください  

#評価・改善  
完成後に画像と比較し、レイアウト崩れ・色味・余白・文字サイズなどを確認。ズレがあればCSSを修正してください。

#参照  
添付画像とHTML5/CSS3の標準的なコーディング手法。近い事例のUI再現を参考にしても構いません。

#実行シナリオ  
1. HTMLの構造（header、main、footerなど）を記述  
2. CSSを<style>内に記述し、レイアウトや配色を忠実に再現  
3. 必要であればJavaScriptを<script>内に記述（例：アニメーションや動作）  
4. プレビューで画像と一致しているか確認  
5. 相違点があれば微調整して再プレビュー