Zenn
⛳

Doodle Scope紹介記事

2025/02/11に公開
AI
tech

プロジェクト名： "Doodle Scope"

〜〜AIを活用した画像分析・フィードバックサービス〜〜

１．サービス概要

”Doodle Scope”

Doodle Scopeは、画像を入力することでそれに対するAIの分析を得られるweb applicationサービスです。

作成したデザイン案の修正
イラスト上達のサポート

画像に対するLLMの講評に加えて、k-meansクラスタリングやヒートマップを活用した分析も行えるのが特徴です。


（Doodle Scope タイトル画面）


　(Doodle Scope 分析画面)

〇サービス利用動画

https://youtu.be/dVvzV0t3_Ys

名前の由来

  • Doodle(落書き、お絵描き)
    • 初心者からプロなど誰に対しても、気軽に描いた絵からAIの分析を通じて新たな視点を提供したいという想いから。
  • Scope(観察、観測するモノ)
    • 創作物を観察（分析）し、客観的な評価とフィードバックを与えるサービスを目指す

〇背景

近年、デジタルツールの進化により、誰でも気軽にイラスト制作を始められるようになりました。特にYouTubeやSNSの普及により、クリエイティブスキルを学ぶ機会は大きく広がり、多くの人がオンラインを活用した自己学習に取り組めるようになりました。一方で、ネット上の膨大な情報の中から自分に最適な成長方法を見つけることは容易ではなく、リアルの学びの場においては、アートスクールに通う時間やコストの負担が大きいという課題があります。

更に、近年のAI技術はクリエイティブの領域にも影響を与えています。Adobe Sensei や Runway ML など、AIを活用したクリエイティブツールが登場し、デザイン補助が一般化しつつあります。これにより、誰もがクリエイティブな作品を制作できる世界が実現しつつあります。

AIの進化に対しては、人間の知識や感覚が追い付いていない側面もあります。例えば、生成AIによって画像の作成難易度は下がりましたが、まだ課題もあります。

  • AI特有の違和感
  • 意図通りのデザインを作ることの難しさ

→ 生成AIの成果物をそのまま作品に活用するには修正が必要になる

特に、前提知識や技術的な経験を持たない人（デザイナー・アーティストではない人）にとっては、生成AIが作り出した画像の「何が良くて、何が悪いのか」を適切に判断すること自体が難しいです。

仮に違和感や問題点を認識できたとしても、適切な技術手法を選び、効果的に修正を加えるための知識が不足していることが多く、意図した通りの仕上がりにするのは困難で、そのため最終的な作品の品質を向上させるためには客観的な評価基準や具体的なフィードバックが求められています。

〇現状と課題

本サービスは、主に以下の３つの課題を解決することを意図して制作を進めました。

  • 課題１：フィードバック不足

    • イラスト制作において、作品へのフィードバックはとても重要です。しかし絵の知識を持つ方に適切に評価してもらう機会はそこまで多くありません。例えば、独学でデザインを学ぶ場合は一方通行の情報提供が多く、自己判断で練習を進めることが一般的です。講習やサブスクリプションサービスでフィードバックをもらえる機会がある場合もありますが、特に初心者は自分の絵には何が足りないのか、今後どんな練習をすればいいかを認識することは困難です。そのため、本来上達のために必要でない練習や、非効率的な練習をしてしまうことがあります。

  • 課題２：評価の客観性

    • また、様々なサービス開発において、デザイン（見た目と機能）の設計は非常に重要です。クリエイティブな制作の特性上、特に初期段階においては定性的な判断に頼りがちで、定量的な視点が欠けることが多いです。例えば、良い配色や構図のバランスは人の感覚によって異なり、「どのように良いか」を定量的かつ客観的に評価するのが難しいという課題があります。

  • 課題３：デザインアイディア修正の難しさ

    • デザイン制作において、異なる職種間で完成イメージを共有することが難しいという問題があります。デザイナーと非デザイナー間では、前提とする知識や価値観の違いなどが異なり、意図やイメージの共有が困難です。その結果、議論の中で認識のずれが生じ、すり合わせに時間がかかることがよくあります。この問題を解決するには、客観的な視覚情報を基にした共通の評価基準が必要です。

〇課題の解決方法

Doodle ScopeはAIを活用して、画像（イラストやデザインなど）を客観的に分析・評価するサービスです。上記の課題に対して、以下の視点から課題解決を目指します。

  • LLMによるフィードバック

    • 画像とテキストを結びつけることを通して学習されるマルチモーダルモデルを用いてフィードバックを生成することで、誰でも好きなときに、自分のイラストに対する客観的な評価を得ることが可能です。しかしその一方、LLMによる評価は常に客観的であるとは言えません。LLMの分析は学習元のデータや学習方法、推論時のプロンプトによって出力が変化するからです。

  • 定性分析×定量分析の融合

    • LLM（大規模言語モデル）による文章ベースの定性的な分析

    • ヒストグラムやヒートマップ分析による定量分析

    • → 定性評価と定量評価を共に用いることで、多角的な視点で自身のイラストを評価できるサービスを目指します。

  • デザインプロセスのサポート

    • 配色分析・構図分析・背景除去を行い、初期デザインの段階から作品のブラッシュアップを支援
    • 非デザイナーの方にこのサービスを利用してもらうことで、デザイナーとの認識ギャップを減らし、意思疎通を円滑化できます。

〇サービスが提供する役割（解決する課題）

  • 「1 → 10」の補助
    • デザインへの分析・改善点を提示し、ブラッシュアップを支援
    • イラストのクオリティアップにつなげ、成長を支援
  • 多角的な視点での作品評価
    • アートやデザインの論理思考を養う
  • デザイナーと非デザイナーの意図共有
    • 視覚的な分析を通じて、議論を円滑に進める

提供機能(一枚の入力画像をもとにした分析)

  • 画像へのAIアシスタントによる講評
  • AIアシスタントとのチャット
  • 代表的な色計算 (20色を多い順に並べて表示)
  • 画素ヒストグラム作成
  • 画像情報量ヒートマップ
  • 背景除去

Doodle Scope は、初心者からプロまでの幅広い創作関係者を対象としています

  • イラスト・デザイン関連のクリエイター
  • 企業のデザイン担当者（企画、デザイナーなど）
  • 絵描きやクリエイティブに興味のある人
  • 美術教育者
  • その他クリエイティブ業務に関わる人

活用例：

  • デザインを学び始めた人の学習サポート
  • デザイン作成サポート
    • キャラクターデザイン
    • ポスター・広告
    • webデザイン

〇具体的なユースケース

初心者イラストレーター 練習したイラストをDoodle Scopeで分析し、色のバランスや構図の課題を発見
プロのクリエイター クライアントワークの配色・デザインチェックとして活用
企業のデザイナー マーケティング施策のためのバナーデザイン分析、UIデザインの一貫性チェック

２．技術構成

〇技術構成

  • 使用したGoogle Cloud サービス
    • Cloud Load Balancing
    • Google Cloud Run
    • Compute Engine
    • Fire store
    • Cloud Storage
    • Vertex AI
  • 使用言語
    • バックエンド: Python
    • フロントエンド: HTML, CSS, JavaScript


(ArtisanAllyプロジェクト, システムアーキテクチャ図)

〇システム構成

今回のシステムアーキテクチャは、私たち開発初心者チームでも、概ね簡単に構成できることを目指して設計を行いました。

  • Load Balancingを用いて、同一ドメインからHTML、CSS、JavaScriptと各種APIサーバーにアクセスできるパスを設定し、CORS関連の設定を省くようにしました。
  • Cloud Storageにindex.htmlを格納し、このフロントエンドのJavaScriptから各種必要な機能にアクセスを行います
  • 一連の処理で生成されるデータは、テキストデータはFirestore、画像データはCloud Storageに保存しております
  • 各種機能は、全てCloud Runでリクエストを受け取ります。そして、web APIを通してVertex AIやCompute Engineを用いて画像処理を行います
  • ユーザー側のJavaScriptではFirestoreの変更を常に確認しています。つまり、リクエストを投げた後、Firestoreのデータが変更されたとき、ユーザー側の画面ではリアルタイムに変更情報が反映されます

〇各種機能

  • 代表色分析
    • 画像の主要な色を抽出し、配色のバランスを評価
  • ヒストグラム
    • 画像の色分布を可視化し、コントラストや明度を分析
  • ヒートマップ
    • 画像の視線誘導を分析し、構図のバランスを評価
  • 背景除去
    • キャラクターのみの画像分析
  • AIチャット
    • AIによるイラストの講評や具体的なアドバイスを提供

3. その他まとめ

〇改善点

今後のアップデートでは、以下の機能を追加予定です。

  • AIのフィードバック精度向上
    • 画像のジャンルごとに適切なプロンプトを生成
    • 現状gemini APIからの返答をそのままユーザーに渡しているが、
      geminiの回答をさらに複数回geminiに通して回答文章の質を高める
  • UI/UXの改善
    • 結果画面のレイアウト調整を行い、分析結果の視認性を向上したい
  • ソーシャルシェア機能
    • 分析結果をSNSで共有し、他のクリエイターとの交流を促進

ハッカソンに出た感想

私たちは情報系学生３名、社会人デザイナー１名のチームです(以降、学生３人を「僕」, 「B」, 「C」。社会人を「D」と呼称)。代表者の僕とBはハッカソン初参加で、社会人のDはプログラミング未経験のデザイナーです。そのため唯一ハッカソン参加経験があり、実践的なプログラミングアルバイトを経験しているCに技術的なアドバイスを貰いながらの実装となりました。

そうは言っても、とにかくわからないことだらけで、フロントエンドはhtml, css, javascriptの勉強会から始めましたし、バックエンドも「APIとは何か？」という段階から勉強を進めてきました。
B, Cにはとても助けられました。そして時間のない中プログラミングを学び、デザイン業務全般まで担当していただいた社会人メンバーのDには大変感謝しております。

今回は計画含めて4週間ほどの時間で、実際に実装を始められたのは後半の２週間です。とても困難の多いプロジェクトでしたが、このメンバーで最後まで頑張れたことを嬉しく思います。

最後に、このような機会を用意してくださったZenn（クラスメソッド株式会社）様には大変感謝いたします。ありがとうございました。

まとめ

Doodle Scope は AI技術を活用し、イラスト・デザインを客観的に評価・改善するためのサービス です。
今後も改善を進め、チームとして沢山成長していきたいです。
この度は貴重な機会をいただきありがとうございました！

参考記事：

**①AIを使ってイラストの情報量を可視化できないか試してみた(**https://zenn.dev/mattyamonaca/articles/d3d7acbd796733)

Discussion