Structure over Style

「ワンバンくん」導入を支えた、見た目に依存しないコンポーネント設計

Transcript

1. Structure over Style 「ワンバンくん」導⼊を⽀えた、 ⾒た⽬に依存しないコンポーネント設計 2026年2⽉26⽇ 五反⽥.mobile Vol.2 モバイルアプリデザイン最前線 @dayu
2. SmartBank, Inc. Product Designer dayu @aker_ue
8. 特⼤リブランディング発⽣
 アプリUIにも影響を及ぼす可能性⼤ 

9. アプリUIへのアプローチを考える よくあるアプローチ B/43の完成されたデザインシステムでは ワンバンを受け⼊れることはできない‧‧‧ いっそ全部作り直してしまった⽅が 良いのかもしれない‧‧‧ 特⼤リブランディング発⽣
10. 特⼤リブランディング発⽣ アプリUIへのアプローチを考える 今回 既存のシステムを捨てず、 その中にワンバンを取り込む形で 新しいブランドを迎え⼊れることに
11. Question なぜ既存システムは キャラクターという「想定外」を 受け⼊れられたのか？ Style vs Semantics
12. Answer コンポーネントを⾒た⽬（Style）ではなく 意味‧役割（Semantics）で定義し続けてきたから Style vs Semantics
13. Style vs Semantics
 ⾒た⽬ではなく構造で設計するとは 

15. Style依存 vs Semantics依存 🤔 Style依存の定義 ✅ Semantics依存の定義 RedRoundedButton DestructiveAction ⾒た⽬（⾚い‧丸い）で名前をつける 役割（破壊的操作）で名前をつける デザイン変更 → システム破綻 デザイン変更 → システムは壊れない Style vs Semantics ※このボタンはスマートバンクのデザインシステムには存在しません
16. 例) ユーザーへのフィードバック もともとあったもの テキストとアイコンだけのシンプルな結果画⾯ 「Feedback Message」コンポーネント 新規追加 ワンバンくんが褒めてくれる結果画⾯がほしい！ →「Onebankun Message」を作る？ Style vs Semantics
17. Semanticsな⼿段を選ぶ 🤔 OnebankunMessage ✅ FeedbackMessage 「ワンバンくんがいる」 ユーザーへのフィードバック ユーザーへのフィードバック全般 完了した時も、エラーが出た時も、 next Actionを指し⽰す時も使える Style vs Semantics 「ワンバンくんが」ユーザーに 何かを伝える時に使える
18. Style vs Semantics 実際のコンポーネント設計
19. FeedbackMessage 結果 FeedbackMessageのVariantに”Onebankun”を追加することで 既存コンポーネントのままキャラクターを実装できた コンポーネントをSemanticsで定義して作っておくことで、 新しい要素が⽣まれても役割の中に格納する意思決定が可能に Style vs Semantics
20. Semanticsの維持
 どのようにシステムを作り、保っているか 

21. Semanticsの維持 隔週MTGで議論 デザイナーとエンジニア全員で、 アプリに関する議題を持ち寄るMTGを継続実施 🔥 2025年は隔週開催で62議題を会話していました
22. 共通⾔語の構築によって判断がスムーズに 抽象化して捉えているから、判断ができる 「これは既存システムに追加すれば実現できる」「これは新 規で⽤意が必要」という判断ができる ⽇々議論するから、すぐに合意形成できる ⽇頃からエンジニア‧デザイナー全員で「構造の議論」を ⾏っているから、相談‧決断もはやい Semanticsの維持
23. まとめ
 リブランディングによってわかった学び 

24. まとめ 3つの学び リブランディング ≠ 作り直し 既存資産を活⽤すれば、世界観は刷新できる 設計の⼒ 「⾒た⽬」に惑わされず「意味」で定義していれば、システムはどんな変化にも耐えられる 対話の価値 強いシステムを作るのはFigmaやコードではなく、エンジニアとデザイナーの⽇々の議論かも 1 2 3
25. 採用 QRコードとhiringメッセージとかいれる
26. Structure over Style 「ワンバンくん」導⼊を⽀えた、 ⾒た⽬に依存しないコンポーネント設計 2026年2⽉26⽇ 五反⽥.mobile Vol.2 モバイルアプリデザイン最前線 @dayu