お客様の声・実績コード生成用
インタビュー記事への入口カード
写真と印象的なひとことで、記事へ誘う。
用途・説明
お客様インタビューの記事へ誘導する、横長のカードを作成します。左に写真、右にお客様の印象的なひとことと会社名を置き、「続きを読む」で個別のページへつなげます。トップページやサービス紹介ページの途中に置くのに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- お客様のひとこと。例：決め手は、現場で使える手軽さでした
[会社名・部署・名前]- 例：サンプル食品株式会社 店舗運営部 鈴木様
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「インタビュー記事への入口カード」を実装してください。 ## 表示内容 - ラベル：INTERVIEW - 見出し：「[見出し]」 - 人物：[会社名・部署・名前] - リンク：続きを読む - 写真（仮の画像を置き、差し替える場所をコメントで示す） ## レイアウト - PC：左に写真（幅35%）、右にテキスト。カード全体の高さに写真を合わせる（object-fit: cover） - スマホ：写真（縦横比 16:9）→ テキストの順に縦並び - カードの最大幅 880px ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 16px、overflow: hidden - テキスト部分：padding 32px - ラベル：11px、font-weight 700、letter-spacing 0.1em、背景は #1463F0 の9%の淡い色、文字色 #1463F0、角丸 999px - 見出し：20px、font-weight 700、line-height 1.6、色 #1B2A44 - 人物：13px、色 #5F6D84 - リンク：14px、font-weight 700、色 #1463F0 - hover：カードを 2px 持ち上げ、影を付ける。写真を 1.03倍に ## アクセシビリティ - article 要素。見出しは h3 のなかの a 要素にし、カード全体をクリックできるようにする - 「続きを読む」は装飾扱いにして、リンクが重複して読み上げられないようにする - hover の動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。