Sample Galleryのボードを"ゼロ"からつくってみようシリーズ
　「負荷状況可視化ダッシュボード編」・「利用状況チェックボード編」
Appendix

コンテナとは？

INDEX

1．コンテナとは？

MotionBoardの「コンテナ」機能は、複数のアイテム（チャートや集計表、図形など）を一つにまとめて管理できる便利な機能です。
左図は、コンテナ内に複数のアイテムを配置したイメージです。
コンテナを活用すると、タイトルテキストとイメージ、検索条件などをセットで移動させたり、一括でレイアウトやデザインの変更ができたり、といったことができるようになります。

このように、複数のアイテムをグループ化して操作できるので、ボード構築作業を効率化できます。
コンテナの基本的な使い方の流れです。
  1. コンテナを作成する
    ボード編集モードで、アイテムツールバーから［コンテナ］を選択し、必要な場所に配置します。

  2. アイテムを配置する
    コンテナ内にアイテムをドラッグ＆ドロップします。

  3. 調整する
    コンテナ全体のサイズや位置を調整し、背景色などを設定します。

使い方の詳細は、製品マニュアル「コンテナアイテムを作成する」で確認できます。
また、コンテナ作成後の編集方法については、つぎのコンテンツで確認できます。
TIPS
コンテナを使って、1つのレイアウト（区画）に複数のアイテムを配置している場合、［レイアウト編集］ボタンをクリックしたときに、区画の左上に左図のようなアイコンが表示されるので、コンテナの使用場所を確認したいときの目安にできます。
コンテナを配置しているボードで設定したレイアウトによっては、［レイアウト編集］ボタンをクリックすると、ボード自体のレイアウト編集ではなく、コンテナ内のレイアウトが編集できる状態で表示される場合があります。

その場合、Ctrlキーを押しながら操作すると、ボード自体のレイアウト編集ができるようになります。

2．コンテナの活用シーン

ここでは、ごく一部ではありますが、コンテナの活用シーンをいくつか確認してみましょう。
具体的な設定例は、「参考」内のコンテンツを確認してくださいね。

活用シーン01：レイアウトの整理・調整

関連する複数のアイテムを一つのコンテナ内にまとめることで、見やすく整理でき、全体のレイアウトも整えやすくなります。
また、特定の条件下でのみ表示したいアイテムをコンテナにまとめ、ボタン操作で表示・非表示を切り替えることで、ユーザーにとって使いやすいインターフェースを提供できます。

例えば、「負荷状況可視化ダッシュボード編」でご紹介した検索メニューだけではなく、ヘッダーなどもコンテナを使うとスタイリッシュなメニューを作成できます。
参考
・まるでWebサイト!? 折りたたみメニューの作り方!
・まるでWebサイト!?コンテナを使ったお洒落なグローバルメニューの作り方を紹介!

活用シーン02：スペースの有効活用

「利用状況チェックボード編」でご紹介したように、ボタンでコンテナの表示・非表示を切り替えられるので、限られた画面スペースに多くの情報を表示できます。
また、コンテナをスクロールボックスとして活用したりすることで、必要な情報をコンパクトに表示できます。
参考
・ ボード上にアイテムを置くスペースがないときは「コンテナ」を活用してみよう
・とっても便利なコンテナ活用術 ～デザインの整ったヘッダーとスクロールボックスの作成方法を紹介!～

そのほかの活用効果

そのほかのコンテナを活用した効果については、『ゆみちゃんねる』動画も確認してみましょう。
この動画では、MotionBoardのデザインテクニックやワンポイントアドバイスをわかりやすくお届けしています。
参考
コンテナアイテムの利用効果とは!?見栄えや作業効率に役立つアイテムをご紹介
コンテナでデザイン!!便利アイテムのコンテナを活用したデザインをご紹介
コンテナでデザイン!!便利アイテムのコンテナを活用したデザインをご紹介！重ね技のテクニックで魅せる画面作り