画面レイアウトの基本をマスターしたい
kodamad
この記事では、IM-BloomMakerで行う画面レイアウトの基本について紹介します。
IM-BloomMakerでは、画面レイアウトを作成するためのエレメントを豊富に用意しています。エレメントをうまく組み合わせることで、誰でも見やすくて使いやすいアプリケーション画面をデザインできます。IM-BloomMakerの豊富なレイアウト機能を使いこなして、ユーザビリティが高い画面を作成できるようになりましょう。
基本の構成要素であるエレメント
IM-BloomMakerでは、アプリケーション画面を構成する部品をエレメントと呼びます。エレメントを理解することで、画面表現の幅が広がり、きれいなレイアウトを作成できるようになります。
ここでは、画面レイアウトを構成する3つのエレメントについて紹介します。
シンプルな画面をデザインしたい：標準部品
標準部品には、画面デザインの基本要素が含まれています。入力フォーム画面や明細画面といったシンプルなデザインを作成する場合に適しています。
intra-martの画面デザインを使いたい：imui部品
imuiとは、intra-martのUIコンポーネントのことを指します。imui部品には、intra-mart Accel Platformが提供する画面デザインの要素が含まれています。intra-martで使用しているデザインに合わせて画面を作成したい場合は、imui部品を使用します。
リッチな画面をデザインしたい：Bulma部品
Bulmaとは、オープンソースで開発されているCSSフレームワークのことを指します。Bulma部品には、華やかで見やすい配色と配置が可能な画面デザインの要素が含まれています。そのため、カスタマイズをしなくてもデザイン性の高い画面が作成できます。また、intra-mart Accel Platformのテーマに合わせた配色で、Bulma部品を使用することも可能です。
エレメント一覧
上記で紹介した各エレメントには、それぞれレイアウト・繰り返し・フォーム部品などが用意されています。ユーザ操作ガイドでは、各エレメントの表示イメージとプロパティの設定値が一覧で確認できます。まずは、エレメントで表現できるデザインについて確認してみましょう。
基本のレイアウト
ここでは、基本的なレイアウトの作り方について説明します。
エレメントの配置は、HTMLの要素に関連します。たとえば、エレメントを縦に配置すると、HTMLのブロックレベル要素を構成するタグが付与されます。タグが付与されることにより、Webブラウザ上で画面として表示されます。
エレメントを縦に配置する
縦方向にエレメントを配置する方法で、フローに従って上から下へと誘導する場合に適しています。
レイアウトの作り方（縦に並べる編）
CookBookでは、エレメントを縦に並べてレイアウトを作成する際に、使用できる部品と使用例について確認できます。
エレメントを横に配置する
横方向にエレメントを配置する方法で、同じ要素を並べて選択させる場合に適しています。
レイアウトの作り方（横に並べる編）
CookBookでは、エレメントを横に並べてレイアウトを作成する際に、使用できる部品と使用例について確認できます。
グリッドレイアウトを作成する
エレメントを格子状（グリッド）に配置する方法で、自由にレイアウトを組みたい場合に適しています。Bulma部品を利用します。
Bulmaタイルの利用方法
CookBookでは、Bulma部品の「タイル」エレメントのチュートリアルやポイントについて確認できます。「タイル」エレメントを使用すると、自由にグリッドレイアウトを構築できます。
モバイルを考慮したレイアウト
モバイルに対応したアプリケーション開発を行う場合は、ワンソースでマルチデバイスで利用できることが求められます。IM-BloomMakerでは、モバイルでも使いやすくて見やすい画面をレイアウトすることが可能です。
ここでは、モバイルを考慮したレイアウトについて、フィールドとフレックスコンテナの利用方法について紹介します。
フィールドの利用方法
CookBookでは、Bulma部品の「フィールド」エレメントや「水平フィールド」エレメントの違いと使用方法について確認できます。PCやスマートフォンの画面の幅に合わせて、表示を変える場合は「水平フィールド」エレメントを、表示を変えない場合は「フィールド」エレメントを使用します。
フレックスコンテナの利用方法
CookBookでは、「フレックスコンテナ」を使用することで、スマートフォンの画面でもきれいにテーブルを表示する方法について確認できます。
まとめ
IM-BloomMakerのエレメントを活用すると、作成したい画面のイメージにあわせて、自由にレイアウトができるようになります。複数のエレメントを組み合わせることにより、見やすく使いやすいインターフェースを実現できます。自由度が高い分、機能が豊富に用意されていますが、まずはエレメントを配置してみて、どのような表示になるのかを実際に試してみることをおすすめします。
intra-martでは、IM-BloomMakerをもっと知っていただくために、マニュアルやコンテンツなどを豊富にご用意しています。IM-BloomMakerの機能を最大限に発揮させるためにも、ぜひご活用ください。
