お客様の声・実績コード生成用
ファーストビューに添える信頼バー
利用者数・評価・ロゴを、1本の小さなバーに。
用途・説明
ファーストビューのボタンのすぐ下に置く、小さな信頼バーを作成します。利用者のアイコン、星の評価、利用者数、導入企業のロゴを1行にまとめ、最初の画面で「多くの人が使っている」ことを伝えます。場所を取らないのが利点です。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[利用者数の文]- 例：12,000人以上が利用中
[評価]- 例：4.8（レビュー1,204件）
[ロゴのリスト]- 会社名とロゴ画像を2〜3社
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「ファーストビューに添える信頼バー」を実装してください。 ## 表示内容 - 利用者のアイコン3つ（少しずつ重ねる） - 星の評価：[評価] - 利用者数：[利用者数の文] - 導入企業のロゴ：[ロゴのリスト] ## レイアウト - 横1行に並べる。左から アイコン → 星と利用者数（2段）→ 縦の区切り線 → ロゴ - 幅は内容に合わせる（inline-flex）。スマホではロゴを2段目に折り返し、区切り線を消す ## デザイン - バー：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 999px、padding 12px 24px - アイコン：32px の円、白いふち（2px）を付け、8px ずつ重ねる - 星：14px、色 #F5B63F - 利用者数：14px、色 #5F6D84。数字の部分だけ font-weight 700・色 #1B2A44 - 区切り線：1px、高さ 32px、色 #DCE4F0 - ロゴ：高さ 20px、グレースケール・不透明度 60% - スマホでは角丸を 16px にする ## アクセシビリティ - アイコンは装飾として扱う（alt を空に） - 星は「5段階中4.8」と読み上げられるようにする - ロゴの alt には会社名を入れる - #1463F0 は、バーをフォーカスできる要素（レビューへのリンクなど）にする場合の focus-visible の枠に使う ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。