カードコード生成用
沿革・タイムラインのカード
年ごとのできごとを、1本の線でつないで見せる。
用途・説明
会社の沿革やサービスの歩み、プロジェクトの進行予定を、縦の線でつないだタイムラインとして作成します。左に年、線の上に丸い印、右にできごとのカードを置きます。会社概要ページの「沿革」、採用ページの「入社後の流れ」などに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[できごと]- 年（または時期）と内容を、古い順に
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「沿革・タイムラインのカード」を実装してください。 ## 表示内容 [できごと] （各項目：年、見出し、補足の文章） ## レイアウト - 縦1列。左に年、中央に縦の線と丸い印、右にカード - PC：年の幅 80px、線、カードの順。スマホ：年をカードのなかの上に移し、線は左端に置く - 項目の間隔 24px ## デザイン - 縦の線：幅 2px、色は #1463F0 の25%の淡い色。最初の印から最後の印までつなぐ - 丸い印：12px、背景 #FFFFFF、枠線 3px solid #1463F0。いちばん新しい項目だけ #1463F0 で塗りつぶす - 年：16px、font-weight 700、色 #1463F0 - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 10px、padding 16px 20px - 見出し：15px、font-weight 700、色 #1B2A44 - 補足：13px、line-height 1.7、色 #5F6D84 ## アクセシビリティ - 順番に意味があるので ol / li でマークアップする - 年は time 要素にする - 線と印は装飾なので、疑似要素で描く（読み上げの対象にしない） ## 出力形式 - [使用技術]のコードを1つ出力 - できごとを配列で渡して繰り返し表示する形にする - 新しい順に並べ替える場合の書き方をコメントで補足する
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。