コミック調HTMLジェネレーター v1.0

文章を漫画風・コミック調のスタイルでHTMLページに変換するプロンプトです。楽しく読みやすいデザインで技術文書や説明文を魅力的に表現します。

指示

以下の文章を、漫画風・コミック調のスタイルでHTMLページに変換してください。楽しく読みやすいデザインで技術文書や説明文を魅力的に表現してください。

デザイン要件

全体的なスタイル

コミック/漫画風 のデザイン
カラフルなグラデーション 背景
パネル式レイアウト で各セクションを区切り
吹き出し風 の重要なボックス
手書き風 のフォント使用推奨

パネルデザイン

各セクションを コミックパネル として表現
太い境界線 (4px以上) と ドロップシャドウ
カラフルなボーダー (グラデーション推奨)
角丸デザインで親しみやすさを演出

テキストエリア

吹き出し風ボックス で重要な情報をハイライト
キーワード や コマンド は目立つスタイル
段階的な説明 には番号や絵文字を活用
警告や成功メッセージには専用ボックス

カラーパレット

メインカラー: #ff6b6b (赤系)
アクセント: #4ecdc4 (青緑系)
サブカラー: #45b7d1 (青系), #96ceb4 (緑系)
グラデーション: 2色以上の組み合わせ
コードブロック: 黒背景 + 緑文字

インタラクティブ要素

ホバー効果 で要素に動きを追加
アニメーション でタイトルを目立たせる
レスポンシブ デザインでモバイル対応
絵文字 を積極的に使用

レイアウト構造

ヒーローセクション: 大きなタイトル + サブタイトル
目次: 絵文字付きの見やすいナビゲーション
コンテンツパネル: セクションごとにパネル分け
コードブロック: ターミナル風のスタイル
まとめ: 重要なポイントを強調

技術的要件

HTML5 + CSS3 のみ使用
Google Fonts の日本語フォント (Noto Sans JP推奨)
Pure CSS アニメーション
Flexbox や Grid でレイアウト
max-width: 1000px でコンテナ幅制限

コンテンツ変換ルール

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

出力フォーマット

完全なHTMLファイルとして出力し、以下を含めてください：

<!DOCTYPE html> 宣言
適切な <head> セクション (meta, title, style)
レスポンシブデザイン対応
絵文字とアイコンの積極的使用
楽しく読みやすいレイアウト

追加指示

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

関連プロンプト

コミック調HTMLジェネレーター v2.0 - 改良版のコミック調HTMLジェネレーター