← Portfolio Web App
Canvas API × AI Detection

外壁・屋根の塗装色を
リアルタイムで確認

写真をアップロードして部位をクリックするだけ。塗装業者と施主が一緒に色を選べる、次世代のカラーシミュレーター。

アップロード不要でデモ体験
8部位・4プラン保存対応
URLで提案を共有
https://color-simulation-miki.netlify.app
塗装部位
外壁 1
#bfdbfe
外壁 2
#93c5fd
屋根 1
#7c3aed
屋根 2
#6d28d9
雨樋
#64748b
扉・窓枠
#1e293b
4 Plans プラン保存済み
AI自動検出完了
外壁・屋根を識別

すべての機能が
直感的に使える

— 01
魔法棒 塗りつぶし選択

Canvas APIのフラッドフィルアルゴリズムで、クリックした部位の色を一瞬で変更。輪郭をなぞる手間ゼロで、直感的に色替えが完了します。

— 02
AI 自動部位検出

k-meansクラスタリングと位置ヒューリスティクスを組み合わせ、写真から外壁・屋根を自動識別。「自動検出」ボタン一つで作業をスキップできます。

— 03
8部位 × 独立カラー

外壁1/2、屋根1/2、雨樋、扉・窓枠、基礎、その他の8カテゴリを独立管理。細部まで色を分けて提案できるから、完成後のイメージが正確に伝わります。

— 04
4プラン保存 & 比較

最大4パターンの配色を保存してワンクリックで切り替え。「Aプラン・Bプラン・Cプラン」を並べて見せることで、施主の決断をサポートします。

— 05
URLシェア & JSON出力

Supabase経由でプラン全体をURLに圧縮。施主にリンクを送るだけで、色の選択結果をそのまま共有。JSONエクスポートでオフライン保存も可能です。

— 06
Undo / Redo 対応

履歴スタック管理により、操作ミスをいつでも元に戻せます。クライアントとのリアルタイム打ち合わせ中も、試行錯誤しながら最適な配色を見つけられます。

Live Demo

今すぐ
ブラウザで試す

インストール不要。写真をアップロードして、クリックするだけで塗装色が変わります。実際の操作感をそのままお試しください。

デモアプリを開く
color-simulation-miki.netlify.app
REGIONS
外壁 1
外壁 2
屋根 1
屋根 2
雨樋
扉・窓枠
基礎
AI 自動検出
Color Palettes

おすすめ カラーパレット 内蔵

日本の住宅に合わせた5つのプリセットパレットを内蔵。好みのテイストをワンクリックで適用できます。

スカイブルー系
清潔感・爽やか
ナチュラルベージュ
温かみ・落ち着き
モノクロモダン
シンプル・洗練
フォレストグリーン
自然・エコ
エレガントローズ
上品・可愛い

使用技術

モダンなWeb技術でゼロから構築した高パフォーマンスSPA

React 18

Hooks・Context APIを活用したコンポーネント設計。状態管理を一元化

Vite 6

HMR対応の高速ビルドツール。本番バンドルを最小化

🎨
Canvas API

フラッドフィル・k-means・マスク合成をネイティブAPIで実装

Supabase

プランデータをDBに保存しURLシェア機能を実現

百聞は一見にしかず。
今すぐ試してみてください。

インストール不要・登録不要。ブラウザを開くだけでカラーシミュレーションを体験できます。