アプリのオンボーディングデザイン8選。アニメーションを使って魅力を伝えよう！

数年前から、アプリのオンボーディングにデザイナーが注目しはじめ、オンボーディングのデザインに人気に火がつきました。

かつてのオンボーディングは、イラストを用いたシンプルなプレゼンテーションが中心でした。しかし最近のオンボーディングは、アニメーションを使ってアプリの魅力を最大限に伝える場になっています。

優れたUXの土台となるオンボーディングの重要性は、開発者なら誰もが知るところでしょう。

今回はそんなオンボーディングに使えるアニメーションのコードスニペットを8つご紹介します。

1. Onboarding by Fabio Ottaviani

See the Pen DailyUI – #023 Onboarding by Fabio Ottaviani (@supah) on CodePen.

すっきりとしたデザイン、美しいグラフィック、そしてなめらかなアニメーションが特徴。

スライダーには初期設定でドットナビゲーションが3つ付いていますが、必要に応じて変更できます。

Onboarding by Fabio Ottaviani

2. Onboarding slides with jquery by Hainer Savimaa

See the Pen Onboarding slides with jquery by Hainer Savimaa (@hainersavimaa) on CodePen.

文字情報とイラストを分けたスプリットレイアウトを採用しています。トレンドをおさえた、スタイリッシュなデザインですね。

ドットナビゲーションだけでなく、「Next（次へ）」や「Back（戻る）」などのボタンも使用しています。

Onboarding slides with jquery by Hainer Savimaa

3. Onboarding by Nahom Ebssa

See the Pen Onboarding by Nahom Ebssa (@enahom99) on CodePen.

必要な情報をコンパクトにまとめながら、快適なUXを提供しています。

なお現段階では「Next（次へ）」ボタンはあるものの「戻る」にあたるボタンがありません。ドットナビゲーションも機能していないため、未完成ではありますが、デザインのベースにするには充分でしょう。

Onboarding by Nahom Ebssa

4. Onboarding by Fersho Pls

See the Pen Onboarding by Fersho Pls (@fershopls) on CodePen.

ミニマルな外観と、美しいアニメーションが印象的なオンボーディング。こちらは自動でアニメーションが切り替わるスタイルを採用しています。

シンプルですが、小規模プロジェクトにぴったりな分かりやすいデザインです。

Onboarding by Fersho Pls

5. Onboarding Carousel by Dario Corsi

See the Pen Onboarding Carousel by Dario Corsi (@dariocorsi) on CodePen.

こちらのオンボーディングアニメーションはスプリットスクリーンを採用しており、画面は上下で分かれています。

上の画面のほうが大きく、下の画面に補助的なテキストが表示される構成です。

サイズを考えるとタブレットにおすすめですが、カスタマイズしてレスポンシブデザインにしてもいいでしょう。

Onboarding Carousel by Dario Corsi

6. Onboarding by Nick Wanninger

See the Pen Onboarding by Nick Wanninger (@nickwanninger) on CodePen.

意外性のあるデザインではありませんが、Onboarding by Nick Wanningerアイデアのベースにするのにぴったりの作品です。

ドットナビゲーションを使用するデザイナーが多いなか、こちらのオンボーディングアニメーションには短い線が採用されています。

「Next（次へ）」や「Back（戻る）」のかわりに、矢印を使用しているところも特徴的ですね。

7. Mobile carousel by Elena

See the Pen Mobile carousel by Elena (@ElenaDi07) on CodePen.

Roland VictorによるDribbble shotを再現し、アニメーションをつけた作品。

人気のOwl Carouselを使用した、アイデアのベースにするのにぴったりのスニペットです。

Mobile carousel by Elena

8. Android App Onboarding by Mat Swainson

See the Pen Android App Onboarding by Mat Swainson (@matswainson) on CodePen.

昔ながらのデザインが好きな方におすすめの作品。

真新しいデザインではありませんが、機能は完璧です。4ページで構成されていますが、「GET STARTED（はじめる）」ボタンを押せばすぐに最後のページにジャンプできるのが便利。

Android App Onboarding by Mat Swainson

おまけ. Liquid Swipe Open Source by Cuberto

こちらはオンボーディングのコードスニペットではありませんが、斬新なデザインを取り入れたい方におすすめのリキッドアニメーションです。

液体のようなスワイプ動作は、きっとユーザーを魅了するはず。ご利用の際はiOSとXcodeが必要です。

Liquid Swipe Open Source by Cuberto

おわりに

オンボーディングは基本的に、コンテンツとナビゲーションという2つの要素で構成されるシンプルな仕組みです。

ベースのデザインが完成したら、アニメーションやトランジションエフェクトを好みにあわせて追加しましょう。

今回ご紹介したスニペットを参考に、有益かつ、ユーザーを楽しませるオンボーディングをぜひ作ってみましょう。

（原文：Nataly Birch　翻訳：Nakajima Asuka）