WorkSuite / パーツとは
2026-02-16 10:13:05 UTC
概要
WorkSuiteにおける「パーツ」とは、アプリの画面を構成する基本的な部品のことです。
パーツを使うことで、設定したデータ（メンバー情報やマスター情報）を画面に表示したり、レイアウトを整理したりできます。複数のパーツを組み合わせることで、使いやすいアプリ画面を構築します。
編集画面の左サイドバーからドラッグ&ドロップで配置し、右サイドバーで詳細な設定を行います。
パーツについて
WorkSuiteでは、以下の5種類のパーツを使用できます。それぞれ役割が異なるため、用途に応じて使い分けます。
タブコンテナパーツ
情報をタブやステップ形式で切り替え、限られたスペースに多くの情報を集約するパーツです。
概要
- コンテンツをタブで切り替えて表示領域を節約します
- 1つの画面に収まりきらない情報を、タブで分けて整理できます
設定
- 最大5つまでのタブを作成できます
- 表示形式を「タブ」「セグメント」「ステッパー（段階表示）」の3種類から選択できます
- 各タブは独立したコンテナとして機能し、それぞれ異なる列数や背景色を持つパーツを配置可能です
活用事例
- 年度別の評価履歴切り替え（2023年度、2024年度、2025年度のタブで切り替え）
- 申請プロセスの進捗を示すステッパーとしての利用（申請→承認→完了）
公開画面⇩
注意
- すべてのタブ内のコンテンツはページ読み込み時に同時にロードされるため、各タブに重いデータやパーツを大量に配置すると動作が遅くなる可能性があります
- 最後の1つのタブは削除できません
コンテナパーツ
複数のパーツをまとめ、列数や背景色を設定して画面構成を整える枠組みです。
概要
- 複数のパーツをグループ化してレイアウトを構造化します
- パーツを整理整頓するための「箱」のようなものです
設定
- 内部の列数を1〜4列から選択できます
- 2列の場合は「1:2」や「2:1」といった比率調整も可能です（左右の幅を変えられます）
- セクションごとに背景色（白・グレーなど）を設定することで、情報の境界を視覚的に分かりやすく整理できます
活用事例
- 関連する複数のグラフや入力フォームを横並びに配置して画面密度を高める
- 重要な情報をグレー背景で囲んで目立たせる
公開画面⇩
注意
- 3列や4列の設定は、スマートフォンなどの画面幅が狭いデバイスでは視認性が低下する恐れがあるため、モバイル利用を想定する場合は1〜2列が推奨されます
- プレビューモードでは中身が空のコンテナは表示されません
テキストパーツ
固定文やMarkdown、ログインユーザー名などの動的な値を表示するパーツです。
概要
- 画面上の見出し、説明文、案内などを表示します
- データではなく「説明文」を表示したいときに使います
設定
- 簡易テキストではスタイル（見出し・太字等）と色（黒・グレー・赤）を選択できます
- リッチテキストではMarkdown記法で表や リスト等の複雑な装飾が可能です
- {ユーザー名}などの変数を用いることで、閲覧者に合わせた動的な値をテキスト内に挿入できます（例：「山田さん、こんにちは」と表示）
活用事例
- ページ上部の操作ガイドの掲示（「このページではスキル情報を入力してください」など）
- 未入力者への赤い文字での注意喚起（「必須項目が未入力です」など）
公開画面⇩
注意
- 「簡易テキスト」と「リッチテキスト」は作成後に相互変換できないため、最初に用途を見極めて選択する必要があります
- リッチテキスト側ではメニューからの文字色変更やスタイル選択機能が使えない点にも留意してください
詳しくは以下のページをご参照ください。
コレクションパーツ
一覧形式でデータを表示し、絞り込みや並び替え、色分けを行う中核パーツです。
概要
- データを一覧表形式で表示・管理します
- Excelのような表形式で、複数のメンバーやマスター情報を一度に見ることができます
設定
コレクションパーツを選択すると、レイアウト画面右パネルに以下の設定項目が表示されます。
■ 共通設定
全てのビューに共通して適用される設定です。
- データソース: 表示するデータの種類を選択します（メンバー、マスター情報など）。一度設定すると変更できないため、慎重に選択してください
- 編集項目: テーブル上で編集可能にする項目を設定します。クリックすると編集可能な項目を選択できます
- ユーザーの利用機能: 利用者が使用できる機能を設定します。絞り込みや並び替え、条件付き書式の変更を許可するかどうかを個別にON/OFF可能です
■ ビュー毎の設定
各ビューに個別に設定できる項目です。
- ビュー選択: 設定対象のビューを選択します。複数のビューを作成して切り替えることができます
- ビュー名: 選択中のビューの名称を設定します
- 表示項目: テーブルに表示する項目（列）を選択します。クリックすると項目の追加・削除や順序変更ができます。ロールアップ項目（参照先の値表示）も設定できます
- 絞り込み: データを特定の条件で絞り込みます。条件数が表示され、クリックすると詳細な絞り込み条件を設定できます
- 並べ替え: データの並び順を設定します。クリックすると並び替えの基準となる項目と昇順/降順を選択できます
- 条件付き書式: セルの値に応じた色分けを設定します。対象項目数が表示され、クリックすると詳細な書式ルールを設定できます
- 表示件数: 1ページあたりに表示するデータの件数を設定します
- 列と行を入れ替え: テーブルの列と行を入れ替えて表示します。トグルスイッチでON/OFF切り替えができます
活用事例
- スキルマップでのヒートマップ表示（スキルレベルを色で可視化）
-
プロジェクトの進捗一覧管理（全プロジェクトのステータスを一覧表示）
公開画面⇩
注意
- 一度設定したデータソースは後から変更できないため、変更が必要な場合はパーツの再作成が必要です
- 社員名簿由来の項目はアプリ側から直接編集できません
- 計算負荷の高い複雑な絞り込みは表示速度に影響する場合があります
フォームパーツ
特定の1レコード（1人または1件のデータ）の詳細を表示・編集し、自由なカラム数で項目を配置するパーツです。
概要
- 単一レコードの詳細表示と編集に特化したパーツです
- コレクションパーツが「複数のデータを一覧表示」するのに対し、フォームパーツは「1件のデータを詳しく表示」します
設定
- 表示対象を「操作ユーザー」（ログインしている本人）か「このページのレコード」（詳細ページで開いているデータ）から選択します
- 項目を1〜4列の好きな位置にドラッグ&ドロップで配置します
- セクション設定では、社員名簿の構造を維持する「自動配置」と、自由に命名できる「手動配置」を使い分けられます
活用事例
- 個人のプロフィール詳細画面（自分の情報を入力・編集）
-
特定のプロジェクト工数入力画面（1つのプロジェクトの詳細情報を表示）
注意
- データの編集は1項目ごとに行われ、入力と同時に自動保存される仕組みになっています（保存ボタンを押す必要はありません）
- タイトル表示をONにした際の表示内容は、メンバー情報なら顔写真付き、マスター情報なら名称のみと、データ元により異なります
関連ページ
レイアウト設定について
パーツを使用したレイアウト設定の詳細については、以下のページをご参照ください。