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
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
650
【Designship 2024|10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
770
portfolio2025_kanakoohata
kanako106
0
620
横断組織デザイナーの働き方
mixi_design
PRO
0
320
最速[要出典]アクセシビリティチェック
magi1125
2
190
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
110
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
170
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
230
LayerX DesignersDeck
layerx
PRO
0
2.3k
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
4.1k
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
250
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Building Adaptive Systems
keathley
39
2.4k
Six Lessons from altMBA
skipperchong
27
3.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Bash Introduction
62gerente
610
210k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Scaling GitHub
holman
459
140k
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