CTA・特徴紹介コード生成用
連携できるサービスの紹介
いつも使っているツールと、つながることを伝える。
用途・説明
連携できる外部サービスを、アイコンのタイルで並べるセクションを作成します。「いま使っているツールと一緒に使える」と分かることは、導入の不安を減らします。SaaSや業務ツールの紹介ページに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：いつものツールと、そのままつながる
[連携サービスのリスト]- サービス名・アイコン画像・種類（チャット、会計など）を6〜9個
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「連携できるサービスの紹介」のセクションを実装してください。 ## 表示内容 - 見出し：[見出し] - 説明文（1〜2文） - リンク：「連携できるサービス一覧」 - 連携サービス： [連携サービスのリスト] ## レイアウト - PC：2カラム。左（45%）に見出し・説明文・リンク、右（55%）にタイルのグリッド。上下中央揃え - タイルは3列、間隔 12px - スマホ：見出し → タイル → リンク の順に縦並び ## デザイン - 見出し：PC 28px / スマホ 22px、font-weight 700、line-height 1.5、色 #1B2A44 - 説明文：15px、line-height 1.9、色 #5F6D84 - リンク：14px、font-weight 700、色 #1463F0、右向きの矢印つき - タイル：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 20px 12px、中央揃え - タイルのなか：アイコン（40px）、その下にサービス名（13px、font-weight 700、色 #1B2A44）、種類（11px、色 #5F6D84） - hover：枠線を #1463F0 にし、2px 持ち上げる ## 注意点 - 各サービスのロゴは、提供元の利用規定に従って使う必要があることをコメントで明記する - ロゴの色や縦横比を変えない ## アクセシビリティ - タイルは ul / li。アイコンの alt は空にし、サービス名の文字で伝える - hover の動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。