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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

人の領域色・余白・サイズが、デザイントークンどおりかこの画面で、ユーザーの目的が達成できるか生の hex・px・スケール外の font-weight が無いか情報の順番と優先度は、正しいか状態用トークンを、その状態以外で使っていないか要件と価値に照らして、この体験でよいか本番と同じコンポーネントを使っているか迷わず操作できるか文言が、ライティングガイドどおりかブランドとして、気持ちいいか © Link and Motivation Group 自動で出すプロセスを早める共通化、レビュー自動化ツール化によるプロセス改善

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

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

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

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 テンプレート <mc-button variant="primary"> 保存する </mc-button> <mc-text-field label="氏名"> </mc-text-field> <McButton variant="primary"> 保存する </McButton> <McTextField label="氏名" /> © Link and Motivation Group プロトタイプの HTML と本番の SFC に翻訳ロスがない

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

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

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

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

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

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

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

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

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

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

and Motivation Group ※ 架空の機能を画面化したものです 01 画面の状態 02 画面遷移図コンポーネント一覧コンポーネント一 04 レビュー結果 05 比較検討 06 変更履歴

and Motivation Group 04 ※ 架空の機能を画面化したものです 01 画面の状態 02 画面遷移図 03 コンポーネント一覧レビュー結果イン 05 比較検討 06 変更履歴

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

and Motivation Group ※ 架空の機能を画面化したものです 01 画面の状態 02 画面遷移図 03 コンポーネント一覧 04 レビュー結果 05 比較検討変更履歴

SECTION 05 さいごに

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

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

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

Featured

Transcript