Design.ai vol.1「AI を利用して デザイン原則のベースを作る」

Transcript

1. ©MNTSQ, Ltd. 20250204 AI を利用して デザイン原則のベースを作る 暗黙的なコンテキストを感情というキーワードで言語化する
2. ©MNTSQ, Ltd. 2 アジェンダ • デザインシステムとデザイン原則 • コンテキストを把握する • 単語単位で感情を詳細化する • テキストから感情を可視化する • 可視化したものを分類する
3. ©MNTSQ, Ltd. 3 ナカシマ アキラ MNTSQ株式会社所属 ソフトウェアエンジニア（フロントエンド） テックリード 最近は ... 近年はプロダクトデザイナーやエンジニア、またその両方とし て、プロダクトの UI デザインの改善や開発に関わることが多 い。 UI デザインポリシー整理 にエンジニアとして議論に参加。 自己紹介 Who are you?
4. ©MNTSQ, Ltd. 4 MNTSQ CLM とは契約のライフサイクルを 網羅的にカバーし、契約業務の効率化する SaaS のプロダクト MNTSQ CLM • 作成 • 審査 • 締結 • 管理 • ナレッジ化 契約のライフサイクル
5. ©MNTSQ, Ltd. 5 デザインシステムとデザイン原則 ここはよくある話なので当時の背景のみをさらっと...
6. ©MNTSQ, Ltd. 6 🏃デザイン原則策定スタート時の状況💨 自分の状況 入社数カ月後 業務や組織の理解が進んでない 組織の状況 Vision や Value はある 暗黙的に共有されている価値観がある
7. ©MNTSQ, Ltd. 7 デザイン原則作るのってまぁまぁ難しくないですか？ • 暗黙的なコンテキストが多数ある • なんとなく〇〇が多く言語化されていない あー そーゆーことね 完全に 理解した
8. ©MNTSQ, Ltd. 8 コンテキストを把握する Google Cloud Natural Language API
9. ©MNTSQ, Ltd. 9 Google Cloud Natural Language API • テキストの感情を分析 • 暗黙的なコンテキストを洗い出して価値観を可視 化する • が、言語化するには不十分 感情分析・構文分析・テキスト分類ができる自然言語処理 API ソースはこちらから https://github.com/nksm/google-natural-l anguage-api-sample
10. ©MNTSQ, Ltd. 10 単語単位で感情を詳細化する LLM
11. ©MNTSQ, Ltd. 11 LLM • 各種文書の分解 ◦ 名詞 ◦ 形容詞 ◦ 暗黙的に含まれているもの含む • 分解した単語の整理 ◦ 重複した単語の数をカウント • 各単語の感情を解析 ChatGPT / Claude.ai 他 もう少し全体感を把握したい ...
12. ©MNTSQ, Ltd. 12 感情の全体感を可視化する FigJam
13. ©MNTSQ, Ltd. 13 FigJam • 各単語を Figjam の付箋に分解 ◦ Create Sticky From Text プラグインを利用 ◦ 解析した感情ごとに色分けをする Create Sticky From Text Plugin 重要なこと • 文書はポジティブなことが書かれることが 多い • ネガティブな文言に注目することで価値観 があぶり出される
14. ©MNTSQ, Ltd. 14 可視化したものを分類する FigJam AI（beta）
15. ©MNTSQ, Ltd. 15 Figjam AI（beta） • 自動ではあるが Sticky の内容ある程度の粒度で分 類 Sticky の内容で分類する • 各分類ごとにどういう感情があり、どれくらいの量な のかを視覚的に把握
16. ©MNTSQ, Ltd. 16 Enhancing 本質的な機能を提供しましょう Universal 一貫した価値を届けましょう Elegant 品位ある態度で接しましょう その後複数回の WSを経て、デザイン原則が策定 Smooth 軽快で明快にしましょう
17. ©MNTSQ, Ltd. 17 まとめ • 今回のキーワードは感情 • 各種文書に暗黙的存在する価値観を把握する • その手段として AI を利用してみる • コンテキスト理解 • 単語単位で詳細化 • 詳細化したものを色で可視化 • 分類化