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
57
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
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
750
Bulletproof Design System with TypeScript
takanorip
6
3.9k
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
120
UX & Accessibilité cognitive : et si vous simplifiiez vraiment l’expérience utilisateur ?
marietournelle35
0
120
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
530
Findyのプロデチームの 歩みとこれから
satty9556
0
250
AIで加速するアクセシビリティのこれから
magi1125
3
640
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.2k
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.4k
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.7k
decksh object reference
ajstarks
2
1.3k
株式会社バクタム 会社説明資料
bactum
0
290
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
810
The Invisible Side of Design
smashingmag
301
51k
Six Lessons from altMBA
skipperchong
28
4k
GraphQLとの向き合い方2022年版
quramy
49
14k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How to train your dragon (web standard)
notwaldorf
96
6.2k
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