自分でアプリを作る方法 第1回｜アプリは画面・裏側・データの3つでできている

CONNECT BASE 開発担当のNinoです。お疲れ様です！今日は、アプリが何でできているかについての話題です。

この記事から、新しい連載「自分でアプリを作る方法」が始まります。アプリを作ったことがない方に向けて、アプリができるまでのしくみを1回に1つずつ、順番にお話ししていきます。

毎日使っているアプリ、実は3つの部分でできています

朝、電車の乗り換えを調べる。お昼に、お店の予約を入れる。夕方には、会社の勤怠を打刻する。私たちは1日に何度もアプリを開いています。

でも、ボタンを押したあと、アプリの中で何が起きているのか。考えたことはあまりないかもしれません。予約ボタンを押すと、なぜ「予約が完了しました」と出るのか。別のスマホやパソコンから開いても、なぜ予約がちゃんと残っているのか。

実は、ほとんどのアプリは、大きく分けると3つの部分でできています。この3つが分かると、アプリの見え方がかなり変わります。

一言でいうと、「画面」「裏側」「データ」です

アプリは、目に見える「画面」、見えない所で計算や確認をする「裏側」、情報をしまっておく「データ」の3つでできています。

専門の言葉では、画面を「フロントエンド」、裏側を「バックエンド」と呼びます。データは「データベース」（情報を整理してしまっておく専用の入れ物）に入れるのが一般的です。AWS の解説でも、利用者の目に見える画面や操作の部分をフロントエンド、データの処理など裏で動く部分をバックエンドと説明しています。

言葉は覚えなくても大丈夫です。「見える所」「働く所」「しまう所」の3つ、とだけ覚えておいてください。

レストランにたとえると、すっと分かります

アプリを、1軒のレストランだと思ってみてください。

お客さんが座る客席と、手に取るメニュー。これが「画面」です。どんなに料理がおいしくても、メニューが読みにくかったり、注文の仕方が分からなかったりすると、お客さんは困ってしまいます。

注文を受けて料理を作る厨房。これが「裏側」です。お客さんからは見えませんが、「この材料はまだあるか」「アレルギーの注意は必要か」を確かめながら、注文どおりの料理を仕上げています。

そして、食材をしまっておく倉庫と、予約や常連さんの好みを書きとめた台帳。これが「データ」です。倉庫が空っぽだったり、台帳がなくなったりすると、次の日からお店は回りません。

大事なのは、3つがそろって初めてお店になる、ということです。立派な客席だけあっても、厨房と倉庫がなければ料理は出せません。アプリも同じで、画面だけ作っても「使えるアプリ」にはならないのです。

あなたの職場の道具に当てはめると

身近な例として、お店や会社でよく使う「予約の受付」を考えてみましょう。

画面は、お客さんが日付と時間を選ぶページや、スタッフが今日の予約を一覧で見るページです。裏側は、同じ時間に2件の予約が入らないように確かめたり、予約が入ったら確認のメールを送ったりする仕事をしています。データは、予約の一覧や、お客さんの名前と連絡先の名簿です。

受発注の管理でも、顧客の名簿でも、形は同じです。入力する画面があり、裏で計算や確認をする仕事があり、結果がデータとして残る。社内でふだん使っている道具を、この3つに分けて眺めてみると、「この表は、データを入れておく所だったのか」と気づくことがあるはずです。

表計算のファイルで管理していると、この3つが1つのファイルの中に混ざっています。人数が少ないうちはそれで回りますが、何人もが同時に使うようになると、「誰かが上書きして消えた」「どれが最新か分からない」ということが起きやすくなります。アプリが3つに分かれているのは、こうした困りごとを防ぐためでもあります。

この知識があると、AIにこう頼めます

最近は、AIに話しかけるだけでアプリの試作品が作れるようになってきました。たとえば Google は2026年5月、AI Studio（Google のAIでアプリを作れる道具）で作ったアプリに、データベースやログインの仕組みを足せるようにしたと発表しています。AIが、頼まれた内容から「データの保存やログインが必要か」を判断して、データベースやログインの設定を提案してくれるそうです。

さらに10月13日には、AI Studio で作った Android のアプリを、Google Play を通じて自分のスマホで使えるようにすると発表しました。Impress Watch によると、まず米国を含む一部の地域で、18歳以上の利用者を対象に順に広げていく予定とのことです。AIで作ったアプリが、ますます身近になっていきそうです。

ただ、AIにひとこと「予約のアプリを作って」と頼むと、見た目の画面だけがさっとでき上がることがあります。そこで役に立つのが、今日の3つの分け方です。頼む時に、最初から3つに分けて考えてもらいましょう。

[例：社内の備品の貸し出しを管理する]アプリを作りたいです。
作り始める前に、次の3つに分けて案を出してください。
1. 画面：利用する人が見る画面の一覧と、それぞれの画面でできること
2. 裏側：ボタンを押したあとに裏で行う処理（確認・計算・通知など）
3. データ：保存しておく情報の種類と、それぞれに入れる項目
分からない所は勝手に決めずに、先に質問してください。

試作品ができたら、データがどこに残るのかを聞き返してみてください。画面を閉じると消えてしまう作りになっていることもあるからです。

今の案で、[例：貸し出しの記録]はどこに保存されますか。
ブラウザ（Chrome や Safari など、ウェブを見るためのソフト）を閉じたり、別のパソコンから開いたりしても残りますか。
残らない場合は、データを保存する仕組みを足す案と、その理由を教えてください。

ひとつ気をつけたいのは、試しに作る段階で、本物のお客さんの名前や連絡先をAIに入れないことです。試す時は、架空の名前や数字で十分です。そして、AIが出した案が自分の仕事に合っているか、何を保存して何を保存しないかを最後に決めるのは、使う人自身です。

アプリづくりに必要なもの一覧（全3個）

• ★今回　画面（使う人が見て、さわる所）…第1回（この回）
• ★今回　裏側（見えない所で計算や受け渡しをする所）…第1回（この回）
• ★今回　データ（お客様や予約などの情報をしまっておく所）…第1回（この回）

この一覧は、回を追うごとに増えていきます。

うちのシステムの場合

ここまでの一覧の3個のうち、うちのビジネス管理システムでは3個に取り組んでいます。いま開発中のこのシステムも、AIで作っていて、この3つでできています。開発144日目の今日数えてみると、正しく動くかを確かめるテストの部分を除いたプログラム（コンピューターへの指示を書いた文）は約13万行。そのうち、利用する人の画面の側（ブラウザ）で動く部分が約9万行、サーバー（インターネットの向こうで動き続けるコンピューター）の裏側で動く部分が約2万行で、残りは開発の作業を助ける道具などでした。

今回のまとめ

アプリは「画面」「裏側」「データ」の3つでできていて、レストランの客席・厨房・倉庫のように、3つがそろって初めて使える物になります。

次回は、「ウェブのアプリとスマホのアプリは何が違うのか」をお話しします。同じサービスでも、ブラウザで開く物とスマホに入れる物があるのはなぜか。今日の3つの分け方を使うと、意外とすっきり分かります。

AIのことや、AIでのアプリづくりについての質問を、いつでも受け付けています。X（@cb_nino_dev）で、気軽に聞いてください。可能な限り、一つひとつにお返事します。

次の回：ウェブで動くアプリとスマホに入れるアプリの違い

これまでの回は、連載「自分でアプリを作る方法」の一覧から読めます。

参考にした資料

• アプリケーション開発におけるフロントエンドとバックエンドの違いは何ですか?（AWS）確認日：2026年10月21日
• フルスタック開発とは?（AWS）確認日：2026年10月21日
• AI Studio unlocks full-stack vibe coding with Cloud Run, Firebase, and Cloud SQL, no credit card required（Google Cloud Blog・2026年5月21日）確認日：2026年10月21日
• 「自分のためのアプリ」をAIで作成、Google Play経由で実行可能に（Impress Watch・2026年10月15日）確認日：2026年10月21日

この記事は、一部AIを利用して執筆しています。