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
280
デザインシステムをつくるための基礎的な知識などまとめ
どのようにデザインシステムなどをつくっているかをまとめてみました。
ムーンライト伝説を二次創作(仮)
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
プロダクトデザインの「守破離」の「破」について
hayashirine
0
310
aya_murakami_portfolio
ayakaimi1101
0
1.2k
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
4
3.7k
OLTA株式会社/デザイン紹介資料
taxy
0
110
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
3.5k
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
620
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
530
portfolio2025_kanakoohata
kanako106
0
710
How to go from research data to insights?
mastervicedesign
0
230
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
870
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
200
#yumemi_grow 読書シェア会 vol.1 - スコット・バークン著『デザインはどのように世界をつくるのか』
kaitou
1
110
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Designing Experiences People Love
moore
140
23k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
A designer walks into a library…
pauljervisheath
205
24k
Unsuck your backbone
ammeep
669
57k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Automating Front-end Workflow
addyosmani
1368
200k
Embracing the Ebb and Flow
colly
84
4.6k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Music & Morning Musume
bryan
46
6.4k
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_