レイアウトモード入門|区画の分け方からアイテム配置までやさしく解説

レイアウトモードの操作で「区画ってどう作るの?」「配置が崩れるのはなぜ?」と感じたことはありませんか?
本記事では、そうした疑問をまとめて解決できるよう、レイアウトモードの基本操作と活用のコツをやさしく解説します。

レイアウトモードってなに?

新しくダッシュボードを作成するとき、[レイアウトモード]と[フリーレイアウトモード]の2種類から選択できます。

レイアウトモードを設定する方法は二通りあります。ボード新規作成時に選択するのが基本ですが、ボード編集時にモードを変更することになった場合はボード管理画面から変更しましょう。

アイテムを配置するには、まず「区画」を用意する必要があります。

[レイアウト編集]をクリックすると、レイアウトを編集する画面になります。

アイテムを設置したい場所にマウスカーソルを動かして出現する「+」をクリックすると、その場所に新しい区画が作られます。区画は縦や横に分割できます。たとえば、大きな区画を横に2つに分けて「グラフと表を並べる」といった使い方が可能です。

区画の枠線をドラッグして幅や高さを自由に変更できます。分割後もそれぞれの区画を個別に調整可能です。

不要になった区画は[削除]で消すことができます。分割した区画を統合して大きな区画に戻すことも可能です。

区画に配置したアイテムは、ドラッグアンドドロップで区画内の好きな場所へ移動できます。直感的に操作できるため初心者でも安心です。

区画の枠線をそろえると、中に配置したアイテムも自然に見やすくなります。きれいに並べたいときは、枠線の位置を数値指定するとぴったり合います。

例えば、グラフと表を並べて配置するときに高さを揃える場合や、左右の区画の幅を均等にする場合などに役立ちます。

それぞれの区画に複数のアイテムを重ねることもできますので、誤って重ねてしまうこともありますよね。
そうした場合も、ドラッグアンドドロップで別の場所に移動すれば、すぐに配置を調整できます。

また、重なった状態でアイテムの表示順を変えたいときは、区画の左上に表示される「重なりアイコン」(紙が重なったようなマーク)から並び替えメニューを開いて調整できます。

この仕組みを活かして、たとえばチャートの背景を透明にして、下に配置した画像や装飾と重ねるといったテクニックも可能です。

複数の区画がある場合、区画の枠線をドラッグすると複数区画の枠線が同時に動きます。複数区画のバランスを一度に揃えたいときには便利ですが、逆に特定の区画のみ調整したいときに困りますよね。

そうした場合は、動かすときにCtrlキーを押しながらドラッグすると、特定の区画の枠線のみ調整できます。隣接する区画には影響が出ないので安心してくださいね。

アイテム数が多い場合は構成を考えてから配置する
先にラフイメージを描いておくと、不要な配置替えが減ります。
誤操作を防ぐ
区画サイズを変えると他のアイテムがずれる場合があります。大きな編集の前には[保存]をこまめに行い、必要に応じて[名前を付けて保存]で編集前の状態を残しておくと安心です。

レイアウトモードを使えば、区画を自由に分けて整理したり、アイテムを直感的に配置したりできます。枠線を整えることで見やすさがアップし、Ctrlキーを使えば複数区画の微調整も可能です。保存機能を活用すれば安心して編集を進められます。

ポイントを振り返ると次のとおりです。

まずはシンプルなレイアウトから試して、少しずつ自分に合った形に整えてみましょう。