ここ数日で会話を開いた方は、何かが少し変わったと感じたかもしれません。
チャット画面が少し静かになりました。メッセージは読みやすく、操作部分は軽やかに。パネルやダイアログが会話そのものと注意を奪い合うことも減りました。機能の場所は変わっていないのに、キャラクターのまわりの空間が落ち着いて感じられるようになったはずです。
チャットから始めたのは、多くの人が Reverie で最も長く過ごす場所だからです。そして今回の再設計にある問いを試すには、最適な場所でもありました。強い第一印象を与えるだけでなく、会話の最初から最後まで快適であり続けるために、インターフェースはどうあるべきか？
そこで見えていた変化は、単独の画面改修ではありません。新しいデザインシステムが最初に姿を見せた場所でした。現在では、発見ページやキャラクターページから、制作ツール、ストーリー、決済、報酬、設定、そしてその間にある小さな機能画面まで、プロダクト全体へ広がっています。
Reverie は、これまでも表現力のあるプロダクトでした。
その個性は、印象的な境界線、はっきりした影、重なり合うカード、色彩豊かなコントロール、そして単なる画面上の長方形ではなく実物のように感じられる UI に表れていました。そこには温かさがあり、一目で Reverie だと分かる雰囲気がありました。
しかし、ある段階では適切だったビジュアル言語も、プロダクトが次の段階へ進むと重く感じられることがあります。
Reverie の成長とともに、インターフェースが支えるものは「見つけること」だけではなくなりました。長い会話、キャラクター管理、ストーリー執筆、プラン比較、高度なツール設定、そして複雑なワークフロー間の移動。同じ装飾がランディングページでは個性になっても、すべてのダイアログ、カード、メニュー、ボタンに繰り返されれば、視覚的なノイズになります。
今回の再設計は、Reverie らしさを減らすためのものではありません。その個性を、インターフェースの装飾ではなく体験そのものから感じられるようにするためのものです。
軽く、でも冷たくしない
「軽量」という言葉は、真っ白な背景、細い灰色の文字、存在感がなさすぎて未完成に見えるコンポーネントと結びつきがちです。私たちの目標は、そこではありません。
新しいシステムは静かですが、温かさを失ってはいません。
背景は鋭い純白ではなく、わずかに色味を含んだニュートラルな面へ移行しました。長く読む文章はより濃く、少しだけ力強く。境界線は控えめに、影は浅く、色は意味がある場所に絞って使います。視覚的な重さを減らしながらも、Reverie が物語と関係のための場所である感覚は残しています。
このバランスは、ロールプレイでは特に大切です。会話は設定画面ではありません。長いメッセージを読み、声色の小さな変化を感じ取り、同じ画面に長時間とどまります。文字と背景はスクリーンショットで美しいだけでなく、20 分読み続けた後も快適でなければなりません。
長く読むためのタイポグラフィ
今回の中でも特に重要で、同時に最も目立たない変更の一つが、文字の階層を強くしたことです。
大きな見出しの表情は残しつつ、本文にはより安定した視覚的な重みを持たせました。重要なラベル、ナビゲーション、操作は素早く見分けられる太さに。補助テキストは引き続き控えめですが、読むこと自体が負担になるほど薄くはありません。
原則はシンプルです。
- 長文は落ち着きがあり、しっかりと読めること。
- 操作はラベルをすべて読む前に見分けられること。
- 補助情報は後ろに下がっても、消えてしまわないこと。
- 画面、テーマ、周囲の明るさが変わっても読みやすいこと。
良い文字は注意を要求しません。注意を保ちやすくしてくれます。
プロダクト全体で一つのコンポーネント言語を
これはページごとの着せ替えではありません。プロダクトを支える共有コンポーネントの言語そのものを組み直しました。
ボタン、カード、ダイアログ、メニュー、タブ、フォーム、テーブル、ツールチップ、トースト、ドロワー、ポップオーバー、ナビゲーションは、次の項目で同じルールを共有します。
- 角の丸み
- 境界線のコントラスト
- 面の色
- 高低差と影
- フォーカス表示
- ホバーと押下状態
- 文字の太さ
- 余白
- 意味を持つ色
どんな単独の見た目より、この一貫性のほうが重要です。同じ種類の操作がどこでも同じように見え、同じように動けば、インターフェースを解釈する負担は減ります。危険な操作は危険に見え、選択した項目は選択済みと分かり、浮かぶ面は背後のページと区別されます。すべてのボタンが主役を争わなくても、主要な操作をすぐに見つけられます。
強調や成功といった状態にも、より明確な意味別のバリエーションを用意しました。個々の機能が独自のグラデーションや色を作り直すのではなく、共有システムの一部として利用できます。
難しかったのは、例外を見つけること
ボタンコンポーネントを更新しても、すべてのボタンが自動で変わるわけではありません。
長く成長したプロダクトには、局所的な判断が蓄積します。独自の境界線を持つ料金カード、特別な光を放つ報酬ダイアログ、専用背景の共有画面、見えにくい場所にある独自グラデーションの操作、ホバー表現を一から作った機能カードなどです。
こうした例外が、再設計の最後に「何か統一されていない」と感じさせる原因になります。
そこで監査はコンポーネントライブラリだけで終わらせませんでした。マーケティング画面、決済フロー、報酬、実績、キャラクターとストーリーのカード、共有ダイアログ、ナビゲーション、空の状態、バナー、普段は目立たないユーティリティ画面まで確認し、調整する価値のある独自 UI を共有言語へ戻しました。
すべての例外を消したわけではありません。祝福、緊急性、希少性、状態を伝えるため、強い個性が必要な場面もあります。違いは、そうした瞬間がシステムを無視するのではなく、システムを拡張する形になったことです。
装飾を減らし、操作を明確に
操作できそうに見えても、実際には有用な情報を加えていなかった効果を多く取り除きました。
すべてのカードに重い影を付けることはやめ、ホバー時の動きは控えめにしました。グラデーションは強調が必要な場面に限り、境界線はあらゆる内容を箱に閉じ込めるためではなく、構造を示すために使います。
その一方で、本当に必要な操作状態は明確になりました。
- 選択項目は、見た目と意味の両方で状態を示します。
- キーボード操作時のフォーカスを追いやすくしました。
- 操作できるカードのホバーとフォーカスを統一しました。
- ボタンは共有バリエーションで優先度を伝えます。
- ダイアログとメニューは背景から区別されつつ、プロダクトから切り離された印象にはなりません。
装飾を減らしたことで、フィードバックを改善する余地が増えました。動きは少なく、伝えることは多くなっています。
アクセシビリティも視覚システムの一部
マウスで見たときの姿だけを説明するデザインシステムは、完成していません。
今回の改修では、フォーカスリング、キーボード操作、選択状態の意味、コントラスト、操作可能なカードの振る舞いを見直しました。一部のコントロールは、押下中・選択中の状態を支援技術へより明確に伝えます。リンクのように動くストーリー項目は、キーボードからフォーカスして開けます。共有コントロールのフォーカス表示も同じ視覚ルールに従います。
これらは意図的に控えめです。アクセシビリティは別のモードとして上に重ねるものではなく、最初から標準の動作に含まれるべきだからです。
次に進むための、より良い土台
今回の仕事で最も価値があるのは、特定の色、角丸、影ではありません。同じデザイン上の問いに対して、プロダクトの中に競合する答えが減ったことです。
新しい機能を作るたびに、ダイアログの雰囲気、入力欄の反応、選択カードの表現をゼロから決める必要はありません。システムがすでに答えを持っています。開発が速くなるだけでなく、完成する体験がより予測しやすくなります。
一貫性とは、すべての画面を同じ見た目にすることではありません。安定した期待を持てるようにし、内容が変わってもインターフェースを見慣れたものに保つことです。
気づいてほしいこと
理想を言えば、最初はあまり大きな変化に気づかないかもしれません。
Reverie がただ読みやすく、落ち着いて移動でき、発見から会話、制作、アカウントツールまで一貫して感じられれば十分です。重要な操作は早く見つかり、補助的なコントロールは注意を奪わず、長い時間を過ごしても目が疲れにくくなるはずです。
キャラクターはこれまで通り豊かに表現できます。物語には今まで通り空気があります。祝うべき瞬間は、これからも鮮やかでいられます。
インターフェースが、語るべきときと、ほかの大切なもののために静かになるべきときを、少し上手に理解しただけです。
新しいデザインシステムは Reverie 全体へ広がりました。特に良くなったと感じる場所、あるいはまだ馴染んでいない場所があれば、ぜひ Discord コミュニティで教えてください。