playful-color

playful-color

ひと目で心をつかむポスター：大胆でありながら、決して雑ではありません。

1. パレット（固定）

• ベース：クリーム #FDF6EC または明るい紙色 #FFF9EF。真っ白は使いません。
• インク：文字と輪郭にはコート紙のような黒 #101014。
• カラーフィールド — 彩度の高いインクは最大2色。意図を持って選びます：コバルト #2E4BFF、トマト #FF4D2E、バナナ #FFD100、ミント #2BD99B、フューシャ #FF3ED2。大きな面に広げるメインカラーを1色、アクセントやマークに使うサブカラーを1色にします。
• 輪郭：図形と紙が接する部分はすべて、インク色の2〜3pxの実線にします。ステッカーの切り抜き線のような印象です。
• グラデーションやぼかしたドロップシャドウは禁止です。硬いオフセットシャドウのみ使用できます（6px 6px 0 ink）。それも主役の要素2〜3個に限り、1つのビューポートにつき最大1個にします。

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

• ディスプレイ： 極太にします — Archivo Black、Bricolage Grotesque 800、またはシステムの bold-900。サイズは clamp(3rem, 8vw, 7rem)、行高は0.95、字間は −0.02em。大文字または文頭のみ大文字にし、強調したい単語を1つ回転させます。
• 本文： 同じファミリーの500/400、16〜18px、行高1.55。技術的な箇所には等幅フォントを使ってもかまいません。
• ラベル： 等幅または太字の大文字にし、letter-spacing: 0.06em、11〜12pxにします。カラーフィールドの上でも、常に読みやすくします。
• 使用できる強調表現は1種類のみです。単語に6pxのアクセントバーで下線を引くか、単色のフィールドに載せて回転させます。どちらか1つを選び、ページ内で3回以下にします。

3. 構成（固定）

• グリッドを外した躍動感、グリッドに沿った骨格： 意図的に主役の要素2〜3個（バッジの形、単語1つ、ボタンの組み合わせ）を2〜4°回転させる場合を除き、すべてを12カラムのグリッドに揃えます。回転はスパイスです。使いすぎると崩れて見えます。
• 色面で区切るセクション： 紙色のセクションと、インク色またはアクセントカラーの全面塗りセクションを交互に配置します（インク色のセクションでは紙色の文字を使います）。これが、大胆な色を洗練された印象に見せる構成です。
• ステッカー風コンポーネント： バッジやチップは、インク色の2.5pxの輪郭を付けた単色の面にします。四角形またはピル型にし、グラデーションやすりガラス風の表現は使いません。
• ヒーロー： 大きな文字＋ステッカーバッジ＋存在感のあるCTAひとつ＋色面で区切った製品パネル。ヒーロービューポートで使う色は最大2色です。
• 価格設定：存在感のあるカードを3つ並べます。それぞれを単色の面（紙色／アクセント／紙色）にし、インク色の輪郭を付けます。ハードオフセットシャドウを付けるのは、注目させるカード1つだけです。

4. コンテンツの扱い

• 絵文字は使いません。シンプルなマークを描きます：ドットグリッド、アスタリスク、矢印（3pxの線で描く →）、手描き風のSVGの曲線 — 下線や手描きの丸など。
• イラストは使用を推奨します。2色のインクで、平面的な幾何学図形（円、半円、放射線）を使います。グラデーション、3D、写実的な表現は禁止です。
• コピーは短く、直接的にします。感嘆符はページにつき1つまでです。勢いは文体ではなく色で生み出します。
• CTA：存在感のあるものにします — 高さは最低56px、インク色の2.5pxの輪郭、ハードオフセットシャドウを付けます。押した状態ではシャドウをなくし、2px移動させます。

5. モーション（弾むが短く）

• スプリング：行き過ぎを許容します — 要素の登場時には cubic-bezier(0.34, 1.56, 0.64, 1) を使い、350〜500msに設定します。各要素の動きは1回だけにし、繰り返しません。
• ホバー：ボタンを −3px 移動させ、シャドウを+2px大きくします。ロゴの揺れは1回以下にします。無限ループやマーキーは使いません。

6. チェックリスト（該当したらページは不合格…）

• パレットに、彩度の高い色が3色以上、またはクリームとインクを含めて5色以上ある。
• グラデーションまたはぼかしたシャドウがある。
• ページ内に回転させた要素が約3個を超えている。
• 絵文字がある。
• 本文が16px未満、またはコントラストが不足している（最低4.5:1）。
• ディスプレイ書体が3rem未満。
• デザインの要素が、そこにあることをためらっているように見える。