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
330
デザインシステムをつくるための基礎的な知識などまとめ
どのようにデザインシステムなどをつくっているかをまとめてみました。
登壇資料などの棚
June 30, 2022
Tweet
Share
More Decks by 登壇資料などの棚
See All by 登壇資料などの棚
UXJAMOnline#05_登壇資料 @siporin_ #uxjam_jp #七夕
siporin_
2
2.8k
オンライン井戸端会議 〜新しい体験や価値が生まれ続けるという沼〜
siporin_
2
400
キャリアデザインを描く-やりたいベースで行動を起こした結果-
siporin_
1
920
ドリーム・シェアリング・サービスFiNANCiEのUXデザイン
siporin_
6
940
Other Decks in Design
See All in Design
The Spectacular Lies of Maps
axbom
PRO
1
320
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
270
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
190
Vibe Coding デザインシステム
poteboy
2
1.3k
DESIGNEAST 2025 A-3
_kotobuki_
0
100
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう!
connecre
1
140
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
320
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか?
fuwarisprit
3
1.6k
見栄えと使いやすさの先にある 特別感 をデザインする / Designing a Sense of Specialness Beyond Aesthetics and Usability
bitkey
PRO
0
100
佐藤千晶|ポートフォリオ
chimi_chia
0
220
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
150
Goodpatch Tour💙 / We are hiring!
goodpatch
31
900k
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
620
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Context Engineering - Making Every Token Count
addyosmani
8
310
Practical Orchestrator
shlominoach
190
11k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Thoughts on Productivity
jonyablonski
70
4.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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_