Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
デザインシステムと画面パターン
Search
fkady
August 25, 2022
Design
1
1.3k
デザインシステムと画面パターン
fkady
August 25, 2022
Tweet
Share
More Decks by fkady
See All by fkady
ユーザー体験を支える_freeeのデザインシステム活用.pdf
fkady
2
20k
Other Decks in Design
See All in Design
BtoB SaaS Design Conference 登壇資料 Cloudbase LT
narizuka
0
480
Designing UIs without a UI designer
strongeron
0
110
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
jdesign_tokyo
1
380
B/43プラスカードができるまで
putchomsmartbank
0
460
Jeremy's First Day
myates3
1
130
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
3.7k
言語やロールの違いを超えて、一緒にデザインしていくための挑戦
hrtnde
0
1.3k
noteのアクセシビリティ これまでのプロダクト・組織へのアプローチとこれからのこと
tatsuyasawanobori
1
1k
プロダクトデザイン部 組織紹介(デザイナー向け)
chatwork_hr
1
220
2024デザすぷVol.4 新年会/ Design Sprout Bar vol-4
root_recruit
1
310
デザインをみんなのものに 「デザインの脱植民地化」を日本の文脈で考える
mayunak
7
4.1k
Resolving text accessibility dilemmas in UIs
romanshamin
0
130
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
115
18k
Documentation Writing (for coders)
carmenintech
59
3.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
118
38k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Thoughts on Productivity
jonyablonski
57
3.8k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Transcript
デザインシステムと画面パターン 2022.08.23
2 freee株式会社にエンジニアとして新卒入社。 Webアプリケーションの開発経験を積んだ後、デ ザインチームに異動。 現在はfreee会計のプロダクトデザイン業務やデ ザインシステム運用を行なっている。 趣味は酒とコーヒーとサウナとスマブラ。 最近のブームはコテンラジオ fkady
Design Engineer / Product Designer twitter: @_fkady
本日のテーマ
freeeの目指す方向性から 画面パターンと結びついたデザインシステム の必要性をより考え始めている話
5 アジェンダ 1. freeeの目指す姿(ミッション・ビジョン)と求められること 2. 目指す姿と現状のデザインシステムにあるギャップ 3. 画面パターンに期待すること、今後どう取り組んでいくか 4. 将来的にありえる展望
1. freeeの目指す姿(ミッション・ビジョン)と求められること 6
Mission freeeは「スモールビジネスを、世界の主役に。」 をミッションに掲げ、 「アイデアやパッションやスキルがあればだれでも、 ビジネスを強くスマートに育てられるプラットフォーム」 の実現を目指してサービスの開発及び提供をしております。 大胆に、スピード感をもってアイデアを具現化することができる スモールビジネスは、様々なイノベーションを生むと同時に、 大企業を刺激して世の中全体に
新たなムーブメントを起こすことができる存在だと考えております。 スモールビジネスを、 世界の主役に。
8 Vision 注: 1. ERP:Enterprise Resources Planningの略称。日本語では、企業経営において点在するあらゆる情報を一箇所に集め、一元管理を行うシステムを指して一般的に「ERP」「ERPパッケージ」と呼ばれる ユーザーネットワーク 取引の効率化・活性化を実現 統合型クラウドERP(1)
スマートで適切なアクションを実現 オープンプラットフォーム 多様なビジネス・経営ニーズに対応 1 2 3 だれもが自由に経営できる 統合型経営プラットフォーム 電子稟議 プロジェクト マネジメント 経費精算 債権債務 管理 人事労務 契約 固定資産 請求管理 会計 販売管理
9 統合型ERPに求められること • スモールビジネスに関わる様々な領域でプロダ クトを開発。それぞれの一貫性や統合型として の価値や体験を提供する • 新規プロダクトもスタートアップに勝るスピード感 を持って開発。プロダクト単体でもユーザーに 価値が届くように
統合型クラウドERP スマートで適切なアクションを実現 電子稟議 プロジェクト マネジメント 経費精算 債権債務 管理 人事労務 契約 固定資産 請求管理 会計 販売管理
10 デザインシステムに求められること • どのプロダクトを使っていても「一貫した体 験」を提供できるよう支えたい • 新規プロダクトの立ち上げ、既存プロダクト の改善共にスピード感を持って開発できる 土台としたい デザインシステムとして
「一貫した体験・プロダクトの開発生産性」の下支えをしたい • スモールビジネスに関わる様々な領域でプ ロダクトを開発。それぞれの一貫性や統合 型としての価値や体験を提供する • 新規プロダクトもスタートアップに勝るスピー ド感を持って開発。プロダクト単体でもユー ザーに価値が届くように 統合型ERPに求められる デザインシステムに求められる
2. 目指す姿と現状のデザインシステムにあるギャップ 11
12 現状のデザインシステム/取り巻く状態 • フェーズ ◦ 立ち上げから3年程度経っていて、各プロダクトで利用されている • 用意しているもの ◦ ReactComponent
ライブラリ ◦ figmaライブラリ ◦ storybook(ドキュメント・カタログ) ◦ UI/UXガイドライン(画面設計の指針) • 体制 ◦ 中心メンバーがいつつ、各チームから都度コミットしてもらっている ◦ 毎週サロンを開くなど、相談しやすい環境づくり • 開発組織 ◦ デザイナー30人以上、エンジニア250人以上
13 現状のデザインシステム/出している効果 • 1からコンポーネントを実装しなくて 良く、修正時は使っている箇所全体 に反映できる • デザインライブラリにあるものは実装 としても存在し、Designer/Engineer 間のコミュニケーションも円滑にな
る。 コンポーネントレベルで、一定の効果を出している 開発生産性 • コンポーネントの見た目と挙動が揃 う。見た目から挙動がなんとなく想 像できユーザーが学習しやすい • アクセシビリティなど品質も伴い、誰 にでも使いやすい状態の実現を担 保している 挙動の一貫性・品質の担保 • 各コンポーネントに、文字や色など のデザインエレメントが反映されて いる。 • イラストを組み込んだコンポーネント も存在する。 ブランド体現
14 目指す姿と現状とのギャップ 現状出している効果 • コンポーネントレベルでの一貫性に とどまり、似たパターンの画面でもレ イアウトが異なることもある • コンポーネントレベルの開発生産性 への寄与にとどまり、似た組み合わ
せの実装を繰り返している箇所もあ る 目指す姿から求められること • どのプロダクトを使っていても「一貫 した体験」を提供できるよう支えたい • 新規プロダクトの立ち上げ、既存プ ロダクトの改善共にスピード感を 持って開発できる土台としたい
15 ギャップの背景として主に考えられること • デザインシステムの立ち上げに、レイアウトの改善も見込んでいた ◦ レイアウトが固まった所からコンポーネントを抽出したわけではなく、コンポーネント の利用と共にあるべきレイアウトから考えていくことにもなる • UI/UXガイドラインは画面設計の指針としてあるが、具体的なレイアウトまで規定してい なかった
• storybookには実装サンプルを載せているが、レイアウトの面ではデザイナーの総意と はなっていなさそう。 • 新規プロダクトでは新しくレイアウトを試す機会があるが、歴の長いプロダクトやデザイ ンシステムが追従できていない
3.画面パターンに期待すること、今後どう取り組んでいくか 16
17 画面パターンとして定義したいことと期待する効果 • プロダクトを通した「一貫した体験」を提供し やすくなる • デザイン生産性 ◦ 7~8割はパターン化される見込みで、デザ インのベースとして捉えられる
◦ パターン化されない部分によりフォーカス して考えられる ◦ 属人化せず、再生産しやすくなる • 開発生産性 ◦ デザインが揃うと、frontの実装としても揃 えやすくなる • パターン自体の定義 • パターン毎の画面レイアウト • 画面遷移などの挙動や振る舞い • 提供したい体験に基づくデザインの根 拠 • etc.. 定義したいこと 期待する効果
18 どう画面パターンを規定していくか • パターンを洗い出す ◦ 扱うオブジェクトの性質と分類 ▪ 一覧表示で、どう識別されるか(名前、日付と数字等の組み合わせ、プレビューetc..) ▪ 詳細表示で、内包するデータの表示や関連するデータの示し方
▪ etc.. ◦ どのプロダクトにもあるパターン(オンボーディング、インポートetc..) ◦ 画面としての振る舞い(操作、遷移、フィードバックetc..) ◦ パターンにする粒度の判断 • パターンに合わせた理想系の画面を再定義 ◦ レイアウト・ビジュアル・振る舞い等をも含めて再定義 ◦ 提供したい体験と合わせて、デザインの根拠を残す ◦ デザイナーの総意となるように協力しながら進める
19 想定されるアウトプットと運用 • アプトプット ◦ ガイドラインとして、画面パターンを追加 ▪ パターンの分類、パターンごとの理想系の画面 ◦ デザインシステムに反映
▪ 既存コンポーネントのビジュアル調整や置き換え ◦ パターン化される単位で ▪ figmaライブラリで提供 ▪ storybookに実装サンプルを載せる • 運用 ◦ デザイナーやエンジニアは画面パターンに基づいてUIを考える ◦ 改善の余地が出てきた場合は、画面パターン自体のアップデートを行う ◦ 普及のための活動や、相談や意見を拾う場を用意する
4. 将来的にありえる展望 20
21 将来的にありえる展望 • より高い開発生産性への試み ◦ 画面テンプレートの自動生成やscaffoldingを試す未来もあるかも • デザイナー職以外の人もUIを考えやすくなるかも ◦ パターンを見極められると作るべきUIがおおよそ見えるはず
• プロトタイプの検証の高速化 • etc.. *あくまで可能性として考えられるかもしれないというスタンスで書いています 未定ですが、画面パターンが定まるからこそ 手を伸ばせる領域もあるかもしれません
まとめ 22
23 まとめ • freeeの目指す姿の実現に向けて「画面レベルでの一貫性や開発生産性」が必要と考え、その 手立てとして「画面パターンと結びついたデザインシステム」を検討しています。 ◦ ただし、統合型クラウドERPや組織規模の前提がなければ画面パターンまで規定する必然 性は高くないかもしれません。1つの参考にしていただけたら幸いです • 画面パターンへの取り組みはこれから手探りで進めていく段階です。
◦ パターンとして見える部分だけでなく、提供したい体験からデザインの根拠を考えたり、デ ザイナーの総意となるように協力して進める事も大事。 ◦ アウトプットの質も上がりますし、その後の浸透もしやすくなると思います。 • デザインシステムとして事業の成長に貢献できる度合いは大きいですし、将来的な展望にも可 能性を感じています
採用案内 24
25 freeeは仲間を募集しています! • freee内では「デザイン基盤」という名前のチー ムです • デザインシステムはもちろん、デザインからプ ロダクトの発展を支えられることなら何でもやる ぞというスタンスです •
興味のある方は @_fkady まで気軽にDMく ださい!