# 声のデッキ — Style Reference > 暗い机の上に、クリーム色のカードを束にして置く。一番上を払うと宙を回って束の底へ入り、次の声が浮く。 **Theme:** dark **Series:** PARTS 084 **World:** 事務所向けの業務ツールの「使っている人の声」。設計事務所から出版社まで。 ## Concept 推薦文を一覧で並べず、トランプの束として置く。読むのは一度に一枚。払う動作に重さと回転があり、束の厚みで「まだある」ことが分かる。机は炭色、カードは紙、差し色は青緑の光一つ。 ## Signature Technique **CSS 3D のカード束 + ポインタのドラッグ。** ライブラリなし。 1. `.deck` は `perspective: 1400px`、`transform-style: preserve-3d`。カードは全て `position:absolute; inset:0` で重ね、`order` 配列の位置 `pos` から `translate3d(0, pos·SPREAD, −pos·LIFT) rotateZ(±pos·TILT/2) scale(1 − pos·.035)` を与える。4 枚目以降は不透明度 0。 2. ドラッグ中は先頭のカードを `translate3d(dx, dy·.4, 40px) rotateY(r·30deg) rotateZ(r·10deg)`(r = dx / 幅)で指に追従。 3. 離したとき、移動量が幅の 30% を超えるか速度が .6px/ms を超えれば `send(dir)`: 幅 ×1.15 まで飛ばし `rotateY(55°·dir) rotateZ(14°·dir)`、480ms 後に `order` を回し、束の底の位置(`z −200`、`scale .86`、横に 60%)へ遷移なしで置き直してから `layout()` で滑り込ませる。 4. 届かなければ `layout()` で元の位置へ戻る(600ms `cubic-bezier(.2,.9,.25,1)`)。 5. 矢印ボタンと左右キーでも同じ `send`。`aria-live` と `count` で位置を伝える。 6. reduced-motion では遷移なしで順番だけ入れ替える。 ## Color Palette | Token | HEX | Role | |---|---|---| | --table | #151515 | 机。ページの地 | | --table-2 | #1C1C1B | 机の中央の明るみ | | --cream | #FFFBEB | 見出し、矢印 | | --cream-2 | #CFC9B4 | 本文 | | --muted | #8E8A7C | 枚数とヒントとバッジの文字 | | --edge | #383835 | 矢印ボタンの線 | | --card | #F7F2E3 | カードの紙 | | --card-2 | #E9E2CC | カードの下端の陰 | | --ink | #1B1A17 | カードの引用文 | | --ink-2 | #5B574B | カードの肩書 | | --teal | #2FC4B2 | 引用符とラベルと印と天井の光 | ## Typography - **Shippori Mincho 500/700**: 見出し `clamp(28px, 3.4vw, 46px)` 700、引用文 `clamp(18px, 1.8vw, 26px)` 500 行間 1.7、`word-break: auto-phrase` と `text-wrap: pretty` で文節の途中で折り返さない。操作説明は束の 54px 下(重なったカードの縁と離す)。 - **Zen Kaku Gothic New 400/500**: 本文 15px / 1.7、肩書 14px 500、所在地 13px、ラベル 11px 500 字間 .2em 大文字、枚数 12px 字間 .14em tabular。 - 引用符は Georgia の 48px、青緑。 ## Spacing & Layout - 2 カラム grid(1fr 1fr、gap 40px)、最大幅 1240px、上下 `clamp(48px, 8vh, 96px)`。 - カードは幅 `min(100%, 420px)`、縦横比 4:4.6、内側 34px 32px 30px、角丸 14px。 - 860px 以下で 1 カラム、束を上に(幅 340px、内側 26px 24px 22px)。 ## Motion - 束の整列 600ms `cubic-bezier(.2,.9,.25,1)`。払い 550ms `cubic-bezier(.3,.6,.4,1)`、480ms 後に順番入替、420ms 後に次の操作を受け付ける。 - ドラッグ中は遷移なし。 - reduced-motion: 遷移なし。 ## Components - **card**: 番号(右上 11px)/ 引用符 / 引用文 / 罫 / 印(円錐グラデーションの 34px)+ 肩書と所在地。影は下方向 30px 50px と 1px の明るい上縁。 - **nav**: 44px の円い矢印ボタン 2 個 + 枚数「1 / 5」。 - **light**: 画面上部の青緑の放射グラデーション(固定、クリックを通す)。 - **badge**: 右下固定 `VALE / PARTS 084 / 声のデッキ`。 ## Do / Don't **Do** - 一度に読むのは一枚。下の札は 3 枚まで見せる。 - 払いは必ず回転を伴わせる。平行移動だけだと紙に見えない。 - 肩書は役割と土地だけ。 - 束の傾きは 2〜4°。それ以上は散らかる。 **Don't** - カードに写真や星を置かない。 - 自動でめくらない。読む速さは人による。 - 束を 7 枚以上にしない。底の札は見えない。 - 引用文を 3 行以上にしない。カードの高さが揃わなくなる。 ## References - **Cards Against Humanity** (Refero): ベルベットの台に散ったカードという、商品そのものを画面にする考え方を抜き出した。多色の縁取りと黒いカードは捨て、クリーム色の紙一種にした。 - **Allfeat** (Refero): 炭色の面にクリームの文字、青緑の舞台光が一筋という配色を参考にした。光は天井からの放射 1 つに絞り、引用符と印に同じ色を使った。 ## Usage 1. `.deck-wrap`(`.deck` + `.hint`)と `.nav` を切り出す。`