2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

モバイルコンテンツのパターンの紹介 (UI/UXデザイン)

Posted at

UI/UXデザインを勉強中なので、今回はモバイルコンテンツのパターンを書いてみたいと思います。私は元々グラフィックデザインをしていたので、見やすく、分かりやすく伝えることは意識していましたが、チラシ、ポスター、パンフレットなどは手に取って見る、ページをめくるという動作は当たり前のことなのでユーザーをどう誘導するかを意識させることはあまりありませんでした。
webの世界に来てみて、機能としては複雑化しているのでパッと伝えるということは難しく、携帯の機能やサイトの見方などを理解してもらった上で、サイトをみてもらう努力が必要なのでユーザーがストレスや負担にならないようにすることは必須なのだと感じています。
モバイルコンテンツのパターンをいくつか紹介します。

 
 

01.階層タイプ

こちらは一般的な仕組みです。
ピラミッド構造になっており、インデックスページとサブページといった親子関係になっています。ユーザーのストレスにならないように階層は深くしない配慮が必要です。検索が必要なサービス、商品分類やニュース記事、FAQなどの大量の情報をまとめることに適していますが、ナビゲーションやステップが増えると逆にストレスになるので考慮する必要があります。
UIデザインとしてはナビゲーションが大事になってくるので、ナビゲーションを必要以上に増やさず、項目を整理してコンパクトにまとめる事が必要になります。
kaiso.png

 

02.ハブ&スポークタイプ

空港のように1つの起点(ハブ)を中央にコンテンツがあり、ポータルサイトを起点に他カテゴリと結びつけます(スポーク)。階層タイプではなく、独立した組織形態やリンク集コンテンツなどに使われます。ヤフーなどの情報系サイトがあります。
色々な機能をまとめる事ができ、独自のメニューが作りやすいです。
マルチタスクの場合は、スポーク間の行き来がしにくいことや戻るナビゲーションが機能しないとハブも機能しないことがあげられます。
hab.png

 

03.弁当箱タイプ

お弁当箱のように色々な情報を一つにまとめて一覧で見ることができるタイプです。アプリの最初の画面や天気、カレンダー、時計などが一覧で見れるスマホの画面が例として挙げられます。
色々な情報を一覧で一度に見る事ができるし、コンテンツに直接いける便利さがありますが、スマホよりもタブレットなどの大きな画面の方が適している点があります。
bento.png

デザインは「思いやり」

まだ新人だった時に、先輩にデザインは「思いやり」だと教わってきました。
媒体が変わっても機能が複雑になってもこの考え方は今後変わることはないと思うので、ユーザーが見やすい、分かりやすく、利用したいと思ってもらえるようにUI/UXデザインを勉強していきたいと思います。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?