富山のホームページ製作会社・グリーク スタッフブログ - ブログ -
  1. グリークトップ
  2. プログラマー
  3. ブログ

真似したくなるアプリデザイン・エフェクト12選

1100x250 のコピー

Dribbleで見つけたアプリUIのコンセプトデザインを紹介します。また、作る側の目線でみたときにどうするか、また参考になるライブラリ(主にSwift)も併せてコメントしています。

実現可能かどうかはさておき、以下ご紹介するデザインはどれも見ていて楽しいですね。
ほんのわずかな細かいところのこだわり一つで大きくアプリの印象がかわります。

iPhoneが登場した頃に比べ各アプリも進化していますし、利用者の目も肥えていることで、ストーリーボード通りの単調な動きでは ユーザーを驚かせることはできなくなってきています。

「引っ張って更新」や「スワイプで画面が戻る」などは元々一部のアプリ開発者が始めたものですが、今となってはデファクトスタンダードになり、 OSにも組み込まれました。

アプリユーザーの共通認識を崩さないようにしつつ、面白い動きを取り入れることがポイントになるのではないでしょうか。

ログインスクリーン

shot-login-1 Login & Home Screen
by Anton Aheichanka for InVision
Kazuyuki Hayashi
ボタンのローディング表示から次の遷移までの流れが素晴らしい!IBAnimatableを参考にするといいかもしれないですね。
shot-login-2 Login Interaction
by Ehsan Rahimi
Kazuyuki Hayashi
サインインまでの遷移は TweenControllerを使えそうです。テキスト入力欄の動きは LTBouncyPlaceholderが役に立つかも。

メニュー/ナビゲーション

shot-menu-1 Filter Menu
by Anton Aheichanka for InVision
shot-menu-2 Secret Project
by Anton Aheichanka for InVision
Kazuyuki Hayashi
上の2つは基本的に同じで、メニューボタンを固定表示しタップで円状に展開させます。 どちらもポイントとなるのが、展開時にメインコンテンツの邪魔をしないように配置されていることです。 個人的には、ぱっと見でアイコンが何を示しているのかわからないかなと思いました。
shot-menu-3 Update Flooz App
by Barthelemy Chalvet for AgenceMe
Kazuyuki Hayashi
動きが近いものとしては LiquidFloatingActionButtonがおすすめです、これもまた素敵です。
shot-menu-4 UI Navigation Concept
by Ludmila Shevchenko
Kazuyuki Hayashi
坂を下って跳ね返る動きは見ていて楽しいです。これ作ってと言われたら…お察し下さい。
shot-menu-4 switching
by Rex Han
Kazuyuki Hayashi
これはおそらくスケッチアプリで、下のアイコンから操作の種類を選ぶものですね。
アイコンをタップしたら何ができるのか、いまはどれを選択しているのかが非常にわかりやすいです。
左右の矢印はアンドゥ・リドゥですね。
説明無しですぐにつかえそうなデザインです。参考にしたいと思いました。

Pull down to refresh (引っ張って更新)

shot-login-1 Pull Down to Refresh
by Hoang Nguyen
Kazuyuki Hayashi
UITableViewやUIScrollViewを引っ張って更新する仕組みはいまではお馴染みとなりました。 iOS標準のインジケータもシンプルで良いのですが、この2つは特に引っ張り感の表現がすばらしいです。

その他目を引く動き

shot-login-1 GIF for the Weather App
by Sergey Valiukh
shot-login-2 Create Process
by Barthelemy Chalvet
shot-login-2 City intro animation
by Vasjen Katro
Kazuyuki Hayashi
上: 何度も触りたくなるような動き、特にお天気アプリの方は実用性も兼ねています。ただ1日雨の日はあまりおもしろくなさそう・・・。
左: Webでも見かけるパララックスエフェクトです。ただ、動きの滑らかさはどうがんばってもアプリには勝てません。
グリークではアプリエンジニアを募集しています。
Wantedlyからお気軽に声をかけて下さい。

この記事を書いたスタッフ
Kazuyuki Hayashi
Symfony / Node.js / React.js / Swift を中心にテクノロジー系の記事を書きます。趣味はコーヒーです。