インスピレーションが湧いてくる！シンプルでクールなモバイルアプリのデザインモックアップ18選

更新日: 2017年04月18日

マイページにお気に入り

モバイルアプリケーションをデザインするときに気をつけたいのは、その画面サイズの小ささを生かしてどのようにデザインするのかを考えることです。

画面サイズが小さければ制約も大きくなってしまうと思ってしまいますが、実は世界の前線で活躍しているデザイナーたちはそうした制約に縛られることなく、自由な発想でデザインをしています。

今回は、デザインの共有ができるSNS「dribbble」から、インスピレーションがどんどん湧いてくるモバイルアプリのデザインをご紹介します。

色使い、UIの形、空間の使い方など、どれを取っても参考になるものが多いはずです。
面白そうなアイデアはぜひご自身のデザインに取り入れてみてください。

シンプルでクールなモバイルアプリのデザインモックアップ

1. 白とグレーを基調としたクリーンなUI

▲ #2 Invisible series -Food delivery app by Johny vino™ - Dribbble

たくさんの色を使わずにデザインをする「コンプレクション・リダクション」というデザイン手法がモバイルアプリデザインの中でも注目を集めています。
白のスペースを使いながら、ビビッドなピンクをアクセントカラーに加え、クリーンなイメージを与えています。

参考：
デザインはもっとシンプルに！無駄な要素を削ぎ落としたUIデザイン「コンプレクション・リダクション」とは？

2. スムーズなログインページのアニメーション

▲ Landing Experiments. Sources sorted by complexity by Yaroslav Zubko - Dribbble

アニメーションを少しだけ取り入れるのは、ユーザーに心地よい体験を与えて離脱率を低くする効果があると言われています。
多くのアニメーションがだいたい0.5秒から1秒に収まっていることから、操作によって起こるアニメーションのことを「マイクロインタラクション」と呼びます。

参考：
マイクロインタラクションとは？UXに取り入れる際の5つのポイント

3. データドリブンなUI

▲ Articlex Screens by Raaz Das ? - Dribbble

本文のUIに統計グラフやフォロー数などを組み込むモバイルアプリも増えてきました。
統計グラフをタブで切り替えたり、詳細を表示するボタンを設置したりして、データを可視化するようなアイデアも取り入れてみましょう。

4. 縁取りのないデザイン

▲ Daily by GISION - Dribbble

まわりのマージンをとらない代わりにUIはシンプルにすることで、クリーンな印象を与えることができます。
こちらも1番目にご紹介したのと同様に、色を使いすぎないほうがかえって爽やかに見えるでしょう。

5. 大胆なタイプフェイス

▲ ART app by KKSan - Dribbble

ロゴデザインがしっかりとしていれば、まわりのUIを並べるだけでも形になってきます。
こちらのデザインも白黒調になっておりシンプルなUIになっています。

6. 画面をはみ出したカルーセル

▲ Travel View & Empty State by Sajad - Dribbble

並んだ画像をフリックで動かすことのできるUIを「カルーセル」と呼びます。
もともとは飛行機の荷物を受け取るときのベルトコンベアーのことを「カルーセル」と呼びます。
モバイルアプリは画面が小さいですが、左右の画像を一部だけ表示して、下に小さな点を使ってナビゲーションを設けることで、画面の小ささのデメリットを克服しています。

7. ダークカラーのUI

▲ [Highstats by Félix Patete - Dribbble]

SpotifyやNetflix、AWAやAmazon Prime Videoなど、ダークなUIを採用するモバイルアプリも増えてきました。
ダークカラーを採用すると没入感が生まれ世界観に引き込まれる印象があります。
背景のダークカラーにも若干着色されており、ダークブルーとUIのブルーが同系色なので、触っていても心地よいです。

8. ダブルメニュー

▲ Double Menu by Yaroslav Zubko - Dribbble

こちらのモックアップでは、メニューを階層化する面白いUIを採用しています。
ハンバーガーメニューを押した後、見ている画面をウィンドウに見立てて小さく表示し、別の２階層のメニューが登場します。

9. チケット

▲ Cinema Club Tickets by Yaroslav Zubko - Dribbble

映画や飛行機、あるいは飲食店のクーポン券などのように、アプリからの来客を想定している場合は、チケット発行を行うのも方法にひとつです。
実際にQRコードを表示するだけではなく、チケットデザインにして有効期限まで書いておけば、ユーザーが行動に写しやすくなるかもしれません。

10. 爽やかなローディングアニメーション

▲ Loading Animation by Minh Pham - Dribbble

ユーザーは何もせず待たされることを極端に嫌いますが、ここでもエンゲージメントを高める方法はないか考えてみましょう。
待ち時間にどれだけ処理が進行しているのかをローディングアニメーションで表示することで、残り時間が推測でき、ユーザーのストレスを緩和することができます。

11. コンテクストメニュー

▲ Contextual Menu for quick word lookup by Minh Pham - Dribbble

パソコンで右クリックをするときに出てくるメニューは、必要な情報だけをメニューに表示するので「コンテクストメニュー」(Contextual Menu)と呼ばれます。
パソコンでは表示されるコンテクストメニューを、モバイルアプリでも実装できたら便利です。
このモックアップでは、アイテムを長押しすることでコンテクストメニューを表示しています。