【Streamlit】Google Fontsとアイコンを活用した高品質UI

Streamlit
2025/06/16
この記事は約11分で読めます。

こんにちは、JS2IIUです。
本記事では、Pythonで手軽にWebアプリを作成できるStreamlitにおいて、Google Fontsやアイコンライブラリを効果的に組み合わせてUIを美しくカスタマイズする方法をご紹介します。今回もよろしくお願いします。

1. イントロダクション

Webアプリ開発において、ユーザーの第一印象を決めるのは「デザイン」です。
Pythonで簡単にWebアプリを作成できるStreamlitは機能面で優れていますが、そのままでは見た目のカスタマイズは限定的です。
本記事では次の3点にフォーカスし、Streamlitアプリの魅力的なUIづくりを解説します。

  • Streamlitの基本構造とUIコンポーネントのカスタマイズ
  • Google Fontsを用いた美しいフォント選びと適用
  • 多彩なアイコンライブラリから選ぶアイコン活用術

実践的なサンプルコードを交え、実際に手を動かしながら学べる内容です。ぜひ本記事を通じて自分だけの素敵なStreamlitアプリを作りましょう。

2. Streamlitとは？

Streamlitの概要

StreamlitはPython製のオープンソースWebアプリフレームワークで、データ分析や機械学習モデルの可視化を簡単に行えます。
コードを書くと即座にWebアプリとして表示されるシンプルさが特徴です。

カスタマイズ可能なUIコンポーネント

Streamlitには、ボタン・スライダー・テキスト入力など様々なUI部品（コンポーネント）が標準装備されています。
しかし、色やフォントなど外観の自由度は標準だけでは限られています。

Python
import streamlit as st

st.title("Streamlit基本UI例")
st.write("これは基本的なテキスト表示です。")
if st.button("クリックしてね"):
    st.success("ボタンがクリックされました")

この例ではシンプルなボタンと表示機能を使っていますが、フォント変更やアイコン表示は追加の工夫が必要です。

3. Google Fontsとは？

Google Fontsの特徴

Google FontsはGoogle提供の無料ウェブフォント集で、豊富な種類のフォントを手軽にWebサイトやアプリに導入できます。

  • ライセンスフリー、商用利用可能
  • Webフォントの読み込みはGoogleのCDN経由で高速
  • 多様なスタイル（太さ、斜体など）を選択可能

Google Fontsの選び方とおすすめ

フォントは読みやすさだけでなく、アプリの雰囲気を大きく左右します。
用途別のおすすめ例：

用途フォント例特徴
ヘッダー用Poppinsモダンで丸みのある印象
本文用Roboto視認性が高く万能
タイトル・強調Playfair Displayクラシックで格調高い

Google FontsのStreamlitへの適用方法

Streamlitは標準でカスタムCSSを埋め込めないため、st.markdownのstyleタグを通じてCSSを挿入します。

Python
import streamlit as st

# Googleフォントを読み込み、CSSで適用
st.markdown("""
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
<style>
    .custom-font {
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 24px;
        font-weight: 700;
    }
</style>
""", unsafe_allow_html=True)

# カスタムフォントを適用したテキスト表示
st.markdown('<p class="custom-font">このテキストはGoogleフォント, Noto Sans JPで表示されます</p>', 
            unsafe_allow_html=True)

st.write("このテキストはデフォルトのフォントで表示されます")

このコードを実行すると、custom-fontタグで指定した範囲のフォントがNoto Sans JPに変わり、見た目が洗練されます。

4. アイコンライブラリとは？

アイコンライブラリの紹介

アイコンライブラリは画面上に表示するシンプルな図形（例：メールアイコン、検索アイコンなど）をまとめたリソースです。
視覚的に機能や情報を伝えやすくし、ユーザー体験を向上させます。

代表的なアイコンライブラリ

Streamlitでのアイコン利用例（Font Awesome）

Python
import streamlit as st

# Font AwesomeのCDNを読み込み
st.markdown("""
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
""", unsafe_allow_html=True)

# アイコンを用いたボタン風表示
st.markdown("""
    <button style="font-size:20px;">
        <i class="fas fa-thumbs-up"></i> いいね！
    </button>
""", unsafe_allow_html=True)

この例では、「いいね！」ボタンに親しみやすいサムズアップアイコンを添えています。

5. 高度なスタイリングとレスポンシブデザイン

CSSとHTMLを活用したスタイリング

Streamlitでは直接CSSファイルを読み込めないため、st.markdown()でHTMLの<style>タグを埋め込む方法を用います。
例えば、ボタンの装飾や文字色の調整も可能です。

Python
st.markdown("""
    <style>
    .custom-button {
        background-color: #007BFF;
        color: white;
        border-radius: 8px;
        padding: 10px 20px;
        font-weight: bold;
        border: none;
    }
    .custom-button:hover {
        background-color: #0056b3;
        cursor: pointer;
    }
    </style>
    <button class="custom-button">カスタムボタン</button>
""", unsafe_allow_html=True)

レスポンシブデザインへの配慮

スマホやタブレットでの見え方を意識することも重要です。CSSメディアクエリを用いてフォントサイズやアイコンサイズの調整ができます。

Python
st.markdown("""
    <style>
    @media (max-width: 600px) {
        body, [class*="css"] {
            font-size: 14px !important;
        }
        .fa-thumbs-up {
            font-size: 24px !important;
        }
    }
    </style>
""", unsafe_allow_html

=True)

このコードにより画面幅が狭い場合は文字・アイコンが小さくなり、読みやすさを保持します。

6. パフォーマンス最適化のためのロード時間短縮

ロード時間短縮の重要性

表示の遅延はユーザー離脱の原因になります。
特にフォントやアイコンは外部リソースを使うため、読み込みに時間がかかる場合があります。

実践的なロード時間短縮策

  • 必要なフォント・スタイルのみ選ぶ
    例：font-weight: 400だけを指定し、無駄なスタイルを減らす。
  • アイコンはSVGで必要なものだけ埋め込む
    CDN経由で一括読み込みではなく、必要なアイコンのSVGを貼り付けも検討。
  • フォントをローカルにホストする
    ただしStreamlit Cloudなど制限もあるため環境に応じて対応。

Google Fonts読み込み例では下記のようにシンプルに必要最低限の指定を心がけます。

HTML
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet">

7. まとめ

今回の記事では、Streamlitアプリの見栄えを高めるための以下のポイントを解説しました。

  • Streamlitの基本UIとカスタマイズ方法
  • Google Fontsを利用した多彩なフォント選択と適用例
  • アイコンライブラリ（特にFont Awesome）を用いた効果的なアイコン活用
  • CSSとHTMLでの細やかなスタイリングおよびレスポンシブ対応
  • パフォーマンスに配慮した外部リソースの読み込み最適化

これらの技術を組み合わせることで、シンプルなコードで美しく機能的なアプリを実現できます。
ぜひ手を動かして、自分だけのスタイリッシュなStreamlitアプリを作り上げてください。

8. 参考資料

当ブログのStreamlit関連記事一覧です。こちらも参考にしていただけますと幸いです。ぜひご覧ください。

Streamlit
PythonのWEBフレームワークであるStreamlitについての記事を集めたページです。
js2iiu.com

この記事の内容が読者の皆さまのStreamlitアプリ開発にお役立てれば幸いです。
質問や感想はお気軽にコメントください。
最後までお読みいただきありがとうございました。

コメント

タイトルとURLをコピーしました