【Streamlit】StreamlitアプリのUIデザインのヒント

こんにちは、JS2IIUです。
今回はユーザーフレンドリーなアプリを作るためのUIデザインのポイントについて見ていきます。よろしくお願いします。

1. はじめに

Streamlitは、Pythonで簡単にWebアプリケーションを作成できる非常に便利なフレームワークです。データ可視化や機械学習モデルのデモに特化しており、数行のコードでインタラクティブなUIを構築できます。

しかし、「見た目がわかりづらい」「使いにくい」といった印象を与えてしまうアプリでは、せっかくの機能も活かしきれません。

この記事では、実践しやすいUIデザインの基本原則と、それをStreamlitでどのように実装するかについて、サンプルコード付きで丁寧に解説します。

2. ユーザーフレンドリーなUIデザインの基本原則

✅ 原則1：シンプルにする

複雑な画面構成は混乱を招きます。必要な情報・機能だけを表示するように意識しましょう。

✅ 原則2：一貫性を保つ

ボタンの配置、色、テキストのスタイルを統一することで、ユーザーは迷わず操作できます。

✅ 原則3：フィードバックを返す

ボタンを押したときや処理中には、「何が起きているのか」がわかる表示を加えると安心感が生まれます。

✅ 原則4：ユーザーの視点で設計する

自分が使う立場だったら…という視点で考えると、自然で直感的なUIになります。

3. Streamlitで実践するUIデザインのヒント

ステップ 1：レイアウトを整理して見やすくする

Streamlitのst.columns()を使えば、項目を横に並べて画面を整理できます。

🎯 サンプルコード：2列に分かれたフォーム

import streamlit as st

st.title("お問い合わせフォーム")

col1, col2 = st.columns(2)

with col1:
    name = st.text_input("お名前")
    email = st.text_input("メールアドレス")

with col2:
    age = st.number_input("年齢", min_value=0, max_value=120)
    gender = st.selectbox("性別", ["選択してください", "男性", "女性", "その他"])

message = st.text_area("お問い合わせ内容")

if st.button("送信"):
    st.success("お問い合わせありがとうございます。後ほどご連絡いたします。")

💡 解説

• st.columns(2) で2カラムに分割。
• 名前やメールなどの基本情報を左側に、年齢や性別などの属性情報を右側にまとめています。
• 情報を整理して配置することで、視線移動が自然で使いやすいUIになります。

ステップ 2：適切なウィジェットを選ぶ

使いやすさは「入力方法」で大きく変わります。選択肢が決まっている場合は、自由入力よりも選択式がベターです。

🎯 サンプルコード：ラジオボタン vs セレクトボックス

import streamlit as st

st.header("アンケート")

option_radio = st.radio("今の気分は？", ["楽しい", "普通", "つらい"])
option_select = st.selectbox("好きな言語は？", ["Python", "JavaScript", "Go", "その他"])

st.write(f"気分: {option_radio}")
st.write(f"選んだ言語: {option_select}")

💡 解説

• st.radio は すぐに選択肢が見えるため、選択肢が少ないときに有効。
• st.selectbox は 省スペースなので、選択肢が多いときに便利です。

ステップ 3：処理中や結果のフィードバックを入れる

ユーザーに「今なにが起きているのか」を伝えることで、ストレスを減らせます。

🎯 サンプルコード：処理中のスピナー＋結果表示

import streamlit as st
import time

st.header("データ処理アプリ")

if st.button("処理開始"):
    with st.spinner("データを処理中です..."):
        time.sleep(2)  # 実際にはここで処理を行う
    st.success("処理が完了しました！")

💡 解説

• st.spinner() によって、処理中であることを明示。
• 処理が終わったら st.success() でメッセージ表示。
• 安心感と操作の納得感が生まれます。

ステップ 4：色・余白・テキスト装飾で読みやすく

テキストの強調や余白の挿入により、ユーザーにとって視覚的に心地よいUIになります。

🎯 サンプルコード：マークダウンと余白の活用

import streamlit as st

st.title("Streamlit UI デザインの工夫")

st.markdown("### 💡 ポイント1：重要な情報は**太字**で")
st.write("例: お名前、日付など")

st.markdown("### 🎨 ポイント2：余白で区切る")
st.write("以下にフォームがあります：")

st.write("")  # 空白行を挿入

name = st.text_input("お名前")
email = st.text_input("メールアドレス")

st.write("")  # 再び余白を挿入

if st.button("送信"):
    st.success("送信されました！")

4. よくある失敗例と改善案

5. まとめ

• UIは「使う人」の体験を大きく左右します。
• Streamlitでも、ちょっとした工夫で見た目や使いやすさが大きく改善します。
• 本記事で紹介した内容はどれも簡単に実践できるものばかりですので、ぜひ自分のアプリでも取り入れてみてください。

6. 参考リンク

• Streamlit公式ドキュメント
• st.columns の使い方
• Streamlit Markdown 表現

最後まで読んでいただきありがとうございます。