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
270
デザインシステムをつくるための基礎的な知識などまとめ
どのようにデザインシステムなどをつくっているかをまとめてみました。
ムーンライト伝説を二次創作(仮)
June 30, 2022
Tweet
Share
More Decks by ムーンライト伝説を二次創作(仮)
See All by ムーンライト伝説を二次創作(仮)
UXJAMOnline#05_登壇資料 @siporin_ #uxjam_jp #七夕
siporin_
2
2.6k
オンライン井戸端会議 〜新しい体験や価値が生まれ続けるという沼〜
siporin_
2
380
キャリアデザインを描く-やりたいベースで行動を起こした結果-
siporin_
1
900
ドリーム・シェアリング・サービスFiNANCiEのUXデザイン
siporin_
6
900
Other Decks in Design
See All in Design
NAHO SHIMONO_Portfolio2025
nahohphp
0
120
界隈からの逃走–デザイン初め新年会2025
sekiguchiy
3
980
ZKK_001.pdf
nicholaspegu
0
1.5k
portfolio2025_kanakoohata
kanako106
0
660
Goodpatch Tour💙 / We are hiring!
goodpatch
31
790k
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
320
世界中のチームワークをどうデザインしているのか
ka3zu1ma10
0
280
横断組織デザイナーの働き方
mixi_design
PRO
0
330
LayerX DesignersDeck
layerx
PRO
0
2.5k
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
190
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
250
Masked shaman-Storyboard 2025
ashley0521
0
160
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Unsuck your backbone
ammeep
669
57k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Designing for Performance
lara
604
68k
Being A Developer After 40
akosma
89
590k
For a Future-Friendly Web
brad_frost
176
9.5k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
It's Worth the Effort
3n
184
28k
Designing Experiences People Love
moore
139
23k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
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_