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
mento Design Team Portfolio
mento0fficial
1
630
エンジニアでも捗る デザイナー的思考入門
tinykitten
1
1.2k
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
480
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
130
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
870
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.3k
Memory Man v3 (WIP)
storybychad
PRO
0
2.5k
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
150
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
170
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
440
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.1k
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.5k
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
36
6.9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
187
54k
Rails Girls Zürich Keynote
gr2m
95
14k
RailsConf 2023
tenderlove
30
1.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Statistics for Hackers
jakevdp
799
220k
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