Streamlitで業務改善に使えるWebアプリを作ってみたい。
社内用のツールをサクッと作れたら、毎日の仕事がもっとスムーズになりそう。
でも、こんなことで悩んだことはありませんか？
・StreamlitでWebアプリを作ったけど、画面の幅が狭くて見づらい
・タイトルやアイコンがデフォルトのままで、ちょっと味気ない
・「st.set_page_config()」ってよく聞くけど、何を設定できるのかイマイチ分からない
この記事を見ると、こうした悩みをスッキリ解決できます。
Streamlitには st.set_page_config() という、アプリ全体の第一印象を整えるための便利な設定があります。
これを使うことで、画面幅、ページタイトル、アイコン、サイドバーの状態など、UIの基盤となる大事な部分を簡単にカスタマイズできます。
見た目や幅が整うだけで、アプリの操作性はグッと向上し、「社内で安心して使えるツール感」が一気に出ます。
この記事を読めば、Streamlit のUIをスッキリ整えて、誰でも使いやすくて見やすいWeb アプリを作れるようになります。
- st.set_page_config() の役割と基本
- よく使うオプション（画面幅・ページタイトル・アイコンなど）
- “これだけで見た目が変わる” UI 改善のコツ
この記事を読み終える頃には、「なんかダサい…」「狭い…」「使いにくい…」というストレスから解放されて、あなたのWebアプリが“人に見せられるレベル”に近づきます。
一緒に、Python × Streamlitで業務改善を加速させましょう！
| よく使う度 | |
| 難しさ | |
| 覚えておくと安心度 |
Pythonをしっかり学びたいけれど、「どこから始めればいいかわからない」と迷っていませんか？
そんな方には、UdemyのPython講座がおすすめです。
動画での丁寧な解説や、実践的な学習スタイルで、初心者でも無理なく基礎から応用まで習得できます。
自己学習を進める上で、何度でも繰り返し見返せる講座は非常に心強い味方になりますよ！
＼ 自分のペースで学べるPython講座はこちら ／
st.set_page_config()の基本・何ができる？ Streamlit Webアプリのデザイン改善
StreamlitでWebアプリを作っていると、次のことを思ったことはないですか？
「もう少し画面を広げたいな…」
「ページタイトルやアイコンも変えたい…」
そんなときに使うのがst.set_page_config() です。
簡単に言うと、アプリ全体の設定をまとめて調整できる、Streamlitの入り口みたいな機能です。
設定できるものは大きく分けて4つ。
| 項目 | 設定例 | 説明 |
|---|---|---|
| page_title | “売上管理ツール” | タブのタイトル |
| page_icon | “📈” | タブのアイコン |
| layout | “wide” | 画面の横幅を広げる |
| initial_sidebar_state | “expanded” | サイドバーの初期状態 |
ポチップ
① ページタイトル（page_title）
ブラウザのタブに表示されるタイトルを変更できます。
st.set_page_config(
page_title="売上ダッシュボード"
)
これを設定しておくだけで、社内で共有した時に “ちゃんと作られた感” が出ます。
② ページアイコン（page_icon）
タブの左側に出るアイコンです。
意外と見られる部分なので、絵文字で可愛くする人も多いです。
st.set_page_config(
page_icon="📊"
)
PNG 画像にもできますが、初心者は絵文字が一番簡単でおすすめ。
③ 画面の幅（layout）
Streamlitの初期設定は「centered（中央寄せ）」なので、少し窮屈に感じることがあります。
横幅を広げたい人は layout=”wide” を使います。
st.set_page_config(
layout="wide"
)
これだけで、表やグラフの見やすさが段違いに良くなります。
④ サイドバーの状態（initial_sidebar_state）
アプリによっては、「最初からサイドバーを開いていてほしい」「なるべく広く使いたいから閉じておきたい」というケースがあります。
そんなときに便利なのがこれ。
st.set_page_config(
initial_sidebar_state="expanded"
)
“expanded” で開いた状態、“collapsed” で閉じた状態からスタートします。
st.set_page_config()の実例｜すぐ使えるサンプルコード
st.set_page_config()がどんなものか分かったら、次は「実際にどう使うのか」を見ていきましょう。
ここでは、そのままコピペで使える“実用的なサンプル”をいくつか紹介します。
初めての方でも、これを見れば「あ、こうやって使うんだ！」とすぐにイメージが掴めるはずです。
Pythonをしっかり学びたいけれど、「どこから始めればいいかわからない」と迷っていませんか？
そんな方には、UdemyのPython講座がおすすめです。
動画での丁寧な解説や、実践的な学習スタイルで、初心者でも無理なく基礎から応用まで習得できます。
自己学習を進める上で、何度でも繰り返し見返せる講座は非常に心強い味方になりますよ！
＼ 自分のペースで学べるPython講座はこちら ／
【実例①】最低限の設定だけのシンプルな例
まずは一番シンプルに、タイトルと画面の幅だけを設定するパターンです。
コード
import streamlit as st
st.set_page_config(
page_title="シンプルアプリ",
layout="wide"
)
st.title("シンプルなStreamlitアプリ")
st.write("最低限の設定だけでも見やすさが全然違います。")Webアプリ画面
- layout=”wide” にするだけで、画面が広がって見やすくなる
【実例②】社内向けツール風のカスタム設定
次は「社内業務改善アプリ」をイメージした設定例です。
タイトル・アイコン・サイドバーなど、実務でよく使う構成です。
コード
import streamlit as st
st.set_page_config(
page_title="売上管理ツール",
page_icon="📊",
layout="wide",
initial_sidebar_state="expanded"
)
st.title("📊 売上管理ツール")
st.sidebar.header("メニュー")
option = st.sidebar.selectbox(
"表示するデータを選択",
("日別売上", "月別売上", "商品別売上")
)
st.write(f"選択中のデータ：{option}")Webアプリ画面
- サイドバーを最初から開いた状態にすることで UI が分かりやすくなる。
- まさに “業務改善ツール” に使われる典型パターン
- アイコンを付けるとアプリの“完成度”が一気に上がる
【実例③】グラフ入りの簡易ダッシュボード
実務でよく使う“グラフ表示”の例です。
特に wideレイアウトの効果がわかりやすいサンプルになっています。
コード
import streamlit as st
import pandas as pd
import altair as alt
st.set_page_config(
page_title="月次レポート",
page_icon="📈",
layout="wide"
)
st.title("📈 月次レポート")
# ダミーデータの作成
data = pd.DataFrame({
"month": ["1月","2月","3月","4月","5月","6月"],
"sales": [100, 120, 90, 150, 180, 200]
})
chart = (
alt.Chart(data)
.mark_line(point=True)
.encode(x="month", y="sales")
)
st.altair_chart(chart, use_container_width=True)Webアプリ画面
- wideレイアウト＋use_container_width=True で横幅いっぱいに広がる
- ダッシュボード系アプリは必ずと言っていいほど広い画面が必要
【実例④】wideレイアウトの効果が一番わかる例
データフレーム表示は横幅が狭いと表示が切れやすいので、wideの恩恵が最も実感しやすい部分です。
コード
import streamlit as st
import pandas as pd
st.set_page_config(
page_title="商品一覧",
layout="wide"
)
df = pd.DataFrame({
"商品名": ["A商品", "B商品", "C商品", "D商品"],
"カテゴリ": ["食品", "雑貨", "家電", "文具"],
"価格": [1200, 800, 25000, 350],
"在庫": [50, 120, 10, 200]
})
st.title("商品一覧")
st.dataframe(df)Webアプリ画面
- 表を多く扱う「社内管理ツール」では必須テクニック
- wide にしていないと、項目が折り返されて見づらくなる
よくある質問（FAQ）
Streamlitでst.set_page_config() を使い始めると、初心者ほど “ちょっとしたつまずき” に出会うことが多いです。
ここでは、実際に私も経験した内容や、読者の方からよくいただく質問を中心にまとめました。
必要なところだけピンポイントで読めるので、困った時はここを見返してみてください。
ポチップ
まとめ｜st.set_page_configでStreamlitのUIを整えて業務改善を加速しよう
この記事では、streamlit python でWebアプリを作るときに必ず知っておきたいst.set_page_config() の使い方と実例 を紹介しました。
ポイントはたったこれだけです。
- ページタイトル・アイコン・画面幅（wide）をまとめて設定できる
- streamlit ui を整えると操作性が大きく向上する
- 社内向けのstreamlit web アプリは“見やすさ”が重要
- config.toml は「テーマ全体」、st.set_page_config は「ページ単位」
まずはページの幅とタイトルを設定するだけで、あなたのアプリはぐっと見やすく、使いやすくなります。
小さな設定でも、業務改善が確実に進む一歩になります。
ぜひ今日紹介した内容をすぐに試してみてください！