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