タイムライン付きグラレコ V1 ダークイラストカラー
想定用途
- ダークイラストカラーパレット（深緑・黄色系）でタイムラインを作成したい
- 左上から右下へ情報を順次配置する流れを作りたい
- 丸とフラップ装飾付きのタイムラインアイテムを生成したい
プロンプト本文
text
``` # タイムライン付きグラフィックレコーディング (グラレコ) HTML 作成プロンプト V1
## 目的
以下の内容を、超一流デザイナーが作成したような、日本語で完璧なグラフィックレコーディング風のHTMLインフォグラフィックに変換してください。情報設計とビジュアルデザインの両面で最高水準を目指します。手書き風の図形やアイコンを活用して内容を視覚的に表現します。
## デザイン仕様
### 1. カラースキーム（ダークイラスト）2. グラフィックレコーディング要素
- 左上から右へ、上から下へと情報を順次配置
- 日本語の手書き風フォントの使用（Yomogi, Zen Kurenaido, Kaisei Decol）
- 手描き風の囲み線、矢印、バナー、吹き出し
- テキストと視覚要素（アイコン、シンプルな図形）の組み合わせ
- キーワードの強調（色付き下線、マーカー効果）
- 関連する概念を線や矢印で接続
- Font Awesome アイコンを効果的に配置
- タイムライン表示を使用して情報の流れを視覚化
3. タイポグラフィ
- タイトル：32px、グラデーション効果、太字
- サブタイトル：16px、#475569
- セクション見出し：18px、アイコン付き
- 本文：14px、#334155、行間1.4
- フォント指定：Kaisei Decol, Yomogi, Zen Kurenaido
4. レイアウト
- ヘッダー：左揃えタイトル＋右揃え日付/出典
- タイムライン構成を使用して手順や段階を表示
- カード型コンポーネント：白背景、角丸12px、微細シャドウ
- セクション間の適切な余白と階層構造
- 適切にグラスモーフィズムを活用
- コンテンツの横幅は100%にして
- 必須: タイムラインアイテムには必ず「丸とフラップ装飾」を含める
変換するコンテンツ
[ここにタイムライン化したいテキストコンテンツを入力]
## 使い方
1. プロンプトをコピーしてAIチャットツールに貼り付け
2. 変換するコンテンツ部分にタイムライン化したいテキストを入力
3. 生成されたHTMLをブラウザで表示・保存
## 入力例変換するコンテンツ
製品開発プロセス
- 企画・要件定義
- 設計・プロトタイプ作成
- 開発・テスト
- リリース・運用
## 出力例
ダークイラストカラーパレット（深緑#027333、#4E7329、黄#F2B705、#F29F05、#D97904）を使用した、丸とフラップ装飾付きのタイムライン形式グラレコHTMLが生成されます。
## 注意点
- 濃い緑と黄色のコントラストが特徴です
- 左上から右下へ情報が流れるレイアウトです
- タイムラインアイテムに必ず丸とフラップ装飾が含まれます