料金表コード生成用
曜日・時間帯別の料金表
平日と土日祝、昼と夜の料金を、ひとつの表で見比べる。
用途・説明
平日と土日祝、時間帯によって料金が変わるサービスの料金表を作成します。行に時間帯、列に曜日の区分を置き、交わるマスに料金を表示します。レンタルスペース、スタジオ、カラオケ、駐車場、宿泊施設、スポーツ施設などに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[曜日の区分]- 例：平日、土日祝
[時間帯と料金]- 時間帯ごとの料金。例：9:00〜17:00 平日1,100円／土日祝1,650円
[料金の単位]- 例：1時間あたり、1泊1名あたり
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「曜日・時間帯別の料金表」を実装してください。 ## 表示内容 - 列：[曜日の区分] - 行と料金： [時間帯と料金] - 料金の単位：[料金の単位]（表の右上に表示する） ## レイアウト - 左端の列に時間帯、右に曜日の区分の列を並べる。料金は中央揃え - スマホでも表のまま表示する（列が3つ以下なら入る）。入らない場合は、曜日の区分をタブで切り替える ## デザイン - 表：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、overflow: hidden - 列名の行：背景 #F7F9FC、14px、font-weight 700 - 「土日祝」の列名：背景は #1463F0 の9%の淡い色、文字 #1463F0 - 時間帯：14px、font-weight 700。時間帯の名前（昼・夜など）がある場合は、時刻の上に小さく添える - 料金：18px、font-weight 700、tabular-nums - いちばん安いマス：料金の下に「おすすめ」の小さなラベル（#1463F0） - 行の高さ 64px、行と列の間は 1px solid #E2E8F0 - 料金の単位：12px、色 #5F6D84 ## 表示の工夫 - 今日の曜日と現在の時刻から、「いまの料金」のマスに枠（2px solid #1463F0）を付ける - 祝日の判定はむずかしいため、枠は平日・土日の判定だけで行い、祝日は対象外とする旨をコメントに書く ## アクセシビリティ - table 要素を使い、列名は th（scope="col"）、時間帯は th（scope="row"）にする - caption で表の説明と料金の単位を伝える - 「いまの料金」「おすすめ」は、色や枠だけでなく文字でも示す ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。