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
Design.ai vol.1「AI を利用して デザイン原則のベースを作る」
Search
nksm
February 05, 2025
Design
1
60
Design.ai vol.1「AI を利用して デザイン原則のベースを作る」
nksm
February 05, 2025
Tweet
Share
More Decks by nksm
See All by nksm
UI フレームワークからはじめる アクセシビリティ - Vue Fes Japan 2023 After Meetup
nksm
1
4.2k
UXを向上させる組織構造
nksm
0
300
UX評価指標とUX改善
nksm
4
4.4k
Angular 2 を利用した開発の実際
nksm
3
3k
Other Decks in Design
See All in Design
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
550
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
250
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
3.8k
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
デザイナー向けフライル説明資料
toshiblues
0
120
アクセシビリティに取り組むメリット
magi1125
2
250
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
290
Memory Man v3 (WIP)
storybychad
PRO
0
2.6k
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
540
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
180
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
480
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
130
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Typedesign – Prime Four
hannesfritz
42
2.8k
Become a Pro
speakerdeck
PRO
29
5.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Practical Orchestrator
shlominoach
190
11k
GraphQLとの向き合い方2022年版
quramy
49
14k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
How STYLIGHT went responsive
nonsquared
100
5.8k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
BBQ
matthewcrist
89
9.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Faster Mobile Websites
deanohume
309
31k
Transcript
©MNTSQ, Ltd. 20250204 AI を利用して デザイン原則のベースを作る 暗黙的なコンテキストを感情というキーワードで言語化する
©MNTSQ, Ltd. 2 アジェンダ • デザインシステムとデザイン原則 • コンテキストを把握する • 単語単位で感情を詳細化する
• テキストから感情を可視化する • 可視化したものを分類する
©MNTSQ, Ltd. 3 ナカシマ アキラ MNTSQ株式会社所属 ソフトウェアエンジニア(フロントエンド) テックリード 最近は ...
近年はプロダクトデザイナーやエンジニア、またその両方とし て、プロダクトの UI デザインの改善や開発に関わることが多 い。 UI デザインポリシー整理 にエンジニアとして議論に参加。 自己紹介 Who are you?
©MNTSQ, Ltd. 4 MNTSQ CLM とは契約のライフサイクルを 網羅的にカバーし、契約業務の効率化する SaaS のプロダクト MNTSQ
CLM • 作成 • 審査 • 締結 • 管理 • ナレッジ化 契約のライフサイクル
©MNTSQ, Ltd. 5 デザインシステムとデザイン原則 ここはよくある話なので当時の背景のみをさらっと...
©MNTSQ, Ltd. 6 🏃デザイン原則策定スタート時の状況💨 自分の状況 入社数カ月後 業務や組織の理解が進んでない 組織の状況 Vision や
Value はある 暗黙的に共有されている価値観がある
©MNTSQ, Ltd. 7 デザイン原則作るのってまぁまぁ難しくないですか? • 暗黙的なコンテキストが多数ある • なんとなく〇〇が多く言語化されていない あー そーゆーことね
完全に 理解した
©MNTSQ, Ltd. 8 コンテキストを把握する Google Cloud Natural Language API
©MNTSQ, Ltd. 9 Google Cloud Natural Language API • テキストの感情を分析
• 暗黙的なコンテキストを洗い出して価値観を可視 化する • が、言語化するには不十分 感情分析・構文分析・テキスト分類ができる自然言語処理 API ソースはこちらから https://github.com/nksm/google-natural-l anguage-api-sample
©MNTSQ, Ltd. 10 単語単位で感情を詳細化する LLM
©MNTSQ, Ltd. 11 LLM • 各種文書の分解 ◦ 名詞 ◦ 形容詞
◦ 暗黙的に含まれているもの含む • 分解した単語の整理 ◦ 重複した単語の数をカウント • 各単語の感情を解析 ChatGPT / Claude.ai 他 もう少し全体感を把握したい ...
©MNTSQ, Ltd. 12 感情の全体感を可視化する FigJam
©MNTSQ, Ltd. 13 FigJam • 各単語を Figjam の付箋に分解 ◦ Create
Sticky From Text プラグインを利用 ◦ 解析した感情ごとに色分けをする Create Sticky From Text Plugin 重要なこと • 文書はポジティブなことが書かれることが 多い • ネガティブな文言に注目することで価値観 があぶり出される
©MNTSQ, Ltd. 14 可視化したものを分類する FigJam AI(beta)
©MNTSQ, Ltd. 15 Figjam AI(beta) • 自動ではあるが Sticky の内容ある程度の粒度で分 類
Sticky の内容で分類する • 各分類ごとにどういう感情があり、どれくらいの量な のかを視覚的に把握
©MNTSQ, Ltd. 16 Enhancing 本質的な機能を提供しましょう Universal 一貫した価値を届けましょう Elegant 品位ある態度で接しましょう その後複数回の
WSを経て、デザイン原則が策定 Smooth 軽快で明快にしましょう
©MNTSQ, Ltd. 17 まとめ • 今回のキーワードは感情 • 各種文書に暗黙的存在する価値観を把握する • その手段として
AI を利用してみる • コンテキスト理解 • 単語単位で詳細化 • 詳細化したものを色で可視化 • 分類化
None