クラウドとは？Webシステムの構成をUI・API・DBで図解｜AIの置き場所も

「クラウドで動いています」「APIでつなぎます」と言われても、何がどこで動いているのかイメージしにくいのではないでしょうか。最近は「AIを組み込みたい」という相談も増えていますが、AIがシステムのどこに入るのかも分かりにくいところです。

この記事では、クラウドとは何かを、Webシステムを作る3つの部品（UI・API・DB）とあわせて図解します。1回の操作で裏側で何が起きているか、このサイトの実際の構成、そして生成AIをどこに組み込むのかまで、専門知識がなくても分かるように説明します。

クラウドとは？

クラウドとは、サーバーやデータベースを自分で買わずに、インターネット越しに必要な分だけ借りて使う仕組みのことです。

以前は、システムを動かすコンピューター（サーバー）を会社が買い、社内やデータセンターに置いて管理していました。これをオンプレミスと呼びます。クラウドでは、Amazon（AWS）・Microsoft（Azure）・Google（Google Cloud）などの事業者が大量のサーバーを用意していて、利用者はその一部を画面の操作だけで借りられます。

アメリカ国立標準技術研究所（NIST）は、クラウドの特徴を次の5つにまとめています。

• 自分で申し込める：担当者とやり取りしなくても、画面から必要なものを借りられる
• どこからでも使える：インターネットにつながれば、パソコンやスマホから使える
• みんなで共有する：事業者の大きな設備を、多くの利用者で分け合って使う
• すぐに増やせる・減らせる：アクセスが増えたら増やし、減ったら減らせる
• 使った分だけ測られる：使った量が測られ、その分だけ支払う

オンプレミスとクラウドを比べると、次のようになります。

項目	オンプレミス（自分で持つ）	クラウド（借りる）
始めるときの費用	機器の購入費がかかる	ほぼかからない
毎月の費用	電気代・保守費などがほぼ一定	使った分だけ。使い方で変わる
始めるまでの時間	機器の手配に数週間〜	早ければその日のうち
アクセスが急に増えたとき	機器を買い足すまで対応できない	設定で増やせる
故障したとき	自分で直す・交換する	機器の故障は事業者が対応する
自由度	機器から自由に選べる	事業者が用意したサービスの範囲

身近な例では、GmailやMicrosoft 365、Dropboxのように、完成したソフトをそのまま使うのもクラウドの一種です（SaaSと呼びます）。この記事で扱うのは、自社のシステムを動かす場所として借りる使い方です。

Webシステムはどんな構成になっているのか？

Webシステムは、画面の「UI」、注文を受け付ける窓口の「API」、データをしまう「DB」の3つでできています。

飲食店にたとえると、UIはお客さんが見るメニューと客席、APIは注文を受けて厨房に伝える店員、DBは食材や台帳をしまっておく倉庫です。お客さんが倉庫に直接入らないように、利用者もDBを直接さわることはなく、必ずAPIを通します。

UI（画面）とは？

UIは、利用者が見て操作する画面です。ボタンや入力欄、一覧表などがこれにあたります。

Webシステムの画面は、HTML・CSS・JavaScriptというファイルでできていて、クラウド上のサーバーから利用者のブラウザに届けられます。ファイルを届けたあとの表示や操作は、利用者のスマホやパソコンの中で動いているのがポイントです。

API（窓口）とは？

APIは、画面からのお願いを受け付けて、中身を確かめてから処理する窓口です。

たとえば予約の画面で「予約する」を押すと、画面はAPIに「この日時で予約したい」と伝えます。APIは、ログインしている人か、日時が埋まっていないかを確かめてから、DBに予約を書き込みます。確認やパスワード・鍵のような秘密の情報は、すべてAPIの側で扱います。画面の中身は利用者のブラウザに届くため、誰でも中を見られてしまうからです。

APIが遅くなる原因と対策は、APIのタイムアウトをキャッシュで抑制した話で事例を紹介しています。

DB（データベース）とは？

DBは、顧客・予約・注文などのデータを整理してしまっておく場所です。

Excelの表に近いイメージですが、多くの人が同時に書き込んでも壊れない、何十万件あってもすぐに探せる、といった点が違います。DBの種類と毎月の費用は、データベース構築の費用相場で比べています。

1回の操作で何が起きているのか？

予約サイトで「予約する」ボタンを押したとき、裏側では次の順番で処理が進みます。

1. UI：入力された日時と名前を、APIに送る
2. API：ログインしている人か、入力に不足がないかを確かめる
3. API → DB：その日時がまだ空いているかを調べる
4. DB：空いていれば予約を保存する
5. API → UI：「予約できました」という結果を返す
6. UI：完了画面を表示する

利用者から見ると1秒もかからない操作ですが、3つの部品が順番に仕事をしています。どこか1つが止まると、ほかが動いていても「予約できない」状態になります。

クラウドでは何を使って動かすのか？

クラウドでは、UI・API・DBのそれぞれに向いたサービスを借りて組み合わせます。

AWSの場合、代表的なサービスは次のとおりです。

部品	置く場所の役割	AWSでの例	費用の特徴
UI（画面）	画面のファイルを置き、世界中に速く配る	Amazon S3 ＋ Amazon CloudFront	置く量と配った量で決まる。小さなサイトなら安い
API（窓口）	お願いを受け付け、プログラムを動かす	Amazon API Gateway ＋ AWS Lambda	呼ばれた回数と処理時間で決まる。使われなければほぼ0円
DB（データベース）	データを保存し、探せるようにする	Amazon RDS、Amazon DynamoDB	種類で大きく変わる。常に動かすRDSは毎月の固定費がかかる
AI	文章の生成・要約などをする	Amazon Bedrock	読ませた文字数と書かせた文字数で決まる

AzureやGoogle Cloudにも、同じ役割のサービスがそろっています。UIは画面のファイルを配るだけなので、Cloudflare や Vercel のような配信に強いサービスを使うこともよくあります。

呼ばれたときだけ動くサービス（Lambda や DynamoDB など）を選ぶと、利用者が少ないうちは費用をかなり抑えられます。無料枠のあるDBを使う方法は、Supabaseを無料で使う方法で紹介しています。

実際のシステムはどんな構成なのか？

このサイト（スエキチシステムの公式サイト）は、UIとAPIだけでできていて、DBは使っていません。

部品	このサイトでの中身
UI	ブログ記事を含む約50ページを、あらかじめHTMLファイルにしてCloudflareから配信
API	お問い合わせフォームの送信だけを、AWSのAPI Gateway ＋ Lambdaで受け付ける
DB	なし。お問い合わせは保存せず、LINEで担当者に通知する

2026年11月9日に、トップページを3回読み込んで計測した結果は次のとおりです（自社の開発用パソコンから計測）。

• ページの大きさ：204KB
• 最初の1バイトが届くまで：0.19〜0.31秒
• 読み込み完了まで：0.27〜0.39秒

画面をあらかじめファイルにして配っているため、開くたびにAPIやDBを待つ必要がなく、速く表示できます。API（Lambda）は、お問い合わせが送られたときだけ動くので、普段はほとんど費用がかかりません。

作ってみて分かったのは、3つの部品をいつも全部そろえる必要はないということです。お知らせを表示するだけならUIだけ、送られた内容を通知するだけならUIとAPIで足ります。予約や顧客の管理のようにデータを保存して、あとから探したり集計したりするときに、初めてDBが必要になります。

また、お問い合わせをLINEに送るための鍵（アクセストークン）はLambdaの側だけに置いています。画面に置くと、誰でもブラウザから鍵を見られてしまうためです。この考え方は、次のAIの組み込みでもそのまま使います。

AIはどこに組み込むのか？

生成AIは、画面（UI）ではなく、API（窓口）の裏側に組み込むのが基本です。

ChatGPTやClaudeのような生成AIは、多くの場合クラウド上のサービスとして提供されていて、APIキーという鍵を使って呼び出します。システムに組み込むときは、APIがAIサービスを呼び出し、その答えを画面に返します。

なぜ画面から直接AIを呼ばないのか？

理由は3つあります。

1. 鍵が漏れる：画面の中身は利用者のブラウザに届くため、画面に鍵を置くと誰でも盗めます。盗まれた鍵で使われた分も、請求は自社に来ます
2. 費用を管理できない：AIは使った文字数の分だけ費用がかかります。APIを通せば、1人あたりの回数の上限などを決められます
3. 入力を確かめられない：個人情報が含まれていないか、業務と関係のない使い方をしていないかを、AIに渡す前にAPIで確かめられます

AIの組み込み方にはどんな形があるのか？

よく使われる形は次の3つです。

形	流れ	例
そのまま聞く	UI → API → AI	問い合わせ文の要約、メール文案の作成
社内の資料を探してから聞く	UI → API → DBで資料を探す → AI	社内規程に答えるチャット、商品マニュアルの質問窓口
決まったタイミングで動かす	データの登録など → API → AI → DBに保存	届いたお問い合わせを自動で分類する、日報を毎晩まとめる

2つ目の「社内の資料を探してから聞く」形は**RAG（検索拡張生成）**と呼ばれ、社内専用のAIを作るときの定番です。AIは社内の資料を知らないため、APIが先にDBから関係する資料を探し、それをAIに渡して答えさせます。AIの答えの質は、DBに入っている資料の質で決まるので、資料の整理が最初の仕事になります。

また、AIに何を聞いて何と答えたかをDBに記録しておくと、間違った答えの原因を調べたり、よく聞かれる質問を集計したりできます。

プログラムを書かずに社内向けのAIを作りたい場合は、MicrosoftのCopilot Studioでできることも選択肢になります。

クラウドで作るときの注意点は？

クラウドは手軽に始められる分、費用・設定・責任の範囲の3つに注意が必要です。

• 費用が使い方で増える：アクセスが急に増えたり、設定を間違えて動かしっぱなしにしたりすると、請求が想定を超えます。予算を超えたら通知が届く設定を最初に入れておきます
• 設定ミスで公開されてしまう：DBやファイルの置き場所を「誰でも見られる」設定のままにして、情報が漏れる事故がよく起きます
• 守る責任は分担している：クラウドの事業者が守るのは、建物や機器などの土台の部分です。誰にどこまで見せるか、どのデータを置くかといった設定は、利用する側の責任になります。AWSはこれを「責任共有モデル」と呼んでいます

まとめ

• クラウドとは、サーバーやデータベースを自分で買わずに、インターネット越しに必要な分だけ借りる仕組み
• Webシステムは、画面の「UI」、窓口の「API」、データをしまう「DB」の3つでできている。データを保存しないなら、DBなしで作れることもある
• 生成AIはAPIの裏側に組み込む。鍵を守り、費用と入力を管理でき、社内の資料をDBから探して渡すこともできる

スエキチシステムでは、クラウドを使ったWebシステムの構成の検討から、AIの組み込みまで対応しています。「今のシステムにAIを足せるか知りたい」という段階でも、システム開発のページからお気軽にご相談ください。