デザインを開発する ~ Vueで実現するデザインプロセス改善 ~

by リンクアンドモチベーション

Embed

Start on current slide

Slide 1

Slide 1 text

デザインを開発する Vueで実現するデザインプロセス改善株式会社リンクアンドモチベーションデザインエンジニア竹井啓

Slide 2

Slide 2 text

Vue Fes Japan 2026 ｜デザインを開発する竹井啓株式会社リンクアンドモチベーションメディア事業会社にてエンジニアとしてキャリアをスタート。   2021年にリンクアンドモチベーション入社。サービス開発に従事。デザイナーとしても幅を広げる。   現在はデザインシステム運用、デザインのAI活用推進を担う。 © Link and Motivation Group

Slide 3

Slide 3 text

Vue Fes Japan 2026 ｜デザインを開発する組織の診断・変革を実現する  組織変革プラットフォーム 14,000社超、600万人以上の国内最大級のデータベースをもとに、組織状態を可視化・分析。 25年以上培ってきた組織改善技術をもとにコンサルタントが改善まで徹底的にサポートします。 © Link and Motivation Group

Slide 4

Slide 4 text

Vue Fes Japan 2026 ｜デザインを開発するアウトプットの量が増えた役割の境目が溶けた誰でも簡単にアウトプットを生み出せる PdMやデザイナーがコードを書きエンジニアが要件、デザインに入る AI in Design Report 2026：デザイナーの 65% が PM・エンジニア・デザインエンジニアの業務を担う  Figma「2026 AI Report」：開発者のデザイン参加 44%→60% © Link and Motivation Group

Slide 5

Slide 5 text

Vue Fes Japan 2026 ｜デザインを開発する作ってみた © Link and Motivation Group

Slide 6

Slide 6 text

Vue Fes Japan 2026 ｜デザインを開発するボタき大ンの © Link and Motivation Group う違さが

Slide 7

Slide 7 text

Vue Fes Japan 2026 ｜デザインを開発するこの赤、本番の赤ボタき大ンの © Link and Motivation Group と違くない？う違さが

Slide 8

Slide 8 text

Vue Fes Japan 2026 ｜デザインを開発するこの赤、本番の赤と違くない？は時ーエラボタき大ンの © Link and Motivation Group う違さが？のるどうな

Slide 9

Slide 9 text

Vue Fes Japan 2026 ｜デザインを開発するこのアこの赤、本番の赤敬語おかしくボタない？き大ンの © Link and Motivation Group と違くない？う違さがイコン、うちに無いは時ーエラこのテーブル本番にないやつかも？のるどうな

Slide 10

Slide 10 text

Vue Fes Japan 2026 ｜デザインを開発するこの赤、本番の赤と違くな敬語おかし © Link and Motivation Group ン、うちに本題が進まないくない？のンボタい？このアイコう違がさ大きエラー無いかも？のるなうど時はこのテーブル本番にないやつ

Slide 11

Slide 11 text

Vue Fes Japan 2026 ｜デザインを開発する品質が低下したものが大量に出力される状態品質が担保されたものが大量に出力できる状態 © Link and Motivation Group

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Vue Fes Japan 2026 ｜デザインを開発する忠実度＝プロトタイプの解像度 LOW-FI プロトタイプイ HI-FI Hi-Fi プロトタイプ Hi-Fiな忠実度＆高品質のプロトタイプ © Link and Motivation Group

Slide 14

Slide 14 text

Vue Fes Japan 2026 ｜デザインを開発する一撃高品質を目指して Hi-Fi プロトタイプこの時代における最適なデザインプロセスを開発した話 © Link and Motivation Group

Slide 15

Slide 15 text

Vue Fes Japan 2026 ｜デザインを開発する基準がシステムにある自動化可能な領域基準が人の中にある審美眼人の領域色・余白・サイズが、デザイントークンどおりかこの画面で、ユーザーの目的が達成できるか生の hex・px・スケール外の font-weight が無いか情報の順番と優先度は、正しいか状態用トークンを、その状態以外で使っていないか要件と価値に照らして、この体験でよいか本番と同じコンポーネントを使っているか迷わず操作できるか文言が、ライティングガイドどおりかブランドとして、気持ちいいか © Link and Motivation Group

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Vue Fes Japan 2026 ｜デザインを開発する © Link and Motivation Group 01 自己紹介 02 問題 03 改善① AIの出力によるHi-Fi化 04 改善② AIと協働するデザインプロセス 05 さいごに

Slide 18

Slide 18 text

SECTION 03 AI の出力によるHi-Fi化 1｜共通化 2｜レビュー

Slide 19

Slide 19 text

Vue Fes Japan 2026 ｜デザインを開発する 1｜共通化本番環境と同じVue Componentを使用したプロト出力 UI COMPONENTS PRODUCTION 本番提供している  Vueのcomponent 本番環境 KIT PROTOTYPE プロトタイプキットプロトタイプ ESM に 1 本ビルドして同梱 © Link and Motivation Group

Slide 20

Slide 20 text

Vue Fes Japan 2026 ｜デザインを開発する 1｜共通化プロトタイプkit components.esm.js ＋ .css vue.esm-browser.prod.js catalog/index.html 本番のンーントイをンタインイVueザ n テンプレートのンイるタ ppss の index.html ｜プロトタイプの HTML Page.vue ｜本番の SFC テンプレート保存する保存する © Link and Motivation Group プロトタイプの HTML と本番の SFC に翻訳ロスがない

Slide 21

Slide 21 text

Vue Fes Japan 2026 ｜デザインを開発する BEFORE AFTER → © Link and Motivation Group ※ 架空の機能を画面化したものです

Slide 22

Slide 22 text

Vue Fes Japan 2026 ｜デザインを開発する 2｜レビューデザインシステム・原則に準拠した  レビュー自動化レビューにより、デザインシステムや原則に照らした違反を検知する。  生成・更新のたびにレビューを自動実行。直せる指摘はAIが直し切る。人が決める指摘だけ残す。 3 階層対象判断基準具体    トークン・アセット・コンポーネントトークン準拠か抽象原則・ルール・ボイス＆トーンガイドどおりか ※ 架空の機能を画面化したものです © Link and Motivation Group

Slide 23

Slide 23 text

Slide 24

Slide 24 text

SECTION 04 AIと協働するデザインプロセス

Slide 25

Slide 25 text

Vue Fes Japan 2026 ｜デザインを開発する結果実行/自律相談レビュー判断指示コメントデザインプロセスにおけるヒューマンインザループ © Link and Motivation Group

Slide 26

Slide 26 text

Vue Fes Japan 2026 ｜デザインを開発する V1 ｜ ~ 2026前半【自作ツール】社内共有システム＋ピン打ちツール（WXT製）社内の共有システムで設置したプロトタイプに対し、Chrome 拡張でピンを打って指摘する。ピンは Jira のチケットとして登録され、Claude Code がチケットの情報を元に修正実行、更新する。構成図レビュアー判断者レビュー：ピンを打つ社内共有システム（ブラウザ）プロトタイプ Chrome 拡張（WXT）ピン打ちチケットを指定し  実行依頼修正実行  更新チケット起票 Jira チケット/ADR © Link and Motivation Group ※ 架空の機能を画面化したものです読む Claude Code

Slide 27

Slide 27 text

Vue Fes Japan 2026 ｜デザインを開発する 2026.06 Claude Code Artifact 公開 2026.07 Artifact の共有リンクと編集者ロール公開 2026.08 Artifact のコメント連携公開セッションの成果を、同じ URL の画面にして共有できる。ユーザーとロールを選択して共有できる。画面の上のコメントし、Claude Code による修正実行ができる。 Anthropic | Claude Artifact で完結できるようになった © Link and Motivation Group

Slide 28

Slide 28 text

Vue Fes Japan 2026 ｜デザインを開発する V2 ｜ ~ 2026後半【Claudeベース】 Artifact ＋ Claude Code Claude Code でプロトタイプを作成。Artifact に公開する。  Artifactの画面上で各レビュアーがコメントできる。  作成者が修正判断し、Claude Code が直す。構成図全員（レビュー）コメント判断者コメント/判断 Claude Artifact プロトタイプ（同じ URL） © Link and Motivation Group ※ 架空の機能を画面化したものですコメント（標準機能）読む修正実行  更新 Claude Code

Slide 29

Slide 29 text

Vue Fes Japan 2026 ｜デザインを開発する検討時に必要な設計・情報を標準搭載する © Link and Motivation Group 01 04 画面の状態レビュー結果通常・空・エラー・大量データ。各状態で画面が成立するかデザインシステム・原則に照らした評価 02 05 画面遷移図比較検討このフローで目的を達成できるかどちらが良いかを決めたい 03 06 コンポーネント一覧変更履歴利用しているコンポーネント一覧誰が何をいつ決めたか

Slide 30

Slide 30 text

Vue Fes Japan 2026 ｜デザインを開発するプロトタイプの標準機能 01 © Link and Motivation Group ※ 架空の機能を画面化したものです画面の状態ーー状態画面 02 画面遷移図 03 コンポーネント一覧 04 レビュー結果 05 比較検討 06 変更履歴

Slide 31

Slide 31 text

Vue Fes Japan 2026 ｜デザインを開発するプロトタイプの標準機能 01 02 画面の状態画面遷移図のロー © Link and Motivation Group ※ 架空の機能を画面化したものです 03 コンポーネント一覧 04 レビュー結果 05 比較検討 06 変更履歴

Slide 32

Slide 32 text

Vue Fes Japan 2026 ｜デザインを開発するプロトタイプの標準機能 03 © Link and Motivation Group ※ 架空の機能を画面化したものです 01 画面の状態 02 画面遷移図コンポーネント一覧コンポーネント一 04 レビュー結果 05 比較検討 06 変更履歴

Slide 33

Slide 33 text

Vue Fes Japan 2026 ｜デザインを開発するプロトタイプの標準機能 3 © Link and Motivation Group 04 ※ 架空の機能を画面化したものです 01 画面の状態 02 画面遷移図 03 コンポーネント一覧レビュー結果イン 05 比較検討 06 変更履歴

Slide 34

Slide 34 text

Vue Fes Japan 2026 ｜デザインを開発するプロトタイプの標準機能 05 01 画面の状態 02 画面遷移図 03 コンポーネント一覧 04 レビュー結果比較検討の 06 © Link and Motivation Group ※ 架空の機能を画面化したものです変更履歴

Slide 35

Slide 35 text

Vue Fes Japan 2026 ｜デザインを開発するプロトタイプの標準機能 06 © Link and Motivation Group ※ 架空の機能を画面化したものです 01 画面の状態 02 画面遷移図 03 コンポーネント一覧 04 レビュー結果 05 比較検討変更履歴

Slide 36

Slide 36 text

Slide 37

Slide 37 text

SECTION 05 さいごに