旅行中に「この青が欲しい」と相談されたので、Claude Code Webで色検索アプリをちょちょいっと作った話

はじめに

旅行中、一緒にいた画家の友人から「この絵のこういう青色が使いたいんだけど、どうやって探せばいいかな？」と相談されました。

昼間は観光を楽しみ、夜宿に戻ってから「そういえばあれ作れるかも」と思い立ち、Claude Code Webでサクッとアプリを作ってみることにしました。

結果、数時間で実用的な絵画色検索システムが完成。旅行先でもこんなに手軽に開発ができる時代になったんだなと実感した話です。

作ったもの

絵画色検索システム - 画像から色を抽出し、似た色を持つ絵画を検索できるアプリ

実際に作成した色検索アプリの画面

主な機能

• 📁 画像スキャン: フォルダ内の画像を一括スキャンし、代表色を抽出
• 🎨 カラーピッカー検索: 欲しい色をピッカーで選択して、似た色を持つ絵画を検索
• 🔍 距離計算: RGB色空間でのユークリッド距離で類似度を計算
• 💾 SQLiteデータベース: 画像情報と色データを永続化

技術スタック

• Python 3.x
• Streamlit: Webアプリフレームワーク
• PIL (Pillow): 画像処理
• scikit-learn: K-means法による色抽出
• SQLite: データベース
• Material Design: UIデザイン

開発環境: Claude Code Web

今回使用したのはClaude Code Web。ブラウザだけで完結する開発環境です。

なぜClaude Code Webを選んだか

1. PCが不要: iPadやタブレットからでも開発可能
2. 環境構築不要: すぐにコーディングを始められる
3. AIアシスタント: Claude が実装を手伝ってくれる
4. Git統合: GitHubとの連携がスムーズ

旅行中という制約がある中で、この手軽さは最高。

開発の流れ

Phase 1: 基本機能の実装

最初は最小限の機能から：

1. 画像からの色抽出

   • K-means法で画像から代表色3色を抽出
   • RGB値をデータベースに保存

2. 色検索機能

   • カラーピッカーで色を選択
   • ユークリッド距離で類似画像を検索

def extract_dominant_colors(image_path: str, n_colors: int = 3):
    """K-meansで画像から代表色を抽出"""
    img = Image.open(image_path)
    img = img.convert('RGB')
    img = img.resize((150, 150))

    pixels = np.array(img).reshape(-1, 3)
    kmeans = KMeans(n_clusters=n_colors, random_state=42, n_init=10)
    kmeans.fit(pixels)

    colors = kmeans.cluster_centers_.astype(int)
    return [tuple(color) for color in colors]

3. 簡単なUI
   • Streamlitで検索インターフェース
   • サイドバーに画像スキャン機能

Phase 2: UIの改善 (マテリアルデザイン化)

基本機能が動いたところで、見た目を改善することに。

「どうせ作るなら、ちゃんとしたUIにしたい」と思い、マテリアルデザインを適用しました。

マテリアルデザインの実装

def apply_material_design():
    """マテリアルデザインのカスタムCSSを適用"""
    st.markdown("""
        <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

        :root {
            --primary-color: #3f51b5;
            --accent-color: #ff4081;
            --elevation-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
        }

        .stButton > button {
            background-color: var(--primary-color);
            box-shadow: var(--elevation-2);
            transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        }
        </style>
    """, unsafe_allow_html=True)

実装したデザイン要素

• カラーパレット: Indigo (Primary) + Pink (Accent)
• タイポグラフィ: Roboto フォント
• エレベーション: 影効果で奥行きを表現
• カード UI: 検索結果をカード形式で表示
• ホバーエフェクト: マウスオーバーで浮き上がる
• フェードインアニメーション: 画像表示時のアニメーション

結果、かなりいい感じのデザインになった。

実際の開発体験

昼: 観光の合間に仕様作成

観光を楽しみながら、友人との会話から「あ、これ作れるかも」と思いつき、観光の合間にカフェで10分ほどClaudeと相談。

カフェでClaudeと対話しながら仕様を固める（所要時間: 約10分）

簡単な仕様書を作成したら、すぐにClaude Code Webに渡して実装を依頼。その後は観光に戻る。

Claude Code Web: 私が観光している間に、Claudeが勝手に実装を進めてくれる。

夜: 宿で完成品を確認

宿に戻って確認してみると、

なんと既に動く状態で完成していた。

• 色抽出機能
• 検索機能
• マテリアルデザインのUI
• データベース連携

全てが実装され、すぐに使える状態に。

実際に色検索を実行している様子

実装時間: 仕様作成10分 + Claude Code Webでの自動実装
トータル: 約1時間で完成

翌日: 友人に見せる

朝食後、画家の友人に見せたところ...

「おお！これ便利じゃん！」

と喜んでもらえました。実際に使ってもらい、その場でいくつかフィードバックをもらって改善。

技術的なポイント

1. 色の類似度計算

RGB色空間でのユークリッド距離を使用：

def color_distance(color1: Tuple[int, int, int], color2: Tuple[int, int, int]) -> float:
    """2つの色のユークリッド距離を計算"""
    return np.sqrt(
        (color1[0] - color2[0]) ** 2 +
        (color1[1] - color2[1]) ** 2 +
        (color1[2] - color2[2]) ** 2
    )

本当はLab色空間の方が人間の知覚に近いですが、シンプルさを優先してRGBにしました。

2. データベース設計

SQLiteで軽量に：

CREATE TABLE images (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    file_path TEXT UNIQUE NOT NULL,
    file_name TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE colors (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    image_id INTEGER NOT NULL,
    r INTEGER NOT NULL,
    g INTEGER NOT NULL,
    b INTEGER NOT NULL,
    FOREIGN KEY (image_id) REFERENCES images(id)
);

3. パフォーマンス最適化

• 画像を150x150にリサイズして処理を高速化
• K-meansのクラスタ数を3に制限
• データベースにインデックスを作成

まとめ

学んだこと

1. Claude Code Webの威力

   • 場所を選ばず開発できる
   • セットアップ不要で即開発開始
   • AIの支援で開発速度が爆速

2. Streamlitの手軽さ

   • プロトタイプ作成に最適
   • Pythonだけで完結
   • カスタムCSSでデザインも自由

3. 旅行と開発の両立

   • 昼は観光、夜は開発という使い分けが可能
   • 気分転換しながら開発できる
   • モチベーション維持にも効果的

これからやりたいこと

• Lab色空間での距離計算に変更
• 画像のタグ付け機能
• 色のパレット生成機能
• PWA化してオフラインでも使えるように
• より多様な画像フォーマット対応

おわりに

旅行中でも、ちょっとした時間でこれだけのアプリが作れる時代になりました。

Claude Code Webのおかげで、「思いついたらすぐ作る」が本当に実現できています。

次の旅行でも、何か面白いものが作れそうな予感がします。

皆さんも旅先で何か作ってみませんか？

---

リポジトリ

参考リンク

• Claude Code Web
• Streamlit Documentation
• Material Design