FlaskポートフォリオサイトのUI改善：タグ表示統一とユーザビリティ向上

プロジェクト概要

既存のFlaskベースポートフォリオサイトにおいて、ユーザビリティとUI一貫性の改善を目的とした改修を実施しました。主な改修内容は、タグページの表示順序変更と、全ページでのタグ表示制限機能の統一です。

課題認識

1. タグページの情報優先度

問題: タグクラウドが先頭に表示され、統計情報が下段に配置
課題: サイト全体の概要把握前にタグ一覧が展開され、情報の優先度が不適切

2. タグ表示の非統一性

問題: TOPページのみタグ表示制限（5つ+残り数表示）が実装済み
課題: カテゴリページ、検索ページでは全タグ表示により、レイアウト崩れとUX低下

技術的アプローチ

実装技術スタック

Backend: Python Flask
Template Engine: Jinja2
Frontend: Bootstrap 5
Database: SQLite

改修対象ファイル

templates/
├── tags.html      # タグページ表示順序変更
├── category.html  # タグ制限機能追加
└── search.html    # タグ制限機能追加

実装詳細

1. タグページ表示順序の改善

変更前の構造

<!-- Tag Cloud -->
<div class="row">
    <div class="tag-cloud">
        <!-- タグクラウド展開 -->
    </div>
</div>

<!-- Statistics -->
<div class="row mt-4">
    <div class="statistics">
        <!-- 統計情報 -->
    </div>
</div>

変更後の構造

<!-- Statistics -->
<div class="row">
    <div class="statistics">
        <!-- 統計情報を先頭に配置 -->
    </div>
</div>

<!-- Tag Cloud -->
<div class="row mt-4">
    <div class="tag-cloud">
        <!-- タグクラウドを下段に配置 -->
    </div>
</div>

2. タグ表示制限機能の統一実装

共通テンプレートロジック

{% if article.tags %}
<div class="mb-2">
    {% set tag_list = article.tags.split(',') %}
    {% for tag in tag_list[:5] %}
    <a href="{{ url_for('search', tag=tag.strip()) }}" 
       class="badge bg-secondary text-decoration-none me-1">
        {{ tag.strip() }}
    </a>
    {% endfor %}
    {% if tag_list|length > 5 %}
    <span class="badge bg-light text-dark">+{{ tag_list|length - 5 }}</span>
    {% endif %}
</div>
{% endif %}

機能仕様

表示制限: 最初の5つのタグのみ表示
残り表示: 5つ超過時は +数字 形式で残りタグ数を表示
リンク機能: 表示タグは検索ページへのリンクとして機能
視覚的統一: 全ページで同一のバッジスタイルを適用

改修結果

UI改善効果

1. 情報アクセシビリティの向上

統計情報先行表示: サイト概要の即座把握が可能
優先度明確化: 重要情報の視覚的優位性を確保

2. レスポンシブ対応の強化

タグ制限による安定レイアウト: 長大タグリストによる崩れを防止
一貫したUX: 全ページで統一されたタグ表示体験

統一完了ページ一覧

✅ TOPページ (index.html) - 最新記事一覧
✅ カテゴリページ (category.html) - カテゴリ別記事一覧
✅ 検索ページ (search.html) - 検索結果・タグ別記事一覧

技術的学習ポイント

1. Jinja2テンプレート活用

配列スライシング: tag_list[:5] による効率的な制限処理
条件分岐: {% if tag_list|length > 5 %} による動的表示制御
フィルター活用: split(',') と strip() による文字列処理

2. Bootstrap UI設計

バッジコンポーネント: badge bg-secondary による統一スタイル
レスポンシブグリッド: row と col による柔軟レイアウト
視覚的階層: mt-4 クラスによる適切な間隔設計

3. UX設計思考

情報優先度: 統計情報とタグクラウドの配置検討
認知負荷軽減: タグ制限による情報過多の防止
一貫性原則: 全ページでの統一されたインターフェース設計

今後の拡張可能性

1. 動的タグ制限設定

管理画面からの表示タグ数設定機能
カテゴリ別タグ制限ルールのカスタマイズ

2. タグクラウド高度化

タグ使用頻度による動的サイズ調整
タグカテゴリ分類による色分け表示

3. 統計情報拡充

タグトレンド分析表示
記事投稿頻度のグラフィカル表示

まとめ

本改修により、ポートフォリオサイトの情報アクセシビリティとUI一貫性が大幅に向上しました。特に、タグ表示の統一化により、ユーザーは全ページで一貫した操作体験を得られるようになり、サイト全体の品質向上を実現できました。

小規模な改修でありながら、ユーザビリティ向上とメンテナンス効率化の両面で効果的な改善を達成した事例として、今後のUI/UX改善プロジェクトの参考になると考えています。