<h1 id="animaker%E3%81%A8%E3%81%AF" data-line="0" class="code-line">
<a class="header-anchor-link" href="#animaker%E3%81%A8%E3%81%AF" aria-hidden="true"></a> AniMakerとは</h1>
<h3 id="animaker(%E3%82%A2%E3%83%8B%E3%83%A1%E3%82%A4%E3%82%AB%E3%83%BC)%E3%81%A8%E3%81%AF%E3%80%81%E3%82%A2%E3%83%8B%E3%83%A1%E3%82%92%E8%87%AA%E5%8B%95%E3%81%A7%E4%BD%9C%E3%82%8C%E3%82%8Bai%E3%82%A2%E3%83%97%E3%83%AA%EF%BC%81" data-line="1" class="code-line">
<a class="header-anchor-link" href="#animaker(%E3%82%A2%E3%83%8B%E3%83%A1%E3%82%A4%E3%82%AB%E3%83%BC)%E3%81%A8%E3%81%AF%E3%80%81%E3%82%A2%E3%83%8B%E3%83%A1%E3%82%92%E8%87%AA%E5%8B%95%E3%81%A7%E4%BD%9C%E3%82%8C%E3%82%8Bai%E3%82%A2%E3%83%97%E3%83%AA%EF%BC%81" aria-hidden="true"></a> AniMaker(アニメイカー)とは、アニメを自動で作れるAIアプリ！</h3>
<ul data-line="2" class="code-line">
<li data-line="2" class="code-line">AniMaker（アニメイカー）は、写真と描きたい物語の題名を入れると、自動でアニメの表紙と5コマのマンガを生成してくれるWebアプリです</li>
<li data-line="3" class="code-line">登場人物を登録すると、そのキャラをマンガ内に配置してアニメを作ってくれます</li>
<li data-line="4" class="code-line">一行の題名だけから起承転結のあるストーリーを作ってくれたり、自分のあらすじからアニメを描くプロンプトを生成して、それを手直しする事により、詳細なアニメ描画を実現します</li>
</ul>
<p data-line="6" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/4a358d5dc144-20250624.png" alt="AniMaker" loading="lazy" class="md-img"></p>
<h1 id="i.-animaker-detail%3A" data-line="8" class="code-line">
<a class="header-anchor-link" href="#i.-animaker-detail%3A" aria-hidden="true"></a> i. AniMaker Detail:</h1>
<h2 id="animaker%E3%81%8C%E5%AF%BE%E8%B1%A1%E3%81%A8%E3%81%99%E3%82%8B%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E5%83%8F" data-line="9" class="code-line">
<a class="header-anchor-link" href="#animaker%E3%81%8C%E5%AF%BE%E8%B1%A1%E3%81%A8%E3%81%99%E3%82%8B%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E5%83%8F" aria-hidden="true"></a> AniMakerが対象とするユーザー像</h2>
<ul data-line="10" class="code-line">
<li data-line="10" class="code-line">アニメを作りたい人</li>
<li data-line="11" class="code-line">4コマ漫画を作りたい人</li>
<li data-line="12" class="code-line">シナリオを作りたい人</li>
<li data-line="13" class="code-line">その他絵コンテやラフ画を作成したい人</li>
</ul>
<h2 id="animaker%E3%81%8C%E8%A7%A3%E6%B1%BA%E3%81%99%E3%82%8B%E8%AA%B2%E9%A1%8C%E3%80%81%E3%82%BD%E3%83%AA%E3%83%A5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%80%81%E7%89%B9%E5%BE%B4" data-line="15" class="code-line">
<a class="header-anchor-link" href="#animaker%E3%81%8C%E8%A7%A3%E6%B1%BA%E3%81%99%E3%82%8B%E8%AA%B2%E9%A1%8C%E3%80%81%E3%82%BD%E3%83%AA%E3%83%A5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%80%81%E7%89%B9%E5%BE%B4" aria-hidden="true"></a> AniMakerが解決する課題、ソリューション、特徴</h2>
<h3 id="%E8%A7%A3%E6%B1%BA%E3%81%99%E3%81%B9%E3%81%8D%E8%AA%B2%E9%A1%8C" data-line="16" class="code-line">
<a class="header-anchor-link" href="#%E8%A7%A3%E6%B1%BA%E3%81%99%E3%81%B9%E3%81%8D%E8%AA%B2%E9%A1%8C" aria-hidden="true"></a> 解決すべき課題</h3>
<p data-line="17" class="code-line">私自身、描きたいマンガやアニメがあるが、画力が無く、制作できずにいました。またAIアニメで、主人公の絵が一定せず、一貫したストーリーが描けませんでした。</p>
<p data-line="19" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/84367fb1f21d-20250609.png" alt="100 Days Anime Challenge" loading="lazy" class="md-img"></p>
<h2 id="%E8%AA%B2%E9%A1%8C%E3%81%B8%E3%81%AE%E3%82%BD%E3%83%AA%E3%83%A5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3" data-line="21" class="code-line">
<a class="header-anchor-link" href="#%E8%AA%B2%E9%A1%8C%E3%81%B8%E3%81%AE%E3%82%BD%E3%83%AA%E3%83%A5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3" aria-hidden="true"></a> 課題へのソリューション</h2>
<p data-line="22" class="code-line">AniMakerアプリにより解決できる事:</p>
<ul data-line="23" class="code-line">
<li data-line="23" class="code-line">登場キャラクターを登録し、シーンにより呼び出す事ができる</li>
<li data-line="24" class="code-line">そのキャラクターを一貫してアニメに登場させる事ができる</li>
<li data-line="25" class="code-line">キャラクターを指定し、そこにプロット、あらすじを入れるだけで、アニメ制作のプロンプトを生成</li>
<li data-line="26" class="code-line">そのプロンプトから、4、5コマの漫画画像を生成</li>
<li data-line="27" class="code-line">1コマ毎に、コマ割り、ナレーション、オノマトペ、描画などを自動で作成</li>
<li data-line="28" class="code-line">作った画像をSNSにアップロードする機能</li>
<li data-line="29" class="code-line">スマホでできる手軽さ</li>
<li data-line="30" class="code-line">クラウドにデータを残し、どこからでもアクセス、チェック、更新できる</li>
</ul>
<h2 id="%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E7%89%B9%E5%BE%B4%E3%81%A8%E6%A9%9F%E8%83%BD" data-line="32" class="code-line">
<a class="header-anchor-link" href="#%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E7%89%B9%E5%BE%B4%E3%81%A8%E6%A9%9F%E8%83%BD" aria-hidden="true"></a> アプリの特徴と機能</h2>
<h3 id="animaker-functionality%3A" data-line="33" class="code-line">
<a class="header-anchor-link" href="#animaker-functionality%3A" aria-hidden="true"></a> AniMaker Functionality:</h3>
<ul data-line="34" class="code-line">
<li data-line="34" class="code-line">Cloud Run上にデプロイされたウェブ・アプリ（ANIME.Ktrips.net）</li>
<li data-line="35" class="code-line">ログイン、セキュリティ機能</li>
<li data-line="36" class="code-line">キャラクター登録、キャラのアニメ化機能</li>
<li data-line="37" class="code-line">複数のLLMモデル（Gemini、ChatGPT、Claude）を選択可能</li>
<li data-line="38" class="code-line">結果が“ANIME History”に残って、いつでもチェック可能</li>
</ul>
<p data-line="40" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__8e7cdafaca754" src="https://embed.zenn.studio/card#zenn-embedded__8e7cdafaca754" data-content="https%3A%2F%2Fyoutube.com%2Fshorts%2Fz_StWzolY9k%3Ffeature%3Dshare" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://youtube.com/shorts/z_StWzolY9k?feature=share" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://youtube.com/shorts/z_StWzolY9k?feature=share</a></p>
<h3 id="animaker-options%3A" data-line="42" class="code-line">
<a class="header-anchor-link" href="#animaker-options%3A" aria-hidden="true"></a> AniMaker Options:</h3>
<ul data-line="43" class="code-line">
<li data-line="43" class="code-line">LLMとそのモデルを選択可能、自分のAPI Keyを利用</li>
<li data-line="44" class="code-line">アニメスタイル: 90年代日本のアニメやアメコミ風、レトロスタイルなど</li>
<li data-line="45" class="code-line">描画サイズ、コマ割り数（１〜５）、描画クオリティなど</li>
</ul>
<h1 id="ii.-animaker-system-architecture-%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0-%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3" data-line="47" class="code-line">
<a class="header-anchor-link" href="#ii.-animaker-system-architecture-%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0-%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3" aria-hidden="true"></a> ii. AniMaker System Architecture システム アーキテクチャ</h1>
<p data-line="49" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/09a31daa11df-20250628.png" alt="AniMaker System Architecture" loading="lazy" class="md-img"></p>
<h2 id="%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9" data-line="52" class="code-line">
<a class="header-anchor-link" href="#%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9" aria-hidden="true"></a> アプリの使い方</h2>
<table data-line="53" class="code-line">
<thead data-line="53" class="code-line">
<tr data-line="53" class="code-line">
<th>AniMakerアプリの使用ステップ</th>
<th>AniMakerアプリ・スクリーン</th>
</tr>
</thead>
<tbody data-line="55" class="code-line">
<tr data-line="55" class="code-line">
<td><strong>0. スマホかウェブから、AniMaker.Ktrips.net にアクセス<br><br> ログイン画面で、ユーザーは usr、パスワードはpswd1<br><br>0. LLMを選択し、Modelを確認、apikeyを入力</strong></td>
<td>
<img src="https://storage.googleapis.com/zenn-user-upload/84c30134f7f6-20250624.png" alt="AniMaker Login" loading="lazy" class="md-img"><br><img src="https://storage.googleapis.com/zenn-user-upload/a8eef5467911-20250630.jpeg" alt="LLM apikey" loading="lazy" class="md-img">
</td>
</tr>
<tr data-line="56" class="code-line">
<td><strong>== 写真とタイトルから自動生成 ==<br><br>1. StoryMaker画面が出たら、写真をアップロード又は撮影<br><br>2. タイトル、又はあらすじを入力<br><br>3. カバー画像を作るには0(Cover)を1〜4ページを作りたい場合はそのページをセット<br><br>4. 描画したいスタイルを選んで、<br><br> AniMakerボタンを押す！</strong></td>
<td><img src="https://storage.googleapis.com/zenn-user-upload/45071a088d15-20250624.png" alt="AniMaker StoryMaker" loading="lazy" class="md-img"></td>
</tr>
<tr data-line="57" class="code-line">
<td><strong>== あらすじからプロンプト調整 ==<br><br>1. PlotMaker画面では、事前に登録したキャラを選んで、<br><br>2. 描画したいシーンのプロット（あらすじ）を入れる<br><br>3. Generate Promptボタンを押すと、アニメ描画の為のプロンプトが生成される<br><br>4. 生成されたプロンプトを手直しした後に、AniMakerボタンを押す！</strong></td>
<td><img src="https://storage.googleapis.com/zenn-user-upload/31767275a0c4-20250628.png" alt="AniMaker PlotMaker" loading="lazy" class="md-img"></td>
</tr>
<tr data-line="58" class="code-line">
<td><strong>アニメの表紙や5コマの漫画が生成される！<br><br>ANIME Historyからこれまで生成されたアニメが見れる</strong></td>
<td><img src="https://storage.googleapis.com/zenn-user-upload/84367fb1f21d-20250609.png" alt="AniMaker History" loading="lazy" class="md-img"></td>
</tr>
</tbody>
</table>
<h1 id="iii.-project-video-%E5%8B%95%E7%94%BB" data-line="60" class="code-line">
<a class="header-anchor-link" href="#iii.-project-video-%E5%8B%95%E7%94%BB" aria-hidden="true"></a> iii. Project Video 動画</h1>
<p data-line="62" class="code-line"><span class="embed-block embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/yKn5G4eoe5Y" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></span><a href="https://youtu.be/yKn5G4eoe5Y?si=jBH5XbJpHLboE6l0" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://youtu.be/yKn5G4eoe5Y?si=jBH5XbJpHLboE6l0</a><br style="display:none">
[AniMaker Movie]</p>
<h1 id="products-with-google-platform-and-apis" data-line="65" class="code-line">
<a class="header-anchor-link" href="#products-with-google-platform-and-apis" aria-hidden="true"></a> Products with Google Platform and APIs</h1>
<ul class="contains-task-list code-line" data-line="66">
<li class="task-list-item enabled code-line" data-line="66">
<input class="task-list-item-checkbox" checked type="checkbox"> Google Cloud Run</li>
<li class="task-list-item enabled code-line" data-line="67">
<input class="task-list-item-checkbox" checked type="checkbox"> Gemini API in Vertex AI</li>
<li class="task-list-item enabled code-line" data-line="68">
<input class="task-list-item-checkbox" checked type="checkbox"> (OSS) Gradio</li>
</ul>
<h2 id="github-and-app" data-line="70" class="code-line">
<a class="header-anchor-link" href="#github-and-app" aria-hidden="true"></a> Github and App</h2>
<ul data-line="71" class="code-line">
<li data-line="71" class="code-line">
<strong>Github</strong> - <a href="https://github.com/ktrips/animaker" target="_blank" rel="nofollow noopener noreferrer">https://github.com/ktrips/animaker</a>
</li>
<li data-line="72" class="code-line">
<strong>Tech Blog</strong> - <a href="http://blog.ktrips.net/animaker" target="_blank" rel="nofollow noopener noreferrer">http://blog.ktrips.net/animaker</a>
</li>
<li data-line="73" class="code-line">
<strong>App</strong> - AniMaker.Ktrips.net</li>
</ul>
<h1 id="background" data-line="75" class="code-line">
<a class="header-anchor-link" href="#background" aria-hidden="true"></a> Background</h1>
<ul data-line="76" class="code-line">
<li data-line="76" class="code-line">実際に「100日でアイアンマンになる物語」を毎日一コマづつ続けて制作しています</li>
<li data-line="77" class="code-line">
<a href="https://ktrips.net/100-days-to-ironman/" target="_blank" rel="nofollow noopener noreferrer">https://ktrips.net/100-days-to-ironman/</a><br>
<img src="https://storage.googleapis.com/zenn-user-upload/0b9571d73015-20250628.png" alt="100 Days to Iroman" loading="lazy" class="md-img">
</li>
</ul>
<h3 id="animaker---ai-anime-made-by-gemini" data-line="80" class="code-line">
<a class="header-anchor-link" href="#animaker---ai-anime-made-by-gemini" aria-hidden="true"></a> AniMaker - AI Anime made by Gemini</h3>
<p data-line="81" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/69f8667dfe13-20250629.png" loading="lazy" class="md-img"></p>


AniMaker AIアニメイカー

AniMaker(アニメイカー)とは、アニメを自動で作れるAIアプリ！

AniMakerが対象とするユーザー像

AniMakerが解決する課題、ソリューション、特徴

ii. AniMaker System Architecture システム アーキテクチャ

python

Discussion