31
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

「誰か一人のためにAIアプリをつくる」 - 5歳の姪のためのユニコーン塗り絵AI 【MarkdownAIチャレンジ】

Last updated at Posted at 2025-02-11

image.png

「Markdown AI」を使って、5歳児の姪という一人のユーザーのためだけにAIサイトを構築しました。
「MarkdownAI」はノーコードで簡単にAIサイトを作成でき、サーバー代やホスティング費用も必要ありません。
つまり、ごく少数のユーザーのためだけの限られた用途にAIサイトを開発しても負担になりません
より多くのユーザーに利用されることを目指すプラットフォームアプリではなく、ごく少数のユーザーのためにAIアプリが作成される未来を間近に感じました。

この記事はこんな人におすすめ

  • AIツール作成を生活に取り入れたい人
  • 用途に特化したAIツールをサーバレスで簡単に構築したい人
  • ウェブサイト制作に時間を取られたくない人
  • 大切な誰かのための個人向けAIアプリに興味がある人

きっかけは姪っ子の一言から

👶「いらにゃい。ぽい」

姪っ子がシマエナガの塗り絵を放り投げてしまいました。
ユニコーン以外の塗り絵はお気に召しません。

塗り絵素材の配布サイトは多いようで少なく、特定のモチーフに絞るとすぐに枯渇してしまいます。
ディズニーやサンリオのような大手IP企業は公式サイトから塗り絵素材を配布していますが、やはり数が限られています。
(当然ですが、著作権を侵害するような利用もNGです)

塗り絵の本を買ってみましたが、「自分で好きなものを選んで、印刷する」という体験が恋しいようで、いつもパソコンで塗り絵を探すことをせがまれます

そこで真っ先に考えたのがAI生成。
しかし、業務で使用しているClaudeやChatGPTのアカウントを家族に共有するのは難しく、セキュリティ面でも懸念がありました。

シンプルなAI画像生成サイトを自作することも検討しましたが、フロントエンド/バックエンド/ホスティング/AI機能の準備は想像以上に手間がかかります。さらに、GPTやAnthropicなどのAPIキーの利用料も気になりました。

そんな中で出会ったのがMarkdown AIでした。

Markdown AIで作る個人向けAIサイト

Markdown AIとは、Markdown記法とAI機能を活用し、誰でも簡単にWebサイトを作成・公開できるサーバレスAIサイトビルダーです。

  • マークダウンベースの簡単操作
  • コーディング不要でAIサイトが作れる
  • サーバー設定やデプロイが自動化されている
  • AI機能の組み込みが簡単
  • 必要に応じてHTMLやJavaScriptによるカスタマイズも可能

すずのユニコーンAI

生成した塗り絵の例:

image.png
IMG_1916.png
IMG_1914.png

開発したAIサイトの詳細

機能要件

  • 塗り絵画像生成に特化したシンプルなUI
  • シニア層の親戚でも直感的に操作可能
  • 5歳児向けのユニコーンイラスト生成
  • メンテナンスフリー
  • PC操作を前提とした設計(印刷のため)

実装のポイント

  1. シンプルなUI設計

    • キーワード入力欄を1つだけに限定
    • 大きな生成ボタン
    • 印刷ボタンを目立つ位置に配置
  2. AI生成の最適化

    • DALL-E 3を使用
    • 塗り絵に適した線画生成のためのプロンプトエンジニアリング
    • 5歳児が楽しめる絵柄の調整
  3. 印刷機能の実装

    • 印刷用に最適化された画像サイズ(A4対応)
    • 余白の自動調整
    • プリンタ設定の簡略化

技術解説

技術スタック

下記の布陣で開発に臨みました。

カテゴリ 使用技術
Frontend Markdown AI
Backend Markdown AI
Hosting Markdown AI
Infra Markdown AI
AI Tool Markdown AI

AI Model

画像生成のAIモデルはdall-e-3を使用しています。
(Markdown AI上で選択するだけでよく、自前でAPIキーなどを用意する必要はありません。これが本当にありがたい)

システムプロンプト

画像生成のプロンプトは下記です。

# DALL-E 3 Coloring Book Unicorn Generator

## Base System Prompt:
"Create a black and white line drawing of a unicorn suitable for a children's coloring book. The style should be simple, charming, and age-appropriate for a 5-year-old. Use clean, continuous lines with clear spaces for coloring. The illustration should feature {keyword} in the scene. Avoid any shading, crosshatching, or grayscale elements. Make all lines black, approximately 2-3 pixels wide, against a pure white background."

## Technical Specifications:
- Image Resolution: 300 DPI for print quality
- File Format: PNG with transparent background
- Canvas Size: 1024x1024 pixels (8.5" x 8.5" at 300 DPI)
- Margins: 0.5" safe zone from edges
- Bleed Area: Additional 0.125" beyond trim edge
- Line Resolution: Vector-quality smooth edges

## Fixed Parameters:
- Style: Children's coloring book
- Line color: Pure black (#000000)
- Background: Pure white (#FFFFFF)
- Line width: 2-3 pixels (0.24mm - 0.36mm at 300 DPI)
- Complexity: Simple enough for a 5-year-old
- Quality: HD

## Quality Control Guidelines:
1. Line Spacing:
   - Minimum 0.25" (75 pixels) between parallel lines
   - Minimum coloring area: 0.5" x 0.5"
   - Maximum detail density: 5 lines per square inch

2. Scene Composition:
   - Main subject (unicorn) occupies 50-60% of frame
   - Supporting elements limited to 30% of frame
   - Background elements limited to 20% of frame
   - Minimum element size: 1" in longest dimension

3. Safety and Age-Appropriateness:
   - No sharp or aggressive elements
   - No scary or threatening expressions
   - Fantasy elements limited to gentle, familiar items
   - No text or numbers unless specifically requested
   - No small, intricate details under 0.25"

## Complexity Levels (Auto-Adjusted):
- Ages 3-4: Maximum 5-7 major elements
- Ages 5-6: Maximum 8-12 major elements
- Ages 7-8: Maximum 15-20 major elements

## User Input Required:
One to three keywords describing the scene or theme, such as:
- "garden" 
- "rainbow clouds"
- "butterfly friends"

## Scene Composition Templates:
1. Standing Pose:
   - Unicorn centered
   - Head position: 30-45° turn
   - All four legs visible
   - Tail flowing but not intricate

2. Playing Pose:
   - Unicorn in dynamic position
   - Clear separation between body parts
   - Balanced weight distribution
   - Simple action poses only

3. Resting Pose:
   - Unicorn lying down
   - Legs tucked neatly
   - Clear outline separation
   - Gentle, peaceful expression

## Example Complete Prompt:
If user inputs "garden" →
"Create a black and white line drawing of a unicorn suitable for a children's coloring book. The style should be simple, charming, and age-appropriate for a 5-year-old. Use clean, continuous lines with clear spaces for coloring. The illustration should feature a garden with flowers and plants around the unicorn. Position the unicorn in a standing pose, centered, with the head turned 30-45 degrees. Ensure all lines are black, 2-3 pixels wide, against a pure white background. Include 8-12 major elements total, with flowers and plants occupying no more than 30% of the frame. Maintain minimum 0.25-inch spacing between lines and minimum 0.5-inch x 0.5-inch coloring areas. Avoid any shading, crosshatching, or grayscale elements."

## Invalid Content Filters:
- No mythical creatures other than unicorns
- No weapons or threatening objects
- No elaborate patterns or mandalas
- No realistic or anatomical details
- No environmental hazards
- No commercial elements or branding

誰か一人のためのAIアプリ

今回、Markdown AIで塗り絵サイトを作って気づきがありました。

個人向けAIアプリの新しい可能性です。

まず、パーソナライズされた体験を提供できる点です。一人ひとりの具体的なニーズに応え、使い手に最適化された機能を実現できます。特に日常生活での小さな困りごとに対して、細やかなフィードバックを得ながら改善を重ねていくことが可能です。

次に、開発の民主化が進んでいることです。ノーコードツールの登場により、プログラミングの専門知識がなくてもAIアプリの開発が可能になりました。運用コストも最小限に抑えられ、アイデアがあればすぐに実装できる環境が整ってきています。

さらに、これまでにない新しい価値を生み出せる可能性があります。従来のマス向けサービスでは対応が難しかった細かなニーズに応えることができ、家族や友人のための「世界に一つだけのAIアプリ」を作ることができます。これは単なる機能の提供を超えて、テクノロジーを通じた温かい関係性の構築にもつながります。

おわりに

姪っ子が喜びながらユニコーンの塗り絵を生成している姿を見ていると、テクノロジーの本質的な価値について考えさせられます。

それは必ずしも「より多くの人に使ってもらうこと」ではないのかもしれません。
大切な誰かの「ちょっとした困りごと」を解決する。
そんなパーソナルな価値創造こそが、AIがもたらす新しい可能性なのではないでしょうか。

この子が大きくなった時、きっと多くの人が自分だけの、あるいは大切な誰かのためのAIアプリを作っている世界になっているかもしれません。

Full Code

今回Markdown AIで作成したサイトのフルコードです。
(MarkdownだけでなくHTMLスクリプトも使用できます)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ユニコーンの塗り絵ジェネレーター</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
            background-color: #fef6ff;
            min-height: 100vh;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .header {
            text-align: center;
        }

        .title {
            color: #ff69b4;
            font-size: 28px;
            margin-bottom: 10px;
        }

        .description {
            color: #666;
            font-size: 18px;
        }
    </style>
</head>

<div class="container">
    <div class="header">
        <h1 class="title">🦄 すずのユニコーンAI 🌈</h1>
        <p class="description">かわいいユニコーンの塗り絵をつくるよ</p>
<br>
<br>
<br>

<div style="display: inline-block;">
  <input class="input" type="text" id="text-1739282283" style="width: 300px;" value="虹, 笑顔" placeholder="Enter a description of the image you want to generate">
  <button class="button is-success" type="button" id="button-1739282283">ユニコーンを呼ぶ</button>
</div>
<div id="image-1739282283"></div>

<script>
(() => {
  const button = document.getElementById('button-1739282283');
  const imageContainer = document.getElementById('image-1739282283');
  let dots = 0;
  let loadingInterval;

  const updateLoadingText = () => {
    dots = (dots + 1) % 4;
    const dotsText = '.'.repeat(dots);
    imageContainer.innerText = `Generating...${dotsText}`;
  };

  button.addEventListener('click', async event => {
    button.classList.add('is-loading');
    button.disabled = true;
    imageContainer.innerText = 'Generating...';
    
    loadingInterval = setInterval(updateLoadingText, 500);
    
    try {
      const serverAi = new ServerAI();
      const prompt = document.getElementById('text-1739282283').value;
      const answer = await serverAi.getAnswer('vvFETK5qkqV2qf8nDYdTZu', {
        prompt: prompt,
        size: '1024x1024',
        n: 1,
        type: 'image'
      });

      clearInterval(loadingInterval);
      imageContainer.innerHTML = `<img src="${answer.imageUrl}" alt="${prompt}">`;
    } catch (error) {
      clearInterval(loadingInterval);
      console.error('An error has occurred.:', error);
      alert(error.message || 'An error has occurred.');
      imageContainer.innerText = 'An error has occurred.';
    } finally {
      button.classList.remove('is-loading');
      button.disabled = false;
    }
  });
})();
</script>
    </div>

</div>
</html>

参考資料

31
15
1

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
31
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?