Article by: Jesse Box
お気づきかもしれませんが、Sentry の見た目が大きくアップデートされました。
これまで、プロダクトの見た目は「いかにもエンタープライズ向け」という無難なデザインだった一方で、ブランドはずっと大胆で型破りでした。そのちぐはぐさは、もう終わりです！今日からは、皆さんが Sentry に期待するあの「ノリ」とプロダクトのデザインがきちんと噛み合うようになりました。より鮮やかで、より手触り感があって、より一層「Sentry らしい」見た目になっています。
ようこそ、S.C.R.A.P.S. 時代へ。これは Sentry の新しいデザイン言語で、正式名称は 「Standardized Collection of Reusable Assets & Patterns for Sentry（Sentry のための再利用可能なアセット＆パターンの標準コレクション）」 です。Sentry ならではの、ちょっと風変わりでクセになる魅力を、そのままプロダクトの中に流し込むためのデザイン体系なのです。
はじまりはこんなところから
Sentry のプロダクトは、この数年で機能面では大きく成長してきましたが、見た目のほうは小さな改善の積み重ねにとどまっていました。「壊れていないものは直すな（Don’t fix what isn’t broken）」という考え方も、いつまでも通用するわけではありません。デザインは静かに古びていき、いったん世の中の期待値が変わってしまうと、かつては新鮮だったものも途端に古くさく感じられてしまいます。
一方で、ブランドのほうはどんどん先へ進んでいました。イラストはいい意味でどんどん「ヘン」になり、トーンはますます大胆に。それに対してプロダクトは、ずっと控えめなまま。両者の距離は少しずつ開いていきました。アプリはブランドの「少しトーンを落とした反響」であることが多いとはいえ、私たちの場合、そのギャップはもはや見過ごせないほど大きくなっていたのです。プロダクトが、もはや「Sentry らしく」感じられなくなっていました。
直近のマーケティングキャンペーンは「Make it make sense.」でした。
Sentry が初期に成功できた理由は、ほんの少しだけ他と違うことをしていたからです。誰も気にしないような部分にまで手をかけ、誰とも同じような「しゃべり方」をしないと決めていました。その最初のタグラインである「Sh*t Happens. Be on top of it.（トラブルは起きるもの。主導権はこちらが握る。）」が、その姿勢を物語っています。正直で人間味があって、ソフトウェアのカオスを前にしてもユーモアを忘れないトーンです。
その声は今も私たちを形づくっていますが、状況は変わりました。いまや「磨き上げられていること」は前提条件で、どのアプリも見た目はちゃんとしている。だから Sentry のデザインを刷新しようと決めたとき、私たちが目指したのは、よりツヤツヤした UI ではなく、「もう一度、自分たちらしさを取り戻すこと」でした。
課題は、個性と実用性のちょうどいいバランスを見つけること。その「アート」と「システム」のあいだにある緊張関係の中から生まれたのが、S.C.R.A.P.S. なのです。
たどり着いたかたち
以前はどこかフラットで抑制された印象だったインターフェースに、いまは立体感と個性が加わりました。派手すぎない程度の「触感」を持たせつつ、イラストのスタイルから要素を取り入れることで、プロダクト自体の存在感を強めています。スキューモーフィックでも、ミニマル一辺倒でもない。その中間の、ちょっと楽しくて、ちょっとおもしろいところを狙いました。
私たちが追いかけたのは、写実性ではありません。物理世界を真似るのではなく、「もしこれが Sentry のイラストの中に存在していたら、どんな見た目になるだろう？」と問い直しました。その結果生まれたのが、より生き生きとしていながら、実際に作業しているときにはきちんと脇に退いてくれるインターフェースです。
特定のフォーム要素はテキスト入力を前提としているため、画面から飛び出すように見せるよりも、むしろページの中に沈み込んでいるように見せたほうが自然だと感じました。結果として、「ユーザーからどのような入力を期待しているか」に応じて、要素ごとにスタイルが異なるという、分かりやすいパターンが生まれています。
この「物理性」を高めていくアプローチは、さらに別の問いを導きました。見た目をより物理的にするなら、「触り心地」も物理的であるべきなのか？ という問いです。従来の UI は、現実世界のオブジェクト（ボタン、スライダー、スイッチ）から借りてきたメタファーに頼ってきましたが、ソフトウェアは現実世界のルールに縛られる必要はありません。どの部分を現実に倣い、どの部分を再発明するかは、私たちが選べるのです。
S.C.R.A.P.S. のスイッチは、その触覚的なスタイルによって、「今どんな状態なのか」を視覚的に伝えてくれます。
UI をより物理的に見せようとしたとき、もうひとつおもしろい問いが生まれました。それは、「見た目を物理的にするなら、触り心地ももっと物理的であるべきか？」というものです。インターフェースのパターンは、たいてい現実世界のオブジェクト（ボタン、スライダー、スイッチなど）をモデルにしていますが、現実と違って、素材や機構に縛られることはありません。デジタル空間では、現実のどの要素を残し、どの要素を再発明するかを自由に選べるのです。
たとえばボタン。Sentry のボタンは、カーソルを重ねると、ほんのわずかに浮き上がってカーソルを迎えます。現実のボタンはそんなふうには動きませんが、「今クリックできる状態だ」というサインにはなりますよね。入力フィールドもこれまでのようにページの上に「乗っている」のではなく、ページの中に少し沈み込むような見た目になり、インタラクションの感覚をさりげなく強めています。どれもごく小さなディテールではありますが、積み重ねることで、Sentry 全体がより人間的で、より反応の良い存在として感じられるようになります。
S.C.R.A.P.S. のボタンは、他の要素よりも一段高く「立ち上がって」見え、押されたときにはページの表面と同じ高さまで沈み込みます。
私たちが新しいインタラクションを設計するときには、毎回同じ問いを投げかけます。「これは、現実世界で見慣れた何かのように振る舞うべきか？ それとも、デジタルならではの振る舞いをさせるべきか？」という問いです。その答えは、時間とともに変わっていくでしょう。でも、まさにそこにこのデザイン言語のおもしろさがあります。S.C.R.A.P.S. は、どちらか一方の世界を選ぶことではなく、両方から学ぶことを目指しています。
今回の新しいデザイン言語は、全体としてかなり大きな変化です。あえて業界の一般的な定石から距離を取り、「2025 年の Sentry そのもの」と感じられるルックを探し当てました。そのおかげで、これからさらに改良を重ねていくための、ワクワクするような新しいベースラインができたと考えています。
どのように実現したのか
今回のリデザインは、とてつもなく大きなプロジェクトでした。デザイン、デザインエンジニアリング（このプロジェクトのためにチーフ・クリエイティブ・オフィサーが新たに立ち上げたチーム）、フロントエンド、ブランドチームが 1 年半にわたってコラボレーションし、何百ものコンポーネントを作り直しました。見た目をシャープにし、一貫性を高め、保守しやすくするためです。裏側ではプロダクトのほぼすべての領域に手を入れ、調整し、ときには発想そのものを見直しています。
その結果として生まれたのは、単なるビジュアルの刷新以上のものです。これは新しい「土台」であり、今後さらに素早くプロダクトを組み立て、一貫した品質でリリースしつつ、その過程で Sentry らしさをしっかり保てる基盤でもあります。S.C.R.A.P.S. は、Sentry の見た目を形づくるだけのものではなく、「いま私たちがどう働くか」を表す仕組みでもあるのです。
なぜこの方向性を選んだのか
Sentry のブランドは、非常にビジュアルで表現豊かです。ブランドの中核を成すイラストは、「チームが一緒に何かをつくり上げている」様子をダイナミックに物語っています。
ここ数年、そのイラストはよりソリッドで立体的になり、「建設現場」や「宇宙探査」といったフィクションのメタファーを用いつつも、現実世界で見覚えのあるオブジェクトを組み合わせて構成されるようになってきました。私たちは、こうした「奥行き」や「存在感」を、そのままプロダクト側にも持ち込めるチャンスだと捉えました。S.C.R.A.P.S. は、こうしたイラストから着想を得ており、デザインシステムそのものにも、より触れられそうな、リアルな質感を与えることを目指しています。
最近のブログ記事のイラストでは、Sentry を使って AI 機能を監視できることを表現しています。
もうひとつ、私たちのブランドを形づくっている大きな要素が「声（ボイス）」です。「code breaks」や「make it make sense」といったフレーズを使うとき、私たちは何事も順調なふりをしているわけではありません。ソフトウェア開発の散らかった現実を、ウインクしながらちゃんと認めているのです。率直で、人間味があり、自覚的なトーン。その正直さは S.C.R.A.P.S. にも反映されており、インターフェース全体に、「肩の力は抜けているのに、自信は感じられる」ような雰囲気を与えています。
最後に
S.C.R.A.P.S. は単なる「新しい見た目」ではなく、カルチャーそのもののリセットです。私たちは長年、素早く・頻繁にリリースしてきましたが、そのクオリティがいつも同じ水準だったとは言えません。このプロジェクトを通じて、あえてスピードを少し落とし、よりよいシステムを整え、デザインとエンジニアリングのあいだに、より強い「つながり」をつくることができました。
はじまりは Figma のトークンと、コード上のコンポーネントでした。しかし、その先にはもっと大きな変化がありました。新しいデザインエンジニアリングチーム、作り直されたデザインシステム、きちんと整備されたデザインドキュメント、そして以前より密でコラボレーティブなデザイン文化です。
今回の変更を新しいナビゲーションとあわせて見ていただくと、私たちが 2 つの大きな課題、複雑さと一貫に真正面から取り組んでいることが分かるはずです。ナビゲーションは「厄介なバグを直すのに、なぜ複数の Sentry プロダクトをまたいで移動する必要があるのか」を説明し、S.C.R.A.P.S. は、そうした体験を「Sentry らしさ」を保ったまま予測可能なものにしてくれます。これらの取り組みは壊れていた部分を直すだけのものではなく、「この先の Sentry をどうしていくか」の舞台を整えるためのものなのです。
このブログを私たちからの「あらためての自己紹介」だと思ってもらえたらうれしいです。いま皆さまの前にある Sentry は以前よりシャープで表情豊かに、そしてこれからも進化し続けていくことを前提に設計されています。今回たどり着いたかたちを誇りに思いつつ、この先に待っているアップデートにさらにワクワクしています。
Original Page: Sentry has a bold new look
IchizokuはSentryと提携し、日本でSentry製品の導入支援、テクニカルサポート、ベストプラクティスの共有を行なっています。Ichizokuが提供するSentryの日本語サイトについてはこちらをご覧ください。またご導入についての相談はこちらのフォームからお気軽にお問い合わせください。
