コミック調HTMLジェネレーター V1.0
想定用途
- 技術文書や説明文を漫画風に見やすいHTMLページに変換したい
- カラフルで楽しいデザインでコンテンツを魅力的に表現したい
- パネル式レイアウトでセクションを明確に区切りたい
プロンプト本文
text
# コミック調HTMLジェネレーター プロンプト V1.0
## 指示
以下の文章を、漫画風・コミック調のスタイルでHTMLページに変換してください。楽しく読みやすいデザインで技術文書や説明文を魅力的に表現してください。
## デザイン要件
### 🎨 全体的なスタイル
- **コミック/漫画風** のデザイン
- **カラフルなグラデーション** 背景
- **パネル式レイアウト** で各セクションを区切り
- **吹き出し風** の重要なボックス
- **手書き風** のフォント使用推奨
### 📦 パネルデザイン
- 各セクションを **コミックパネル** として表現
- **太い境界線** (4px以上) と **ドロップシャドウ**
- **カラフルなボーダー** (グラデーション推奨)
- **角丸** デザインで親しみやすさを演出
### 💬 テキストエリア
- **吹き出し風ボックス** で重要な情報をハイライト
- **キーワード** や **コマンド** は目立つスタイル
- **段階的な説明** には番号や絵文字を活用
- **警告** や **成功** メッセージには専用ボックス
### 🌈 カラーパレット
- **メインカラー**: #ff6b6b (赤系)
- **アクセント**: #4ecdc4 (青緑系)
- **サブカラー**: #45b7d1 (青系), #96ceb4 (緑系)
- **グラデーション**: 2色以上の組み合わせ
- **コードブロック**: 黒背景 + 緑文字
### ⚡ インタラクティブ要素
- **ホバー効果** で要素に動きを追加
- **アニメーション** でタイトルを目立たせる
- **レスポンシブ** デザインでモバイル対応
- **絵文字** を積極的に使用
### 📱 レイアウト構造
1. **ヒーローセクション**: 大きなタイトル + サブタイトル
2. **目次**: 絵文字付きの見やすいナビゲーション
3. **コンテンツパネル**: セクションごとにパネル分け
4. **コードブロック**: ターミナル風のスタイル
5. **まとめ**: 重要なポイントを強調
### 🔧 技術的要件
- **HTML5** + **CSS3** のみ使用
- **Google Fonts** の日本語フォント (Noto Sans JP推奨)
- **Pure CSS** アニメーション
---
## 変換する文章
[ここにHTML変換したい文章やテキストを入力]使い方
- プロンプトをコピーしてAIチャットツールに貼り付け
- 変換する文章部分にHTML化したいテキストを入力
- 生成されたHTMLをブラウザで表示・保存
入力例
## 変換する文章
### Python入門
Pythonは人気のあるプログラミング言語です。
簡単なコードで多くのことができます。
print("Hello, World!")
始めましょう！出力例
カラフルなコミックパネル、吹き出し風ボックス、手書き風フォントを使用した楽しいデザインのHTMLページが生成されます。
注意点
- V2よりもシンプルな構成です
- パネル式レイアウトでセクションが明確に区切られます
- カラフルなグラデーション背景で視覚的に魅力的です