なぜ写本と呼ぶか、UI ではなく
もう一つ神秘系のアプリを作りたくはなかった。私たちが作りたかったのは、たまたまブラウザに住んでいる本である——一度に一枚カードをめくる本、下書きの間に墨が乾いていく本、十六世紀の印刷工が署名で承認したであろう細線の装飾を余白に持つ本。これを「UI」ではなく「写本」と呼ぶのは、詩的な飾りではない。それは下流のあらゆる決定を変える。
UI はスループットを最適化する。意図から結果まで、最小のタップ数で運びたい。写本は注意を最適化する。正しい瞬間にあなたを少し遅らせたい——カードを引く前のひと呼吸、カードがめくれる間の静かな二秒、解釈が紙にインクを落とし始める前の停止。スループット最適版の Lunarcana はもっと速く、もっと小さく、そしてあなたは二度と戻ってこない。
黒曜石の上のアイボリーという配色は、この姿勢が最初に求めるものである。暗いページは下から灯された羊皮紙のように読める——蝋燭が本に近づけられた、あの一瞬のように。この調性は、紫色のグラデーションと水晶玉のストック写真で照らし過ぎられたカテゴリーの中で、真面目さの控えめな信号でもある。Lunarcana が一目で「静かな内的作業のための真面目な場所」として読まれることを望んだ——客間の小芸ではなく。
三つのことを最初に拒否した。あらゆる形の「神秘系ストック画像」を拒否する——たなびくスカーフ、光る掌、紫の星雲、いずれも要らない。儀式の瞬間にモーダルポップアップを使うことを拒否する——センタリングは流れの中で、開示は流れの中で、何にも遮られない。そして「占い」というフレーミング自体を拒否する。Lunarcana はデジタルの手稿であり、書く道具である。鏡であって神託ではない。下に続く規矩のすべては、この三つの拒否のために働く。
「スループットは道具のため、注意は儀式のため。」
色 · アイボリー、黒曜石、金
パレットには三つの音しかない。アイボリーは既定のインクである——本文のあらゆる段落、あらゆるラベル、静かなメタデータの一行一行が、アイボリーかその褪せた変種である。黒曜石はページである——純粋な黒、ネイビーや炭色に和らげない。背景がほんの数度温まった瞬間、金は閾値性を失い、写本はマーケティングサイトに見え始める。金は三つ目の音、配給制である。
金は閾値の徴としてのみ用いる。注意の形が変わるべき瞬間を標す——文書頭のブランド印、長い節を開く頭文字下げ、章見出しの下の細線、ボタンが届くと約束するホバー状態、めくれの最中のカードの明るい縁、たった今開示された位置ラベル、クロームの月相のグリフ。それ以外で金は禁じられている。一頁の中で金のピクセルが一つも現れずに済むこともあり、それは仕様である。
配給制の理由は美学ではなく情報理論である。金がどこにでもあるなら、金はどこにもない——信号であることをやめ、テクスチャになる。読者とページの関係を本当に変える瞬間にだけ取っておくことで、温かい一閃の色に、規律の薄い設計なら十のグラデーションでも果たせない仕事をさせることができる。「閾値の規則」はこの文書の中で最も重要な規則であり、機能の圧力の下で最も静かに破られやすい規則でもある。
金が許される場所
- 文書頭の Lunarcana の印。
- 長い本文を開く頭文字下げ。
- 章見出しの下の細線。
- 対話可能なコントロールのホバーとフォーカス状態。
- タロットカードのめくれ最中の明るい縁。
- たった今開示された位置ラベル。
- クロームの月相のグリフ。
私たちは紫を使わない。グラデーションにも、アクセントにも、ホバーにも、どこにも。紫は神秘系アプリ全体の視覚的な紋切り型であり、それを避けることが、Lunarcana が別のことをしていると示す最も効率の良い方法である。
書体 · 階層、コントラスト、呼吸
写本には八つの書体トークンがあり、それぞれ一つの仕事を持つ。Display は字標と稀な儀式的タイトル。H1 は章の冒頭。Section は本文ブロックを導く小見出し。Body は今あなたが読んでいる長文の散文。Body-CJK は中日の同じ散文で、字面が縦のリズムに合わせて調整されている。Eyebrow は小さな大文字ラベル。Quiet は余白のメタデータ。Numeral は計数に使う等幅数字。
本文は bodyClass(locale) で選ぶ——このヘルパーはラテンには t-body を、zh/ja には t-body-cjk を返す——なぜなら中国語と日本語の字面はラテン語と異なる呼吸をし、英語で寛いで読める行間が中文では窮屈に読めるからである。JSX に locale === 「zh」|| 「ja」 のような判定を直接書いてはならない。ヘルパーが境界である。
書体カスケードに、一つ覚えておくに値する罠がある。globals.css の .t-* クラスは無階層であり、Tailwind の任意ユーティリティ text-[1rem] は .t-display や .t-h1 のフォントサイズ、字間、行間を上書きできない。これら三つのレスポンシブな上書きが必要な時は、インライン style に降りて clamp() を使う——インラインスタイルは両方の層を上回る。Header の字標で一度噛まれた。二度目はない。
.t-display · 儀式的
LVNARCANA
.t-h1 · 章の冒頭
この写本をどう手描きしたか
.t-eyebrow · 小見出し
美学のメタ志
.t-body · 長文の散文
リーディングは儀式であって、問い合わせではない。
この四つの見本は、写本の他の部分が用いるのと同じ .t-* クラスでレンダリングされる。スクリーンショットではない。トークンの声がいつかずれた時、ずれは最初にここに現れる。
動き · 透明度のフェードのみ
Lunarcana のフェーズ遷移はフェードする。スライドしない、ポップしない、y 軸でばねない。リーディング全体——問い、センタリング、ドロー、開示、解釈——は単一の AnimatePresence の wait モードの中で起き、各フェーズは透明度で入り、透明度で退場する。例外が一つだけある——カード自体はめくれの間に Y 軸で回転する。カードはカードであり、カードはめくれる。それ以外のすべての遷移は、墨がページに浸み込む、あるいは抜けていくのみである。
初回の反復の後、layoutId を取り除いた。layoutId は技術的には美しい——Framer に二つのレイアウト間で FLIP アニメーションを実行させる——が、私たちの場合、開示後にスプレッドが再レイアウトされる時に、わずかなレイアウトジャンプを引き起こした。あの飛行を left 上の CSS 遷移と新しいクロームへの独立した透明度フェードに置き換え、写本は痙攣をやめた。不変量は「レイアウトジャンプは決して起こさない」である。二つの状態の間でページの寸法が変わるなら、新しい状態は変化の前に空きを予約しなければならない。
「動きを抑える」は各層で尊重される。prefers-reduced-motion の下では、呼吸の輪は呼吸を止め、カードのめくれは 300 ミリ秒の透明度トグルになり、デッキは震えるのをやめ、蝋燭はちらつくのをやめ、めくれの金の閃光は抑制される。アクセシビリティはここでチェックボックスではない——瞑想道具にとって、それは表面積そのものである。
フェーズ遷移の透明度のタイミング
敢えてしないこと
ほとんどのデザインシステムは、自分が「する手」を書く。より書きにくく、私たちが最も読み返す文書は、「しない手」のリストである。負の空間が教義である。次の五つを境界として置く。
未来を予言しない。
Lunarcana の位置づけはデジタルの手稿、書く道具、内なる鏡である——占いや占術サービスではない。このフレーミングは荷重を負っている：決済プロバイダの利用規約がそれを要求するからでもあり、より重要なことに、カードを「予測」として枠に嵌めた瞬間に、カードが読者のために行う内的作業が損なわれるからである。私たちは手稿と言い、書きものと言い、鏡と言う。神託とは言わない。
神秘系ストック画像を使わない。
紫のグラデーションも、水晶玉のレンダリングも、たなびくスカーフも、光る掌も、デッキの背後の星雲もない。写本における唯一の神秘的な画像はカード絵そのものであり、それを取り巻くクロームは厳しいまま保たれる——カードが自分の声で語るために。
中核の儀式に課金壁を置かない。
無料層は常に読める。日次習慣の二つのスプレッドは無制限、それ以外は月のリズムでアクセスできる。壁は——立てる時——「回数」と「書き出し」の周りに立て、センタリング、ドロー、開示、解釈そのものの周りには決して立てない。儀式は読者のものである。
儀式の瞬間にモーダルで割り込まない。
センタリングは流れの中で、開示は流れの中で、解釈は流れの中で流入する。これらの瞬間にモーダルが立てば、リズムは砕ける。モーダルは実用——確認、設定、決済——のために取っておかれ、儀式そのものには決して使わない。
音を自動再生しない。
多くの文脈でミュートが既定である。アンビエントの寝床と SFX はクロームを通じてオプトインで、読者の最後の選択を覚えておく。静かな車中で読者を不意に驚かす音は、彼らを失う最速の道であり、写本は失礼であるよりも沈黙を選ぶ。
源流と謝辞
Lunarcana のいずれの部分も無からの発明ではない。この写本は、ゆっくりと手作業で、丁寧に装飾された仕事の長い棚の上に立っており、その棚に謝辞を捧げることはこの規律の一部である。長い反復の間、私たちが心に置いてきた影響を以下に記す。どれもひけらかすために挙げているのではない——それぞれが最終の本に具体的な姿勢を寄せたから挙げている。
- ウィリアム・モリスとケルムスコット出版
- ページはレイアウトではなく織物である、余白は本文と同じくらい重要である、手で装幀された仕事は工業競争相手より遅くある権利を得ている——という確信。
- オーブリー・ビアズリー
- 黒と象牙の線描の規律、そして一つの装飾にすべてを語らせるためにページの大きな部分を空のままにする勇気。
- 1909 年のライダー・ウェイトのクロモリトグラフ
- デッキ自体の具体的な図像と色の論理、そして印刷された神秘学は「神秘的に見せようとする」ことをやめ「真面目な本に見せようとする」時に最も明瞭に読者に届くという思い出し。
- ヴォイニッチ手稿
- 説明する以上を知っているページの空気感。マルジナリア。細線の装飾。意味が落ち着く前に、読者がしばらくの間「分からない」の中にいることを許す姿勢。
- 現代のスローデザイン運動
- 現代アプリを支配する「エンゲージメント・ループ、スワイプ給餌、ドーパミン・ケイデンス」のパターンを拒否し、代わりに、座って一つの想いに付き合うことを選んだ読者のために設計する許可。
招き
教義が仕事をしているなら、吸収された後にそれは消える。上に書かれたものの大半は、数分後にはあなたが座っている部屋の様子のように感じられるはずだ。それが意図である。表層の下の規矩がそこにあるのは、表層が静かでいられるためである。
用意ができたら、一枚引いてほしい。デッキは隣の部屋にある。指南書はその上の棚にある。「Lunarcana について」のページが、誰がこの写本を守っているかを教えてくれる。装幀が持ちますように。