Profile picture of Maki@Sunwood AI Labs.

Maki@Sunwood AI Labs.

hAru_mAki_ch

Published: March 19, 2025
0
13
207

タイムライン付のグラフィックレコーディング (グラレコ) 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

🛠️ 解決手順のタイムライン

  • STEP 1
    docker-compose.ymlでイメージを更新
    yaml
    image: ghcr. io/example/image:v1.0.0
    最新のイメージバージョンを指定しましょう!
  • STEP 2
    設定ファイルを更新
``` ## 全体的な指針 - 読み手が自然に視線を移動できる配置 - 情報の階層と関連性を視覚的に明確化 - 手書き風の要素で親しみやすさを演出 - 視覚的な記憶に残るデザイン - フッターに出典情報を明記 - **必須**: タイムラインには必ず「丸とフラップ装飾」を適用すること(上記CSS仕様を必ず含める) ## 変換する文章/記事

Share this thread

Read on Twitter

View original thread

Navigate thread

1/1