CTA・特徴紹介コード生成用
ベントーグリッドの特徴紹介
大小のタイルを、お弁当箱のように組み合わせる。
用途・説明
大きさの違うタイルを組み合わせた「ベントーグリッド」で、特徴をまとめて見せるセクションを作成します。いちばん伝えたい特徴を大きなタイルにし、数字や小さな機能を小さなタイルに入れます。1画面で全体像を伝えたいときに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[大きなタイルの内容]- いちばん伝えたい特徴の見出しと説明、画像
[小さなタイルの内容]- 数字や小さな特徴を3つ
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「ベントーグリッドの特徴紹介」を実装してください。 ## 表示内容 - 大きなタイル：[大きなタイルの内容] - 小さなタイル：[小さなタイルの内容] ## レイアウト - CSS Grid で、PC は3列×2行。大きなタイルは左の1列を2行ぶん使う - 右上に小さなタイルを2つ横に並べ、右下に横長のタイルを1つ置く - タブレットは2列、スマホは1列に並べ直す - タイルの間隔 16px。全体の最大幅 1080px ## デザイン - タイル共通：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 20px、padding 28px - 見出し：20px、font-weight 700、line-height 1.5、色 #1B2A44 - 説明：14px、line-height 1.8、色 #5F6D84 - 大きなタイル：見出しの下に画像（角丸 12px）を置き、残りの高さを埋める - 数字のタイル：背景 #1463F0、文字 #FFFFFF。数字 40px・font-weight 700、ラベル 14px - hover：枠線を #1463F0 にする（数字のタイルは少し明るくする） ## マークアップ - 全体は ul / li。各タイルの見出しは h3 - グリッドの配置は grid-template-areas で名前を付け、並べ替えやすくする - 読み上げの順番が、重要なタイルから始まるようにする ## アクセシビリティ - #1463F0 の背景に白い文字を置くとき、コントラスト比 4.5:1 以上を確認する - hover の変化は prefers-reduced-motion のとき、時間を0にする ## 出力形式 - [使用技術]のコードを1つ出力 - タイルを増やすときの手順をコメントで説明
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。