CTA・特徴紹介コード生成用
職種・立場別の利用シーン
「営業の方」「人事の方」など、立場ごとに使い方を。
用途・説明
職種や立場ごとに、どう役立つかを紹介するカードを並べるセクションを作成します。読む人が自分の立場のカードを見つけて、使い方を具体的に想像できます。部署をまたいで使うツールや、対象が幅広いサービスに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[利用シーンのリスト]- 対象（例：営業の方）・ひとこと・説明・リンク先を3〜4件
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「職種・立場別の利用シーン」のセクションを実装してください。 ## 表示内容 [利用シーンのリスト] （各カード：対象の帯、ひとこと、説明、「事例を見る」のリンク） ## レイアウト - PC：3列、タブレット：2列、スマホ：1列。カードの間隔 24px - カード内：上に対象の帯、その下にひとこと・説明・リンク - 行ごとにカードの高さをそろえ、リンクはカードの下端に置く ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、overflow: hidden - 対象の帯：背景 #1463F0、padding 10px 20px、文字 #FFFFFF・14px・font-weight 700 - ひとこと：17px、font-weight 700、line-height 1.6、色 #1B2A44 - 説明：14px、line-height 1.8、色 #5F6D84 - リンク：14px、font-weight 700、色 #1463F0、右向きの矢印つき - 本文部分の padding 20px - hover：枠線を #1463F0 にし、矢印を右に 4px 動かす ## マークアップ - 各カードは article。ひとことは h3 のなかの a 要素にし、カード全体をクリックできるようにする - 対象の帯は、見出しの前に読まれる位置に置く ## アクセシビリティ - #1463F0 の背景と白い文字のコントラスト比 4.5:1 以上を確認する - focus-visible のスタイルを用意する - hover の動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。