この記事では、IM-BloomMakerで画面レイアウトを作成する際の基本について紹介します。
IM-BloomMakerでは、ボタンや入力フォーム、テーブルなど、画面を構成するさまざまなエレメントが用意されています。これらのエレメントを組み合わせ、配置や大きさなどを調整することで、目的に合わせた画面を作成できます。
まずは、画面を構成するエレメントの種類を知り、エレメントを縦や横に配置する方法やグリッドレイアウトなど、基本的なレイアウトの作り方を確認してみましょう。
画面を構成するエレメント
IM-BloomMakerでは、画面を構成するさまざまなエレメントが用意されています。エレメントには、画面のレイアウトや構造を整えるものや、ボタンや入力フォームなど、ユーザが操作するためのものがあります。これらのエレメントを組み合わせることで、目的に合わせた画面を作成できます。
ここでは、画面を作成するときによく利用するエレメントを紹介します。
レイアウトや構造を作るエレメント
画面全体の構造や、エレメントの配置を整えるためのエレメントです。たとえば、以下のようなエレメントがあります。
- ボックス：複数のエレメントをひとまとまりにする
- コンテナ：複数のエレメントをまとめて配置する
- カラム：エレメントを横方向に並べる
- タイル：エレメントをブロック状に配置する
- セクション：画面を区切って情報をまとめる
画面を作成するときは、こうしたエレメントを組み合わせて、画面の構造を作ります。
ユーザが操作するエレメント
ユーザが情報を入力したり、操作したりするためのエレメントです。たとえば、以下のようなエレメントがあります。
- ボタン：クリックして処理を実行する
- テキストボックス：文字を入力する
- プルダウン：選択肢から値を選択する
- チェックボックス：複数の選択肢から選択する
- ラジオボタン：複数の選択肢から1つを選択する
入力項目や操作内容に応じて、適切なエレメントを配置します。
情報を表示するエレメント
画面に文字や画像、データなどを表示するためのエレメントです。たとえば、以下のようなエレメントがあります。
- テキスト：文字を表示する
- 見出し：見出しを表示する
- 画像：画像を表示する
- テーブル：データを表形式で表示する
画面に表示したい情報に合わせて、適切なエレメントを配置します。
エレメント一覧
ここで紹介したエレメント以外にも、IM-BloomMakerにはさまざまなエレメントが用意されています。ローコード操作マニュアルでは、エレメントの種類ごとに、利用できるエレメントやその用途を確認できます。画面を作成する際は、実現したい画面に合ったエレメントを探してみましょう。
ローコード操作マニュアル - IM-BloomMakerのエレメント
基本のレイアウト
ここでは、エレメントを配置して画面レイアウトを作成する方法について説明します。エレメントは、配置する方向や位置を調整することで、さまざまなレイアウトを作成できます。
エレメントを縦に配置する
エレメントを縦方向に配置する方法です。入力フォームや明細画面など、項目を上から下へ順番に配置する画面に適しています。また、見出し、入力項目、ボタンなどを順番に配置することで、ユーザを上から下へ誘導するレイアウトを作成できます。
レイアウトの作り方（縦に並べる編）
エレメントを縦に並べてレイアウトを作成する方法について、使用できるエレメントや具体的な使用例をCookBookで確認できます。
CookBook - IM-BloomMaker レイアウトの作り方（縦に並べる編）
エレメントを横に配置する
エレメントを横方向に配置する方法です。同じ種類の項目を並べたり、複数の選択肢を横並びにしたりする場合に適しています。
レイアウトの作り方（横に並べる編）
エレメントを横に並べてレイアウトを作成する方法について、使用できるエレメントや具体的な使用例をCookBookで確認できます。
CookBook - IM-BloomMaker レイアウトの作り方（横に並べる編）
グリッドレイアウトを作成する
エレメントを格子状（グリッド）に配置する方法です。複数のエレメントを行や列に沿って配置するなど、自由度の高いレイアウトを作成できます。Bulma部品の「タイル」エレメントを利用すると、グリッド状のレイアウトを作成できます。
Bulmaタイルの利用方法
Bulma部品の「タイル」エレメントを利用してグリッドレイアウトを作成する方法について、チュートリアルやポイントをCookBookで確認できます。
CookBook - IM-BloomMaker Bulma タイルの利用方法
モバイルを考慮したレイアウト
PCだけでなくスマートフォンなどのモバイル端末でも利用する画面を作成する場合は、画面サイズに応じたレイアウトを考慮する必要があります。IM-BloomMakerでは、エレメントの配置や設定を調整することで、PCとモバイルの画面サイズに合わせたレイアウトを作成できます。
ここでは、モバイルを考慮した画面を作成する際によく利用する「フィールド」と「フレックスコンテナ」について紹介します。
フィールドの利用方法
CookBookでは、Bulma部品の「フィールド」エレメントと「水平フィールド」エレメントの違いや使用方法について確認できます。PCとスマートフォンなど、画面幅に応じて入力項目の表示を変えたい場合は「水平フィールド」エレメント、画面幅によらず同じように表示したい場合は「フィールド」エレメントを使用します。
CookBook - IM-BloomMaker フォーム部品（Bulma）のフィールド、水平フィールドの利用方法
フレックスコンテナの利用方法
「フレックスコンテナ」を利用すると、画面幅に応じてエレメントの配置を調整できます。たとえば、PCでは横方向に配置し、スマートフォンでは縦方向に配置するといったレイアウトを作成できます。CookBookでは、フレックスコンテナを利用して、スマートフォンでも見やすくテーブルのようなレイアウトを表示する方法を確認できます。
CookBook - テーブルをやめてフレックスコンテナを使おう
まとめ
IM-BloomMakerでは、ボタンや入力フォーム、テーブルなどのエレメントを組み合わせ、配置や設定を調整することで、さまざまな画面レイアウトを作成できます。まずは、画面を構成するエレメントの種類を確認し、縦や横に配置する基本的なレイアウトから試してみると良いでしょう。画面の用途や利用する端末に合わせてエレメントの配置を工夫することで、見やすく使いやすい画面を作成できます。
エレメントの種類やプロパティの詳細についてはマニュアルで確認し、CookBookのサンプルも参考にしながら、実際に画面を作成してみてください。
intra-martでは、IM-BloomMakerをもっと知っていただくために、マニュアルやコンテンツなどを豊富にご用意しています。IM-BloomMakerの機能を最大限に発揮させるためにも、ぜひご活用ください。