quiet-luxury

quiet-luxury

ひとつのアイデンティティ：プライベートバンクの年次報告書――手に取るときの所作まで変わるような一冊です。

1. パレット（固定）

• ベース：アイボリー #F7F2EA。交互に使うパネル：#EFE8DC。
• インク：深いエスプレッソ #17130F（温かみのあるほぼ黒）。セカンダリ：#6E655A。
• アクセント — 次のうち、必ずひとつだけ：アンティークブラス #9A7B4F、オックスブラッド #742D2C、またはディープフォレスト #2E4436。ブランドに合わせて選び、変更しないでください。
• 罫線：rgba(23, 19, 15, 0.18) の極細線。
• 純白の背景は使いません（「テンプレート」のように見えるため）。グラデーションや光る影も使いません。影は浮遊要素に限り、非常に柔らかくします（blur ≥ 40px、不透明度 ≤ 0.12）。

2. タイポグラフィ（固定）

• **ディスプレイ：**コントラストの高いセリフ体（Cormorant、Canelaクラス、Playfair Display、または代替の Garamond）。サイズは clamp(2.6rem, 6.5vw, 5.5rem)、ウェイトは 400～500、行送りは詰めて 0.95～1.05 にします。イタリックは許容されるアクセントです。見出しごとに使うのは1語だけです。
• **本文：**ニュートラルなサンセリフ体（システムのサンセリフスタック、ウェイト 300～400）で 16～17px、行間 1.7。エディトリアルなセクションでは 18px のセリフ体も使えます。本文のコントラストは控えめにし、ソフトインク #6E655A を使います。純黒は決して使いません。
• **ラベル：**スモールキャップまたは大文字のサンセリフ体で、letter-spacing: 0.18–0.28em、10～11px、ソフトインク。
• 数字：セリフ体の数字。オールドスタイル機能（0.75em、必要に応じて等幅数字）。

3. 構成（固定）

• **余白こそがプロダクトです。**ヒーローのパディングは 18vh 以上。セクション間は 140px 以上。要素でビューポートの端から端まで埋め尽くしてはいけません。
• **非対称のエディトリアルなカラム：**見出しは 7/12 カラムに配置し、細い縦罫線を挟んで、幅の狭い 3/12 のインデックスカラムを置きます（ラベルを積み重ね、小文字の大文字表記の項目と極細の区切り線を使います）。
• **ボックスではなく細い罫線：**セクションの区切りには極細線または余白を使い、太い枠線や塗りつぶしカードは使いません。パネルを設ける場合は、交互用のアイボリー #EFE8DC を使い、枠線なし、角丸は 2px 以下にします。
• **マーキーを使わないタイポグラフィブロック：**見出し＋1行のサブテキスト＋CTAをひとつ。要素を増やしすぎないようにします。落ち着いた3つのセクションは、騒がしい8つのセクションに勝ります。
• 価格設定：上部に極細線を引いた表形式のリストにし、金額にはセリフ体を使います。注目の料金プランは、プラン名の上に細いアクセント線を引き、塗りつぶしのボックスにはしません。

4. コンテンツの表現

• 絵文字は使いません。グラデーションボタンも使いません。「握手する人々」のような定番ストック写真も使いません。
• 画像：全面に広がる、彩度を抑えたフィルム調の画像を使い、意図を持ってトリミングし、デュオトーンからニュートラルな色調に仕上げます。画像は装飾ではなく窓です。幅いっぱいに広げるのではなく、ゆとりのある余白を設けてレターボックス状に配置します。
• ブランドらしい文体で書きます。短い文にし、感嘆符や「🚀」は使いません。コピーもデザインの一部です。
• CTA：アクセントカラーまたはインクで塗りつぶしたボタンをひとつ。角はほぼ直角にします（角丸 ≤ 4px）。小文字の大文字表記と極細の下線を使ったテキストリンクをひとつ。視覚的に同等のボタンを2つ並べてはいけません。

5. モーション（ほとんど目立たせない）

• 各セクションにつき、シーンの登場は1回だけにします。10～14px 上昇させ、500～700ms、cubic-bezier(0.22, 1, 0.36, 1) を使います。
• ホバー：控えめにします。アクセントカラーへの色の変化、不透明度 0.85、200ms。弾ませたり、揺らしたり、回転させたりしません。

6. チェックリスト（次の場合はページを不合格にする…）

• 純白の #FFFFFF 背景を使用している。
• 複数のアクセントカラーが使われている。
• ディスプレイ見出しにサンセリフ体が使われている。
• 絵文字、紙吹雪、またはグラデーションが使われている。
• 見出しが少なくとも約 2.6rem ではない、または本文の色が純黒である。
• 主要なセクション間が約 140px 未満である。
• 1つのビューポート内に塗りつぶしの CTA が複数表示されている。
• 正当な理由なく、2px を超える角丸のカードが使われている。