【プログラミング不要！誰でも作れる自分専用AIアプリ実践ガイド⑤】

第4章：AIを使う側から設計する側へ

ここからは、実際にAIアプリを作りながら、
AIをどう動かしていくのかを設計していきます

とはいえ、最初から難しく考える必要はありません

AIアプリ制作で重要なのは、高度なプログラミングよりも、「何を解決したいのか」「どう返ってきたら使いやすいのか」を整理することです

ここからは Google AI Studio を使いながら、AIの出力がどう変わるのか
どう改善していくのか実際の流れを一つずつ見ていきます

■AIを「使う」から「設計する」への実践ステップ

STEP1〜STEP5までの流れを、実際に一緒に動かしながら見ていく
ここで重要なのは、「完璧なAIを最初から作ること」ではありません

まずは、

• 作る

• 試す

• 修正する

この流れを体験することです

●STEP1：ログイン

1.Google AI Studio にアクセスし、Googleアカウントでログインします
→https://aistudio.google.com/
→アカウントがない場合は無料で作成します

すでにアカウントがある場合はそのままログインします
→ログイン後Google AI Studioのダッシュボードが表示されます

【アカウントがない場合はGet startedを選択】

2.Get started後に、Googleアカウントと紐づけをしてログインする

【Google AI Studio ダッシュボード】

●STEP2：新規チャットを開く

左側メニューの「Build内にあるAppsを選択して、
新しいチャット画面を開きます

見るポイントは、

• 入力欄が表示されているか

• AIと対話できる状態か

👉 ここがAIアプリ制作のスタート地点です

●STEP3：AIに指示を書いて実行する

ここでやるのは、「AIに何をやらせるか」を決めることです

AI設計の基本4要素

目的：何をするAIか

入力：何を渡すか

出力：どう返すか

制約：守らせるルール

👉この4つを赤枠に記入していく
最初は、この4つだけでOKです!

【Google AI Studioに依頼する例文】

記入例①：思考整理アプリを作成する場合

目的：
頭の中で散らかっている考えを整理し、
問題点と次にやることを明確化する
思考整理AIを作成する

入力：
・悩み
・不安
・考えていること
・迷っている内容
・愚痴
・メモ
・やること
・頭の中の整理されていない文章

出力：
・問題点
・原因
・優先順位
・整理された考え
・やるべきこと
・不要な悩み
・行動案

制約：
・感情論を減らす
・抽象論だけで終わらせない
・実行ベースで出力
・長すぎる説明を避ける
・優先順位をつける
・問題を分解する
・曖昧な結論を減らす
・次にやることを具体化する
・同じ内容を繰り返さない
・ストレス原因を分析する
・思考をカテゴリ分けする
・React + TypeScript + Tailwindで構築
・スマホでも使いやすいUIにする
・履歴保存機能をつける
・過去の悩みを検索できるようにする
・思考パターンを分析できるようにする
・改善前と改善後を比較表示する

記入例：学習補助アプリを作成する場合

目的：
学習内容を整理し、
理解・暗記・復習をしやすくする
学習補助AIを作成する

入力：
・学びたい内容
・教科書や教材の文章
・分からない用語
・覚えたい単語
・授業メモ
・試験範囲
・苦手な部分

出力：
・要約
・初心者向け解説
・重要ポイント
・用語説明
・暗記カード
・確認問題
・復習スケジュール
・苦手分野の分析

制約：
・専門用語を使いすぎない
・中学生でも分かる説明にする
・重要ポイントを先に出す
・情報を詰め込みすぎない
・一度に覚える量を増やしすぎない
・例え話を入れる
・確認問題を出す
・間違えた問題を記録する
・苦手分野を自動で分類する
・復習タイミングを提案する
・React + TypeScript + Tailwindで構築
・スマホでも使いやすいUIにする
・コピー機能をつける
・履歴保存機能をつける
・暗記カード機能をつける
・学習進捗をグラフで表示する

記入例：文章改善アプリを作成する場合

目的：
文章を読みやすく整理し、
伝わりやすく改善する
文章改善AIを作成する

入力：
・書いた文章
・メモ
・下書き
・SNS投稿
・note記事
・説明文

出力：
・改善後の文章
・読みやすい構成
・不要表現の削除
・タイトル案
・短文化案
・言い換え案

制約：
・意味を勝手に変えない
・感情論を増やしすぎない
・読みやすさを優先
・長すぎる文章を減らす
・同じ表現の連続を避ける
・結論を分かりやすくする
・初心者でも理解しやすい文章にする
・箇条書きを適度に使う
・SNS向け短文化にも対応
・note向け長文化にも対応
・ビジネス文章にも対応
・改善前と改善後を比較表示する
・React + TypeScript + Tailwindで構築
・スマホでも使いやすいUIにする
・コピー機能をつける
・履歴保存機能をつける
・トーン変更機能をつける
・「論理的」「やさしい」「ビジネス」「SNS風」など切り替え可能にする

記入例：アイデア深掘アプリを作成する場合

目的：
思いついたアイデアを整理し、
具体化・差別化・実行案まで深掘りする
アイデア深掘りAIを作成する

入力：
・思いついたアイデア
・作りたいもの
・解決したい課題
・ターゲット
・参考にしたサービス
・まだ曖昧なメモ

出力：
・アイデアの要約
・ターゲット
・解決する課題
・強み
・弱み
・差別化ポイント
・実現方法
・必要な機能
・最初に作るべき最小版
・改善案

制約：
・ふわっとした褒め言葉で終わらせない
・実行できる形まで具体化する
・似たような既存サービスとの差別化を考える
・メリットだけでなく弱点も出す
・最初から機能を増やしすぎない
・MVPを提案する
・優先順位をつける
・ターゲットを曖昧にしない
・収益化できる可能性も整理する
・React + TypeScript + Tailwindで構築
・スマホでも使いやすいUIにする
・履歴保存機能をつける
・アイデアをカテゴリ別に保存できるようにする
・深掘り結果をコピーできるようにする

記入例：習慣改善アプリを作成する場合

目的：
毎日の行動を記録し、
悪い習慣を減らして
良い習慣を継続しやすくする
習慣改善ツールを作成する

入力：
ユーザーの記録
・今日やったこと
・できなかったこと
・続けたい習慣
・やめたい習慣
・気分
・睡眠時間
・集中できた時間
・反省点

出力：
・今日の振り返り
・良かった行動
・改善点
・明日やること
・習慣スコア
・継続日数
・悪習慣の傾向
・改善アドバイス

制約：
・感情論を減らす
・具体的な行動ベースで出力
・説教っぽくしない
・1日の改善点は多くても3つまで
・明日やることは小さく具体的にする
・記録をグラフ化する
・継続日数を表示する
・悪習慣の発生パターンを分析する
・スマホで使いやすいUIにする
・React + TypeScript + Tailwindで構築
・ローカル保存またはFirebaseで記録を保存
・初心者でも修正しやすい構造にする

記入例：育成ゲームを作成する場合

目的：
たまごっちのように、
キャラクターを育てて進化させる
育成ゲームを作成する

入力：
プレイヤーの操作
・ごはんをあげる
・遊ぶ
・寝かせる
・掃除する
・会話する
・質問に答える
・画像をアップロードする

出力：
・育成画面
・キャラクター表示
・ステータス変化
・会話イベント
・成長演出
・進化分岐
・最終進化キャラクター

制約：
・React + TypeScript + Tailwindで構築
・スマホ対応
・たまごっち風のシンプルUI
・キャラクターはオリジナルデザイン
・進化は4段階
・第1〜第3段階はオリジナルキャラクター
・最終進化はアップロード画像をたまごっち風に変換
・MBTI風の質問で進化ルートを分岐
・育成行動と回答内容をスコア化
・性格に合ったキャラクターへ進化
・ステータスは空腹度、元気、親密度、清潔度、ストレスを管理
・ローカル保存またはFirebaseで育成データを保存
・画像アップロード機能をつける
・進化演出を入れる
・操作は初心者でも分かりやすくする
・重くなりすぎない構成にする

記入例：テトリスゲームを作成する場合

目的：
落ちてくるブロックを操作し、
ラインを揃えて消していく
テトリス風パズルゲームを作成する

入力：
プレイヤーの操作
・左右移動
・回転
・高速落下
・一気落下

出力：
・ゲーム画面
・ブロック落下
・ライン消去
・スコア加算
・コンボ演出
・ゲームオーバー判定

制約：
・React + TypeScript + Tailwindで構築
・スマホ対応
・物理挙動を軽量化
・コードを見やすく分割
・初心者でも修正しやすい構造
・UIはシンプルで見やすく
・ライン消去時に気持ちいい演出を追加
・テトリスのルールをベースにする
・ブロック回転判定を正確にする
・処理落ちを防ぐ
・ローカルでスコア保存可能にする
・次のブロック表示機能を追加
・保持ブロック機能を追加
・コンボシステムを追加
・レベルアップで速度上昇
・タッチ操作にも対応

※React + TypeScript + Tailwindで構築
これは、アプリを作るための道具セットのようなものです

●Reactは、アプリの画面を作るための道具です
ボタン、入力欄、メニュー、カード表示などを、パーツのように組み立てて画面を作れます

●TypeScriptは、プログラムのミスを減らしてくれる言語です
JavaScriptをより安全に使いやすくしたもので、間違った書き方をすると早い段階で教えてくれます

●Tailwind CSSは、アプリの見た目を整えるための道具です
文字の大きさ、色、余白、ボタンの形などを、短い指定で調整できます

この3つを組み合わせることで、初心者でも見た目が整ったWebアプリを作りやすくなります

初心者がハマりやすいポイント

最初は、「完璧なAIを作ろう」として止まりやすいです

でも実際は逆です

3つのポイントを意識するとうまいくいきます

• 小さい機能

• 単機能

• 自分専用

例えば、「人生相談AI」みたいな巨大なものより、

• 思考整理だけ

• 要約だけ

• 優先順位整理だけ

の方が精度は安定します

AIアプリ制作は、多機能化より、役割固定の方が使いやすいです

●STEP4：実行して結果を見る

ここでは、実際にAIへ入力した内容を実行し、どのような結果が返ってくるかを確認します

やることはシンプルです

• STEP3で作成した内容を入力

• 実行ボタンを押す

• AIの出力を確認する

今回は、先ほど作成した「自分の思考整理AI」を実際に動かしてみます

AIへの指示

今回は、先ほど作成した「自分の思考整理AI」を実際に使用してみます

目的：
考えが散らかった時に整理するAI

入力：
今考えていること・悩み

出力：
・問題点
・整理された考え
・次にやるべきこと

制約：
・抽象論を避ける
・実行ベースで返す
・簡潔に

実行すると、AIが内容を解析し、簡単なAIアプリを自動生成してくれます

今回の場合は、

• json

• tsx

• css

の3つのファイルが自動で生成されました

このように、「何を作りたいか」を伝えるだけで、アプリの土台となるコードやUIを自動で生成できる

思考整理AIを例に、実際のAIアプリ制作を見ていく
例えば今回は、「思考整理AI」を使います

入力する内容はシンプルでOKです

転職するべきか迷っている。
今の仕事は安定しているけど成長感がない。
ただ転職して失敗するのも怖い。

実行するとどうなるのか

実行ボタンを押すと、AIが入力内容を分析し、整理された形で返答を生成します

今回の例では、

• 「整理された考え」

• 「抽出された問題点」

• 「次にやるべきこと」

という形で、自動的に内容が整理されました

例えば、「安定」と「成長」の間で迷っている状態をAIが分析し、

• 何が問題なのか

• なぜ迷っているのか

• 次に何をすべきか

まで分解して提示してくれています

このように、頭の中で曖昧だった悩みを構造化して整理できる

ここがAIアプリの強みです

重要なのは「完璧な答え」ではない

ここで大切なのは、「AIの答えが100%正しいか」ではありません

見るべきなのは、「どこがズレているか」です

例えば今回の結果でも、

• 説明が少し長い

• もっと厳しめに分析してほしい

• 行動案をさらに具体化したい

• 箇条書きを増やしたい

など、改善ポイントは見えてきます

AIアプリ制作は改善が本質

AIは、1回で完璧な結果を出すものではありません

• 制約を追加する

• 出力形式を固定する

• 指示を具体化する

こうやって少しずつ調整していきます

つまり、AIアプリ制作 = 出力を見ながら改善を繰り返す作業です

むしろ、修正回数が多い人ほど、精度の高いAIアプリを作れる

ここがかなり重要です

●STEP5：改善する

最初の出力で、
完璧なAIになることはほぼありません

実際は、「出力を見て、微妙な部分を修正する」

この繰り返しになります

例えば、思考整理AIを作ると、

• 回答が長すぎる

• 抽象論ばかりになる

• 毎回似た内容になる

• 整理内容が機械的になる

• UIが見づらい

など、いろいろな問題が出てきます

例：出力が抽象的だった場合

最初に作ったAIが、

• 「まずは落ち着きましょう」

• 「少しずつ頑張りましょう」

のような、抽象的な回答ばかり返してくることがあります

その場合は、Google AI Studioのチャットで、追加の改善指示を出します

このように、「どこが微妙なのか」を具体的に伝えることで、AIの出力はかなり改善できます

AIは、1回で完成させるもの”ではなく、改善を繰り返して育てるものという感覚がかなり重要です

実際に改善した出力結果を比較してみましょう

【改善前のGoogle AI Studioの出力結果】

【改善後のGoogle AI Studioの出力内容】

👉 出力を確認しながら、制約やUIを調整し、自分に合ったAIアプリへ改善していく

■アプリのデザイン

AIアプリを公開すると、スマホのホーム画面へ追加できるようになります

ここで、アイコンやテーマカラーを変更すると、かなり「自分専用アプリ感」が出ます

例えば、マヌルネコをモチーフにしたアイコンを使います

こうすることで、単なるWebページではなく、「自分だけのAIツール」としての感覚がかなり強くなります

特に、毎日使うアプリは、世界観を統一することも重要です

• アイコン

• 色

• フォント

• キャラクター

• 雰囲気など

実際、使いやすさだけではなく、「触りたくなるか」も継続率にかなり影響します

●アイコンを作る時のポイント

アイコンは小さく表示されるため、情報を増やしすぎないことが重要です

• 顔メイン

• 単色背景

• シンプル

• 余計な文字なし

スマホ上では見やすくすることがポイント

特に、PWAアプリでは、192x192 や 512x512 サイズで使われるため、細かすぎるデザインは潰れやすいです

そのため、「かわいいイラスト」というより、「小さく表示されても認識しやすい」を意識したほうが、アプリ用アイコンとしては強くなります

【Google AI Studioに依頼する例文】

スマホアプリアイコン用のシンプルな●●を作成してください
用途は●●アプリです
小さく表示されても見やすいように

・顔メイン 
・シンプル 
・余計な背景なし
 ・単色背景 
・丸みのあるデザイン
・優しい雰囲気 
・知的感 
・かわいすぎない 
・ミニマルにしてください

色は、ベージュ薄いグレー淡いブラウン系で統一してください
アプリ名は入れない
アイコンとして見やすいよう、中央に配置してください

PWAアプリ用 192x192 と 512x512 に対応しやすい構図

●アプリ内デザインもかなり重要

AIアプリを作る時、初心者はどうしても、「AI性能」ばかりに意識が向きやすいです

ですが実際は、「使いやすさ」 もかなり重要です

例えば、

• 入力しづらい

• 文字が見づらい

• 情報量が多すぎる

• どこを押せばいいかわからない

だけでも、かなり使われなくなります

逆に、シンプルで見やすいだけで、「なんか使いやすい」 と感じやすくなります。

●特に初心者向けは「情報を減らす」

初心者向けAIアプリで重要なのは、情報を増やすこと ではなく、迷わせないこと です

例えば、

• ボタンを減らす

• 色を増やしすぎない

• 説明を長くしすぎない

• 一画面の情報量を減らす

だけでも、かなり見やすくなります

ほかにも、色を増やしすぎない
最初は、装飾を増やしたくなります

ですが、色を増やしすぎると、逆に見づらくなります
そのため、最初は、

• ベージュ

• 薄いグレー

• 淡いブラウン

• くすみカラー

など、落ち着いた色をベースにしたほうが、長時間使いやすくなります

「かわいい」と「見やすい」は別

これはかなり重要です

例えば、イラストや装飾を増やしすぎると、かわいくはなるけど、情報が見づらくなることがあります

●世界観を統一する

アイコン、色、キャラクター、フォント、を統一すると、かなり「自分専用感」が出ます

単なるAIアプリではなく、「毎日触りたくなるアプリ」 に近づいていきます

性能だけではなく、「継続して触りたくなるか」 もかなり重要です

■まとめ

■次回予告

次回からはAIを量産する考え方や自分専用化の設計
仕事や日常へ組み込む発想まで踏み込んでいきます

ここに入ると
「AIを試す人」ではなく
「AIを運用する人」へ変わっていきます

【シリーズURL】

プログラミング不要！誰でも作れる自分専用AIアプリ実践ガイド①
プログラミング不要！誰でも作れる自分専用AIアプリ実践ガイド②
プログラミング不要！誰でも作れる自分専用AIアプリ実践ガイド③
プログラミング不要！誰でも作れる自分専用AIアプリ実践ガイド④
プログラミング不要！誰でも作れる自分専用AIアプリ実践ガイド⑤
プログラミング不要！誰でも作れる自分専用AIアプリ実践ガイド⑥
プログラミング不要！誰でも作れる自分専用AIアプリ実践ガイド⑦
プログラミング不要！誰でも作れる自分専用AIアプリ実践ガイド⑧
プログラミング不要！誰でも作れる自分専用AIアプリ実践ガイド⑨

#創作大賞2026
#ビジネス部門