keitreeworks

デザインと実装、人とAIの間を
設計する。

Designing the bridge between users, design & code. BtoB SaaSの情報設計、デザインシステム、AIを組み込んだ設計プロセスを、実務に接続する形で仕組み化します。

Contact Case Studies

01 · Expertise

専門領域

設計の意図、実装への接続、運用に残る判断基準までを扱います。

デザインシステム構築・運用

Figmaコンポーネントの命名規則、Props定義、レイヤー構造を設計します。Storybook/Chromatic連携を見据え、実装に接続する構造としてドキュメント化します。

Figma設計規約
コンポーネント仕様
運用ドキュメント

AIを組み込んだ設計
プロセスの仕組み化

Claude Code等のAIツールをデザインワークフローに組み込む設計を行います。DesignOpsの観点から、制作フローの仕組み化・自動化の設計支援まで扱います。

AI活用プロセス
ハンドオフ設計
運用ルール

BtoB SaaSの情報設計

複雑な業務ドメインを構造化し、PDM・エンジニアと協働しながら画面、権限、導線、状態の設計判断を整理します。

IA整理
画面構造
設計判断メモ

02 · Cases

ケーススタディ

判断と仕組み化の過程が見えるよう、状況・制約・判断・実施・結果の同じ型で整理します。

BtoB SaaS

BtoB SaaSのデザインシステム/設計プロセス

LMS系またはタレントマネジメント系BtoB SaaSを想定した匿名化ケース。設計判断、コンポーネント運用、実装接続の整理を記述します。

詳しく見る →

AI Pipeline

個人メディアのAI制作パイプライン設計

個人運営のコンテンツメディアを想定した匿名化ケース。複数AIエージェントの分担、文脈共有、ハンドオフ設計を記述します。

詳しく見る →

03 · Stack

使用ツール

設計、実装、AI活用、共同作業をまたぐ実務環境です。

Design	Figma / Storybook / Chromatic
Development	HTML/CSS / React / Next.js
Backend / DB	Supabase / PostgreSQL / RLS
AI Tools	Claude / ChatGPT / Gemini
AI Coding	Claude Code / Cursor / Windsurf
CI/CD	GitHub Actions / Vercel
Collaboration	Slack / GitHub / Notion / Jira

04 · Terms

稼働条件

固定の前提と、案件ごとに調整する条件を分けて提示します。

契約形態	業務委託(準委任)
作業環境	自身のPC・AIツールを組み込んだワークフローでの稼働を前提
稼働時間・出社・開始時期	案件内容により応相談

05 · About

About

実務の背景

Web業界で20年以上、プロダクトと制作の現場をまたいで設計に関わってきました。
BtoB SaaSのプロダクト設計では、デザインシステム構築とDesignOps推進を通じて、Figma上の意図を実装と運用に接続する役割を担ってきました。
組織の仕組みが整う前に、設計判断、コンポーネント構造、ドキュメントを先行して組み立てるタイプです。
現在はAIツールを設計プロセスに組み込み、個人開発のWebアプリでも、デザインシステム構築からNext.js実装、決済、Storybook/Chromaticによるコンポーネント管理までを一人で設計・実装しています。

06 · Contact

Contact

ご相談・お問い合わせは以下のフォームからお願いします。

デザインと実装、人とAIの間を設計する。