お客様の声・実績コード生成用
導入事例の詳細ページ
課題・解決策・成果の順で、1社の事例をまとめる。
用途・説明
1社の導入事例を、「課題 → 解決策 → 成果」の流れで読ませる詳細ページを作成します。冒頭に成果をまとめ、忙しい人が要点だけ読めるようにしています。最後に、同じ業種のほかの事例とCTAを置く構成です。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[タイトル]- 例：在庫確認の電話を、ゼロに。
[会社の情報]- 会社名・業種・従業員数・利用プラン
[課題・解決策・成果]- それぞれ2〜3文
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「導入事例の詳細ページ」を実装してください。 ## 表示内容 - タイトル：[タイトル] - 会社の情報：[会社の情報] - 本文：[課題・解決策・成果] - 担当者のコメント（引用） - 最後に「同じ業種の事例」2件と、CTA「資料をダウンロード」 ## レイアウト - 最大幅 880px、中央配置 - 冒頭：タイトル → 会社の情報（定義リストを横並び）→ メインの写真（16:9） - その下に「課題」「解決策」「成果」の3枚の要約カードを横並び（スマホでは縦） - 続けて、同じ3つの見出しで本文を縦に並べる ## デザイン - タイトル：PC 32px / スマホ 24px、font-weight 700、line-height 1.5、色 #1B2A44 - 会社の情報：項目名 12px・色 #5F6D84、内容 14px・font-weight 700 - 要約カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 20px。ラベルは 12px・角丸 999px・背景 #EDF1F7 - 「成果」のカードだけ、ラベルを 背景 #1463F0・文字 #FFFFFF にする - 本文の見出し：22px、font-weight 700、左に #1463F0 の縦線（幅 4px） - 本文：16px、line-height 2、色 #47566E - 引用：背景 #F7F9FC、角丸 12px、padding 24px、左上に淡い引用符 ## アクセシビリティ - article 要素。タイトルは h1、「課題」などは h2 - 会社の情報は dl / dt / dd - 引用は blockquote、発言者は figcaption ## 出力形式 - [使用技術]のコードを1つ出力 - 事例のデータを1つのオブジェクトで渡す形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。