WorkSuite / STEP4：レイアウトを設定する
2026-01-21 15:10:17 UTC
概要
レイアウト設定では、アプリの画面デザインを自由にカスタマイズできます。
- データ設定で作成したメンバー情報やマスター情報を、どのように画面に表示するかを設定します。
- ドラッグ&ドロップによる直感的な操作で、フォームやテーブルなどのパーツで配置し、ユーザーが使いやすいアプリ画面を構築します。
ページの作成と設定
WorkSuiteでは、情報を整理するために複数の「ページ」を作成できます。
例えば下記画像のように「スキル/資格」「研修」「異動候補者」のように用途別に画面を分けることが可能です。
- ページの追加: レイアウト編集画面の左上にある「追加」ボタンから新しいページを作成できます。
編集画面⇩
- ページの設定: 作成したページを選択し画面右側のサイドバーで「ページ名」や「ページURL」を設定します。
編集画面⇩
公開画面⇩
アプリ画面を構成する主要パーツ
「パーツ」はアプリ画面を構成する部品です。これらを組み合わせることで、多様な機能を持つ画面を作成できます。
【パーツの種類】
編集画面⇩
パーツの基本操作
- 配置： 画面左のパーツ一覧から、目的のパーツを中央のキャンバスへドラッグ＆ドロップします。
- 移動：パーツを移動させたい場合は、画面左の「レイヤー」タブを開きます。ここに表示されるパーツ一覧から、移動したいパーツをドラッグ＆ドロップで目的の場所（他のパーツの上下やコンテナの中）へ移動させます。
- 削除：削除したいパーツを画面上でクリックするか、「レイヤー」タブで選択し、表示される削除アイコンまたはメニューから削除します。コンテナを削除すると、中に含まれるパーツもすべて削除されるので注意が必要です。
- 設定：設定したいパーツをクリックで選択すると、画面右側のサイドバーに設定項目が表示されます。ここでデータソースの選択や表示項目の設定など、詳細なカスタマイズを行います。
プレビュー機能でいつでも確認
画面右上の「プレビュー」スイッチをONにすると、いつでも管理者目線ではなく、実際の利用者がアプリをどのように見るかを確認できます。設定を変更するたびにプレビューで表示や動作を確認することで、手戻りを防ぎ、効率的に画面設計を進めることができます。
レイアウトが完成したら、次はこの画面を「誰が」「どのように」使えるのかを制御する、最も重要な権限設定に進みます。
プレビューの使い方
-
画面右上の[プレビュー]スイッチをONにします
- 画面右上またはレイアウト編集画面内にあります。
-
実際の表示を確認します
- アプリ利用者が見る画面と同じ状態で表示されます。
- データの入力・表示が正しく機能するかチェックできます。
アプリ公開後のレイアウト変更について
アプリを公開した後にレイアウトを変更する場合の手順については、今後のSTEPで説明いたします。なお、公開後にレイアウトを変更した際は再度公開処理が必要になります。
次のステップ
レイアウト設定が完了したら、次はロール（権限）の設定に進みます。 → STEP5：ロールを設定する