見えるものを信じすぎると、プロダクトは壊れる: デザイン資産とOG画像が教える配備の本質

まず問いをひっくり返す

なぜ、見た目の品質を上げるための仕組みが、しばしば最も壊れやすいのか。

Storybook の整理やビジュアルリグレッションテストの導入は、UI を安定させるための王道に見えます。ところが実際には、ツールを入れた瞬間に終わる話ではありません。コンポーネントの一覧、スナップショット、画像比較、バージョンアップ、自動化。これらはすべて「見た目を守る」ための仕組みですが、守るべきものが増えるほど、運用は複雑になります。

一方で、OG 画像のような「生成される見た目」はもっと厄介です。静的に描画されるなら問題ないのに、動的ルートになると、配備後の環境ではフォントが消えている。すると、画像生成はコード上では正しく見えても、本番では別の顔を見せる。つまり、見えるものを守るための仕組みが、見えない差分に最も弱いのです。

この二つの話題をつなぐ深い問いはひとつです。UI の品質とは、画面の見た目を固定することなのか。それとも、見た目が生成される条件まで含めて設計することなのか。

答えは後者です。しかも、その答えはデザインシステムにも、画像生成にも、配備設計にも共通しています。