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
23
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.1k
UXを向上させる組織構造
nksm
0
280
UX評価指標とUX改善
nksm
4
4.3k
Angular 2 を利用した開発の実際
nksm
3
3k
Other Decks in Design
See All in Design
Masked shaman-Storyboard 2025
ashley0521
0
140
デザインできるもの、できないもの | Designship 2024 | Yasuhiro Yokota
yasuhiroyokota
2
1k
portfolio2025_kanakoohata
kanako106
0
620
実利の世界で、表現者である
kiyou77
2
400
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
190
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
240
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
65k
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
250
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
180
発表資料テンプレート / My slide template
thatblue
0
190
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
210
Personal Story Sequence - Vendetta(WIP)
elrns88
0
400
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
335
57k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
390
The Invisible Side of Design
smashingmag
299
50k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Automating Front-end Workflow
addyosmani
1367
200k
The Language of Interfaces
destraynor
156
24k
GitHub's CSS Performance
jonrohan
1030
460k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
We Have a Design System, Now What?
morganepeng
51
7.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
530
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