読み方：がめんレイアウト

画面レイアウト【screen layout】

概要

画面レイアウトとは、システム開発において、ソフトウェアの画面上に表示・操作要素をどのように配置するかを定めた設計書。また、その設計作業そのものを指す場合もある。

ソフトウェアを実行すると、各機能や処理の状態に応じて様々な画面が表示される。画面レイアウトの設計では、どの画面にどの情報を表示し、どの位置にボタンや入力欄などの操作要素を配置するかを定義する。

これにより、利用者がどの項目に入力し、どの操作を行えばどの処理が実行されるのかという操作手順が明確になる。一般的には、テキスト表示、入力フィールド、チェックボックス、ラジオボタン、ドロップダウンリスト、ボタン、メニューなどのユーザーインターフェース部品が配置され、それぞれの役割や表示方法が定められる。

単に配置や見た目を決めるだけでなく、各要素の仕様を詳細に定義する必要がある。例えば、入力欄については識別のためのIDや項目名、表示ラベル、入力可能な文字数、入力形式、必須入力の有無、入力値の検証規則などを明記することが多い。選択式の項目であれば選択肢の一覧や既定値、表示順序などを定義する。

情報システム開発の工程では、画面レイアウトは外部設計や基本設計の段階で作成されることが多く、画面遷移図や処理フローとあわせて設計される。画面遷移との関係を明確にすることで、利用者がある画面から別の画面へどのように移動するのか、どの操作がどの処理に対応するのかといった全体の操作構造を把握できるようになる。

成果物の形式としては、Excel ワークシートなどに要素を一覧化した「画面定義書」あるいは「画面設計書」と、実際の見た目に近い形で配置を示した「ワイヤーフレーム」や「モックアップ」が広く用いられる。ワイヤーフレームは視覚的な構造を簡易に示すもので、近年では「Figma」や「Adobe XD」といったUI設計ツールで作成されることが多い。プロトタイプとして動作するモックアップを用意することで、設計段階で関係者とのイメージ共有や操作性の確認が行えるため、後工程での手戻りを抑制する効果がある。

近年のWebアプリケーションやモバイルアプリケーションの開発では、レスポンシブデザインへの対応が標準的となっており、パソコン、タブレット端末、スマートフォンなど異なる機種や画面サイズに応じたレイアウトの変化をあわせて定義することが求められる場面が増えている。

(2026.3.10更新)