このテンプレートについて
Price Calculatorは800x648で記録し、ギャラリー用の画像ではなく仕様として残した。見出しは「Get premium website within your budget」で、料金セクションの残りはその周りに配置されている。配色は黒 #000000の下地、赤 #FF5656のアクセント。この項目は、ページを生んだ技術スタック（単一のコンポーネント）を隠さずに書いている。この参考例は、作り始める前にファーストビューを固めたいフィンテックプロダクト向け。収録したプロンプトは800x648で記録したので、このページで引用する値はすべてそこにたどれる。このページの残りは、料金セクションをブロックごと、次にタイミングと値ごとに分解する。ブリーフにない主張は足さない。
対象
- 自社の見出しを書き、そのうえで計測値を変えずに単一のコンポーネントでこの料金セクションを組み直せ。
- フィンテックプロダクト料金セクションを提案する制作会社が、98px刻みの余白を提案書に書き込みたい。キックオフの後も見積もりが崩れないようにするためだ。
- この料金セクションは、配色を新しく作らず#FF5656を使い回して組み直したいプロダクトマネージャーを対象にしている。
含まれる内容
- 検証できる数値. 寸法は収録時点のブリーフに98px刻みの余白として書かれている。再現は近似ではなく検証になる。画幅の比率も寸法と一緒に記録してあり、再現時に縦横比も合う。差し替えるのは書体かコピーで、スケールではありません。
- 操作だけに配分した色. ここでは色を配分する。アクセント1色（#FF5656）と下地1色（黒 #000000）だけで、注意を奪う第3の色はない。#FF5656と黒 #000000のコントラストが、小さいサイズでもアクセントを読ませる。
- 文章ではなくグリッド. 文章を流し込む場所にパネルを並べている。料金セクションを見渡せるのはそのためだ。グリッドは1列に畳んでもパネルの順序を変えない。パネルの見出しはページのスケールに合わせる。この参考は800x648で収録しました。
- 彩度を使うのは1か所. ここでは色を配分する。アクセント1色（#FF5656）と下地1色（黒 #000000）だけで、注意を奪う第3の色はない。#FF5656と黒 #000000のコントラストが、小さいサイズでもアクセントを読ませる。意味を担わない色は削る。
モーションとインタラクション
ホバーは控えめに
インタラクティブな要素はそれぞれ1つのことしかしない（必要なときに内容を送るスライダー）。状態が予測できるのはそのため。操作できそうに見えるコントロールは実際に反応するので、偽のアフォーダンスがない。ポインターの効果はコントロールに留める。この参考は800x648で収録しました。
静止も設計
これは800x648の静止した構図として届けられる。だから階層がモーションなしで成立する必要があり、実際に成立している。構図は静止したままなので、ページを支えるのは階層であり、それは成立している。
料金セクションの背後にある順序
順番どおりに読んでみる。見出し、カードグリッド。各要素は役割を一つだけ持ち、赤 #FF5656のアクセントは押してほしい要素にしか使われていない。フィンテックの読み手は、選択肢より先に訴求を受け取る。
料金セクションを支える数値
仕様はムードボードではなく、一冊の仕様書である。98px刻みの余白を固定し、メディアを800x648として指定する。この細かさがあるからこそ、作り直しても設計が生き残る。コピーを変えても関係は保たれる。この料金セクションに、初期値任せの部分はない。
料金セクションを自社のものにする
最初に配色を変えるのがよくある失敗。構成に触れないまま雰囲気だけが変わり、レイアウトを支えるのは結局98px刻みの余白。コピーとメディアを先に、配色は最後にする。別のブランドでも枠ごと再利用できる。
よくある質問（FAQ）
Price Calculatorの土台になっているプロンプトはどれくらいの長さですか？
収録されたブリーフは3,168文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
この項目に単一のコンポーネントが書かれているのはなぜですか？
必要ありません。ブリーフは依存関係の一覧ではなく仕様です。単一のコンポーネント向けに書かれていますが、同じ構図は今お使いの技術スタックでも作り直せます。技術スタックを明記しているのは、参照デザインがどう作られたかを知るためです。
Price Calculatorの素材はクライアント案件でどう扱えばよいですか？
この参考例はmotionsites.aiから収集したもので、素材の権利は収集元にあります。コピー、画像、配色は自社のものに差し替えて構成を作り直し、収集元から持ち込んだ要素を公開する前に、そのサイトの規約を確認してください。
