はじめる

実践的なデザインワークフロー

料金表の作り方:サービス価格を分かりやすく整理する

アイボリーの上に平行なチャコールの帯とアンバーのブロックを並べた、端正な料金表風の構成。

サービス料金表は、受けられる内容、所要時間、適用条件を説明するものです。「〜から」の欠落や、単独予約できそうに見える追加メニューは、装飾的な書体では補えません。

架空の Cedar Salon の依頼で、Ciyo の料金カードを検討しました。元の表、管理した修正、印刷とスマートフォン別の確認を使い、編集できる原稿の文字と統合された画像を分けます。

先に答え:最初にサービス表を承認する

名称、所要時間、通貨、固定・最低料金、条件を元の表にまとめます。サービスを分類し、価格をそろえ、限定表現は該当価格の隣に置きます。保存したデザインを想定印刷サイズとスマートフォン幅で確認します。

全ての文字を再生成せず、価格一つを変更できる原稿を残します。Ciyo の出力が統合画像なら、事実の文字はレイアウト編集ソフトで仕上げます。

1. 店主のメニューを承認済み情報にする

以下の Cedar Salon の四サービスは架空です。最低料金と、予約条件のある追加項目という難しい情報を示すための例です。実務では、デザイン前に通貨、提供範囲、追加の価格条件を承認します。

人気プラン、値引き、欠けた所要時間をモデルに作らせません。サービス責任者と確認します。

Cedar Salon の例示用サービス表
サービス所要時間価格条件
シグネチャーカット45 分$45例示用の固定料金
カラー相談20 分$20例示用の固定料金
ブロー30 分$35 から最低料金
追加トリートメント10 分$12別のサービス予約が必要
架空の Cedar Salon の料金表制作指示を示す Ciyo の全画面。
2026年10月21日、ログイン済みの独立した dev.ciyo.ai プロジェクトへの元の入力。ページ倍率 100% の全表示で、重要な指示はコピー用の制作指示にも記載しています。

2. 装飾より先に情報の優先順位を決める

一サービス一行とし、名称を先に、所要時間を近くに、価格を同じ位置に置きます。追加メニューは別グループにし、主な予約とオプションの違いを伝えます。

例では温かなアイボリーとチャコールを基調に、控えめな緑を加えます。緑で追加項目を分けられますが、予約条件を色だけで説明しないようにします。

Cedar Salon の実際の料金表出力と処理状況を示す Ciyo の全画面。
エージェントの処理停止後、GPT Image 2.5 Flare の直接生成で、1024 × 1536 の統合料金表コンセプトができました。リンク先の HTML はサービス情報を編集可能に保っています。
サービス料金表の制作指示
承認済み表[サービス、時間、価格、条件]から、[事業者]の料金表をデザインしてください。主な予約と追加メニューを分け、最低料金の隣に「〜から」を残し、予約条件を明確に示してください。[ブランド色]を使い、縦型の印刷版とスマートフォン表示を比較してください。全ての事実を保ち、どの原稿が編集可能かを示してください。

3. Ciyo で検討し、実際の文字の扱いを確認する

独立した Design agent のプロジェクトに表を入力しましたが、カードが届く前に停止しました。その後、Image Generator で GPT Image 2.5 Flare を直接使い、掲載した 1024 × 1536 の案を生成しました。例の情報順序を一枚の画像として表しています。

リンク先の Cedar Salon の HTML は、承認済み表から別途作成しました。名称、所要時間、価格、条件が編集可能な文字なので、外部での修正工程を確認できます。生成画像と編集可能原稿は役割が異なります。

4. 一つだけ修正して、全行を読み直す

架空のシグネチャーカットを $45 から $48 に変え、45 分は維持するのが確認例です。レビュー練習と記録し、実際の変更を店主が承認するまでは元の表を基準にします。

修正後にカラー相談 $20、ブロー $35 から、追加トリートメント $12 を再確認します。追加項目が別のサービス予約を必要とすることも見ます。限定した依頼でも周辺の生成文字が変わり得るため、直した数字だけでは不十分です。

外部 HTML での確認練習:シグネチャーカットを $48 に変更し、45 分と他の承認済み項目は維持。保存済み原本テンプレートは $45 のままです。
外部 HTML での確認練習:シグネチャーカットを $48 に変更し、45 分と他の承認済み項目は維持。保存済み原本テンプレートは $45 のままです。

5. 印刷用とスマートフォン用を別々に確認する

印刷では想定の物理サイズで出力ファイルを開き、最小の条件文を読めるか確認します。受け付ける形式と安全余白は印刷会社に相談します。スマートフォンでは通常の幅で全体を拡大せず確認します。

文字が小さすぎれば、構成を簡略化するかモバイル用を別に作ります。印刷ページ全体の縮小だけでは適切とは限りません。事実は両版で同じにします。

二つの使用先での確認
使用先起きやすい問題有効な修正
店頭の印刷カード限定文が小さい、端の文字が切れる文字を大きくするか安全域の内側へ移す。
スマートフォン画像狭い画面に情報が多すぎるサービスを縦に並べ、装飾を減らす。
両方版によって価格が違う承認済み元表と両方を照合する。

6. 原稿を版管理し、更新責任者を決める

承認日、編集可能原稿、顧客向け出力を一緒に保存します。価格変更時は元の表を先に更新し、承認済みの文字から配布版を作ります。実際の配布先にある古い版を置き換えます。

個人のサービスなら簡潔な一枚で十分な場合があります。複数店舗では自動化前に、各店の料金と条件の責任者を決めます。これは料金表デザインの例で、予約システムの同期ではありません。

よくある質問

条件を脚注に隠してもよいですか?

「〜から」は該当価格の近くに置きます。長い条件は近くに補足できますが、未承認の固定価格と誤解させない配置にします。

一ページに何サービス入れられますか?

使う場所での読みやすさが上限です。読めないほど縮小せず、長いリストは分類したり分割したりします。

生成画像は編集可能ですか?

文字が画像に統合されている場合があります。定期更新を確実にするには、元表を保管し、レイアウト上の編集できる文字を使います。

予約リンクを追加すべきですか?

店舗が承認した確認済みの予約先だけを使います。装飾的な QR コードや架空の URL では予約経路はできません。

承認済みの五サービスを用意する

実際の名称、時間、価格、条件から始めます。二つの構成を比べ、顧客がすぐ理解できるほうを選びましょう。