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
ムーンライト伝説を二次創作(仮)
June 30, 2022
Design
1
310
デザインシステムをつくるための基礎的な知識などまとめ
どのようにデザインシステムなどをつくっているかをまとめてみました。
ムーンライト伝説を二次創作(仮)
June 30, 2022
Tweet
Share
More Decks by ムーンライト伝説を二次創作(仮)
See All by ムーンライト伝説を二次創作(仮)
UXJAMOnline#05_登壇資料 @siporin_ #uxjam_jp #七夕
siporin_
2
2.7k
オンライン井戸端会議 〜新しい体験や価値が生まれ続けるという沼〜
siporin_
2
390
キャリアデザインを描く-やりたいベースで行動を起こした結果-
siporin_
1
910
ドリーム・シェアリング・サービスFiNANCiEのUXデザイン
siporin_
6
910
Other Decks in Design
See All in Design
ポートフォリオ_藤田歩希(ほまれ)
akifujita_homarecreate
0
530
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
580
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
290
sachi_y_portfolio
sachi337
0
230
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
1
260
LLMによるRAG評価用合成テストデータの生成
licux
6
1.1k
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
1
980
Marp + TailWind CSS でスライドをきれいにする
maea2
0
170
Crisp Code inc. ブランドガイドライン
so_kotani
1
180
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
380
Starry | Storyboards | Scene 1-21
giofortuna_story
0
250
AI時代に淘汰されないデザインのしごと
akinen
0
100
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
1
78
Scaling GitHub
holman
459
140k
Side Projects
sachag
454
42k
GraphQLとの向き合い方2022年版
quramy
46
14k
The Cult of Friendly URLs
andyhume
78
6.4k
Being A Developer After 40
akosma
91
590k
Adopting Sorbet at Scale
ufuk
76
9.4k
Done Done
chrislema
184
16k
Navigating Team Friction
lara
186
15k
Rails Girls Zürich Keynote
gr2m
94
13k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Transcript
デザインプロセスなど まとめ @siporin_
デザインの構造 ※業界によって使う用語が違ったりするので、要素の関係性について表現の仕方は様々です。 TC Design Guideline 2. Design Concept 3. Style
Guide 4. Component Library UI UX Design System @siporin_
デザインシステムとは デザインシステムとは、プロダクトをより良いものとするた めのルールやツールが連携した形でまとめられたもの “ プロダクトをより効率的でまとまりのあるものとして進めるため、個人、チーム、または組織に よってビジュアルスタイル・コンポーネント・およびその他の懸念事項のライブラリをコードおよび ツールとしてドキュメント化したもの。 “ 引用: Defining
Design Systems / EightShapes @siporin_
デザインシステムの構成要素 hI Design Guideline - 上位概念である原E CI Design Concept -
デザインをする際に基本とする指T #I Design Style - 原則に基づいたルー8 I Component Library - ルールに基づいたツール @siporin_
デザインシステムの作り方 gB デザインコンセプトを定G SB 公開されているデザインガイドラインのルールに則りな がらデザインコンセプトに基づいたデザインガイドライ ン作' %B 公開されているデザインスタイルを参考に、デザインコ ンセプトに基づいたデザインスタイルを作'
B デザインガイドラインや開発環境に適したコンポーネン トライブラリを選定 @siporin_
デザインガイドラインとは デザインガイドラインとは、色・文字・レイアウトなど様々 なデザイン要素について、ルールを綿密に定義したドキュメ ントのこと ※ガイドラインと一口に言っても、サービスやプロダクトのどこまで(情報設計やライティング、シ ステム設計など etc.)をフォローするのか、もしくは見た目のデザインだけなのか…など、ガイドラ インの定義は様々です。 @siporin_
デザインガイドラインを設計するにあたっての土台 一定のUXの水準を担保するために、ISO 9241-210(イン タラクティブシステムにおける人間中心設計)JIS規格等に 則って作成する必要がある。 この規格に基づいた「人間中心デザイン」という学問も存在 する。 @siporin_
デザインガイドラインの作り方 土台である規格や学問に則って作成することも大切だが、 ユーザーの期待値や体験は変化するものなので、常に仮説検 証を行い、最適なガイドラインに更新し続ける必要がある。 多大なリソースを割いて変化に対応し続けているガイドライ ンがいくつか公開されているので、そちらを活用する。 @siporin_
公開されているデザインガイドライン MaterialDesign @siporin_
公開されているデザインガイドライン HumanInterfaceGuideline @siporin_
デザインコンセプトとは デザインやスタイルなどに一貫性をもたせることで、商品・ サービスに「らしさ」=ブランド力を与える。 @siporin_
デザインコンセプトを作成する手法01 マトリクス図- 自プロダクトが全体の中のどのあたりに位置するのかを知る 引用: デザインコンセプトとは何か?必要性と作り方、活用方法を解説 @siporin_
デザインコンセプトを作成する手法02 スライダー - 方向性を掴む・決める。一番最初の大まかな指針として使うのが良い。 引用: デザインコンセプトとは何か?必要性と作り方、活用方法を解説 @siporin_
デザインコンセプトを作成する手法03 マインドマップ - 一人で思考を整理するときに使う。 引用: デザインコンセプトとは何か?必要性と作り方、活用方法を解説 @siporin_
デザインスタイルガイド デザインシステムには含まれる原則やコンポーネントライブ ラリは含まれず、視覚的なルールのみをまとめたドキュメン ト。 @siporin_
スタイルガイドの作り方 デザインガイドラインに則り、デザインコンセプトを実現で きるように作成する。 多大なリソースを割いて作成されているスタイルガイドがい くつか公開されているので、そちらを活用する。 @siporin_
デザインスタイルの種類と歴史01 初代リッチデザイン - 影・光沢・立体感など細部のディティールを作り込んだデザイン @siporin_
デザインスタイルの種類と歴史02 フラットデザイン - 立体感や光沢感などの視覚効果を無くし、シンプルで平面的な概念 @siporin_
デザインスタイルの種類と歴史03 MaterialDesign - 現実世界に基づいた表現。2014年にGoogleが発表したデザインの概念。 アプリ開発であれば最新のMaterialDesign3を活用するのが主流 @siporin_
スタイルガイドの種類 ミニマルデザイン - 極力余計なものを排除し、ユーザビリティよりもシンプルさを最大限追求 @siporin_
コンポーネントライブラリ すぐに使えるカスタマイズ可能な再利用可能なコードコン ポーネントのオープンソースレポジトリを提供することで、 UIデザイナーやUXデザイナーがより迅速な開発と成長を実 現することを可能にするライブラリ。 @siporin_
まとめ デザインシステムを構築する要素ごとに、最新の仮説検証を もとに設計されている既存のガイドラインなどを土台とし、 オリジナリティを脚色していくことで、ユーザーにとっての 使いやすさを担保しながらもプロダクトらしさを表現してい く。 @siporin_