ECサイトに「実例で学べるマイクロインタラクション」を導入してみた｜Labo｜株式会社トライム

Webサイトやアプリをユーザーに楽しく直感的に操作してもらう仕掛けとして、近年「マイクロインタラクション」が注目されており、ネットの利用中に見かける機会も増えてきました。

例えば、

• 「いいね」を押した時にハートのアイコンがパッと弾けるように出てくる
• データを読み込んでいる最中に「Loading…」の文字が表示される
• 画像をスワイプすると、次の画像が滑らかなアニメーションとともに表示される

などの工夫からユーザー体験をリッチ化し、ユーザーエンゲージメントの向上が期待できます。

しかしWebサイトを運営される方の中には、

「SNSやスマホアプリでは良いとしても、一般的なサイトでは導入イメージが湧かない」

「どのような操作をターゲットにしたらよいか分からない」

「自分のサイトにマッチするアニメーションが見つからない」

という方も多いのではないでしょうか。

そこで今回は弊社Webチームにて、「ECサイトにマイクロインタラクションをデザイン・コーディングした例」をご紹介します。Webサイトの魅力をもっと引き出したいとお考えの方はぜひ参考にしてみてください。

なお、マイクロインタラクションについては過去の記事でも詳しく紹介しています。「デザインツールでマイクロインタラクションを作成する方法」について知りたい方は、こちらも併せてお読みください。

「ユーザーを引き込む！マイクロインタラクションデザイン」

実例紹介

今回は「キーワード検索」「ページ移動」「カラー・サイズ選択」「カート追加」「お気に入り登録」「SNSシェア」の6つの操作に着目してマイクロインタラクションを制作しました。それぞれの挙動を動画で確認しながら、埋め込みページから実際に触れてマイクロインタラクションを体験してみてください。

埋め込み先のデモページはコチラ。

（今回はスマートフォンでの閲覧を想定しており、PC向けのレスポンシブ対応はしておりませんのでご了承ください）

キーワード検索

ボタンを押すと、ボタンが左右に伸びて検索バーに姿が変わり、閉じるマークを押すとクローズします。押下時に一瞬だけ背景色を変化させることで、操作とアニメーションの連動を強調しています。またオープンと同時に検索バーにフォーカスが当たり、ユーザーはすぐに入力を開始できます。

ページ移動（一覧から詳細 / 詳細から一覧）

一覧から商品を選ぶと、他の商品がすべてフェードアウトし、選んだ商品のサムネイルが移動・拡大したのち、詳細画面の着画表示位置にオーバーラップします。詳細から一覧へ戻る時は逆順にインタラクションを再生します。二つの画面をスムーズに行き来している感覚をユーザーに体験させることができます。

カラー・サイズ選択

着画とカラーが連動しており、着画のスワイプとカラーのタップが双方向で作用するようになっています。またカラー・サイズを押すと黒枠が表示され、選択を切り替えると黒枠がボタンを飛び越えて移動します。選択内容が変更したことを視覚的にユーザーに伝えることができます。

カート追加

ボタンを押すと、ボタンが上に伸びてサムネイルとともにメッセージを表示され、カート内の商品数がバッジで表示されます。カート追加は訪問者が商品を購入する上で欠かせないアクションであり、重要な操作を実行したことを明示的にユーザーに伝えることができます。

お気に入り登録

ボタンを押すと、ボタンテキストの更新とともに背景と文字の色が変化します。背景と文字で逆の色づかいに変化させることで、オンとオフの切り替えを実行したことを直感的にユーザーに伝えることができます。

SNSシェア

ボタンを押すと、各種SNSの投稿に飛ぶボタンと閉じるボタンが4方向に出現します。閉じるボタンを押すと4つが集合して共有ボタンに戻ります。共有に際して3つの選択肢が存在することを提案型でユーザーに伝えることができます。

まとめ

以上、ECサイトを題材に、見て学べるマイクロインタラクションの実例を紹介しました。

取り上げた6つの操作のマイクロインタラクションについて、いずれにも共通する点は以下の通りです。

• 即時性・連動性を持って発火し、ユーザーの操作の妨害や混乱を招かないこと
• アニメーションは、ユーザーへ伝えたいことを強調するために使われていること
• 繰り返し発火してもユーザーが飽きない、シンプルなものであること

これらのポイントを意識することで、異なる操作や毛色の違うサイトにも応用が効くと思います。ぜひ参考にしてみてください。

しかし洗練されたマイクロインタラクションを導入するには、知識に基づいて緻密なアニメーションをデザインしたり、CSSやJavaScriptの複雑なコードを記述したりするスキルが求められます。プロの制作チームによるマイクロインタラクションの導入をご検討中の方は、↓のリンクからぜひトライムまでお問い合わせください。