Vibe Coding デザインシステム

モバイルアプリのUIデザイン実践術 ～個人開発で役立つ構築フロー〜 で発表させていただいた登壇資料です。

Transcript

1. Vibe Coding デザインシステム @ Findy モバイルアプリのUIデザイン実践術 By poteboy
2. 自己紹介 普段は受託や技術顧問をしながら、個人開発でプロダ クトを作っています。 特にUIを軸にキャリアを積んできました - 上場企業の元FEテックリードとして、デザインシス テム構築を推進 https://zenn.dev/poteboy/articles/4739b882e22961 - OSS活動で - 自作UIライブラリで⭐2k - ⭐13kのUIライブラリで元コアメンバー - ⭐17kのUI描画最適化ライブラリの元コアメン バー
3. 個人開発者として 過去に色々なサービスを作ってきました - 筋トレ記録サービス - 作業通話サービス - 行きたいとこリスト管理サービス - 言語学習サービス 個人開発の楽しさも、大変さも一通り経験してきました。
4. 個人開発の大変なところ 個人開発では、やることが多岐に渡る - 要件定義 - デザイン ★ - 開発 ★ - ユーザーサポート - マーケティング これら全ての分野でプロレベルになるのは（私のような凡人には）不可能！ 能力・時間的制約がある。
5. 60点のUIを目指す プロと同じクオリティを目指すのは難しい そこで私が取っている戦略は、60点でいいから基本を大きく外さない 意匠を目指す。 ここでいう基本とは▶デザイン4原則 - 近接 - 整列 - 反復 - 対比
6. デザイン4原則 1. 近接 a. 関連する要素同士を近づけてグループ化すること b. 商品名、商品画像が近い場所にあれば、ユーザーはそれらが関係性があると認識できる 2. 整列 a. 関連する要素を一定のルールに沿って配置する b. 同じ内容について書かれた文章を左揃えにする、など 3. 反復 a. 同じ要素を一定のルールで繰り返す b. 色やフォント、形などの要素を繰り返し使い、一貫性を保つ 4. 対比 a. 要素に強弱をつけて、優先度を視覚的に伝える b. 見出しと本文のサイズや太さの差を設ける
7. 💡デザインシステムを作って AIに学習させよう 理論は分かったけど、どう実践するか？
8. デザインシステムとは何か デザインシステム自体に標準化された規約があるわけではないが、提唱者である Nathan Curtis氏は以下のように定義している デザインシステムとは、デザインにおけるスタイル、UIコンポーネントのライブラリ、そし てその他のルールにまつわるドキュメント つまり、再利用可能な部品と、それらの使い方のガイドラインをまとめたものと解釈でき る
9. デザインシステム ≠コンポーネント集 開発組織におけるデザインシステムはしばし「UIコンポーネント集」として扱われることが 多いが、ここでより重要となるのがデザインガイドライン 参考: https://design.digital.go.jp/dads/foundations/color/
10. 作成したデザインシステムを AIに学習させる 右の画像は、実際に個人開発プロジェクト内で作成しているデ ザインシステムUIコンポーネント集を格納したディレクトリ。ここ に、CLAUDE.md などのAIエージェント向けガイドラインドキュ メントを作成する これらをAIに読ませることで、どの場面でどのコンポーネントの どのVariant & Property を利用すれば良いかAIにガードレー ルを与える。
11. 実践: ガイドラインを兼ねたコンポーネント作成 右のコードは、実際に個人開発で使用 しているTypographyコンポーネントの 実装例。 実装の型定義にJSDoc（ソースコードに アノテーションを追加するために使われ るマークアップ言語）を記述し、どの場 面でどのvariantを使えば良いかAIが理 解しやすいようにする
12. 便利サイト : Mobbin UIコンポーネントとデザイントークン、そ の利用方法が固まったら、あとはどの ような画面を作るか。 Mobbinというサイトでは、右図のよう に、画面フローごとにスクショが掲載さ れているのでこれをAIに喰わせて、あと は自前のデザインシステムに準拠する ように指示すればOK https://mobbin.com/apps/duolingo-ios-688f6e68-12be-4b63-80b7-8377c848 2911/3ab2b3f6-d58d-4f95-94a7-40218b484216/flows
13. Vibe Codingデザインシステムの完成 デザインシステムと実装する画面の参考画像を用いた上で、最終的にAIエージェントに 指示するプロンプトは以下のようになる。
14. まとめ - 個人開発のUIデザインは60点を確実に 取りに行く戦略 - そのために、デザイン4原則に従い、そこを逸脱するデザインを作らない - とはいえ素人が一朝一夕で実践するのは難しい - ので、プロジェクト内でデザインシステム を作り、4原則を達成するガイドラインを制 定することで、そのルールがAIエージェントに学習させることで、基本に忠実 な成果 物が出来上がる - 作りたい画面のイメージはMobbinのようなサイト から拝借し、それを先ほど定義し たデザインシステムに則ってAIに実装させていくイメージ