料金表コード生成用
ダーク背景の料金表
暗い背景に、光るようにおすすめプランを浮かべる。
用途・説明
暗い背景のうえに料金カードを並べ、おすすめのプランだけを光の枠で浮かび上がらせる料金表を作成します。開発者向けツール、ゲーム、クリエイティブ系のサービスなど、ダークな配色のサイトに合わせた料金ページに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[プラン情報]- プラン名・月額・含まれる内容を2〜3つ
[おすすめのプラン]- 例：Pro
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「ダーク背景の料金表」を実装してください。 ## 表示内容 [プラン情報] - おすすめのプラン：[おすすめのプラン] ## レイアウト - PC：プランを横に並べる（カードの間隔 24px）。スマホ：1列 - カード内は上から プラン名 → 価格 → 含まれる内容 → ボタン。ボタンはカードの下端にそろえる ## デザイン - セクションの背景：#0B1220。上端の中央から #1463F0 の radial-gradient（中心の不透明度 0.35）を重ねる - カード：背景 rgba(255, 255, 255, 0.04)、枠線 1px solid rgba(255, 255, 255, 0.12)、角丸 16px、padding 32px 24px - おすすめのカード：枠線 1px solid #1463F0、外側に #1463F0 の光（box-shadow: 0 0 40px、不透明度 0.35） - プラン名：15px、font-weight 700、色 rgba(255, 255, 255, 0.72) - 価格：36px、font-weight 700、色 #FFFFFF - 含まれる内容：14px、色 rgba(255, 255, 255, 0.82)、チェックマークは #1463F0 の55%の明るい色 - ボタン：高さ 48px、角丸 10px。おすすめは背景 #1463F0・文字 #FFFFFF、ほかは背景 rgba(255, 255, 255, 0.08)・文字 #FFFFFF ## アクセシビリティ - 暗い背景でも、本文の文字はコントラスト比 4.5:1 以上を確保する（薄すぎる白にしない） - フォーカスリングは白で、暗い背景でもはっきり見えるようにする - プラン名は h3、含まれる内容は ul / li - おすすめであることは、光だけでなく「おすすめ」の文字ラベルでも示す ## 出力形式 - [使用技術]のコードを1つ出力 - 背景色・光の色をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。