タイムライン付のグラフィックレコーディング (グラレコ) HTML 作成プロンプト V1
個人的には結構いい感じに出来た！！！
話の流れが直感的に分かるのはデカい！！
---
プロンプト：
# タイムライン付のグラフィックレコーディング (グラレコ) HTML 作成プロンプト V1
## 目的
以下の内容を、超一流デザイナーが作成したような、日本語で完璧なグラフィックレコーディング風のHTMLインフォグラフィックに変換してください。情報設計とビジュアルデザインの両面で最高水準を目指します。
手書き風の図形やアイコンを活用して内容を視覚的に表現します。
## デザイン仕様
### 1. カラースキーム
```
```
### 2. グラフィックレコーディング要素
- 左上から右へ、上から下へと情報を順次配置
- 日本語の手書き風フォントの使用（Yomogi, Zen Kurenaido, Kaisei Decol）
- 手描き風の囲み線、矢印、バナー、吹き出し
- テキストと視覚要素（アイコン、シンプルな図形）の組み合わせ
- キーワードの強調（色付き下線、マーカー効果）
- 関連する概念を線や矢印で接続
- Font Awesome アイコンを効果的に配置
- タイムライン表示を使用して情報の流れを視覚化
### 3. タイポグラフィ
- タイトル：32px、グラデーション効果、太字
- サブタイトル：16px、#475569
- セクション見出し：18px、アイコン付き
- 本文：14px、#334155、行間1.4
- フォント指定：
```html
```
### 4. レイアウト
- ヘッダー：左揃えタイトル＋右揃え日付/出典
- タイムライン構成を使用して手順や段階を表示
- カード型コンポーネント：白背景、角丸12px、微細シャドウ
- セクション間の適切な余白と階層構造
- 適切にグラスモーフィズムを活用
- コンテンツの横幅は100%にして
- **必須**: タイムラインアイテムには必ず「丸とフラップ装飾」を含める
### 5. コードブロック表示
- 背景色を #252140（イラスト-3カラー）に設定
- 左側に # A62648（イラスト-1カラー）のアクセントボーダーを追加
- シンタックスハイライトにパレットカラーを使用
- 言語に応じた色分け（JSON、YAML、ENV、BASH等）
- コードブロック右上に言語ラベルを表示
- 日本語手書き風フォントを適用
## グラフィックレコーディング表現技法
- テキストと視覚要素のバランスを重視
- キーワードを囲み線や色で強調
- 簡易的なアイコンや図形で概念を視覚化
- 大きな背景アイコンで視覚的なインパクトを追加
- 接続線や矢印で情報間の関係性を明示
- 余白を効果的に活用して視認性を確保
- アニメーションやホバーエフェクトで動きを表現
## タイムライン表現 (必須要素を含む)
- タイムラインを中央に縦に配置し、左右交互にカードを表示
- 各ステップに数字とアイコンを付与
- ステップごとに異なるアクセントカラーを使用
- 大きな背景アイコンでコンテンツを視覚的に補強
- コンテンツの階層と関連性を視覚的に明確化
- **必須**: 各ステップには日付装飾（フラップ）とサークルアイコンを必ず付ける
- **必須**: サークルは丸型で、内部にFont Awesomeアイコンを配置する
### タイムラインCSSコード例
```css
/* タイムライン要素 */
ul.timeline {
--col-gap: 2rem;
--row-gap: 2rem;
--line-w: 0.25rem;
display: grid;
grid-template-columns: var(--line-w) 1fr;
grid-auto-columns: max-content;
column-gap: var(--col-gap);
list-style: none;
width: min(60rem, 100%);
margin-inline: auto;
margin-bottom: 2rem;
}
/* タイムラインの線 */
ul.timeline::before {
content: "";
grid-column: 1;
grid-row: 1 / span 20;
background: # 8C1F5B;
border-radius: calc(var(--line-w) / 2);
}
/* カード間の余白 */
ul.timeline li:not(:last-child) {
margin-bottom: var(--row-gap);
}
/* タイムラインカード */
ul.timeline li {
grid-column: 2;
--inlineP: 1.5rem;
margin-inline: var(--inlineP);
grid-row: span 2;
display: grid;
grid-template-rows: min-content min-content min-content;
}
/* ステップ番号 */
ul.timeline li .date {
--dateH: 3rem;
height: var(--dateH);
margin-inline: calc(var(--inlineP) * -1);
text-align: center;
background-color: var(--accent-color);
color: white;
font-size: 1.5rem;
font-weight: 700;
display: grid;
place-content: center;
position: relative;
border-radius: calc(var(--dateH) / 2) 0 0 calc(var(--dateH) / 2);
font-family: 'Kaisei Decol', serif;
}
/* 日付のフラップ装飾 - 必須要素 */
ul.timeline li .date::before {
content: "";
width: var(--inlineP);
aspect-ratio: 1;
background: var(--accent-color);
background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);
position: absolute;
top: 100%;
clip-path: polygon(0 0, 100% 0, 0 100%);
right: 0;
}
/* サークル - 必須要素 */
ul.timeline li .date::after {
content: "";
position: absolute;
width: 2.8rem;
aspect-ratio: 1;
background: var(--bgColor);
border: 0.4rem solid var(--accent-color);
border-radius: 50%;
top: 50%;
transform: translate(50%, -50%);
right: calc(100% + var(--col-gap) + var(--line-w) / 2);
font-family: "Font Awesome 6 Free";
font-weight: 900;
color: var(--accent-color);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
z-index: 2;
}
/* タイトルと説明 */
ul.timeline li .title,
ul.timeline li .descr {
background: white;
position: relative;
padding-inline: 1.5rem;
}
ul.timeline li .title {
overflow: hidden;
padding-block-start: 1.5rem;
padding-block-end: 1rem;
font-weight: 500;
font-family: 'Kaisei Decol', serif;
font-size: 1.2rem;
color: # A62648;
}
ul.timeline li .descr {
padding-block-end: 1.5rem;
font-weight: 300;
font-family: 'Zen Kurenaido', sans-serif;
}
/* 左右配置のためのメディアクエリ */
@ media (min-width: 40rem) {
ul.timeline {
grid-template-columns: 1fr var(--line-w) 1fr;
}
ul.timeline::before {
grid-column: 2;
}
ul.timeline li:nth-child(odd) {
grid-column: 1;
}
ul.timeline li:nth-child(even) {
grid-column: 3;
}
/* ステップ2のスタート位置 */
ul.timeline li:nth-child(2) {
grid-row: 2/4;
}
ul.timeline li:nth-child(odd) .date::before {
clip-path: polygon(0 0, 100% 0, 100% 100%);
left: 0;
}
ul.timeline li:nth-child(odd) .date::after {
transform: translate(-50%, -50%);
left: calc(100% + var(--col-gap) + var(--line-w) / 2);
}
ul.timeline li:nth-child(odd) .date {
border-radius: 0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0;
}
}
/* タイムライン上の大きなアイコン */
.timeline-icon-large {
position: absolute;
font-size: 80px;
color: rgba(165, 38, 72, 0.1);
right: 10px;
top: 50%;
transform: translateY(-50%);
z-index: 0;
animation: float 3s ease-in-out infinite;
}
/* アイコンアニメーションエフェクト */
@ keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
/* ステップアイコン */
.timeline-item:nth-child(1) .date::after {
content: "\f395"; /* docker */
}
.timeline-item:nth-child(2) .date::after {
content: "\f15c"; /* file */
}
.timeline-item:nth-child(3) .date::after {
content: "\f234"; /* user-plus */
}
.timeline-item:nth-child(4) .date::after {
content: "\f2f6"; /* sign-in */
}
```
### タイムライン HTML 例
```html
🛠️ 解決手順のタイムライン
```
## 全体的な指針
- 読み手が自然に視線を移動できる配置
- 情報の階層と関連性を視覚的に明確化
- 手書き風の要素で親しみやすさを演出
- 視覚的な記憶に残るデザイン
- フッターに出典情報を明記
- **必須**: タイムラインには必ず「丸とフラップ装飾」を適用すること（上記CSS仕様を必ず含める）
## 変換する文章/記事
