アプリの起動画面の体験デザインはどのようなものがあるか

  • 2022.11.8
  • アプリ
  • デザイン

アプリ,起動画面

アプリを起動させた時にユーザーが1番最初に触れる画面は、アイコンと同じようにアプリの「第一印象」になります。 第一印象でユーザーの気持ちを掴むことは、ブランディングにおいて間違いなく重要です。

だからこそ、起動画面はユーザーの気持ちに寄り添って、ユーザーのことを考えたデザインが求められます。

今回は、アプリの起動画面の体験デザインを4つ紹介していきます。 ぜひ最後までご覧ください。  

【起動画面もデザインが重要】

起動画面

大抵のユーザーは起動画面の「デザイン」でそのアプリへの印象を決めるでしょう。 良いデザインでユーザーの心を掴めれば、アプリ利用への誘導が成功します。  

【アプリ起動画面の成功例】

〈ウォークスルー〉

アプリ起動後すぐにアプリの使用に移させるのではなく、スライドでアプリの特徴や使い方などを段階的にユーザーに理解させる手法を「ウォークスルー」といいます。

一般名詞として「通りぬけ」という意味で使われているので少し紛らわしいですが、デザインの1つです。 イメージを交えつつテキストで伝えるのが、一般的なウォークスルーの形態です。 画面をスワイプしていくと、それに合わせてアニメーションでイメージがついてきたりするようなウォークスルーも時折あります。  

説明が丁寧にできるウォークスルーですが、導入する際には注意点もあります。

それは、ウォークスルーは大抵のユーザーにとって「うっとうしいもの」だということです。 ユーザーに対してアプリの魅力を表現したかったり、使い方を理解してほしいという作り手の欲求がある反面、多くのユーザーは「早くアプリを使いたい」と考えていることは否定できません。  

そのことを念頭におき、ウォークスルーを導入するなら、「文字は多すぎず簡潔に」「最低限の必要事項のみ」「イメージはわかりやすく」この3つを意識しつつ作成すると良いでしょう。

ウォークスルーを使用しているアプリ Sonomy、XY  

〈コーチマーク〉

アプリの通常画面の上にオーバーレイやポップアップが表示され、各ボタンの機能やそのコンテンツが何を意味しているかなどを、矢印などを用いたりして説明する手法のことを「コーチマーク」といいます。

操作画面や操作方法が複雑になってしまい、「ユーザーにとってこの画面はわかりづらいものかもしれない」と判断したときは導入するといいでしょう。  

ただし、この手法もウォークスルーと同様に大抵のユーザーには毛嫌いされ、結局よく読まれないことも多いので注意が必要です。 対策としては、初めから全部のボタンを説明せず、ユーザーがタップしたボタンについてのみ説明を加えるコーチマークを出すなどの、一工夫を加えると良いです。

コーチマークを導入しているアプリ

GYAO、Hulu  

〈エンプティステート〉

コンテンツが空のときに表示する説明のことを「エンプティステート」といいます。

コンテンツがないからといって空白にしておくと、ユーザーは物足りなさを感じてしまうでしょう。 そこで、エンプティステートがユーザーからの関心を保たせるポイントになるのです。  

よって、エンプティステートの目的は「今はコンテンツがないという情報」「次にすべきアクション」を伝えることです。 何か特定の操作をしないと次のステップに進めないようなアプリには、エンプティステートがあったほうがユーザーに親切でしょう。

エンプティステートを導入しているアプリ

クラシル、Vimeo  

〈スプラッシュ〉

ホームからアプリアイコンをタップすると表示される画面で、データローディングの時間稼ぎ、またはそのアプリをブランドとしてユーザーに認知させる目的で使われる手法を「スプラッシュ」といいます。

普通のスプラッシュは一枚の画像で簡単につくれるので、最近はほとんどのアプリが導入しています。

  ただし、あくまでも時間稼ぎやブランドの認知目的にすぎないので、ツール系のアプリとはあまり相性がよくありません。 アプリを使うユーザーは「早く使いたい」と考えているのに、スプラッシュ画面でいちいち時間を取られていたらユーザーはモヤモヤを感じてしまうかもしれません。

「簡単に作成できるからとりあえず導入する」のではなく、ユーザーのニーズを考えた上で、そのアプリにスプラッシュを導入すべきかを考えましょう。 特にユーザーが素早く使いたいであろう、メモ系やカメラ系のアプリには導入すべきではないでしょう。

スプラッシュを導入しているアプリ

Twitter、Skype   関連:「アプリチュートリアルの体験設定の重要性とは」  

【終わりに】

今回は、アプリの起動画面の体験デザインを4つ紹介しました。  

〈まとめ〉

  • スライドでアプリの特徴や使い方を段階的に説明するウォークスルー
  • 矢印を用いてボタンやコンテンツの機能を説明するコーチマーク
  • コンテンツが空になっている時に説明を表示するエンプティステート
  • データローディングの時間稼ぎやアプリをブランドとしての認知をさせるスプラッシュ

どんなアプリの何を紹介したいのか?によって、デザインの選び方は大きく変わってきそうですね。  

この記事が、アプリの起動画面を作成する際の参考になればと思います。

最後までご覧いただきありがとうございました。  

picks designでは、現在最新情報をメルマガにて配信しています。

この機会に是非ご登録ください。

→メルマガ登録はコチラ

無料相談
  • 2022.11.8
  • アプリ
  • デザイン

アプリを起動させた時にユーザーが1番最初に触れる画面は、アイコンと同じようにアプリの「第一印象」になります。 第一印象でユーザーの気持ちを掴むことは、ブランディングにおいて間違いなく重要です。

だからこそ、起動画面はユーザーの気持ちに寄り添って、ユーザーのことを考えたデザインが求められます。

今回は、アプリの起動画面の体験デザインを4つ紹介していきます。 ぜひ最後までご覧ください。  

【起動画面もデザインが重要】

起動画面

大抵のユーザーは起動画面の「デザイン」でそのアプリへの印象を決めるでしょう。 良いデザインでユーザーの心を掴めれば、アプリ利用への誘導が成功します。  

【アプリ起動画面の成功例】

〈ウォークスルー〉

アプリ起動後すぐにアプリの使用に移させるのではなく、スライドでアプリの特徴や使い方などを段階的にユーザーに理解させる手法を「ウォークスルー」といいます。

一般名詞として「通りぬけ」という意味で使われているので少し紛らわしいですが、デザインの1つです。 イメージを交えつつテキストで伝えるのが、一般的なウォークスルーの形態です。 画面をスワイプしていくと、それに合わせてアニメーションでイメージがついてきたりするようなウォークスルーも時折あります。  

説明が丁寧にできるウォークスルーですが、導入する際には注意点もあります。

それは、ウォークスルーは大抵のユーザーにとって「うっとうしいもの」だということです。 ユーザーに対してアプリの魅力を表現したかったり、使い方を理解してほしいという作り手の欲求がある反面、多くのユーザーは「早くアプリを使いたい」と考えていることは否定できません。  

そのことを念頭におき、ウォークスルーを導入するなら、「文字は多すぎず簡潔に」「最低限の必要事項のみ」「イメージはわかりやすく」この3つを意識しつつ作成すると良いでしょう。

ウォークスルーを使用しているアプリ Sonomy、XY  

〈コーチマーク〉

アプリの通常画面の上にオーバーレイやポップアップが表示され、各ボタンの機能やそのコンテンツが何を意味しているかなどを、矢印などを用いたりして説明する手法のことを「コーチマーク」といいます。

操作画面や操作方法が複雑になってしまい、「ユーザーにとってこの画面はわかりづらいものかもしれない」と判断したときは導入するといいでしょう。  

ただし、この手法もウォークスルーと同様に大抵のユーザーには毛嫌いされ、結局よく読まれないことも多いので注意が必要です。 対策としては、初めから全部のボタンを説明せず、ユーザーがタップしたボタンについてのみ説明を加えるコーチマークを出すなどの、一工夫を加えると良いです。

コーチマークを導入しているアプリ

GYAO、Hulu  

〈エンプティステート〉

コンテンツが空のときに表示する説明のことを「エンプティステート」といいます。

コンテンツがないからといって空白にしておくと、ユーザーは物足りなさを感じてしまうでしょう。 そこで、エンプティステートがユーザーからの関心を保たせるポイントになるのです。  

よって、エンプティステートの目的は「今はコンテンツがないという情報」「次にすべきアクション」を伝えることです。 何か特定の操作をしないと次のステップに進めないようなアプリには、エンプティステートがあったほうがユーザーに親切でしょう。

エンプティステートを導入しているアプリ

クラシル、Vimeo  

〈スプラッシュ〉

ホームからアプリアイコンをタップすると表示される画面で、データローディングの時間稼ぎ、またはそのアプリをブランドとしてユーザーに認知させる目的で使われる手法を「スプラッシュ」といいます。

普通のスプラッシュは一枚の画像で簡単につくれるので、最近はほとんどのアプリが導入しています。

  ただし、あくまでも時間稼ぎやブランドの認知目的にすぎないので、ツール系のアプリとはあまり相性がよくありません。 アプリを使うユーザーは「早く使いたい」と考えているのに、スプラッシュ画面でいちいち時間を取られていたらユーザーはモヤモヤを感じてしまうかもしれません。

「簡単に作成できるからとりあえず導入する」のではなく、ユーザーのニーズを考えた上で、そのアプリにスプラッシュを導入すべきかを考えましょう。 特にユーザーが素早く使いたいであろう、メモ系やカメラ系のアプリには導入すべきではないでしょう。

スプラッシュを導入しているアプリ

Twitter、Skype   関連:「アプリチュートリアルの体験設定の重要性とは」  

【終わりに】

今回は、アプリの起動画面の体験デザインを4つ紹介しました。  

〈まとめ〉

  • スライドでアプリの特徴や使い方を段階的に説明するウォークスルー
  • 矢印を用いてボタンやコンテンツの機能を説明するコーチマーク
  • コンテンツが空になっている時に説明を表示するエンプティステート
  • データローディングの時間稼ぎやアプリをブランドとしての認知をさせるスプラッシュ

どんなアプリの何を紹介したいのか?によって、デザインの選び方は大きく変わってきそうですね。  

この記事が、アプリの起動画面を作成する際の参考になればと思います。

最後までご覧いただきありがとうございました。  

picks designでは、現在最新情報をメルマガにて配信しています。

この機会に是非ご登録ください。

→メルマガ登録はコチラ

無料相談