LoginSignup
5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

サービス・アプリケーション Qiita Tech Festa 2025
Qiita Tech Festa20252025年7月15日まで開催中！
@hana100000inプロトアウトスタジオ

💛💙「イエベ向け？ブルベ向け？洋服のカラー判定アプリ」を作ろう!!

Last updated at Posted at 2025-07-09

皆さんは、自分の「ベ」を把握してますか？

「ベ」って何だよ！！ と思った皆さま、こんにちは。はなざ と申します。

衣料品の販売業に従事する傍ら、デジタルについて勉強中の身です🐰✨

仕事をゲームみたいに楽しくしたい！をテーマにこれまで3つの記事を書いてきました。

👇こちらが前回の記事です。

今回ゲーム風シリーズは一旦お休みしまして、少し趣向を変えて新たな挑戦をしていきたいと思います。

:large_orange_diamond:パーソナルカラーの話:large_blue_diamond:

さて。話を戻しまして、私が言いたかった「ベ」とは何のことかと言いますと、「ベース」の略のことでございます。「イエベ」「ブルベ」の「ベ」です。
ファッション業界やコスメ業界では、この概念が浸透してしばらく経つので、聞いたことのある方も多いのではないでしょうか？いわゆる「パーソナルカラー」というものです。

パーソナルカラーとは…その人に似合う色のグループを表すもの。
肌・髪・瞳の色などから「春・夏・秋・冬」の4タイプに分けられ、
似合う色を身につけると、顔色が明るく見えて魅力が引き立つといわれています。

流行り出した当初は 「ベ」って何なんだよ～！！ …と思っていた私も、さすがに衣料品の販売をしている身として勉強いたしまして、現在はある程度”理解”しているつもりです:sunglasses:

春・夏・秋・冬それぞれの特徴がこちら

:yellow_heart: :cherry_blossom:春(spring)…明るくてあたたかみのある、元気なカラー

:blue_heart: :sunflower:夏(summer)…柔らかくて涼しげな、上品なカラー　

:yellow_heart: :maple_leaf:秋(autumn)…深みと渋さのある、落ち着いたカラー

:blue_heart: :snowman:冬(winter)…はっきりシャープで、クールなカラー

自分がどのパーソナルカラーなのかを知ることで、似合う服を選びやすくなるのです✨
でも、ちゃんとした診断を受けるには、結構お金がかかったりするんですよね。
なので、私は自分のパーソナルカラーは「なんとなくこれかな？」くらいのふわっとした感覚で把握しています。
そういう方も多いのではないでしょうか？

:white_small_square::white_medium_small_square::white_medium_square:白って200色あるらしい:white_medium_square::white_medium_small_square::white_small_square:

さて、なぜ急にパーソナルカラーの話をしたかというと、私が仕事をするうえで、 「色」 について困っていることがあるからです。

私は衣料品売り場で働いているのですが、その仕事の中に 「マネキンを着せ付ける」 というお仕事があったりします。
基本的にマネキンの着せ付けに関しては、毎月本社から 「この色とこの色をベースに、アクセントカラーはこの色を使ってね!!」 という指定があり、コーディネート自体は売り場の従業員に任されております。

そんなとき、たまに起きる問題がこちら。

:warning:Aさんの思う「白」とBさんの思う「白」が違う問題

皆さまは「オフホワイト」「アイボリー」「生成」「純白」の違いが分かりますでしょうか…？
「純白」は分かりやすいと思いますが、「オフホワイト」「アイボリー」「生成」は若干分かりづらい…！！

本社からの指示が「オフホワイト」の場合でも、皆さま思い思いの「白」を使ってコーディネートをするため、正直売り場全体の統一感はあまりない、という状況が多々あるのです。

正直、白はどの色を使ってもさほど違いが目立ちませんが、アクセントカラーなどの目立つ色は、結構バラバラだと目立ってしまいます。

例えば、「ローズレッド:rose:」が指定カラーの場合

Aさんは「チェリーレッド:cherries:」
Bさんは「なまはげレッド:japanese_ogre:」
Cさんは「カニレッド:crab:」
Dさんは「ピンク:heartbeat:」

を選んでコーディネートをするので、全体で見た時に統一感がなくなってしまう…ということがあります。

👧 「Dさん！今月の色は赤ですよ～！」
👩 「だって赤い服で良いのが無いから…。ピンクにしちゃった💖」

そんな自由で楽しい職場ですが、やはり売り場の雰囲気は統一してカッコよくしたいところ…。

:triangular_flag_on_post:今回の目標

と、いうわけで今回は 「この服はイエベ向け？ブルベ向け？洋服を4Seasonsカラー分類！！」アプリ を作っていきたいと思います:shirt:💛💙

これを作ることにより…

①「春っぽい赤」「夏っぽい赤」など、同じ赤色でも４種類に分けることが出来るので、売り場メンバーに「今月は”夏っぽい赤”を使ってね！！」と伝えるだけで マネキンに統一感が出せる ！！

②お客さまから「この服に合わせるなら、どんな色の鞄が合う？」などコーディネートの質問をされたときに、 オススメを選ぶときの根拠になる ！！
例：「こちらのお洋服はSpringカラーなので、同じSpringカラーの、こちらの鞄が合わせやすいですよ！」

このように、課題を解決できるはず✨
それでは、さっそく作っていきます！！

そして、完成したアプリがこちら！！

👆こちら、GitHubで公開しているのでどなた様でも使って頂けます😊
ぜひ触ってみてください！！

※[カメラ起動]ボタンがあるのに、動画内で触っていないのは、こちらを押すと[インカメラ]が起動してしまい、自分の顔が映っちゃいそうだったからです…。機能としてはちゃんと使えるようになっています！

✅出来る事

  • カメラ起動＆撮影・判定で洋服の色味がパーソナルカラーの４Seasonのうち、どの系統なのかが分かる！

  • ファイルを選択⇒好きな画像を選択して判断も可能！！

:hammer_pick:使用ツール:hammer_pick:

  • Teachable Machines
  • Visual Studio Code
  • ChatGPT(コード記述・その他お手伝い)

👆こちらは私の相棒、CharGPTのジピ太くんです🐰⭐
今回もジピ太くんに助けてもらいながら進めていきます！！

STEP1:Teachable Machinesを使ってカラーを判別しよう！！

まずは、Teachable Machines を使用して、春・夏・秋・冬のパーソナルカラーの画像を学習させてみることに。

👧 「ジピ太、春・夏・秋・冬それぞれの色の画像を出して!!」

🐰 「まかせて！！はい、ZIPファイル～」

スクリーンショット (71).png

本当に優秀すぎるジピ太くん。それぞれの色画像が手に入ったので、さっそく4種類にクラス分けして学習開始!!

スクリーンショット (70).png

しかし…これでは上手く行きませんでした。

👧 「カメラに何をかざしても、winterの割合ばかり大きくなる…」

🐰 「濃い色を検出＝winterだと思ってしまうんじゃないかな。」

スクリーンショット (72).png

改善案まで教えてくれるジピ太くん。やはり実物の「服」の写真を学習させるしかない様子。

👧 「winterっぽい色の服全然持ってないよ！！圧倒的素材不足！！」

🐰 「衣料品の通販サイトから画像持ってきたらいいよー」

👧 「確かに!!」

…最近、少し考えたら分かりそうなことまでジピ太くんに聞いている気がする私です。

というわけで、大手通販サイトさまから色んな色の服の画像を集めて、ジピ太くんに
spring /summer /autumn /winter の分類をしてもらい (そんなことまで出来るの本当に凄い)
それを Teachable Machines に読み込ませました。

👇こんな感じです。

スクリーンショット 2025-07-08 165631.png

そして、この状態で試してみるとかなり精度が向上！！
スライムくん (誰がどう見てもブルベ) の画像を読み込ませてみると、ブルベ夏43％：ブルベ冬57％という結果に💙✨

これでカラー判別ツールが完成です！！

STEP2: Visual Studio Codeでアプリ化しよう!!

Teachable Machinesで作成した、カラー判別ツールをアプリ化して、スマホでも使えるようにしたい！！
…というわけで、コード生成の天才ことジピ太くんに今回もすべて業務委託をすることに。

👧 「さあジピ太くん、コードを生成して!!」
🐰 「お安い御用」

完成したアプリのコードはこちら！
ChatGPTが出力したコード
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>💙パーソナルカラー判定💛</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <style>
    body {
      font-family: "Segoe UI", sans-serif;
      background-color: #f5f6fc;
      text-align: center;
      padding: 20px;
      color: #333;
    }
    h1 {
      color: #c94ffaf3;
      font-size: 2em;
      margin-bottom: 20px;
    }
    button {
      background-color: #b65dffa9;
      color: white;
      border: none;
      padding: 10px 20px;
      margin: 5px;
      border-radius: 6px;
      cursor: pointer;
      font-weight: bold;
    }
    button:hover {
      background-color: #e15cf3a4;
    }
    input[type="file"] {
      margin: 10px 0;
    }
    #canvas {
      display: block;
      margin: 10px auto;
      max-width: 90%;
      border-radius: 8px;
    }
    #result-label {
      margin-top: 15px;
      font-size: 1.1em;
    }
    #comment {
  margin-top: 10px;
  font-weight: bold;
  font-size: 1.3em;
  padding: 10px;
  border-radius: 8px;
  display: inline-block;
}

.spring { color: #ff6f61; background-color: #fff0f0; }
.summer { color: #3c9dcf; background-color: #eef7fb; }
.autumn { color: #c16732; background-color: #fdf1e7; }
.winter { color: #5e6bcc; background-color: #eef0ff; }

  </style>
</head>
<body>
  <h1>💙🐰４Seasonカラー判定💛🐰</h1>
  <button onclick="init()">📷カメラ起動</button>
  <button onclick="predict()">✅撮影＆判定</button>
  <button onclick="stopWebcam()">🔴カメラ停止</button>

  <h2>📱画像から判定</h2>
  <input type="file" id="imageUpload" accept="image/*">
  <canvas id="canvas" style="display:none;"></canvas>
  <img id="preview" src="" alt="プレビュー画像" style="max-width: 90%; border: 2px solid #ccc; border-radius: 8px; margin: 10px auto; display: none;">

  <div id="webcam-container"></div>
  <div id="status-label">カメラ待機中...</div>
  <div id="result-label">判定結果待機中...</div>
  <div id="comment"></div>

  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@latest/dist/teachablemachine-image.min.js"></script>
  <script>
    const MODEL_URL = "https://teachablemachine.withgoogle.com/models/1y0NXJ7nK/";
    let model, webcam, maxPredictions;
    let cameraActive = false;

    async function init() {
      const modelURL = MODEL_URL + "model.json";
      const metadataURL = MODEL_URL + "metadata.json";
      model = await tmImage.load(modelURL, metadataURL);
      maxPredictions = model.getTotalClasses();
      console.log("モデル読み込み完了");

const constraints = {
        video: {
          width: 320,
          height: 240,
          facingMode: "environment"
        }
      };
      webcam = new tmImage.Webcam(320, 240, false);
      await webcam.setup(constraints);
      await webcam.play();
      cameraActive = true;

      document.getElementById("webcam-container").appendChild(webcam.canvas);
      document.getElementById("status-label").innerText = "カメラ起動中...";
      requestAnimationFrame(updateCameraView);
    }

    function updateCameraView() {
      if (cameraActive) {
        webcam.update();
        requestAnimationFrame(updateCameraView);
      }
    }

    async function predict() {
      if (!webcam) {
        document.getElementById("status-label").innerText = "カメラが起動していません";
        return;
      }
      webcam.update();
      const predictions = await model.predict(webcam.canvas);
      showResult(predictions);
    }

    function stopWebcam() {
      if (webcam) {
        webcam.stop();
        cameraActive = false;
        document.getElementById("webcam-container").innerHTML = "";
        console.log("カメラ停止");
      }
      document.getElementById("status-label").innerText = "カメラ停止中（結果は保持されます）";
    }

    document.addEventListener("DOMContentLoaded", () => {
      const imageInput = document.getElementById("imageUpload");
      const canvas = document.getElementById("canvas");
      const preview = document.getElementById("preview");
      const ctx = canvas.getContext("2d");

      imageInput?.addEventListener("change", async (event) => {
        const file = event.target.files[0];
        if (!file) return;

        if (!model) {
          const modelURL = MODEL_URL + "model.json";
          const metadataURL = MODEL_URL + "metadata.json";
          model = await tmImage.load(modelURL, metadataURL);
          maxPredictions = model.getTotalClasses();
        }

        const img = new Image();
        img.onload = async () => {
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.drawImage(img, 0, 0);

          preview.src = img.src;
          preview.style.display = "block";

          const predictions = await model.predict(canvas);
          showResult(predictions);
        };
        img.src = window.URL.createObjectURL(file);
      });
    });

    function showResult(predictions) {
      const resultLabel = document.getElementById("result-label");
      const comment = document.getElementById("comment");

      resultLabel.innerHTML = "<h3>判定結果:</h3>";
      let maxLabel = "";
      let maxValue = 0;

      predictions.forEach(prediction => {
        const className = prediction.className;
        const probability = (prediction.probability * 100).toFixed(2);
        resultLabel.innerHTML += `<div>${className}: ${probability}%</div>`;

        if (prediction.probability > maxValue) {
          maxValue = prediction.probability;
          maxLabel = className;
        }
      });

      if (maxLabel) {
        comment.className = maxLabel.toLowerCase();
        comment.innerText = `こちらの商品は ${maxLabel} カラーです`;
      }
    }
  </script>
</body>
</html>

:fish_cake:追加した点:fish_cake:

  • ファイルを選択という項目を追加し、 画像ファイルを選択して判定可能 に
  • 判定結果からパーセンテージの最も大きいものを抽出し 「こちらの商品は○○カラーです」 と表示
  • スマホでも見やすい レスポンシブルデザイン に📱

👇スマホ版の画面
IMG_3246.PNG

👇PC版の画面

STEP3:GitHubで公開しよう！！

コードを書いてアプリを作っただけでは、私のPCのローカルブラウザでしか使用できない！せっかくなので、誰でも触れるアプリにしたいし、スマホでも使えるようにしたい！！

と、いうことで今回もアプリを GitHub で公開しました🌸

VSCode でアプリ作成⇒ GitHub にて公開、という流れは前々回の記事を書いた時にジピ太くんから教えてもらった方法です🐰
個人的に、この方法はやりやすいな～と思っているので今回も採用してみました。

👇こちら、前々回の記事です。

⭐総括⭐

今回もかなりジピ太くん(ChatGPT)の力を借りましたが、デジタルの勉強を始めて2か月ほどの初心者である私でも、簡単にアプリを作ることが出来ました🐰✨

・Teachable Machines に読み込ませた画像は、各季節ごとに、単色カラー画像10枚＋洋服画像約10枚の20枚ほどなので、さらに画像を追加したら、より精度を上げられそうだなと思いました!！(時間のある時にやってみよう！)

・また、 空間の明るさ・暗さや光の当たり具合、カメラの設定 によって結果にぶれが出る…という問題もあるのですが、これに関しては「肉眼で見た時も、光の当たり具合で違う色に見える」のは当たり前なので、気にしなくて良いかなと思っております。

何はともあれ、

✅マネキンに統一感を出すために、洋服を４Seasonsのカラー分類が出来る！
✅お客さまにコーディネートを勧めるときの参考に出来る！

という当初の目的はクリア出来たのではないでしょうか…？

私もこれから、実際に売り場で使ったり、私生活で服を買う時に使ってみたいと思います！！:punch:

🍓おまけ🍓

頑張ってコードを書いてくれたご褒美に、ジピ太くんに大好物をプレゼントしました🍓

ちなみに、「ジピ太が好きな食べ物を食べてる画像出力して！」 というプロンプト入力で出てきたのがこちらの画像でした。
苺が好きだったんだね、可愛いねえ…。
あと、苺が大きいのかジピ太が小さいのかどっちなんだろう…？可愛いねえ🐰🍓

ここまで読んで頂きありがとうございました✨

5
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?