AIアプリ開発入門第2回｜StreamlitでPythonだけでWeb画面を作る

2026.03.18

前回は、AIアプリの裏側で動く「Python・API・JSON・ライブラリ」の基本を整理しました。今回はその次のステップとして、PythonだけでWeb画面を作れる Streamlit の考え方と使い方を、初心者向けに整理します。

今回のゴールは、「HTMLやCSSを書かなくても、Pythonのコードだけで入力欄やボタンがある画面を作れる」という感覚をつかむことです。

Streamlitとは何か

Streamlitは、PythonだけでWebアプリの画面を作れるフレームワークです。
本来、Web画面を作るにはHTML・CSS・JavaScriptといった別々の技術が必要ですが、Streamlitを使うと、それらの多くを意識せずにPythonコードだけで画面を表示できます。

そのため、Streamlitは特に「データ分析の可視化」「AIの検証ツール」「社内向けの簡易アプリ」「プロトタイプ作成」と相性が良いとされています。
見た目の自由度は高級なフロントエンド開発より低い一方、短時間で動く画面を作れるのが大きな強みです。

Pythonで画面が作れるとはどういうことか

Streamlitでは、Pythonで書いた命令をもとに、裏側でWeb画面として必要な表示処理が組み立てられ、ブラウザに結果が表示されます。
つまり、開発者は「タイトルを出す」「入力欄を出す」「ボタンを出す」といった命令をPythonで書くだけでよく、複雑な画面部品を一からHTMLで作る必要がありません。

たとえば、次のようなコードだけで、タイトル・入力欄・ボタンを持つ画面を作れます。

pythonimport streamlit as st

st.title("はじめてのアプリ")
name = st.text_input("名前を入力してください")
st.button("送信")

この数行だけで、ブラウザ上には「タイトル」「入力欄」「ボタン」が並んだ画面が表示されます。
ここで重要なのは、Pythonがフロントエンドそのものになるというより、Pythonの命令をStreamlitがWeb画面に変換してくれると理解することです。

`import streamlit as st` の意味

import streamlit as st は、「Streamlitというライブラリを読み込み、以後は st という短い名前で使う」という意味です。
st は特別な予約語ではなく、あくまで別名ですが、Streamlitではこの書き方が広く使われる慣習になっています。

たとえば、タイトルを表示する st.title()、文字を表示する st.write()、入力欄を表示する st.text_input() のように、st を入口にして画面部品を追加していきます。
この「st. の後ろに、使いたい画面部品の名前を書く」という感覚が、Streamlitの基本です。

Streamlitでよく使う画面部品

Streamlitには、最初から便利な画面部品が多数用意されています。
初心者が最初に覚えるとよいものは、次のあたりです。

st.title()：ページの大きな見出しを表示する。
st.write()：文字やデータを柔軟に表示する。
st.text_input()：1行の文字入力欄を表示する。
st.text_area()：複数行の文章入力欄を表示する。
st.button()：クリックできるボタンを表示する。
st.sidebar：左側に設定用のサイドバーを作る。
st.file_uploader()：ファイルのアップロード欄を作る。
st.dataframe()：表形式でデータを見せる。
st.line_chart()：簡単なグラフを表示する。

この構成を見ると、Streamlitは「Web画面をゼロから自由に描く道具」というより、よく使う部品を組み合わせて素早くアプリを作る道具だと分かります。

アプリはどこで動くのか

ローカル環境で streamlit run app.py を実行すると、通常はブラウザで localhost:8501 が開きます。
この localhost は「今使っている自分のパソコン自身」を指す特別な名前で、外部のインターネットではなく、自分のPCの中にあるアプリへアクセスしていることを意味します。

また、8501 はポート番号と呼ばれるもので、パソコン内の通信の入口を区別するための番号です。
Streamlitは標準設定でこの 8501 を使うため、初回起動時は localhost:8501 が開かれることが多いです。

この段階では、アプリはまだ世界に公開されておらず、自分だけが確認できる試作画面として動いています。

最小の実行手順

ローカルPCでStreamlitを試すときの基本的な流れはシンプルです。

Pythonを使える状態にする。
pip install streamlit でライブラリを入れる。
app.py というファイルを作る。
その中にStreamlitのコードを書く。
ターミナルで streamlit run app.py を実行する。

たとえば、最小コードは次のようになります。

pythonimport streamlit as st

st.title("My First Streamlit App")
st.write("こんにちは。これは最初の画面です。")

このファイルを保存し、ターミナルで起動すると、ブラウザ上にタイトルと文章が表示されます。

Streamlitの良さと注意点

Streamlitの最大の良さは、Pythonしか知らなくても画面付きアプリをすぐ作れることです。
AI APIの検証や社内向けツールのように、「まず動くものを早く作りたい」場面では非常に強力です。

一方で、デザインの自由度には限界があります。
企業サイトのような細かなレイアウトや複雑なアニメーションを作る用途では、通常のフロントエンド技術のほうが向いていることもあります。

つまり、Streamlitは「見た目を細かく作り込むための道具」というより、業務アプリやAIツールを素早く形にするための道具として理解すると位置づけが明確になります。

今回のまとめ

今回押さえるべきポイントは次の3つです。

Streamlitを使うと、PythonだけでWeb画面を作れる。
st.title() や st.text_input() のような部品を並べる感覚で画面を組み立てる。
localhost:8501 で見ているのは、まず自分のPCの中で動いている試作アプリである。

次回は、今回作った画面にGemini APIへの通信処理を追加し、入力した内容をAIに送って結果を返す流れを実装します。これにより、「画面」と「AI処理」が実際につながります。

初心者向けの参考リソース

Streamlitの概要を知りたい方へ

基本コードや画面部品を確認したい方へ

ローカル実行や localhost を理解したい方へ

注意事項

本記事の内容は執筆時点の情報をもとに作成しています。
Python、Streamlit、Gemini API、GitHub、Streamlit Cloud、Supabase、Vercel、Cloudflare、Google Cloud などの仕様、料金、UI、提供条件は予告なく変更される場合があります。

記事内のコード、設定例、画面構成は学習用・検証用のサンプルです。
実際の運用環境に導入する場合は、公式ドキュメントを確認したうえで、ご自身の責任で検証・調整してください。

APIキー、認証情報、個人情報、業務データなどの機密情報は、記事中のサンプル通りであっても公開リポジトリや公開画面にそのまま掲載しないでください。
外部サービス利用時の課金、障害、セキュリティ事故、データ消失などについて、当サイトは責任を負いません。

著者について

ListeningMind ガイド編集部

ListeningMind ガイドの編集部です。

この著者の記事一覧へ

AIアプリ開発入門第2回｜StreamlitでPythonだけでWeb画面を作る