画面レイアウトの基本をマスターしたい

この記事では、IM-BloomMakerで画面レイアウトを作成する際の基本について紹介します。

IM-BloomMakerでは、ボタンや入力フォーム、テーブルなど、画面を構成するさまざまなエレメントが用意されています。これらのエレメントを組み合わせ、配置や大きさなどを調整することで、目的に合わせた画面を作成できます。

まずは、画面を構成するエレメントの種類を知り、エレメントを縦や横に配置する方法やグリッドレイアウトなど、基本的なレイアウトの作り方を確認してみましょう。

画面を構成するエレメント

IM-BloomMakerでは、画面を構成するさまざまなエレメントが用意されています。エレメントには、画面のレイアウトや構造を整えるものや、ボタンや入力フォームなど、ユーザが操作するためのものがあります。これらのエレメントを組み合わせることで、目的に合わせた画面を作成できます。

ここでは、画面を作成するときによく利用するエレメントを紹介します。

レイアウトや構造を作るエレメント

画面全体の構造や、エレメントの配置を整えるためのエレメントです。たとえば、以下のようなエレメントがあります。

• ボックス：複数のエレメントをひとまとまりにする
• コンテナ：複数のエレメントをまとめて配置する
• カラム：エレメントを横方向に並べる
• タイル：エレメントをブロック状に配置する
• セクション：画面を区切って情報をまとめる

画面を作成するときは、こうしたエレメントを組み合わせて、画面の構造を作ります。

ユーザが操作するエレメント

ユーザが情報を入力したり、操作したりするためのエレメントです。たとえば、以下のようなエレメントがあります。

• ボタン：クリックして処理を実行する
• テキストボックス：文字を入力する
• プルダウン：選択肢から値を選択する
• チェックボックス：複数の選択肢から選択する
• ラジオボタン：複数の選択肢から1つを選択する

入力項目や操作内容に応じて、適切なエレメントを配置します。

情報を表示するエレメント

画面に文字や画像、データなどを表示するためのエレメントです。たとえば、以下のようなエレメントがあります。

• テキスト：文字を表示する
• 見出し：見出しを表示する
• 画像：画像を表示する
• テーブル：データを表形式で表示する

画面に表示したい情報に合わせて、適切なエレメントを配置します。

基本のレイアウト

ここでは、エレメントを配置して画面レイアウトを作成する方法について説明します。エレメントは、配置する方向や位置を調整することで、さまざまなレイアウトを作成できます。

• エレメントを縦に配置する
• エレメントを横に配置する
• グリッドレイアウトを作成する

エレメントを縦に配置する

エレメントを縦方向に配置する方法です。入力フォームや明細画面など、項目を上から下へ順番に配置する画面に適しています。また、見出し、入力項目、ボタンなどを順番に配置することで、ユーザを上から下へ誘導するレイアウトを作成できます。

エレメントを横に配置する

エレメントを横方向に配置する方法です。同じ種類の項目を並べたり、複数の選択肢を横並びにしたりする場合に適しています。

グリッドレイアウトを作成する

エレメントを格子状（グリッド）に配置する方法です。複数のエレメントを行や列に沿って配置するなど、自由度の高いレイアウトを作成できます。Bulma部品の「タイル」エレメントを利用すると、グリッド状のレイアウトを作成できます。

モバイルを考慮したレイアウト

PCだけでなくスマートフォンなどのモバイル端末でも利用する画面を作成する場合は、画面サイズに応じたレイアウトを考慮する必要があります。IM-BloomMakerでは、エレメントの配置や設定を調整することで、PCとモバイルの画面サイズに合わせたレイアウトを作成できます。

ここでは、モバイルを考慮した画面を作成する際によく利用する「フィールド」と「フレックスコンテナ」について紹介します。

まとめ

IM-BloomMakerでは、ボタンや入力フォーム、テーブルなどのエレメントを組み合わせ、配置や設定を調整することで、さまざまな画面レイアウトを作成できます。まずは、画面を構成するエレメントの種類を確認し、縦や横に配置する基本的なレイアウトから試してみると良いでしょう。画面の用途や利用する端末に合わせてエレメントの配置を工夫することで、見やすく使いやすい画面を作成できます。

エレメントの種類やプロパティの詳細についてはマニュアルで確認し、CookBookのサンプルも参考にしながら、実際に画面を作成してみてください。

intra-martでは、IM-BloomMakerをもっと知っていただくために、マニュアルやコンテンツなどを豊富にご用意しています。IM-BloomMakerの機能を最大限に発揮させるためにも、ぜひご活用ください。