料金表コード生成用
お支払い方法の案内
使える支払い方法と、支払いのタイミングをまとめて示す。
用途・説明
料金表の下に置く、お支払い方法の案内を作成します。クレジットカード、銀行振込、請求書払いなど、使える方法をアイコン付きで並べ、支払いのタイミングや手数料を添えます。申し込みの直前に「この方法で払えるか」を確かめられるので、問い合わせが減ります。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[支払い方法]- 方法と補足を2〜4個。例：クレジットカード（毎月自動で決済）
[支払いのタイミング]- 例：毎月1日に、その月の分をお支払い
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「お支払い方法の案内」を実装してください。 ## 表示内容 - 見出し：お支払い方法 [支払い方法] （各項目：アイコン、方法の名前、補足） - 支払いのタイミング：[支払いのタイミング] ## レイアウト - PC：支払い方法を横に並べる（3〜4列）。スマホ：1列 - 各項目は、左にアイコン、右に名前と補足 - 一覧の下に、支払いのタイミングを枠で囲んで表示する ## デザイン - 各項目：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 16px - アイコン：線のアイコン 24px、色 #1463F0。40×40px の枠（角丸 10px、背景は #1463F0 の9%の淡い色）に入れる - 方法の名前：15px、font-weight 700、色 #1B2A44 - 補足：13px、line-height 1.6、色 #5F6D84 - 支払いのタイミングの枠：背景 #F7F9FC、角丸 12px、padding 16px 20px、14px。先頭にカレンダーのアイコン ## 表示の決まり - カード会社などのロゴは使わず、汎用の線のアイコンで示す（ロゴを使う場合は、各社のガイドラインを確認する旨をコメントに書く） - 手数料がかかる方法には、「振込手数料はお客様のご負担となります」のように補足に明記する ## アクセシビリティ - 一覧は ul / li、方法の名前は h3 - アイコンは aria-hidden="true" - 補足の小さな文字も、コントラスト比 4.5:1 以上 ## 出力形式 - [使用技術]のコードを1つ出力 - 支払い方法を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。