お客様の声・実績コード生成用
写真つき左右分割の声
大きな写真の横に、コメントと人物紹介を。
用途・説明
左に人物の写真、右にコメントと名前・肩書きを置く、左右分割のお客様の声を作成します。顔が見えることで信頼感が増すため、BtoBサービスの導入事例や、士業・サロンなどの個人向けサービスに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[コメント]- 2〜3行のコメント
[名前と肩書き]- 例：鈴木 一郎（サンプル建設 代表）
[ラベル]- 例：導入事例
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「写真つき左右分割のお客様の声」を実装してください。 ## 表示内容 - ラベル：[ラベル] - コメント：[コメント] - 人物：[名前と肩書き] - 人物の写真（仮の画像を置き、差し替える場所をコメントで示す） - リンク：「事例を詳しく読む」 ## レイアウト - PC：左に写真（幅40%）、右にテキスト（幅60%）。間隔 48px、上下中央揃え - スマホ：写真 → テキストの順に縦並び - 写真は縦横比 4:5、角丸 16px、object-fit: cover ## デザイン - ラベル：12px、font-weight 700、背景は #1463F0 の9%の淡い色、文字色 #1463F0、角丸 999px - コメント：PC 22px / スマホ 18px、font-weight 700、line-height 1.7、色 #1B2A44。前後に「」を付ける - 名前：15px、font-weight 700。肩書き：13px、色 #5F6D84 - リンク：14px、font-weight 700、色 #1463F0、右向きの矢印つき ## アクセシビリティ - figure / blockquote / figcaption でマークアップ - 写真の alt には「（名前）さんの写真」を入れる - リンクには focus-visible のスタイルを用意する ## 出力形式 - [使用技術]のコードを1つ出力 - 左右を入れ替えたい場合の変更箇所をコメントで説明
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。