お客様の声・実績コード生成用
受賞・認定のバッジ
受賞歴や認定を、メダルのようなバッジで。
用途・説明
受賞歴や第三者の認定を、円形のバッジで横に並べるパーツを作成します。ファーストビューの下や料金表の近くに置くと、安心材料になります。「No.1」などの表示には根拠の明記が必要なため、注記の欄を必ず設ける指定にしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[受賞・認定のリスト]- 年・名称・結果（受賞、選出など）を3〜4件
[注記]- 調査機関・調査期間・対象など、根拠となる情報
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「受賞・認定のバッジ」を実装してください。 ## 表示内容 [受賞・認定のリスト] - 注記：[注記] ## レイアウト - バッジを横に並べ、中央揃え。間隔 32px（スマホでは 16px、3つまで横に並べる） - 各バッジの下に名称 - 注記は全体の下に、中央揃え ## デザイン - バッジ：直径 104px の円、背景 #FFFFFF。外側に #1463F0 の線（2px）、その内側に淡い線（1px）の二重線 - バッジのなか：上に年（11px、色 #5F6D84）、下に結果（18px、font-weight 700、色 #1463F0） - 名称：14px、font-weight 700、色 #1B2A44、バッジの下 12px - 注記：11px、line-height 1.7、色 #5F6D84 ## 注意点 - 「No.1」「満足度○%」などを表示する場合は、調査機関・調査期間・対象を必ず注記に書く。根拠を示せない表現は使わない - 実在の賞のロゴやマークは、主催者の規定に従って使う。ここでは汎用的なバッジで実装する - 注記の欄を省略しない ## アクセシビリティ - ul / li でマークアップ。年・結果・名称が、ひと続きで読み上げられる順番にする - 注記は、対応するバッジと aria-describedby で結びつける - 色だけに頼らず、文字で内容が分かるようにする ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。