モバイル向けの美しいオンボーディングデザイン8選

Nataly Birch

ウクライナのセヴァストポリ出身のWeb開発者。WordPressとIT関連の執筆とともに、自身のブログ上でさまざまな情報を発信しています。ご意見、ご感想などはメールでどうぞ。 。

この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。

8 Beautifully Illustrated Onboarding Screens in Mobile Design

ユーザーがアプリの価値を理解してその機能を活用するには、オンボーディングプロセスが必要です。それは単に一時的なものではありません。優れたユーザー体験のための強固な基盤を提供し、ジャーニー全体の成功を保証する重要な要素となるのです。

最高のプロダクトを作ることはできます。ただしユーザーがその使用方法を理解していない場合、すべての努力は無駄になります。したがって、オンボーディングは慎重に検討、作成し、その計画通りに実行する必要があります。

オンボーディングの使命は、ユーザーにインターフェイスの操作方法を教え、プロダクトを最大限に活用することです。つまり、昔ながらのさまざまなテクニックを使用して、メッセージを効果的に配信することができるのです。ガイド付きのアニメーション、ショートツアー、インタラクティブなインターフェイス、さらにはコンテンツ中心のアプローチも可能です。

どの方法を選択する場合でも、多くのユーザーを啓発するためのもっとも効果的なツールの1つである視覚的なマテリアルを忘れないでください。それはつねに時間の節約につながるものです。

アートがユーザーの統合をサポートすることを示す、代表的な例をいくつか見てみましょう。

ClusterTruck

ClusterTruckのオンボーディングプロセスはまさにその最たる例です。各画面は2つの部分があり、コンテンツ、機能が解説されている部分、そして適切な視覚的合図でこのステートメントをサポートする図です。

ここで興味深いのは、これら2つが互いに補完し、強化し合うということです。写真がなければ、注意深く強調表示された見出しが適切なメッセージを伝えていたとしても、画面だけでは退屈でインパクトがありません。そして、コンテンツがなければ、作者がユーザーになにを伝えたいのかすぐにはわかりません。このように、これら2つは、オンボーディングプロセスをユーザーのニーズに適合させる完璧な共生を生み出してくれるのです。

Grooming Onboarding

2つ目にご紹介したい芸術的なオンボーディングの例は、Marta Więckowska氏が取り組んだグルーミングにおけるオンボーディングです。

その名のとおりですが、実際にどんなものなのか、見てみましょう。ちなみに、世の中の誰もがペットの世話をする現代的な方法をわかっているわけではありません。その点からも、このオンボーディングは非常に有益です。

Marta氏は、主なグルーミングサービスを示す優れたイラストをいくつか作成しました。ビジュアル的なマテリアルがすべてを語ってくれていることから、わざわざコンテンツを読む必要がないほどです。

情報ボックスが完全な形でイラストされた画面と自然に調和していることに注目してください。これらは、スタンドアロンユニットであるだけでなく、写真に必要不可欠なエレメントです。オンボーディング全体は圧巻ともいえる、すばらしい作品になっています。

ReadMind

前例と同じく、ここでもイラストとコンテンツが連動しています。ナビゲーションだけでなくテキストも巧妙に、絵のように美しい背景になじんでいるため、まるで芸術作品とインタラクトしているように感じるでしょう。

手描きのイラストは非常にシンプルで、ある意味、素朴ともいえます。それと同時に、欠点が見当たらないほどに完璧と言えます。このアプリケーションはメンタルヘルスの問題に対処するために作成されましたが、このような快適で心地よいメッセージは気分を明るくし、ユーザーを虜にするでしょう。

POS Indonesia(Ardias Elga Kurnia氏)

POS Indonesia(インドネシアの郵便サービス)のアプリのオンボーディングでは、発信しようとするメッセージを強調するのみならず、適切な雰囲気を確立する目的でイラストを使用しています。ここのベクター画像は企業のモットーを完璧に表現しているだけでなく、真摯でフォーマルなイメージを表現しています。

グラフィックスからナビゲーションに至るまでのすべてのディテールが同じテーマに沿ったものになっていて、このオンボーディングによって企業はすでに信頼を築き上げているとも言えるでしょう。

大気汚染チェックアプリ(Erfan Rohmat Arif氏)

ここで最初に目を引くのは、イラストが非常に細かいということです。かなり細かく描かれています。同様のソリューションのほとんどは、より概略的なアプローチにこだわることを好みますが、これらのベクトル描画は正確で精巧です。ユーザーがイラストに目を奪われて注目することは間違いないでしょう。

ClusterTruckのケース同様、ここでは、イラストとコンテンツの両方が画面全体の2つの必要不可欠なエレメントになっています。さらに、従来のパターンに従って機能ごとに分けることで、画面が見やすくなり、それぞれがその役割を果たしているといえます。

写真共有アプリShilpa Shree MV氏)

ここでご紹介するスクリーンが、他の一般的なスクリーンと違う点は、イラストが相互接続されている点です。文字通り、相互に接続されているということです。あるスクリーンが「洗濯ひも」で別のスクリーンにつながっているのです。

ユーザー自身がストーリーの一部かのように感じさせてくれるものです。たった3ページしかないため、特に前の例と比較すると、図は非常に原始的で概略図です。それでもユーザーの注目を集め、メッセージを強化し、よい印象を与えるというだけでも十分、その役割を果たしていると言えます。シンプルでありながら素晴らしいアイデアだと言えるでしょう。

BYJU'S Early Learn

上記のアプローチは実際のアプリでも使われていることを示すために、ディズニーのアプリをご紹介します。「洗濯ひも」は一つもありませんが、背景を巧みに利用していることで、ユーザーはそれぞれのスクリーンをつなぎ合わせてみることができます。さらに、その滑らかな形状は、スムーズで流れるようなつながりを表現しています。

子ども向けアプリ(Mingg氏)

芸術的なアプローチなしではオンボーディングが成功しない分野が1つあり、それは子ども向けに作成されたアプリです。小さな子どもたちに情報ボックスのすべてを読むことを期待するには無理がありますよね? 万が一、それが読めたとしても、実際に読む子はまずいないでしょう。さらに、誰もそれを強要することはできないのです。したがってこの場合は、興味をそそる、考え抜かれたイラストが必須となるのです。

子どもが一つのことに神経を集中できるのはごく短い間で、ささいなことでも簡単に気が散ってしまうものです。そのことから、イラストに夢中にさせるような工夫が必要です。最新のオンボーディングがどのようなものか、Mingg氏によるフローオンボーディングを参考にするとよいでしょう。

かわいらしいアニメ風のスタイルを使用して、この製作チームは、子どもたちが順々にオンボーディングプロセスを完了できるよう、楽しいマスコットを作成しました。完全にアニメーション化され、インタラクティブな作りです。

子どもがオプションを選択することで、それがなにを意味するのかが理解できるようになっています。当然、質問を読む必要はあります。それにもかかわらず、子どもたちは次になにかが起きるストーリーの一部となるのです。それだけでも十分に楽しそうですよね?

オンボーディングの旅に出てみよう

オンボーディングに関する芸術的な側面のすばらしいところは、デザイナーがそこに含まれる情報をアートとして捉えられるという事です。ここでご紹介したすべての例は、ユーザーの目を楽しませてくれる傑作ばかりです。

純粋な装飾として役立っているものもあれば、全体的な美的センスが全体の雰囲気と調和しているものもあります。見出しをサポートする単純な描画として、または、それだけでアプリ内のすべての情報を理解できるような非常に詳細な写真を利用することもできます。

さらに、静止画像を使用することも、完全なアニメーションを利用してインタラクティブな世界を作り出すこともできます。可能性は無限大なのです。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて