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
300
デザインシステムをつくるための基礎的な知識などまとめ
どのようにデザインシステムなどをつくっているかをまとめてみました。
ムーンライト伝説を二次創作(仮)
June 30, 2022
Tweet
Share
More Decks by ムーンライト伝説を二次創作(仮)
See All by ムーンライト伝説を二次創作(仮)
UXJAMOnline#05_登壇資料 @siporin_ #uxjam_jp #七夕
siporin_
2
2.6k
オンライン井戸端会議 〜新しい体験や価値が生まれ続けるという沼〜
siporin_
2
390
キャリアデザインを描く-やりたいベースで行動を起こした結果-
siporin_
1
910
ドリーム・シェアリング・サービスFiNANCiEのUXデザイン
siporin_
6
910
Other Decks in Design
See All in Design
Cards | Storyboards
giofortuna_story
0
130
界隈からの逃走–デザイン初め新年会2025
sekiguchiy
3
1.1k
Rayout Pattern 01
one0
0
2.3k
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
180
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
300
NAHO SHIMONO_Portfolio2025
nahohphp
0
390
マンガで分かるサービスデザインガイドライン
senryakuka
1
760
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
9k
本当に欲しかったのはモノレポツールではなく、tsconfigの設定だった / monorepo-tsconfig
rdlabo
1
100
Crisp Code inc. ブランドガイドライン
so_kotani
1
160
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
300
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
240
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
Docker and Python
trallard
44
3.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k
Into the Great Unknown - MozCon
thekraken
37
1.7k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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_