アプリのオープニングページをデザインするには？ 5つの一般的な方法を見てみましょう

ユーザーがウェブサイトやアプリを評価し、留まるか離れるかを決めるのにかかる時間はわずか 50 ミリ秒 (0.05 秒) です。オープニングページのデザインの合理性は、ユーザーの最初の体験に大きく影響します。

第一印象は重要です!多くのユーザーは、アプリやウェブサイトの最初のイメージに基づいて、企業や製品を信頼できるかどうかを判断します。

では、迅速な認識の問題をどのように解決するのでしょうか?まず、アプリが与える第一印象に注目しましょう。適切なスタートアップ ページは、ユーザーの潜在意識を刺激し、適切なユーザーを引き付けて維持するのに役立ちます。

デザイン戦略に入る前に、まずスプラッシュ スクリーンの基本を理解しましょう。

1. 起動画面とは何ですか?

起動画面は、ユーザーがアプリアイコンをクリックしてからコンテンツが読み込まれるまでの、一連の継続的なユーザーエクスペリエンスです。通常、次の 5 つの形式が含まれます。

1. アプリケーションアイコン（起動エクスペリエンスの最初のステップ）

2. 起動画面（オープニング画面）

3. オープニングページからコンテンツページへジャンプする

4. スケルトン画面の起動モード（読み込み待ち）

5. アニメーションオープニング画面（さらにコンテンツを読み込み中）

2. スプラッシュ ページはどのような問題を解決できますか?

スプラッシュ スクリーンは製品エクスペリエンスへの入り口であり、読み込み時間の短縮をシミュレートし、シームレスな起動エクスペリエンスを作成することでユーザー エクスペリエンスを向上させます。

デザインは見た目だけではなく、特定のユーザーの問題を解決することです。スタートアップ ページはどのような問題を解決できますか?

1. ユーザーと無意識にコミュニケーションを取り、将来への期待を設定します。

2. 読み込みプロセスを非表示にして、認識される待ち時間を短縮します。

3. アプリの目的とブランドをユーザーに紹介する。

4. ユーザーに快適な体験を提供します。

3. オープニングページのデザイン手法の分析

問題点を整理し、効果的にユーザーの注目を集めるためのオープニングページデザインの5つの方法を紹介します。

1. カスタムアイコンはユーザーにパーソナライズされた体験をもたらします

iOS 10 以降では、開発者は定義済みのアイコンをカスタマイズできます。たとえば、Bear では、テーマの色に基づいてアイコンの色を調整できます。

MLB では、ユーザーはランチャー アイコンとしてお気に入りのチームを選択できます。

2. ブランドとスローガンを組み合わせて情報を伝達する

スタートアップ ページは、ユーザーがアプリを開くたびにブランドに対する印象が深まるため、継続的なマーケティング キャンペーンのようなものです。

ローンチ ページに独自のスローガンや画像を追加することで、アプリの目的を強調し、ユーザーに一定の期待を持たせることができます。

例えば、上の写真の3つのアプリはオープニングページにブランドロゴを配置しており、ユーザーの感覚を直接刺激するデザインとなっています。

上の写真の 3 つのアプリ (History、DocuSign、Ted) は、オープニング画面にスローガンを追加することで価値提案を強化しています。

3. インタラクティブアニメーションを使用して、オープニングページからコンテンツページまでシームレスな体験を実現します。

アイコンをクリックしてからコンテンツが読み込まれるまでには、ある程度の読み込み時間があります。この期間に適切なアニメーションを組み込むと、ユーザーは製品の状態を事前に把握できます。

上の写真の 3 つのアプリはすべてアニメーションを使用して、オープニング ページとコンテンツ ページの間にシームレスな橋渡しを構築しています。

Google、TinyFax、Cinamatic などのアプリは、アニメーションを使用してアイコンをコンテンツに微妙に変換します。

同様に、上記の 3 つのアプリで使用されているアニメーションはそれほど繊細ではありませんが、最初のページからコンテンツへの移行を完了することができます。

一部のアプリでは、上の画像のようにロゴのみを強調するシンプルなアニメーションを採用しています。

Chick-fil-A は、オープニング ページにプロンプ​​ト アニメーションを追加して、ユーザーをコンテンツ ページにうまく誘導しています。

4. スプラッシュスクリーンとスケルトンスクリーンを組み合わせてフィードバックループを強化する

ほとんどのアプリでは、スプラッシュ ページ + スケルトン スクリーンを使用する方が理にかなっています。これは、軽量アプリは通常、読み込みが非常に速く、スケルトン スクリーンの方がスムーズなエクスペリエンスを提供できるためです。

これらのアプリは起動ページにホームページのコンテンツをプリロードし、Breathe (中央) はホームページのコンテンツに似た色付きのスケルトンを使用します。 Transit (右) では、地図のスケルトンを起動ページとして使用しているため、ユーザーは読み込み後に直接クリックできるので便利です。

上記のアプリは、プリロードとアニメーションを使用してタイミングを把握し、「もうすぐ公開」という印象を与えます。

Snow、Dribbble、Launch Pro では、以前のアプリケーションと比較して、スケルトン状態がほとんど使用されません。

5. 読み込みアニメーションを使用して興味深い体験を作成する

一部のアプリは、起動時にビデオやオーディオなどの大量のデータを読み込む必要があるため、読み込みに時間がかかります。

このタイプのアプリケーションでは、アニメーションを少し長くする方が理にかなっています。データがキャッシュされ、読み込み時間が短縮されるにつれて、アニメーションはどんどん短くなっていきます。

上の写真のアプリはアニメーションを使用してデータを読み込み、ユーザーにフィードバックを与える時間を与えています。

Clashem、Tumbleweed、Chefsfeed は、ブランド体験を強化しながらデータを読み込む楽しいアニメーションを使用しています。

要約する

多くの事例を見た後、起動画面はどのくらいの時間表示されるべきでしょうか?これには、アプリケーションの構成とデータの読み込みにかかる時間を考慮する必要があります。

さまざまな使用時間やユーザーに合わせて起動エクスペリエンスをカスタマイズします。

1. さまざまな段階のユーザーは、異なる起動エクスペリエンスを持つ必要があります。

2. まずアプリケーションのサイズを考慮し、適切な起動ページを選択します。

3. 画像を使用して情報を伝達し、アニメーションをガイドとして使用します。

4. 可能な限り、ブランド化には固有のアイコンを使用します。

著者: クリップデザイン

出典: クリップデザイン