新しいアプリをインストールしたとき、多くのアプリではチュートリアル画面が表示されますよね。

機能の簡単な説明のみに終始しているものもあれば、詳しい操作までを教えてくれるものもあります。

今回は、デザイナーにインスピレーションを与える魅力的なチュートリアル画面をセレクトしました。

iPhoneアプリのフロー説明画面

iPhone — Walk Thru by Eric Hoffman for JellyJar Co

アプリのフローを伝えています。1ページごとに綺麗にメッセージがまとまっています。

デザイナーの合作で作られたUI

Mondo Onboarding by Ghani Pradita

柔らかい色合いと、かわいいイラストが特徴的です。予想外の色使いに、インスピレーションを得ますね。

企業向けSNSのチュートリアル

Onboarding Screen by Ghani Pradita

こちらもフロー画面ですが、画面の見せ方がとても美しいですね。

教育アプリ

Onboarding Education App by Ghani Pradita

教育系のアプリですが、マテリアルデザインを基調としてシンプルにまとまっています。

サインインからチュートリアルへのモーション

サインイン画面です。なめらかな動きが気持ち良いです。モーションを研究して、インスピレーションをカタチに変えましょう!

旅行アプリのオンボード

ポップなエレメントと、色味を抑えてデザインされています。

宇宙をモチーフにしたオンボード

白と宇宙を彷彿させる濃いブルーの2色で構成されています。

位置情報を取得するアプリのオンボード

ハッキリとした色の背景と、丸みを帯びたエレメントが特徴的です。最低限の要素だけで構成されたシンプルなデザインからこそ、インスピレーションを得られますね。

旅行系アプリのオンボード

こちらも丸みを帯びたエレメントが特徴的なフロー画面です。

都市情報に関するアプリ

全体的に渋みを感じる落ち着いたトーンでまとまっています。

コーヒーに関するアプリ

ハッキリとしたオレンジをメインカラーに構成されています。影もぼかしを控えてくっきりと表現したメリハリの強いデザインです。

ソーシャルネットワークコンセプトをコンセプトにしたアプリ

Mondo Social Network Concept by Ghani Pradita

ダークな背景に明るい色のキャラクターが特徴的です。

充電モーション

ブラーのかかった背景の美しいデザインです。モーションを研究して、インスピレーションをカタチに変えましょう!

世界遺跡に関するアプリ

神秘的な雰囲気を感じる紫に近いブルーで表現されています。

アート情報を扱うアプリ

白と黒のみで構成されており、大変シンプルにまとまっています。2色のみのシンプルなデザインなのに、美術館に行ったときのようなインスピレーションを得ますね。

モバイルアプリでの機能解説

Onboarding Illustration by Ghani Pradita

かわいらしく、表情豊かなキャラクターが特徴的です。

ロック画面の解説

Onboarding animation by Chris Bannister

電子キーのロック解除画面ですが、スタイリッシュにデザインされています。

サンタになれるアプリケーション

クリスマスのプレゼントをおねだりするアプリです。サービス自体にユニークさはもちろん、ポップ過ぎないけれどかわいらしいデザインにインスピレーションを受けます。

SNS連携の説明

補色を使い、コントラストを強めたデザインです。

サポート内容の説明

色数少なくまとめて、マテリアルデザインを基調にしています。

iOSのプロフィールのUI

使用している色数は多いのですが、使用箇所が少ないのとトーンが揃っているのでシンプルなデザインのなかでアクセントになっています。

ユニークな動きをするインタラクション

珍しいインタラクションが特徴的です。おしゃれですね。

体重管理アプリのオンボード

体重計のメモリが描かれています。シンプルに表現していますが、きちんと伝わるデザインですね。

キャンプアプリのオンボード

グラデーションや影をしっかりつけて、少し立体的なデザインです。

料理アプリの使い方

白と黒を基調にし、インタラクションにも高級感が漂う静的なデザインです。

ショッピングアプリのフロー説明画面

補色に近い色を使用して作られたアイコンが特徴的なフロー画面です。

ウォーキングSNSアプリのオンボード

MyLocali — How it works by Maria Shanina for PlainwhiteMaria Shanina for Plainwhite

写真にブルーを重ねて、全体的に青みを帯びたデザインです。写真が美しいですね。

マテリアルデザインを活用したオンボード

マテリアルデザインを基調にしながら、雲や水の透け感もしっかり表現されています。

Googleアプリのオンボード

マテリアルデザインを基調にデザインし、インタラクションを施したデザインです。昔のグーグルのロゴが使われていますが、古さを感じません。

まとめ

いかがでしたでしょうか? インスピレーションを受けるデザインは見つかりましたか?

今回は情報をまとめる、ホワイトスペースが有効活用されている例が多かったですね。
是非、モバイル画面のデザインで参考にしてしてみてください!

(翻訳:Yuri Tanaka)

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ