「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サイトの詳細
機能要件
- 塗り絵画像生成に特化したシンプルなUI
- シニア層の親戚でも直感的に操作可能
- 5歳児向けのユニコーンイラスト生成
- メンテナンスフリー
- PC操作を前提とした設計(印刷のため)
実装のポイント
-
シンプルなUI設計
- キーワード入力欄を1つだけに限定
- 大きな生成ボタン
- 印刷ボタンを目立つ位置に配置
-
AI生成の最適化
- DALL-E 3を使用
- 塗り絵に適した線画生成のためのプロンプトエンジニアリング
- 5歳児が楽しめる絵柄の調整
-
印刷機能の実装
- 印刷用に最適化された画像サイズ(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>
参考資料