Mystic Library

日本語

English

日本語

English

テーマ

コミック調HTMLジェネレーター プロンプト V1.0 ​

コミック調HTMLジェネレーター プロンプト V1.0 爆誕

プロンプト本文 ​

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** アニメーション
- **Flexbox** や **Grid** でレイアウト
- **max-width: 1000px** でコンテナ幅制限

### 📝 コンテンツ変換ルール
- **見出し** → カラフルなタイトル + 絵文字
- **段落** → 読みやすい行間でスタイリング
- **リスト** → 絵文字付きまたは特別なスタイル
- **コード** → ターミナル風の黒背景ボックス
- **重要な情報** → 吹き出し風ボックス
- **警告/注意** → 専用の警告ボックス
- **成功/完了** → 専用の成功ボックス

## 🎯 出力フォーマット
完全なHTMLファイルとして出力し、以下を含めてください:
- `<!DOCTYPE html>` 宣言
- 適切な `<head>` セクション (meta, title, style)
- レスポンシブデザイン対応
- 絵文字とアイコンの積極的使用
- 楽しく読みやすいレイアウト

## 📖 入力文章
以下の文章をコミック調HTMLに変換してください:

---

[ここに変換したい文章を貼り付けてください]

---

## 💡 追加指示
- 元の文章の **構造と内容** は保持する
- **技術的な正確性** は維持する
- **視覚的な魅力** を最大化する
- **ユーザビリティ** を重視する
- **楽しい学習体験** を提供する

## 🏗️ HTMLテンプレート例

以下のような構造とスタイルでHTMLを生成してください:

ソース文脈 ​

投稿メモ ​

text
コミック調HTMLジェネレーター プロンプト V1.0 爆誕
これはコレで見やすい気がする!!!

出典 ​