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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1926720/39d37665-fed4-4aec-80b9-5361ebf96472.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](https://mdown.ai/content/77e98a7c-e933-4252-9347-4446d2acf745)

生成した塗り絵の例:

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1926720/db323f3c-24d9-280e-61da-8a8a30430377.png)
![IMG_1916.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1926720/028b295c-1e5d-44a3-b01e-a8901a266719.png)
![IMG_1914.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1926720/b1e67355-2e07-4607-ada5-f92cdc1c0103.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スクリプトも使用できます）

```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>
```

## 参考資料

https://qiita.com/mdown_ai_jpn/items/58c58dfd16954c19aeaf

https://qiita.com/mdown_ai_jpn/items/67be5f1e9b24267fc7c5

https://qiita.com/mdown_ai_jpn/items/41659f893310210765b7

https://qiita.com/mdown_ai_jpn/items/d3e281565c876a0bd64f

https://qiita.com/mdown_ai_jpn/items/8589a4089757904d4fed

https://qiita.com/mdown_ai_jpn/items/4acc4460c8fc123599fb


https://qiita.com/nft/items/5feac2805d508b735e15