Streamlitで業務改善に使えるWebアプリを作ってみたい。
社内用のツールをサクッと作れたら、もっと仕事が楽になる気がするな。
でも、こんなことで悩んだことはありませんか?

・StreamlitでWebアプリを作成したけど、背景色やテーマカラーがちょっと気になる
・デフォルトの見た目が味気なくて、自分好みにカスタマイズしたい
・「config.toml」ってよく聞くけど、どこにどう書けばいいの?



この記事を見ると、こうした悩みをスッキリ解決できます。
Streamlitでは、config.tomlという設定ファイルを使うことで、色、フォント、背景、ボタンの色などのUIデザインを自由に変更できます。
見た目を整えるだけで、アプリの印象はガラッと変わり、「社内で使うツール」としての信頼感もアップします。
この記事を読めば、初心者でもStreamlitのUIを自分好みに調整して、見やすく使いやすいWebアプリを作れるようになります!
config tomlの基本と役割config.tomlの作成方法と設置場所- よく使う設定項目(背景色・文字色・フォントなど)をまとめてご紹介
- カスタマイズ例とデザインの実例
この記事を読めば、Streamlitで人に見せられる、使いやすいWebアプリを作る第一歩が踏み出せます。
一緒に、Python × Streamlitで業務改善を加速させましょう!
| よく使う度 | |
| 難しさ | |
| 覚えておくと安心度 |
Pythonをしっかり学びたいけれど、「どこから始めればいいかわからない」と迷っていませんか?
そんな方には、UdemyのPython講座がおすすめです。
動画での丁寧な解説や、実践的な学習スタイルで、初心者でも無理なく基礎から応用まで習得できます。
自己学習を進める上で、何度でも繰り返し見返せる講座は非常に心強い味方になりますよ!


\ 自分のペースで学べるPython講座はこちら /
config.toml の作り方と設置場所
Streamlitのデザインをカスタマイズするには、config.toml という設定ファイルが必要です。


そもそも .toml ファイルって何?
.toml(トムル)は、「設定ファイル」の一種で、アプリやツールの動作・デザインを指定するためのテキストファイルです。
「Table of TOML Markup Language(TOML)」の略で、人にも読みやすく、機械にも扱いやすい構文で書かれています。
実際に Streamlit 公式でも、UIテーマやフォントなどの設定にこの .toml ファイルを利用するよう推奨されています。
くわしくは、Streamlit公式ドキュメントのconfig.tomlを参照してください。
config.tomlの設置場所(初心者向けにやさしく解説)
Streamlitの見た目をカスタマイズするには、.streamlit というサブフォルダを作って、その中にconfig.toml という設定ファイルを設置します。
基本の構成(作業ディレクトリ内)
作業ディレクトリ/
├── app.py
└── .streamlit/
└── config.toml

.streamlit フォルダがない場合.streamlit フォルダが存在しない場合は、自分で作成してOKです。
その中に config.toml を作成すれば、Streamlitは自動的に内容を読み込んでくれます。
.tomlファイルにコード記述
それでは、config.tomlファイルにコードを記述してみましょう。
config.tomlファイルのコード例
[theme]
# ボタンやアクティブ要素の色(明るめでアクセントを付ける)
primaryColor = "#00E5FF"
# メイン背景(真っ黒)
backgroundColor = "#000000"
# サイドバーやウィジェットの背景(やや明るい黒)
secondaryBackgroundColor = "#111111"
# 文字色(白)
textColor = "#FFFFFF"
# フォント
font = "monospace"

それでは、設定を反映してみよう!
このファイルを保存した状態で下記コマンドを入力し、Streamlitアプリを実行すると、設定内容が自動で読み込まれ、UIに反映されます。
streamlit run your_app.py背景色・ボタンカラー・フォントなどが変わっていれば成功です!


反映されない場合は、もう一度Streamlitアプリを立ち上げなおしてみてください。
config.tomlで設定できることを目的別に分かりやすく解説!
Streamlitのconfig.tomlでは、テーマ設定やサーバー設定など多くのカスタマイズが可能です。
ここでは目的別に、よく使う設定項目を分かりやすくまとめました。
設定の参考になるよう、具体例も一緒に紹介していますので、そのままコピペして使ってみてください!
[theme] セクション:UIテーマの色・フォント設定
| 項目名 | 説明 | よく使う例 |
|---|---|---|
primaryColor | ボタン・スライダーなどの強調色 | "#F63366"、"#00E5FF" |
backgroundColor | アプリ全体の背景色 | "white"、"#000000" |
secondaryBackgroundColor | サイドバーやカードなどの背景色 | "#F0F2F6"、"#111111" |
textColor | テキスト全体の色 | "black"、"#FFFFFF" |
font | フォント | "sans serif"、"monospace" |
base | 継承元テーマ "light" / "dark" | "light" |
chartCategoricalColors | カテゴリデータのチャート色(最大10色) | ["#FF0000", "#00FF00", ...] |
chartSequentialColors | 連続データのグラデーション色(10色) | ["#E4F5FF", "#C7EBFF", ...] |
fontFaces | カスタムフォントの読み込み | [[theme.fontFaces]]で定義 |
baseFontSize | 全体の文字サイズ(px) | "16" |
baseFontWeight | 全体のフォントの太さ | 400, 600 |
buttonRadius | ボタンの角丸(pxまたは”small”など) | "10px"、"small" |
showWidgetBorder | ウィジェットに枠線を表示するか | true / false |
[client] セクション:フロントの動作に関する設定
| 項目名 | 説明 | よく使う例 |
|---|---|---|
showErrorDetails | エラー表示の詳細レベル(”full”, “none”, 他) | "none"、"full" |
toolbarMode | 上部のメニュー表示(”auto”, “minimal”など) | "auto"、"minimal" |
showSidebarNavigation | マルチページナビゲーション表示 | true, false |
[runner] セクション:Pythonコードの実行に関する設定
| 項目名 | 説明 | よく使う例 |
|---|---|---|
magicEnabled | 変数名だけで表示されるようにする | true(デフォルト) |
fastReruns | 即時再実行の有効化 | true(通常推奨) |
enforceSerializableSessionState | セッションステートのシリアライズ確認 | false |
enumCoercion | Enumの取り扱い方法 | "nameOnly" |
[server] セクション:サーバーの動作やセキュリティ
| 項目名 | 説明 | よく使う例 |
|---|---|---|
port | アプリのポート番号 | 8501 |
enableCORS | CORS保護を有効にする | true(セキュリティ対策) |
enableXsrfProtection | XSRF保護の有効化 | true |
runOnSave | 保存時に自動で再実行 | true |
headless | ブラウザを自動で開かない | true(SSH接続時など) |
cookieSecret | セッション管理用のキー(自動生成または手動) | "ランダムな文字列" |
[browser] セクション:接続先ブラウザの設定
| 項目名 | 説明 | よく使う例 |
|---|---|---|
serverAddress | ブラウザの接続先アドレス(localhostなど) | "localhost" |
serverPort | ブラウザの接続ポート | 8501 |
gatherUsageStats | 利用データをStreamlitに送信するか | true(またはfalse) |
[secrets] セクション:秘密情報の管理
| 項目名 | 説明 | よく使う例 |
|---|---|---|
files | secrets.toml の読み込みパスリスト | [ "~/.streamlit/secrets.toml", "./.streamlit/secrets.toml" ] |
config.tomlの具体例(すぐに使えるテンプレート集)
ここでは、よく使われるパターン別に config.toml の実例を紹介します。
テーマ(見た目)だけでなく、サーバーやランナーの設定も含め、すぐにコピペして使える形でまとめました。
ぜひコピペして参考にしてください。
例1: ダークテーマ+モノスペースフォントのスタイリッシュなUI
[theme]
primaryColor = "#00E5FF" # 鮮やかなシアン
backgroundColor = "#000000" # 黒背景
secondaryBackgroundColor = "#111111" # サイドバーなどはやや明るめ
textColor = "#FFFFFF" # 白文字
font = "monospace" # 等幅フォント(開発ツール風)この設定をするとどのようになる?
黒背景+白文字で目に優しく、開発者ツールのような雰囲気に。


- 画面全体が黒ベースになる
- ボタンが水色で目立つ
- フォントが等幅(コードっぽくなる)
例2: 北欧ライトテーマ(柔らかUI)設定例
[theme]
primaryColor = "#4A90E2" # 柔らかいブルー
backgroundColor = "#FAFAF2" # 薄いクリーム色
secondaryBackgroundColor = "#FFFFFF" # カードやサイドバーは白
textColor = "#333333" # 黒より優しいダークグレー
font = "sans serif" # 読みやすいサンセリフ体この設定をするとどのようになる?
ずっと画面を眺めても疲れにくい色構成で、社内ツールや業務アプリでも受け入れやすい、万人向けの配色です。


- 背景が柔らかいクリーム色になり、優しいトーンのUIに
- ボタンや選択色は 明るいブルー になり、清潔感アップ
- 全体的にビジネス向け・万人向けの雰囲気に変化
例3: ミニマル構成(UIをスッキリさせたい)
[theme]
backgroundColor = "white" # 白背景(清潔感)
textColor = "black" # 黒文字(標準的)
font = "sans serif" # 読みやすいサンセリフ体
[client]
showErrorDetails = "none" # エラー詳細は非表示
toolbarMode = "minimal" # ツールバーを最小化
[runner]
magicEnabled = false # 変数だけでの表示を無効化
fastReruns = false # 再実行の高速化を無効化この設定をするとどのようになる?
余計なメニューやエラー表示をなくし、シンプルな画面に。


- 上部の開発者用メニューが非表示に
- 詳細なエラーはブラウザに出ない(初心者にやさしい)
- 「= 1 + 1」などの省略表示は無効に
例4: セキュリティ強化用設定(外部公開を想定)
[server]
enableCORS = true # CORS(クロスオリジン)保護を有効に
enableXsrfProtection = true # XSRF(クロスサイトリクエスト)保護を有効に
cookieSecret = "your-secret-key-here" # セッション管理用の秘密鍵(任意で設定)
headless = true # ブラウザを自動で開かない(SSHなどに便利)
[browser]
gatherUsageStats = false # 利用統計データを送信しないこの設定をするとどのようになる?
外部に公開するときの最低限のセキュリティ対策をしました。


- セキュリティチェックが有効化
- 自動でブラウザが開かない(サーバー用途)
- 利用データを送信しない(プライバシー配慮)
例5: 保存時に自動で再実行される開発向け設定
[server]
runOnSave = true # ファイル保存時に自動で再実行(開発が効率的に)
headless = true # ブラウザを自動で開かない(SSHやサーバー実行向け)
port = 8501 # 利用するポート番号を指定(デフォルトと同じ)
[runner]
fastReruns = true # ユーザー操作に対して即時に再実行(インタラクティブ性向上)この設定をするとどのようになる?
ファイルを保存したらすぐアプリが再読み込みされて、効率UP。


- コードを書いて保存すれば即反映!
- ページをリロードしなくてOK
- 開発がサクサク進む
例6: 見た目も動作も整えたバランス設定
[theme]
primaryColor = "#FF5733" # 鮮やかなオレンジ(ボタンやアクティブ要素に適用)
backgroundColor = "#FFFFFF" # 白背景(明るくクリーンな印象)
textColor = "#000000" # 黒文字(視認性が高い)
font = "serif" # セリフ体フォント(読みやすく伝統的な印象)
[server]
port = 8502 # アプリのポート番号を変更(複数起動時などに便利)
enableCORS = true # CORS(外部ドメインからのアクセス)を許可
[client]
toolbarMode = "developer" # ツールバーに開発者向けメニューを常に表示
showErrorDetails = "stacktrace" # ブラウザにスタックトレースを表示(デバッグしやすい)
[runner]
fastReruns = true # 操作に対して即時に再実行(レスポンスが速くなる)
magicEnabled = true # 変数名だけで画面出力(開発中の確認に便利)この設定をするとどのようになる?
ポート番号変更やデザインの調整も含めて、ちょっと本番っぽく。


- ポートが
8502に変更され、複数アプリの同時起動も可 - 文字が明朝体風に
- エラー表示が少し控えめになる
【まとめ】StreamlitのUIデザインをconfig.tomlでカスタマイズしよう
Streamlitで見た目を整えるには、Pythonコードだけではなく config.toml の活用がとても重要です。
本記事では以下のポイントを解説してきました。
.tomlファイルとは何か、どこに作るのかconfig.tomlで設定できる項目(テーマカラー・フォント・UI構成)- 用途別にすぐ使えるテンプレート例(6パターン)
- それぞれの設定で「何がどう変わるか」のビジュアルな解説
app.pyと組み合わせた実践的な使い方
特に、見た目の印象が変わるだけでアプリの印象も大きく変わるため、業務で使う際の信頼感や使いやすさにもつながります。
まずはこの記事にあるテンプレートを試してみて、徐々に自分だけのテーマを作っていくのがおすすめです。
「PythonやStreamlitをもっとしっかり学びたい」
「自分のペースで体系的に学びたい」
という方には、動画で実践的に学べる Udemy 講座も便利です。
手を動かしながら学べる形式のため、
初心者でも無理なく理解でき、自動化やWebアプリ開発の基礎を固めるのに役立ちます。
\ 自分のペースで学べるPython講座はこちら /





