プログラミング

プログラミング

簡単にオンボーディングUIを実現できるCSS・JavaScriptのコードスニペット10選 UIデザイナー向け

speckyboy

Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web.

本記事は、10 Free Onboarding UIs Built With CSS & JavaScript
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

2,542 views

読了時間 : 約6分4秒

オンボーディングの目的は、新しいユーザーをインターフェースにより親しみを持たせるためです。様々な手法に富んでおり、やり方は自由です。サイトやアプリがどのようにオンボーディングを使っているのか勉強中であれば、いずれ作業ワークのためのアイディアを見つけ出すことが出来るでしょう。

 

これから紹介するフリーCSSとJavScript・オンボーディングUIがあれば、実際に開始するにあたって役立つ発見、コードスニペットによる豊富なアイディアが満載です。

 

 

 

1. Carousel Slides

 

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

carouselオンボーディングは、スクリーンスペースが限られたモバイルでとても人気があります。このエフェクトは、手早く情報を得る必要があるウェブサイトでも同じように動作します。

 

Nick Wanninger作の this carousel slide demoを見れば、その詳細が分かります。

 

全体的に、例としてフリーのオンボーディングはFlickityといくつか基本的なCSSを用いて作られています。モバイルとデスクトップどちらでも機能しますので、レスポンシブを求めているのであれば非常に最適です。

 

 

 

2. React Daily UI

 

See the Pen
React Daily UI – 023 – Onboarding
by Jack Oliver (@studiojvla)
on CodePen.

 

このシンプルなプラクティス・デザインであるReact Daily UI penは、ゼロからJack Oliver氏によって制作されました。こちらは私が見た中でも最も滑らかな動作のオンボーディングです。

 

実践的且つ現実的な用途を意図したものではないので、インターフェースは機能としてのダミー・テキストが添付されています。とても上質なテキストですので、ページに収められるような十分なスペースが必要です。

 

特筆すべき点としてスワイプ機能時に動作しないので、今のところタップ認識のみのようです。しかしクリックのみのソリューションはとても素晴らしいです。

 

 

 

3. Onboarding Screens

 

See the Pen
Onboarding Screens
by Jeff Ham (@jebbles)
on CodePen.

 

このペンはオンボーディングに向けた素晴らしいインターフェースの機能性だけではなく、起動の際のカスタム・アニメーションも備えています。

 

開発者のJeff Ham氏はインターフェース全体の知識を熟知しており、この完璧なオンボーディング・スクリーンを制作しました。ユーザーのクリックまたはタップによるトグルイベントとともに「次の画面(next screen)」のアニメーションを作るJavaScript に依存しています。

 

 

 

4. Boardal

 

See the Pen
Boardal — An Onboarding Modal with Vue.js
by Jase (@jasesmith)
on CodePen.

 

この Boardalスニペットは、あなたが見た中でもユニークな分類のものでしょう。ユーザーがより速くサイトに行けるようにオンボーディング・コンテントを備えたモーダルウィンドウを使用しています。テスト専用に作られたカスタムデザインで、オンボーディング・プロセスを改善する方法としては最適な方法の一つです。

 

注意してほしい点として、こちらはモーダルエフェクト(小さいスクリーン環境には適さず)に依存しているので、デスクトップ環境で最も機能を発揮します。

 

もしこのデザインが気に入り、サイト用のオンボーディングを改良する簡単な方法が必要な時はBoardalにアクセスを。

 

 

 

5. Guided Tour

 

See the Pen
Guided Tour using plain Bootstrap components
by Kai Dorschner (@krnlde)
on CodePen.

 

典型的なオンボーディングとは、ユーザー向けの新しいページと機能を紹介する段階的プロセスと考えられます。私は個人的にこちらのGuided Tourがもっと便利だと思っています。

 

始めるにあたってシンプルなスニペットが必要な場合はこのGuided Tourが完璧です。Bootstrap componentsに依存し、ツアーを進める“next”ボタンを備えた小さなツールチップを使っています。

 

ユーザーはいつでもツアーを終了することが出来るので、イライラしたり気にすることはありません。オプションツアーとして作っていますので、このプロセスに悩む人も少なくなるでしょう。

 

セットアップ時に多少時間はかかりますが、全体的にこちらは私がお勧めするオンボーディング方法です。このデモは始めるにあたって最低限のテンプレートが用意されています。

 

 

 

6. Material Tour

 

 

選択が可能なツアーメゾットとして、機能面にスポットをあてた自動ツアーが挙げられます。

 

最もオススメしたいのが Gregor Adams氏が編集したペン機能です。ガイドラインに基づき、ページ一部をサークルにて強調しています。沢山の機能を盛り込んだ複雑なインターフェイスであれば、このテクニックは役に立ちます。

 

ページ全体を暗くすることによって一度に焦点領域を決めます。これによってユーザーの意識をすぐに惹きつけ、オンボーディングのためのパフォーマンスを高める重要要素となります。

 

すべてのウェブサイトに対応するとは限りませんが、このインターフェイスはぜひ採用してほしいと思っています。

 

 

 

7. Android App Onboarding

 

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

 

モバイルアプリはウェブサイトに比べてオンボーディングのプロセスがより必要になります。モバイルUIデザイナーに共通する点として、より小さいスクリーンに機能を沢山盛り込む傾向にあり、ガイドがなくてはユーザーが使用しづらいのです。

 

Mat Swainson氏によるこのオンボーディング・ガイドは、小さくても機能的でスマフォアプリの対処法に優れています。

 

Androidモデルをベースとしますが、これだけではありません。モバイルwebブラウザでも機能するネイティブ・スワイプのサポートもしている点が私のお気に入りです。

 

加えて上部にある小ぶりな進行状況インジケーターも良好です。確かにこれはシンプルなオンボーディング・ページですが、インスピレーションを求めているのであれば是非オススメです。

 

 

 

8. Ionic Intro

 

See the Pen
Ionic Intro Tutorial with Splashscreen
by Clifford Fajardo (@cliffordfajardo)
on CodePen.

 

機能に溢れたこのぺンさえあれば、出来ないことはありません。

 

開発者である Clifford Fajardo氏は、Javascriptのフレームワーク上でのみ実行するオンボードを生み出しました。タップ、スワイプなどの全てのモバイル・インタラクションに対応し、必要であればダブルタップもサポート可能です。

 

lonicは主にモバイル開発向けに使用されており、モバイルウェブサイトでも可能です。こちらのオンボーディング・スクリーンが全てのウェブサイトに合うとは言えませんが、仮にモバイルユーザーからのアクセスが50%以上を占めているのであれば悪くはない選択です。

 

 

 

9. Vertical Form

 

See the Pen
Vertical form
by Jacob (@Jacobdo)
on CodePen.

 

滑らかな動きのUIアニメーション、とてもシンプルなデザインであるVertical Formはまさに面白味があります。

 

CSS FlexプロパティをフルエフェクトでJavascriptとCSSアニメーションに組み込んでいます。しかしコンテンツが少し薄いので、細かくオンボーディングを設定できません。

 

しかしこのインターフェイスを用いると、沢山のエフェクトがなくてもアレンジが出来ます。あなたのイマジネーションを活躍させていきましょう。

 

 

 

10. Guided Tour Tooltip

 

See the Pen
Guided tour tooltip
by Yoann (@yoannhel)
on CodePen.

 

もう一点ガイドツアーの例を挙げると、こちらはページ固定のフル・ツールチップボックスを使用しています。

今見ているスニペットをチェックアウトすると、特定のインターフェイスに組み込まれていないことが分かります。言ってしまえばユーザー向けのアドバイスと進行手順を記載したフローティング・ツールチップなのです。

 

固定ツールチップの配置スクリプトと組み合わせたUIが、全ての主要機能に対応したツールチップと共にインターフェイス周辺で簡単に移動が出来ます。このテンプレートはカスタマイズが可能ですが、シンプルなUIもまた美しい見栄えです。

【コンビニでも使える!メルペイ初回利用1000円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:1000円分
※さらにメルペイスマート払で2000円分ポイント!
 友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

期間中の金・土限定でd払い利用で最大20%のdポイント還元中!
■エントリー期間:2020/2/29(土)23:59 まで
■キャンペーン期間:2020/2/24/(月)23:59 まで

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【Uber taxi初回利用2000円オフクーポン】
JP20gd6nv7

 

以下のリンクから『プロモーション コードを追加する』で「JP20gd6nv7」を入れてください。初回利用が2000円オフになります!
※プロモコードは日本国内でのみ利用可能

 

2000円オフで登録» »当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber

Uber

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
ins6je2v

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ