読者です 読者をやめる 読者になる 読者になる

きしこの研究

日々の勉強をアウトプットする用だよ。

アプリ研究⑥ 〜トップ画面〜

 

今回は、アプリの【トップ画面】についてです!

 

トップ画面は大きく分けて4つあるそうです。

私が普段利用するアプリをカテゴライズしてみました。

 

①ポータル

情報が多く、リストのコンポーネントを効果的に配置することが大切。

 

Yahoo!

アイコン、タブバー、検索バー、垂直型リストで構成されている。

・アイコンは、フラットデザイン。

・垂直型リストの、ニュースタイトルは一行でおさまるようにしている。

・サムネイル画像はどの記事にも絶対に表示される。

f:id:kisico0418:20170104054612j:plain

 

UX MILK・グノシー・smart News

ニュース・マガジン系アプリ。

・ぱっと見、デザインに差異はない。

・smart Newsだけ、どの記事も同じ大きさで表示される。

・なんとなく、サムネイル画像は左のほうがバランスがいいように見える。

・2行で文章はまとめる

・グノシーは三連ラインをタップすると天気や占い、おすすめサービスなど表示されるのに何を示しているのかわかりづらく勿体無い。

(UX MILKはメニューと書いてありわかりやすい。)

f:id:kisico0418:20170104054613j:plain f:id:kisico0418:20170104054614j:plain

f:id:kisico0418:20170104054616j:plain

 

KURASHIRU・クックパッド

・文章よりも、写真。とにかく料理系アプリは、写真が一番目立つようにデザインされている

・検索バーが上にもあり、下のメニューバーにもある。

・ホームがレシピだったり、マイページがキッチンだったり言葉にも工夫されている。

f:id:kisico0418:20170104054615j:plain f:id:kisico0418:20170104054611j:plain

 

 

②ユーザー

Instagram・みてね

・正方形の写真で画面が埋め尽くされるされている。

・特にInstagramはプロフィールやステータス情報などが表示されている。

・写真で埋め尽くされると文字とのバランスやアイコンの意味を一瞬でわかってもらう必要がある。

f:id:kisico0418:20170104054608j:plain f:id:kisico0418:20170104054606j:plain

 

messenger

・アイコンとメッセージが表示されている。LINEと要素はほぼ一緒だが、区切り線がないため、シンプルで余白が多い印象を持つ。

・最近のやり取り、オンライン中、お気に入り・履歴が一画面で確認できる。

・(いつの間にか、角丸になっていた…!)

f:id:kisico0418:20170104054609j:plain

 

ピンタレスト

・一画面に表示される画像は少ない

・角丸加工されていることで、柔らかい印象をもつ。

・アイコンもシンプルで三連ラインなども無く、画像に集中して見ることができる。

・ただ、出典元やユーザー名が表示され長ったらしい印象を持つ。画像だけを見たい気持ちもある。

f:id:kisico0418:20170104054610j:plain

 

③EC

チケットキャンプ

・いかに購入してもらうかが重要

・探しやすい&具体的な数字が出ることで安心感がある。

・検索バーと垂直型リスト、スライドショー、メニューバーで構成

・ランキングや売買の具体的な数字がトップページで見えることで安心感や枚数が少ない場合二度手間にならずに済む。

 

f:id:kisico0418:20170104054620j:plain

 

④コーポレイト

企業の顔となる画面(このアプリのチョイスがあっているか不安)

・企業ロゴは絶対に上部に表示。

・画像で表示

・ケンタッキーは画像で表示枚数が多いので一度に多くの情報を吸収することができるが、マクドナルドは縦長の画像が続くので長く感じる。(若干広告に見える)

f:id:kisico0418:20170104054617j:plain f:id:kisico0418:20170104054619j:plain

 

SUUMO

・メニューバーはなく、アイコンで表示

・検索バーではなくトップページ全体が検索画面。

・イラストを多用し、ユーザーに親近感を持たせている。

f:id:kisico0418:20170104054618j:plain

 

 

まとめ:

情報の整理と優先順位がトップ画面では重要。

文字量が多いと圧迫感があって読まないし、逆にスカスカだとページ枚数が増えるし

バランスが難しい…。

同ジャンルのアプリで比較するとやはり設計は似てるんだなと、再認識。

差別化するためにも、言葉ひとつ配色ひとつ、それぞれのアプリの個性を出していかないといけないと感じた。