業務UI改善！一覧画面の最大化機能でユーザーの操作性を向上さセル

業務系システムでは、一覧画面が数多く存在しています。ユーザーは、日々この一覧画面から目的のデータを探し、操作を行うことが非常に多くなります。
しかし、情報が一覧に収まらずスクロールが必要だったり、画面の他の部分に干渉されたりすると、視認性が低下し、目的の情報を探し出すのにストレスを感じることがあります。そこで、一覧部分のUI改善が重要となるでしょう。

この記事では、一覧画面を最大化するUI改善のメリットと、Reactを使った具体的な実装方法について解説します。

一覧画面を最大化することで得られるメリット

UIの改善方法の一つとして、一覧画面を画面一杯に広げる「最大化」機能を追加する方法があります。
この機能を実装することで、次のようなメリットが生まれます。

視認領域の拡大

一覧部分を最大化することにより、スクロールすることなくより多くの情報を一度に確認できるようになります。

操作性の向上

他の要素が一覧の表示を邪魔しなくなるため、ユーザーは情報を見つけやすくなり、作業効率が向上します。

具体的な実装方法

それでは、Reactを用いて一覧画面を最大化する具体的な実装方法を見ていきましょう。
完成イメージは以下の通りです。

まず、jsx（tsx）側の実装です。
ここでは、useStateを使用して、一覧の最大化状態を管理します。fullscreenという状態を追加し、ボタンがクリックされたときにこの状態を切り替えます。
詳しい実装内容はソースコード上のコメントを参照してください。

import React, { useState } from 'react';
import styles from './Sample.module.css';
import clsx from 'clsx';

export default function Sample() {
  // fullscreen状態を管理するstateを定義
  // fullscreenがtrueの場合、一覧が画面全体に広がります
  const [fullscreen, setFullscreen] = useState(false);

  // 最大化/元に戻すボタンのクリック時に呼ばれる関数
  // fullscreen状態をトグル（true <-> false）します
  const toggleFullScreen = () => {
    setFullscreen(!fullscreen);
  };

  return (
    <div>
      {/* その他のコンテンツ */}
      {/* このエリアには検索条件などのコンテンツを表示することを想定しています */}
      <div style={{ height: "200px", background: "#cce" }}>
        検索条件などのコンテンツを表示することを想定したエリア
      </div>
      
      {/* 一覧部分 */}
      <div className={clsx(
        styles.fullscreen, // 通常のスタイル
        fullscreen && styles.active // fullscreenがtrueのとき、最大化スタイルを適用
      )}>
        {/* 最大化/元に戻すボタン */}
        <button onClick={toggleFullScreen}>{(fullscreen ? "戻す" : "最大化")}</button>
        
        {/* 一覧表示エリア */}
        <div className={clsx(styles.tableContainer)}>
          <table>
            <thead>
              <tr>
                <th>ユーザーID</th>
                <th>ユーザー名</th>
              </tr>
            </thead>
            <tbody>
              {/* ダミーデータを生成して100行表示します */}
              {[...Array(100)].map((_, index) => (
                <tr key={index}>
                  <td>{index}</td>
                  <td>ユーザー{index}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

次にCSSのコードです。
最大化ボタンが押された時に、一覧を囲うdivタグにfullscreenクラスが設定されるため、このfullscreenが設定された時は、一覧の部分を画面一杯に広げるスタイルを設定します。

/* 拡大時に画面一杯に表示する要素 */
.fullscreen {
  display: flex;
  flex-direction: column;
  background: #fff;
}
/* 拡大時のスタイル（画面全体に固定表示するためのスタイル） */
.fullscreen.active {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
}

/* 一覧のスクロールコンテナ */
.tableContainer { 
  height: 200px; /* 通常時の高さを指定 */
  overflow: scroll; /* 表示エリアをスクロール可能にする */
  border: 1px solid #ccc; /* 枠線を追加 */
}
/* 拡大時に一覧を画面一杯に表示する */
.fullscreen.active .tableContainer {
  flex-grow: 1;
  height: 100%; /* 全画面時に高さを100%に設定 */
}

/* テーブルセルのスタイルを設定 */
.tableContainer table th,
.tableContainer table td { 
  border: 1px solid #ccc; /* セルに枠線を追加 */
}

/* 列ヘッダの固定 */
.tableContainer table thead th {
  background: #F5F5F5;
  position: sticky;
  z-index: 2;
  box-sizing: border-box;
  text-align: left;
  color: #666;
  font-weight: bold;
  padding: 0 4px;
  top: 0;
}

まとめ

業務系システムの一覧画面を最大化できるようにすることで、ユーザーにとっての視認性や操作性を大きく向上させることができます。日常的に多くのデータを扱うユーザーにとって、このような小さな改善が作業効率を高め、大きな生産性の向上に繋がることは間違いありません。