Facebook、Twitter、Instagram… 定番iPhoneアプリに見る、スマホアプリの定番UIパターン

このエントリーをはてなブックマークに追加

ウェブ業界は「真似ごと」が本当にお好き。Instagramがはやれば写真共有アプリが次々と登場し、Pinterestがはやれば似たようなモノ系SNSアプリが湧いて出てきたように生まれては消えていきます。いまごろはLINEっぽいなにかが作られているのでしょうか。

この「真似ごと」という言葉。ウェブ業界ではなにかを揶揄する言葉として使われることが多いのですが、ことスマホアプリのUIについてはすこし趣が変わります。UIの設計においてはユーザーが「慣れ親しんでいる」操作であることが重要視されます。「こう操作すると、こう動くはず」ユーザーが直感的に理解することが求められるUIは、ときとして「真似ごと」が鉄則にさえなりうるのです。

本記事では、後発のスマホアプリにいい意味で「真似ごと」された、つまり定番化したUIパターンをご紹介します。

1)Facebookのメニューボタン

Facebookアプリのホーム画面左上にあるメニューボタン。これをタップすると、下に隠れていたメニューが登場します。スマホという限られた画面サイズ内で、遷移させずに多くの機能を格納する際に用いる定番のUIです。

Facebookのメニューボタン

2)Twitterのプルリフレッシュ

Twitterのタイムラインを最新の状態に更新するために用いるプルリフレッシュ。ボタンで押して更新するよりも、直感的でかつ待っている間のストレスを軽減してくれるUIです。

Twitterのプルリフレッシュ

3)Instargamのフィルター切り替え

Instargamで写真にかかるエフェクトを切り替えるためのフィルター切り替え。左右方向のスライドでエフェクトを確認しながら選択する、写真系アプリの定番UIです。

Instargamのフィルター切り替え

もうひとつ、Instagramから。

4)タイトルの切り替え

時系列でコンテンツを見せる場合の、コンテンツのタイトル(Instagramでは投稿者の名前と経過した時間)が書かれたバー。古いバーが、新しいバーを押し上げるというUIです。

タイトルバーが上がってきて...

前のタイトルバーを押し上げる。

5)Pinterestの固定バー隠し

Pinterestはフィードされた画像を最大限のサイズで楽しんでもらうために、スクロール時は固定バーを隠す、というUIを採用しました。

スクロールすると...

固定バーが消える。

最後に…

6)my365のアコーディオン

唯一、国産のアプリmy365のアコーディオンUI。サムネイル画像をタップすると、画像が全表示になります。

サムネイル画像をタップすると...

アコーディオンで広がる。

いかがでしたか?「ほかのアプリでも使ったことある!」「これはほかのアプリでも採用するべきだ」そんなUIを見つけられたのではないでしょうか。

繰り返しになりますが、スマホアプリUIの設計においてはユーザーが「慣れ親しんでいる」操作であることが重要視されます。定番のUIパターンを頭に入れながら、ご自身のアプリに適材適所で採用し開発することをおすすめします。

これを繰り返しているうちに、これまでだれも体験したことのない、「真似ごと」なんて言わせないスマホアプリのUIを描けるようになるのかもしれませんね。

このエントリーをはてなブックマークに追加

This entry was posted in blog. Bookmark the permalink. Trackbacks are closed, but you can post a comment.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

トップ | tadashiku, Incについて | 製品・サービス | 実績のご紹介 | ニュース | ブログ | パートナーシッププロジェクト | お問い合わせ