お客様の声・実績コード生成用
実績の歩みを見せる年表
サービス開始からの節目を、横に並べる。
用途・説明
サービス開始から現在までの節目（導入社数の達成、受賞など）を、横に流れる年表で見せるセクションを作成します。成長の勢いが伝わるため、会社案内や採用ページ、資金調達後のお知らせページなどに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[年表のリスト]- 年と出来事を4〜6件、古い順に
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「実績の歩みを見せる年表」を実装してください。 ## 表示内容 [年表のリスト] ## レイアウト - PC：横1列に並べ、点どうしを1本の横線でつなぐ。各項目は上から 年 → 点 → 出来事 - スマホ：縦に並べ、線を左側の縦線に変える。点の右に年と出来事 - 項目が5つを超える場合、PCでは横スクロールにする ## デザイン - 線：太さ 2px、色は #1463F0 の25%の淡い色 - 点：12px の円、背景 #FFFFFF、#1463F0 の線（2px） - 最新の項目の点だけ、#1463F0 で塗りつぶし、まわりに淡い輪（4px）を付ける - 年：20px、font-weight 700、色 #1463F0 - 出来事：14px、line-height 1.7、色 #47566E ## 動作 - 画面に入ったときに、線が左から右へ伸び、点が順に現れる（全体で 1.2秒） ## アクセシビリティ - ol / li でマークアップ（順番に意味があるため）。年は time 要素 - 線と点は装飾として扱い、読み上げさせない - 動きは prefers-reduced-motion で無効化 - 横スクロールにする場合は、キーボードでもスクロールできるよう tabindex="0" と aria-label を付ける ## 出力形式 - [使用技術]のコードを1つ出力 - 項目を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。