UIはバラエティーに富んだUIコンポーネントを多数取り揃えています。これらのコンポーネントは即利用可能な状態で提供され、モバイルアプリ向けに最適化されています。コンポーネントの組み合わせ方は無限ですが、いざアプリを作成しようとなるとコンポーネントをどのように組み合わせて使うか迷ってしまう方もおられるかと思います。UIコンポーネントを組み合わせてUIを構築する方法を解説します。画面構成UIを構築する際、アプリの画面(ページ)構成を最初に決める必要があります。今回は既存アプリをお手本としているのでこの手順は省けます。お手本とするアプリでは複数の画面が使用されていますが、各画面のデザイン(実装されている機能も含め)に大差はないので、次の3つの画面に絞って解説します。コンポーネントの組み合わせを簡単に解説していきます。詳細に関してはこちらのTutorialページをご確認ください。注意:お手本のアプリに沿ったUIを構築することがこの記事の目的ですが、必要な範囲で少しだけ手直しを加えている箇所もあります。ホーム画面(BROWSE画面)最初に解説するのはホーム画面です。この画面では各種プレイリスト(おすすめプレイリストの一覧、カテゴリー別、ジャンル&気分別のプレイリスト)を表示し、好みに応じてユーザーが曲を選択できるようになっています。画面構成は至ってシンプルです。UI要素で構成されています。画面上部にはカルーセルを配置し、おすすめプレイリストを一覧化しています。表示するアイテムは水平方向にスクロールできます。アイテム数は固定しています。1</div></ons-carousel-item>[...]</ons-carousel>[...]カルーセルの下には標準的なリストを垂直方向に配置します。このリストにはカテゴリー別に分類したプレイリストを表示します。Charts</ons-list-item>[...]</ons-list>[...]画面最下部にはジャンル&気分別にプレイリストをカテゴリー化して、グリッド表示しています。要素で構築されています。Playlists(おすすめプレイリスト)またはGenre&Mode(ジャンル&気分)のうちいずれかのアイテムをタップすると、プレイリスト画面が表示されます。ホーム画面中央の垂直リストは無効化されているためタップしてもなにも起こりません。この画面を構成しているコードの詳細はこちらのTutorialページをご確認ください。プレイリスト画面プレイリスト画面は2つの領域から構成されています。1つ目はカルーセルを配置した画面の上半分の領域です。カルーセルを使用してプレイリストの詳細(ジャケット写真、詳細など)を表示します。カルーセル上で表示する2つのページ(アイテム)を用意します。最初のページでは、プレイリストのジャケット写真、プレイリスト名、フォロワー数、アーティスト名を表示します。2番目のページでは、プレイリストに関する詳細、アップロード日、合計演奏時間を表示します。AUTHOR</div></div></ons-carousel-item>[...]</ons-carousel>[...]画面の下半分の領域にはプレイリスト内の曲が一覧表示されています。一覧の一番上にはプレイリストをオフラインで再生するか否かを設定するトグルボタンを配置しています。icon="ion-ios-more,material:ion-android-more-vertical"></ons-icon></div></ons-list-item>[...]</ons-list>[...]一覧内の曲目の右端には3つのドットが並んだアイコンが置かれ、iOSの場合にはドットは水平に、Androidの場合には垂直に表示されます。プリフィックスとして付けたマテリアルデザイン向けのアイコン(Androidのアイコン)を指定します。Play!]ボタン(<ons-button>)を配置しています。要素を使用して再生中の曲情報が画面最下部に表示されるようにしています。シンプルですが興味深いコンポーネントが複数使用されています。これらのコンポーネントを使用すると上記のような画面を簡単に作成できます。要素(他の要素を囲むためのラッパーとして使用)を配置しています。この方法で上記のような再生画面を簡単に作成することができます。ボタンを配置しています。いずれも音楽プレーヤー上でよく使用されている機能です。使用し必要に応じて列(表示幅)を分割しています。この画面はシンプルにできていますが少し手を加えるだけでさまざまな機能を追加できます。囲めばカルーセルをスワイプすると他の曲を演奏するように作り込めます。その他のサンプルアプリ今回ご紹介させていただいた解説がアプリをデザインする上で参考になれば幸いです。今回は音楽配信アプリをお手本として画面を構築しましたが、人気のアプリをお手本とした他のデザインパターンも作成してみました。詳細はこちらのTutorialページでご確認ください。皆様の開発に役立つことを祈っています。UIはハイブリッドアプリ向けUIを作成するためのオープンソースのライブラリーです。詳細はGitHubページをご確認ください。Watabeフリーランスの翻訳家。インターネット・通信業界で10年ほど翻訳を経験したあと、2013年からフリーランスに。直訳ではない、わかりやすい翻訳を心がけています。