01
デザインシステム / 実装
コンポーネント設計、デザイントークン、Figma上の構造整理に加え、自身も実装環境に入り、ReactやReact Ariaを用いたコンポーネント実装を進めながら、デザイン意図をコードまで接続します。
- コンポーネント設計
- デザイントークン
- 実装接続
keitreeworks
デザインと実装、人とAIの間を
設計する。
Designing the bridge between users, design & code. BtoB SaaSの情報設計、デザインシステム、UI実装、AIを組み込んだ業務設計までを、実務に接続する形で扱います。
01 · Expertise
専門領域
設計の意図、実装への接続、運用に残る判断基準までを扱います。
02
AIを組み込んだ
AIを組み込んだ
業務設計
個別のAIツール活用ではなく、生成・確認・修正・状態管理・人間による最終判断までを含む業務フロー全体を設計し、その中にAIを配置します。
- 業務フロー設計
- 役割分担
- 運用ルール
03
BtoB SaaSの情報設計
複雑な業務ロジック、管理画面、情報構造、承認フローを扱い、0→1から既存プロダクトへの機能追加まで、画面・権限・導線・状態の設計判断を整理します。
- IA整理
- 画面構造
- 設計判断メモ
02 · Cases
ケーススタディ
判断と仕組み化の過程が見えるよう整理します。完了案件は状況から結果まで、
BtoB SaaSのデザインシステム/設計プロセス
業務ドメインの情報設計から、デザインシステム、コンポーネント設計、実装接続までを横断して整理した取り組みです。
詳しく見る →個人メディアのAI制作パイプライン設計
制作ワークフローそのものを設計・運用したケース。役割分担、中間フォーマット、状態管理、再開可能な仕組みを記述します。
詳しく見る →生成AIを組み込んだ制作・品質チェックフロー設計
品質チェックを先行し、バナー生成から人間判断までを一連の制作フローとして設計している進行中案件です。
詳しく見る →AIを組み込んだデザイン・実装フロー標準化
Figmaを起点に、AIコーディングによる実装、ルール化、他デザイナーへの横展開までを再現可能なフローとして設計している進行中案件です。
詳しく見る →03 · Stack
使用ツール
設計から実装・業務改善まで、何ができるかが先に分かるよう整理しています。
| Design | Figma / デザインシステム / デザイントークン / 情報設計 / コンポーネント設計 |
|---|---|
| Frontend | HTML / CSS / React / React Aria / Next.js / コンポーネント実装 |
| AI-assisted Development | Claude Code / Cursor / Codex |
| Workflow / Automation | AIワークフロー設計 / 生成AIパイプライン / リポジトリベースの開発フロー / ファイルベースの状態管理 / 自動化 / Batch処理 |
04 · Terms
稼働条件
固定の前提と、案件ごとに調整する条件を分けて提示します。
| 契約形態 | 業務委託(準委任) |
|---|---|
| 作業環境 | クライアント貸与PC・クライアント環境下での稼働に対応。環境の制約に合わせてAIツールを組み込んだワークフローを設計・構築します。 |
| 稼働時間・出社・開始時期 | 案件内容により応相談 |
| 現在の稼働 | 大手EC事業会社にて業務委託(週3日)。週1〜2日程度の受け入れが可能です。 |
05 · About
About
実務の背景
Web業界で20年以上、プロダクトと制作の現場をまたいで設計に関わってきました。
BtoB SaaSを中心に、UI/UX・情報設計、デザインシステム構築、DesignOps推進を通じて、複雑な業務の整理から画面・運用への接続まで担ってきました。
組織の仕組みが整う前に、設計判断、コンポーネント構造、ドキュメントを先行して組み立てるタイプです。
現在は、エンジニアと連携するにとどまらず、自身も実装環境に入り、UI設計をコードまで接続する範囲へ広げています。
AIは個別ツールとして使うのではなく、業務フロー全体を整理したうえで、必要な場所へ組み込む形で扱っています。
06 · Contact
Contact
ご相談・お問い合わせは以下のフォームからお願いします。