魅力的で使いやすいコンテンツUIを作るには

忙しい方へ　〜記事の要約〜
魅力的なアプリを作るためには、豊富で一貫性のあるコンテンツUIを作ることが重要です。具体的には、コンテンツの構造を整理し、属性を洗い出し、目的に合わせた階層構造を選択し、コンテンツを見せるUIの構成要素を考え、最後にデザインを作成します。これらのステップを踏むことで、ユーザーにとって魅力的で使いやすいアプリを作ることができます。

はじめに

私は最近ポッドキャストにハマってるんですが、よくよく見ると同じ音声コンテンツでも10パターン以上の多様な見せ方をしていることに気づきました。

同じポッドキャストでも、様々な見せ方がある

このように魅力的なアプリは総じて、コンテンツの見せ方が豊富で、かつ一貫性が保たれているものだと感じます。

今回は、そのように魅力的で豊富なコンテンツUIを作るためにはどのようにすればいいのか、自分なりの方法を紹介したいと思います。

魅力的なコンテンツUIを作るには

1.対象とするコンテンツの構造を整理する

まずは、対象とするコンテンツがどのような構造になっているのかを整理します。

例えば映画の場合、大体このような構造になっています。

映画の情報構造

魅力的なコンテンツを作る上では、対象とするものを理解することが第一。このようなマッピングは理解を助けるのに役立ちますし、全体のナビゲーションを整理するのにも役立ちます。

あとは、有識者やユーザーに話を聞いたり、実際に自分で体験してみることでよりブラッシュアップできるとよいと思います。

2.属性を整理する

次に、もう少し細かい構成要素を洗い出します。

映画の中の「作品」をコンテンツとして見せたい場合、もう少し細かい構成要素（属性）を整理する必要があります。ざっくり整理すると「作品」の属性は以下になりました。

ここも、有識者やユーザーの意見を取り入れながら、より正確なものにしていけると良いと思います。

映画作品に含まれる属性

これからコンテンツをUIとして視覚化する上では、
これらの属性の中で、誰に何をどのように見せるか、という方針で考えていくことができます。

3.目的に合わせて属性の階層構造を選択する

ユーザーのニーズやメンタルモデルに合わせて、どの属性を表示するか決定します。その上で、各属性の優先順位を考えます。

例えば、とにかく人気の映画が見たい、という人には、「イメージ」、「タイトル」、「ジャンル」の属性を見せます。

また、人気俳優の映画を見たい、という人には、「イメージ」、「タイトル」と「役者」の属性を見せます。

特定の役者1人にフォーカスを当てるのなら、「概要」や「キャラクター」を追加して特集してみても面白いかもしれません。

ニーズごとに表示する属性を選択

4.コンテンツを見せるUIの構成要素を考える

では、実際にUIに落とし込んでいきたいと思います。今回は詳細ではなく一覧で見せる場合で考えます。

ほとんどのコンテンツはキービジュアル、カード、リストのどれかで表現されるかと思います。
なので、それらがどのように構成されているのかを考えると、表現に幅を利かせやすくなります。

リストの場合、リストコンテナの中に、リストアイテムが入る、という構成になります。
そして、リストアイテムにはサムネイルやアイコンなどの視覚情報とタイトルなどの文字情報が入ります。

カードはリストアイテムにそれを囲う境界がついたもの、キービジュアルはリストコンテナ自体をリストアイテムにしたもの、と考えることができます。

リストの構成要素

あとは、ここまで整理した情報をそれぞれのUIに当てはめていきます。

5.階層構造をUIパターンに当てはめる

先ほど選んだ属性をUIパターンに当てはめます。

このときに、それぞれのユーザーや目的を意識しながらどのように表現すればいいか、どの属性を優先的に見せるかも考えます。

6.最終的なデザインに仕上げる

あとは実際にUIを作成します。サクッとやってみるとこんな感じになりました。

おすすめ作品のUIパターン

役者がわかるUIパターン

特定の俳優を特集するUIパターン

このように、目的や属性、階層構造を意識した上でコンテンツUIを作成すると、自然と豊富なパターンが出来上がりました。

7.いろんな組み合わせを試す

あとは、ユーザーニーズや目的を考えながら、様々な組み合わせを試します。

構造や属性が整理されていると、いろんな組み合わせや表現が頭に浮かんできますし、何を試したか、試してないかもわかりやすくなり、運用がしやすいところもポイントかと思います。

映画コンテンツのパターン

コンテンツUIを管理する

ここまでで様々なパターンを作ってきましたが、どんどん別パターンを増やしてしまうと、一貫性が損なわれてしまいます。

なので、作ったパターンを大まかに整理します。
冒頭でポッドキャストのコンテンツを分類したように、
「ビジュアル情報⇆情報重視（文字情報）」、
「訴求重視⇆一覧性重視」の２軸で整理するとわかりやすいと思っています。

できたUIパターンをマッピングする

このようにマッピングをしておけば、新しいパターンができたときに、既存のものと役割が被らないかを吟味できますし、
マッピングで埋まっていない部分にフォーカスして新しいパターンを考えることもできます。

まとめ

魅力的なUIを作ろうとすると、つい表層部分から考えてしまいますが、情報構造の段階から整理して考えられると、より魅力的で一貫性のあるコンテンツUIが作成できると思います。

今回のやり方はあくまで１つの例なので、それぞれの環境を考慮しながらいろんなやり方を試していただければと思います。