実際のアプリから学ぶ！UX向上のためのアニメーションの使い方

実際のアプリで使用されているアニメーションを事例にUXを向上させるアニメーションの使い方について紹介しています。アニメーションを使う目的は、ユーザーがアプリの動作や使い方を最も効率的に理解するのを助けることです。ぜひご覧ください。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、ソフトウェア・デベロッパーのNick Babich氏によって投稿されました。

アニメーションはストーリーを伝えることができます。

ただし、伝えるのは長くて複雑なストーリーではなく、シンプルなストーリーです。例えば、「このコンテンツを見て！」、「操作は正常に完了しました。」などのメッセージの伴う、短いストーリーです。

アニメーションを使う目的は、単にユーザーを楽しませることではなく、ユーザーがアプリの動作や使い方を最も効率的に理解するのを助けることです。次に引用するように、ZURB社もこの考え方を表明しています。

「ZURB社では、静的な画面だけをデザインする時代は終わりました。ユーザーが画面からコンテンツを実質的に見ることができるようなデザインを実践しています。」（同社のブログ記事より）

アニメーションは美しさと機能を兼ね備えたデザインを、幅広いコンテキストにおいて実現できます。：プログラムの振る舞い（処理や動作）に影響を与えたり、コンピュータのステータス（動作状態）や動作結果をユーザーに知らせたり、ユーザーの注意を引いてを上手く誘導することも可能です。

この記事では、UX向上のためのアニメーションの例をいくつか紹介していきます。

読み込み（ローディング）の待ち時間が、退屈でなくなる

もしプログラムのソースコードの行数を減らすことが難しければ、データ読み込み中の待ち時間が、ユーザーにとってなるべく楽しいものとなるよう工夫するべきです。ユーザーを退屈させる、クルクルと回るローディングアイコン（このアイコンは、ユーザーにデータ読み込み中という事実を伝えるだけです。）の代替として、アニメーションを活用できます。

アニメーションとスケルトンスクリーン（Skeleton screen）を組み合わせて活用すれば、ユーザーの関心をコンテンツに集中させ続ける効果もあります。この組み合わせは、ほとんど全てのWebサイトやアプリにおいて利用できます。

581cbc444a73c201287786

スケルトンスクリーンは、コンテンツのデータ読み込みが完了するまでに、UIを段階的に表示する手法です。（画像左側）

自然なトランジション（画面遷移）をデザインする

アニメーションは、トランジション（画面遷移）をよりクリアに表現できるため、操作の過程を明確に示すことができます。ユーザーも意識をどこに向けたらいいのかを理解しやすくなります。

Adrian Zumbrunnen氏による次のデザイン例では、スクロール画面とアニメーションを組み合わせています（スクロールエフェクト）。ユーザーがリンクをクリックした後も、コンテキストの状態を維持する助けとなります。

これと比較して、処理の最初と最後の2つの静的な画面だけでトランジションをデザインした場合、途中経過が欠けているような印象を与えます。

トランジションを2つの静的な画面だけでデザインした場合

画面が急に変わることは不自然であり、ユーザーにとってはインターフェースの操作を理解する妨げとなります。

トランジションをアニメーションでデザインした場合

アニメーションとは、静的な画面に「息を吹き込む」ことです。

自然なトランジションにより、ユーザーはインターフェース上でのフロー（流れ）や進行速度を理解しやすくなります。また、インタラクションの次のステップで何が起こるかを予測しやすくなります。

[PR] Webデザインで副業する方法とは

要素間の関係を明らかにする

アニメーションは、直接操作しているような感覚を高めることもできます。

次の例では、スムーズなトランジションが実現されています。メニューアイコンをプレイバックコントロール（コンテンツ再生時のボタン操作の機能）に変化させ、また元のメニューアイコンに戻しています。ユーザーにボタンの機能を示すとともに、インタラクションに「感動や驚き」の要素を加える効果があります。

「再生ボタン」から「停止ボタン」に変化するデザインは、これら2つの機能が関連していること、また同時に成立しえないことを上手く示しています。

ユーザーの視線を画面中央にあるプレイバックコントロールに集めるために、アニメーションを使っています。

（GoogleのMaterial Design（マテリアルデザイン））その他の例―― フローティングアクションボタン（Floating Action Button）をタップすると、プラス記号から鉛筆のアイコンに変化します。鉛筆のアイコンが、最初に生成されるメソッドだと分かります。

このような細部の設計があるかどうかが、ユーザーが次に何が起こるかを予測しなければならないデザインとなるか、またはユーザーがアイコンの意味を直感的に理解できるデザインとなるかの分岐点です。

GoogleのMaterial Design（マテリアルデザイン）

操作の誤りを伝えるフィードバック（応答）として活用する

例えば、フォームの入力画面にもアニメーションを活用できます。

もし正しいデータが入力されたら、「頷く」ようなアニメーションで肯定の意味、間違ったデータが入力されたら「首を横に振る」ようなアニメーションで否定の意味を伝えることができます。こうしたアニメーションは、ユーザーにとってその意味を瞬時に理解しやすいといえます。

form

間違ったデータが入力されたら、「首を横に振る」ようなアニメーションで操作に誤りがあると伝えます。

操作完了を知らせるフィードバック（応答）として活用する

アニメーションは、ユーザーに操作の結果を視覚的に示すことができます。「Show, don’t tell（言葉で説明するよりも、見せる）」という原則に従うなら、アニメーションを操作への応答として使うことができます。

例として、Michaël Villar社の提供するオンライン決済ツール「Stripe」では、ユーザーが「決済する」のボタンをクリックすると、決済完了前に、データ処理中を示すスピナー（Spinner：ローディングアイコン）が現われます。

Michaël Villar社

結論

アニメーションは、使い方によっては大きな効果を発揮できます。アニメーションを使った方がいい場面、使わない方がいい場面について時間をかけてよく考えることが大切です。

アニメーションは、デザインを構成する要素の1つとして、設計プロセスの始まりから考慮に入れるべきです。なぜならデザインは、ビジュアル・プレゼンテーション（Visual presentation：プレゼンテーション、店舗のウィンドウディスプレイなど、視覚的に訴えるデザイン）以上のものだからです。

スティーブ・ジョブズ氏の言葉を引用すると「デザインとは、見た目や使い心地だけではない。デザインとは、それがいかに機能するかだ。」

[お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。

【今さら聞けない！】UI/UXデザインの違いとその学習方法とは！

スマートフォンが普及してから、主にアプリの開発において「UI/UX」というキーワードが非常に重要視されています。UIデザイナーやUXデザイナーといった職も生まれ...

アプリデザイン

【事例から学ぶ！】聞いたことはあるけど「UIデザイン」とは？

「UIデザインとは」何なのか、歴史などを踏まえて解説しています。そして、UIデザイナーを目指す上で参考になる勉強サイト等も紹介しています。初心者の方でこ...

アプリデザイン

無料でも使える！デザインツールFlintoの使い方【初心者向け】

プロトタイプを作成するデザインツールFlintoの使い方を初心者向けに紹介しています。最初の30日間は無料で使えるツールなので、プロトタイピングを行う際...

アプリデザイン

優れたデザインを作るための社内コミュニケーション術とは

本稿は、Studio by UXPinのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。また本記事はLaura Klein氏によって投稿されました。...

アプリデザイン

【初心者でも分かる！】デザインツールJustinmindの使い方

初心者の方でも分かるようにJustinmindの使い方について解説している記事です。サイトのワイヤーフレームやプロトタイプを作成する上で非常に便利なツー...

アプリデザイン

【厳選！】アプリ開発の参考に！おしゃれなアイコンやロゴまとめ10選

アプリを開発し、リリースさせるとなると必ず必要になってくるものが「アイコン」です。人に使ってもらうアプリであれば、見た目の心地よさは重要な要因になってきます。特...

アプリデザイン

あわせてよく読まれている記事

【すぐに使える！】CSSのアニメーションをまとめたサイト・記事20選

今回はCSSのアニメーションをまとめたサイトや記事を紹介します。サイトを作っていく上でアニメーションの実装は必須と言えるでしょう。より目立たせたり、クールな印象を持ってもらうためにアニメーションの書き方を覚えておくとサイトの表現に幅が出るはずです。そもそもCSSが何かよく分からない場合は、先にCSSの書き方をご覧ください。なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。 CSSアニメーションの素晴らしいアイデアのまとめこのサイトはデモページもセットであるために1ページでいくつかのデモを見ることができます。上記のゲームボーイカラーの生成HTML、CSSなど真似したくなるアニメーションが多くあります・。他にも動的なコンテンツが多くあるので必見のサイトでしょう。 CSSアニメーションの素晴らしいアイデアのまとめ Hover.css アニメーションの実装でまず参考にしたいサイトの代表例ですね。マウスオーバー時に関するアニメーションについては、このサイトを見れば十分表現ができるでしょう。書き方もすべてまとまっているので、初心者の方でも気軽に使用できるはずです。 Hover.css [PR] Webデザインで副業する方法とはCSS3アニメーションをらく～に実装！オンラインツール7選このサイトでは実装結果が分かった状態で、使いたいものを選ぶことができます。アニメーションを再現できる便利ツールをまとめているので、表現したいアニメーションが見つかるはずです。 CSS3アニメーションをらく～に実装！オンラインツール7選ここまで動かせる！楽しいcss アニメーションのサンプル集ここには動くサンプルが多く乗っています。文字が奥にスクロールするものは実行してみたくなりますね。ここまで動かせる！楽しいcss アニメーションのサンプル集ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ここに乗っているサンプルは、オリジナルを作る際に参考になると思います。シンプルなアニメーションから3Dを用いた難易度の高いものも紹介されているので、ぜひ試してみましょう。ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ CSS3でアニメーション！transitionとanimationまとめ（サンプル付き）上記にあげたようにオリジナルを作るための基礎になります。サイト内のアニメーションの動きとソースコードの書き方がどちらも載っているので、CSSでアニメーションを書いたことがないという人でも記載されているコードをペーストするところから始められるでしょう。 CSS3でアニメーション！transitionとanimationまとめ初心者にもコピペで使えるCSSジェネレーター8個紹介されているのはCSSジェネレータで、コピーして使えるという点が優れています。それぞれのアニメーションがGIFで紹介されているので、サイト上でどんな動きをするのか一目で確認することができるでしょう。初心者にもコピペで使えるCSSジェネレーター8個 CSSのみでエフェクト・アニメーションを実装する方法ここではいろいろなCSSアニメーションの書き方が書いてあります。アニメーションを実装したことがないという人は、この記事で書き方を見ておくと良いでしょう。 CSSのみでエフェクト・アニメーションを実装する方法 css3アニメーションのレパートリーがきっと増える！動きの参考になる22サイトここではCSSのボタンがメインで紹介されています。ボタンはマウスオーバーした時にアニメーションを施すWebサイトが多いですが、サイト制作をする上で役に立つでしょう。 css3アニメーションのレパートリーがきっと増える！動きの参考になる22サイト【保存版】CSS3アニメーションを簡単に利用できるライブラリのまとめここではCSS3のライブラリのまとめが乗っています。ライブラリとして導入する場合には見ておくとよいでしょう。【保存版】CSS3アニメーションを簡単に利用できるライブラリのまとめ【Webサイトに動きと個性を】CSSでアニメーションを駆使する方法！ CSS3でアニメーションを作る際の細かな調整方法などが紹介されています。動きにこだわったサイトを作る際、活用できそうですね。【Webサイトに動きと個性を】CSSでアニメーションを駆使する方法！ CSSアニメーション入門 CSSを使ったアニメーションについて、分かりやすくまとめられています。デモも確認できるので、リファレンスとしても活用できますね。 CSSアニメーション入門担当サイトが受賞したので、アニメーションの演出に使ったJavaScriptライブラリ、webツールを晒してみるここではCSSを使ったアニメーションについて、プロの技を見ることができます。全てを理解することは難しいかもしれませんが、いろんなテクニックが紹介されており、参考になりますね。担当サイトが受賞したので、アニメーションの演出に使ったJavaScriptライブラリ、webツールを晒してみる最近のWebサイトで見かけるHTML/CSSスニペット・JSライブラリ33個まとめ CSS3を使った、特に視覚効果の高いアニメーションが紹介されています。インクが広がるエフェクト等、CSSでここまでできるんだと思うようなものばかりです。最近のWebサイトで見かけるHTML/CSSスニペット・JSライブラリ33個まとめ【CSS】最新マウスオーバーアニメーションスニペットサイト６選。マウスオーバーアニメーションに特化したアニメーションが紹介されています。スニペットを貼り付けるだけで利用できるので、自分のサイトに簡単に取り入れることができますね。【CSS】最新マウスオーバーアニメーションスニペットサイト６選。 CSSでのロールオーバーアニメーションのチュートリアル集まとめここではCSS3を使ったロールオーバーアニメーションが紹介されています。チュートリアルの紹介なので、初学者にも分かりやすく確認することができます。 CSSでのロールオーバーアニメーションのチュートリアル集まとめコピペで使えるアニメーションcss集比較的シンプルなアニメーションがコード付きで紹介されています。コピペで使えるアニメーションcss集コピペで簡単！ローディングアニメーションの参考になるサイトまとめここではCSS3を使ったローディングアニメーションが紹介されています。ローディング画面はユーザが良く目にするものなので、いろいろあって助かりますね。コピペで簡単！ローディングアニメーションの参考になるサイトまとめ CSS3アニメーションを手軽に作成できるオンラインツール9選ここではCSS3アニメーションを手軽に作成できるオンラインツールが紹介されています。ツールを活用して、効率的にアニメーションを作りたいですね。 CSS3アニメーションを手軽に作成できるオンラインツール9選ちゃちゃっとCSSで色々とやりたい時に激しく便利なサイトとまとめ記事ここではCSS3を使ったアニメーションを作成する時に参照できるサイトが紹介されています。覚えておくと便利なサイトばかりですね。ちゃちゃっとCSSで色々とやりたい時に激しく便利なサイトとまとめ記事以上、CSSでできるアニメーションまとめサイト・記事を紹介しました。 CSSを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたい CSSを学習していて、このように思ったことはありませんか？テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

CSS

事例から学ぶ！Webアニメーションのテクニックまとめ

本稿は、Studio by UXPinのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Nick Babich氏によって投稿されました。機能的で楽しいアニメーションは、現代のWebデザインの重要な要素の1つです。インタラクションデザインの細部は、現代のWebサイトに根本的な違いをもたらします。アニメーションは、アプリケーションのステータス（現在の状態）をユーザーに伝えたり、ユーザーの注意を引いたり、ユーザーがアクションの結果を確認するのを助けたり、振る舞いに影響を及ぼすことさえできます。ユーザー体験を向上させるにはWebサイトのどこどのようなにアニメーションを追加したらいいか、次にいくつかの例を紹介します。プログレッションアニメーションの読み込み Webアニメーションの最も一般的な使い方の1つは、読み込み時間中にユーザーの気を紛らわせることです。アニメーションを使用すると、ユーザーの時間感覚に影響を与えて、実際よりも短く感じさせることができます。あなたがソースコードを短縮できないなら、待ち時間がなるべく楽しくなるよう努めましょう。アニメーションの読み込みはシンプルなものがベストです。音などの追加的エフェクトは必須ではありません。優れたアニメーションはユーザーを魅了します。待ち時間に面白い体験があれば、ユーザーは読み込み時間も気にならないでしょう。画像クレジット：Thomas Bogner 読み込み時間が短い場合でも、楽しいアニメーションの読み込みがあると、待ち時間にちょっとしたエンターテイメントを提供できるでしょう。プログレス（進捗）アニメーション線形のアニメーションは、進捗を表示できます。ローディングバーは、このタイプのアニメーションの最も一般的な例です。しかし進捗を表すアニメーションは、段階的な線形プロセスにも使用できます。画像クレジット：Joshua Sortino スケルトンスクリーンスケルトンスクリーンとは、空白のページに徐々に情報が読み込まれる手法です。スケルトンスクリーンのアクションにより、情報は画面上に徐々に表示されるため、リアルタイムで処理が進捗しているという感覚を作り出します。ほとんどのWebサイトでは、スケルトンスクリーンとアニメーションを組み合わせて使用することで、読み込み時にユーザーの関心が離れないようにすることができます。ビジュアルフィードバックユーザーのアクションに対するアニメーションによるフィードバック（応答）優れたインタラクションデザインは、ユーザーがインタラクションの結果を視覚的に理解できるように、それを伝えるフィードバックを提供します。 Webサイト訪問者にとって、サイトのどの要素がインタラクティブであるか、またどのようなインタラクションが起こるかを予想できないことは混乱の原因となります。こうした問題を解決するには、インタラクションをクリアで理解しやすいものに設計しましょう。デスクトップにはホバーアニメーション/モバイルにはエレベーション（奥行き）要素がインタラクティブであることを示す方法としてビジュアルフィードバックを使う場合、ホバー効果は最も一般的な例の1つです。ユーザーは要素の機能性が気になるとき、その要素の上にマウスを移動する傾向があります。ホバーアニメーションはユーザーが直感的に分かりやすい設計にしましょう。しかしモバイルデバイスにはマウスカーソルがないため、ホバー効果を使用できません。つまり、ボタンや他のインタラクティブな要素をユーザーにタップしてもらうためには、それより先に「インタラクティブな要素であること」を視覚的に表示し、インタラクションの直後にフィードバックを返す必要があるのです。このようなフィードバックは、ユーザーに彼らのアクションがレスポンスのトリガーとなったことを知らせることができます。例として、以下のボタン要素はアクティブな状態になると、下に押されたように見えます。画像クレジット：Vadim Gromov 陰影効果は、要素が「タップ可能であること」を示します。ユーザーの注意を引く人間の目が動きに引き付けられることはよく知られています。このことを応用すればアニメーションは、ユーザーの注意を引き、ユーザーが実行するアクションを促進するのに最適なツールとなるでしょう。たとえば、入力フォームはアニメーションで効果を高めることができます。正しいデータが入力されたときには、完了時に「うなずく」アニメーションを導入し、誤ったデータ入力を拒否するときには、「首を横に振る」アニメーションを導入できます。ユーザーは、このようなアニメーションの意味を即座に理解できるでしょう。画像クレジット：MichaëlVillar 入力フォームは「首を横に振る」アニメーションを表示します。ナビゲーション最近のトレンドは、ハンバーガーメニュー（三本線のアイコン）などのボタン要素がクリックされたときに、隠されたナビゲーションメニューが現れるデザインです。アニメーションは、2つのステータスの間の連続性を示し、不自然な遷移を避ける上で不可欠です。遷移が優れた設計であれば、ユーザーはどこに注意を向けるべきかを明確に理解することができます。アニメーションを使用すれば遷移をよりはっきりと表現できるため、ユーザーの利用開始時と利用終了時の間に何が起こったのかも明らかになります。以下は、Brian Hoff DesignのWebサイトの例です。ユーザーが円で囲まれた矢印ボタンをクリックすると、大きなメニューボックスが右から現れます。このような「ポップアウト」効果のアニメーションは、メニューが画面の外からスライドしているかのように見せて、インタラクション全体をスムーズに実行します。アニメーションはステータス（状態）間の点と点をつなぎます。ハードカットではない状態変化遷移は、状態の変化を示すために非常に重要です。 Adrian Zumbrunnen氏は「UXデザインにおけるスマートトランジション」という記事で、ページ内の別のセクションにつながるリンクがクリックされたときに、アニメーションがコンテキストを維持するのにどれほど役立つかについて、素晴らしい例を紹介しています。比較対象として、ハードカット（一つ画面から別の画面へ遷移なしに一気に移動すること）に感じられるこの静的で急な変化を見てください。突然の変化ほど不自然に感じられるものはありません。このようなインターフェースの変更は、ユーザーも処理が難しいと思うでしょう。アニメーションによる振る舞いアニメーションを加えることは、「生命感を与える」ことです。後者のナビゲーションの例は、微かなアニメーションを使用しているため、ユーザーはWeb上の記事のどのセクションを読んでいるかを相対的に把握することができます。 [PR] Webデザインで副業する方法とはクリエイティブな効果クリエイティブなアニメーションは、ユーザー体験を真に楽しく思い出深いものにします。エンターテインメントをインターフェイスにもたらすことができます。ストーリーテリングのためのロングスクロールデザイナーは、トップの画面領域を重要な情報でいっぱいにすることに集中していました。しかし幸いなことに、現在このルールは絶対的に正しいものではないとされています。実際に、「Webページ上でユーザーの注目の約66％は、トップの画面領域の下に向けられている」と言われています。ユーザーの注目がページの上から下へ移動するとき、スクロールはインタラクションデザインの重要な要素としての役割を持ちます。アニメーションによるストーリーテリングは、退屈になりがちなインターフェースにユーザーとの感情的な結び付きを加えることができます。一般的によく使用されるパララックス（視差効果）アニメーションの代わりに、より繊細な設計を試してください。まず、Webサイトをスクロール可能な部分に分割します。各部分内でアニメーションを使用してコンテンツを紹介できます。以下の例のアニメーションは、シンプルなアートのイラストレーションをアニメーション化することで、コンテンツに「生き生き」とした雰囲気を与えます。画像クレジット：Le Mugs 結論デザインは、単なるビジュアルプレゼンテーション以上の意味を持ちます。デザインとはインタラクションです。アニメーションはコミュニケーションにとって重要です。私たちは、Webにはインタラクティブな本質があることを受け入れ、それをデザインの自然な一部分と考える必要があります。他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。 TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを開発することが可能です。独学に限界を感じている場合はご検討ください。

Webデザイン

意味のあるデザインを！自然なアニメーションの作り方

本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、ソフトウェアデベロッパーのNick Babich氏によって投稿されました。モーションによってモバイルアプリに命を吹き込む 10年前、アニメーションやモーションを使用したユーザーインターフェースは効率の悪いものとされていました。派手なサイトに飛び跳ねるポップアップ、点滅するボタンなどを連想させるものでした。しかしここ数年でそれらの考え方は大きく変化しました。iPhoneやモバイルアプリが導入され、デザイナーの多くは動的なアニメーションの将来性について経験を積んてきました。アニメーションは時が経つとともにインターフェイスの重要な要素になり、デザイナーに全く新しい次元を与えています。最新のインターフェイスはもはやただの静止画の連続ではありません。アニメーションを使用すると、時間という次元を製品に加えることでソフトウェアと人の間のギャップを埋めることができます。最高に直感的で楽しい体験はいつもモーションデザインに細かい描写を入れます。この記事ではユーザー体験をより生き生きと楽しくするために、どこに美しさを追加できるかといういくつかの例を提示します。読み込みの時間を楽しいものにする刺激的なオープニングアニメーションがあると、アプリを開くたびにユーザーの気持ちを盛り上げることができます。しかし、それ以上の役割を果たす場合もあります。下の例のアニメーションは単に楽しいというだけのものではなく、ユーザーの目に影響を与えて集中するべき場所をコントロールしています。ユーザーがUberアプリを起動すると、マップ上のピンに変化するドロップに目が行きます。 [PR] Webデザインで副業する方法とは新規ユーザーにとって外観的な魅力のあるコンテンツユーザーは初めてアプリに触れたときに、何をしたのかを知り理解しなければなりません。スムーズな画面遷移と優れたアニメーションは、新規のユーザーをどのようにアプリに引き込むかということにすさまじく影響があります。以下の例でのオンボーディングは創造性と個性が満載です。ビジュアルデザインとマイクロコピーが際立っており、新しいユーザーがアプリを体感することができます。 Ramotionによるアニメーション対話型TIPSの組み入れアニメーションは、アプリ内の各機能についての対話式ショートストーリーを作ることができます。これによってユーザーは次にどうするべきか明確に理解できるようになります。 Ramotionによるアニメーション視覚的なオリエンテーションデザインにアニメーションを追加する最適の場所は、変化の瞬間です。状態変化が起こるとき、ユーザーは新しい場面が前のものとどう関係しているかを理解する必要があります。静的なデザインでは状態と状態の間の前後関係を把握することができません。接続とコンテンツの関係が成立するのは、アニメーションが機能的にも様式的にも役立ったときです。アニメーション化されたトランジションは異なるUI間の中継となり、ユーザーを導くのに役立ちます。アニメーションはインターフェイス内でユーザーが現在の位置を確認するのに役立ちます。ユーザーは要素の動きに従って、2つの状態がお互いにどのように関係しているのかということを理解することができます。 Anton Aheichankaによるアニメーション要素間の関係を説明するよいデザインのトランジションは、アプリに触れたときにユーザーの目を必要な場所に正確に誘導します。アニメーションは目的の対象に応じて適切な要素を強調します。再生ボタンを一時停止ボタンに変換することで2つのアクションがリンクされています。ひとつを押すともう片方のアクションが表示されるようになっています。 Anish Chandranによるアニメーション空間認識アニメーションはユーザーが空間インターフェイスのメンタルマップを作成するのに役立ちます。自分がどこから来て、どこに行くのかということをはっきりすることができます。アニメーションはインターフェイス内で自分の位置を確認し、適切な場所にたどり着くのに役立ちます。明確なフィードバックアニメーションはユーザーが実行しているアクションを強化するために使用できます。アニメーションのフィードバックは、ユーザーが操作した結果成功したかどうか及びその理由を示すのに役立ちます。問題のある状態を示すエラー状態のデザインを考えるときには、ユーザーにはっきりと分かるようにすることが大事です。パスワード入力エラー時の揺れのアニメーションは、明確なフィードバックのよい例です。人間がお互いにフィードバックを与える、首を横に振るという方法と直接関係します。アニメーション化されたフィードバックは、要素の複数のレイヤーが連携してユーザーの行動に反応するときにより効果的です。ユーザーの不安をなくすアニメーションはユーザーが自分の行動の結果を見るのに役立ちます。「言うのではなく見せる」という原則に従い、アニメーション化されたフィードバックを使うことで何が達成されたかを示すことができます。下のStripeの例では、ユーザーが「Pay」をクリックするとアプリが成功の状態を表示させる前にスピナーが一時的に表示されます。チェックマークのアニメーションによってユーザーは支払いという大事な行為を簡単に行い、またその詳細を確認することができます。ロジックについての注記ロジックはすべてのアニメーションの重要な要素のひとつです。環境にロジックを確実に与える必要があります。複雑さを少なくすることを余儀なくされる小さなスクリーンを適切に扱う方法を考えることが特に大事です。アニメーションを論理的にかつ目的に合わせてください。あまりにも予測できない作用の過剰なアニメーションは製品のUXを破壊するおそれがあります。下の例のようなアニメーションは技術的には問題なく実行されていますが、かえって紛らわしいインターフェイスになっています。写真をスワイプするとその人物の詳細ビューに移行するという動作は予測がしにくいからです。人々はすでに実世界や他のアプリから特定のジェスチャーが何をするかどうかについて多くの先入観を持っています。つまり、要素を一貫性のない方法で動作させると悪いUXが作成されます。最後にアニメーションは美しさと機能を結びつけるために幅広い規模と状況で使用されます。しかしアニメーションを作成する際には事前に計画的に考えておく必要があります。それは、「アニメーションはアプリをクールにするものではなく、ユーザーが期待した体験をもたらすもの」です。また、TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。

アプリデザイン

簡単に作成できる！Unityでアニメーションを作る方法【初心者向け】

ゲームで演出をリッチにするためには、アニメーションを作成する技術が不可欠です。アニメーションと聞くと何か敷居が高いものと感じる方もいらっしゃるかもしれませんが、Unityでは初心者の方でも簡単にアニメーションを作ることができます。今回は、Unityでアニメーションを作る方法を解説していきます。今回は3DのSphereをアニメーションで動かしていきたいと思います。目次読み込み（ローディング）の待ち時間が、退屈でなくなる自然なトランジション（画面遷移）をデザインする要素間の関係を明らかにする操作の誤りを伝えるフィードバック（応答）として活用する操作完了を知らせるフィードバック（応答）として活用する結論そもそもUnityについてよく分からないという方は、Unityとは何なのかについて解説した記事を読むとさらに理解が深まります。大石ゆかり田島メンター！！画面内のオブジェクトを動かす方法についてもっといろいろ知りたいです！田島悠介では今回は、オブジェクトにアニメーションを追加する手順を解説しよう。大石ゆかりアニメーションということは、オブジェクトに特定の動作をさせたりできるんですか？田島悠介そうだね。移動させたり色を変えたりいろいろできるよ。まずは簡単な座標の移動からやってみようか。 Unityのアニメーションシステム Unityでは簡単にアニメーションを作成できます。オブジェクトの位置、角度、大きさ、色など基礎的な値はものの1分ほどで設定できてしまいます。アニメーションと聞くと、プレイステーション4のようなきれいな3Dモデルが自由自在に動いているものや、テレビで見るアニメのようなクオリティの高いものを想像するかもしれません。そうした物を作るためには、Unity以外の力(Mayaや3DsMaxなどの3Dモデル、アニメーション編集ツール)が必要になってしまいます。そこで今回は、Unityだけでできるアニメーションの例として、簡単な座標の変更を作ってみましょう。まずは動かしたいオブジェクトにAnimationコンポーネントをアタッチします。 Animationコンポーネントは、Miscellaneous(その他)グループに含まれています。次に、[Window]->[Animation]からアニメーションウィンドウを開きます。アニメーションとアニメーターの違い Animation と Animator の違いについて解説します。 Animation と Animatorというと、大きく2つあります。 Animation コンポーネントと Animator コンポーネント Animation ウィンドウと Animator ウィンドウ Animation コンポーネントと Animator コンポーネント Animation コンポーネントは過去の仕組みです。新しいプロジェクトでは、Animator コンポーネントを利用する必要があります。過去のAnimation コンポーネントを残している理由としては、後方互換性を確保する意味があります。つまり、Animation コンポーネントを知らなくても良いということではありません。 Animation ウィンドウと Animator ウィンドウ Animation ウィンドウでは、フローチャートに似たシステムを利用して、アニメーションクリップ全体の取り扱いが可能です。 Animator ウィンドウでは、アニメーターコントローラーアセットを作成・表示・修正できます。田島悠介アニメーションの作成を開始してみよう。Hierarchyで動かしたいオブジェクトを選択して、AnimationウィンドウのCreateボタンを押すんだ。大石ゆかりファイルの保存ダイアログが表示されました。田島悠介アニメーションの名前をつける部分だね。普段は「Jump」や「Walk」などの名前を付けるけれど、今回はサンプルだから「Sample.anim」という名前で作成してみよう。 [PR] Webデザインで副業する方法とは簡単なアニメーションを作成してみるアニメーションを作成する準備ができました。実際にアニメーションを作っていきましょう。（画像はクリックで拡大表示されます。）田島悠介それではアニメーションを作っていこう。 Unityでは、キーフレームアニメーションとよばれる方法を採用していて、特定の時間におけるプロパティの値を設定することで、値の補間によってアニメーションを行うよ。大石ゆかり難しくてよくわからないです・・・田島悠介はじめはそうだね。実際に触ってみれば感覚がつかめるよ。アニメーションの作成には、Animationウィンドウ左上の録画ボタンが便利です。まずはこの録画ボタンを押してみましょう。録画ボタンがONになっている状態でインスペクタからオブジェクトのパラメータを変更すると、入力フィールドが赤く変化します。また、この際Animationウィンドウにはキーフレームが追加されています。　上記の操作で、0フレーム目にキーフレームが打たれました。フレームの移動は、画像の部分をドラッグすることで行います。今回は、30フレーム目に移動してみます。 30フレーム目でもオブジェクトの座標を変更してみます。フレームを移動させることで、補間されていることを確認できます。再生ボタンを押すことで、実際の速度でプレビューが行われます。アニメーションの編集を終える際は、忘れずに次の2つの操作を行ってください。・録画モードの停止・フレームを0フレーム目に戻す録画モードの停止やフレームを0フレーム目に戻す操作を行わないと、普通にオブジェクトの座標を変更したい場合でも、アニメーションのフレームとして保存されてしまいます。録画モードのON/OFFは、Animationウィンドウ左上のアイコンで確認できます。（時計アイコンになっていれば録画モードOFF）アニメーションの再生実行時にアニメーションを再生するには、作成したアニメーションをAnimationコンポーネントのAnimationプロパティに設定します。また、アニメーションをループさせる場合は、Projectタブでアニメーションを選択し、InspectorタブでWrapModeを変更します。今回はループさせるために「Loop」に設定してみます。実行時にアニメーションが再生されます。まとめ今回はUnityで簡単なアニメーションを作成していきました。今回は移動を行いましたが、他にも回転、拡大など様々な効果をつけることができます。アニメーションをマスターすれば、今後のゲームの表現の幅が広がること間違いなしです。ぜひとも理解を深めていくようにしましょう。田島悠介今回はY軸を指定したので上下に動いたけれど、例えばz軸の値で動かすとオブジェクトが手前と奥に移動するよ。大石ゆかりインスペクタで編集できる値は、どれもアニメーションさせることができるんですね。田島悠介座標の移動以外にも、オブジェクトの大きさを変更したりマテリアルを途中で変化したりと、様々な効果を加えることができるんだ。基本的な手順は今回と一緒なので、ぜひ練習してみよう。大石ゆかりいろいろ追加して試してみます。ありがとうございました！ Unityを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたい Unityを学習していて、このように思ったことはありませんか？テックアカデミーでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、はじめてでもUnityでオリジナルゲームの制作ができるようになります。まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

Unity

マイクロインタラクションで気をつけたい5つのポイント

本稿は、Free Code Campのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、UX in Motionの設立者で、ワークショップを主宰しているIssara Willenskomer氏によって投稿されました。この記事では、私が一週間をかけて数多くのUIアニメーションを観察した末に気づいた、マイクロインタラクションで気をつけたい5つのポイントを解説します。最初にマイクロインタラクションとは何でしょう？これについては明快な説明を与えています。「マイクロインタラクションとは、デバイス上でひとつのタスクだけをこなす最小単位の要素」 1. デザイナーとしてのエゴを抑制することデザイナーであれば、称賛を受けて自分のエゴを満たしたいと思うかもしれません。しかし質の高いマイクロインタラクションをデザインするには、作業中はデザイナーとしてのエゴを忘れることが重要です。次の例は、Sergey Valiukh氏のデザインしたアニメーションです。アニメーションは新しいアイデアが上手く機能するか実験するには絶好の土台ですが、彼の実験したアイデアは失敗しています（彼はフォント、レイアウト、配色、アニメーションにおいて非常に優れたデザイナーですが）。このアニメーションの失敗の原因を分析します。第一に、画像の3Dフリップ機能です。これは全く不必要で有害でさえあります。マイクロインタラクションにおいては、それを省いたらデザインがシンプルになるような無駄な部分は、省くことが正解なのです。第二に、画像はフィード表示において切り取りされますが、編集ビューにおいて全画面表示になります。これは明らかに機能的ではありません。第三に、上のナビゲーションメニューのアイコンは、画面遷移に時間が長くかかり過ぎです。最初は素晴らしいデザインに見えるかもしれませんが、そのうち長い待ち時間にうんざりするでしょう。マイクロインタラクションは迅速であることも重要で、最大でも300～400ミリ秒の時間内にスムーズに実行されるべきです。最後に、画面下の2つのアイコンは表示されるタイミングが異なります。これは紛らわしく余分な設計であり、かえってユーザーの認知的負荷を増やします。結論この例のようなアニメーションを設計することには大きな価値があります。しかし、機能的なものとそうでないものを区別し、削るべき無駄な部分を判断して、エゴを忘れ、シンプルでユーザビリティに優れることが重要です。これはデザイナーが楽しくて美しい詳細を設計してはいけないということではありませんが、デザイナーは自分にとって満足できる細部のデザインが、余分な部分にならないよう注意するべきです。実践のポイント：削るべき余分なところを見極めましょう。あなたの設計した詳細なアニメーションは、シンプルでユーザー体験を高める効果のあるものですか？それとも逆にユーザーの認知的負荷を増やすものですか？ 2. クリエイティブなデザインを作るためにストーリー性を犠牲にしないユーザーエクスペリエンスにおいては、さまざまな理由からストーリー性が重要です。 1つには、ユーザーの予想、継続性、認知的負荷と関係するという理由からです。また、私たちの脳が情報の意味を理解し整理するプロセスと関係するからでもあります。次の例では、Srikant Shettyはストーリー性を台無しにしています（同氏は非常に優れたアニメーター、デザイナーですが）。その原因を分析してみましょう。まず最初に、フォームの奇妙さに気づくと思います。ユーザーは、インライン入力できると予想します。しかし表示されている入力フォームの行は偽物で、入力できません。本物の入力フォームはその後ろに隠されています。入力する行をタップすると、隠されていた入力フォームが現れてやっと入力可能になります。ユーザーが入力フォームを使うときに予想するイメージが阻害されているのです。ユーザーは予想通りにタスクやフローを継続することができず、一度立ち止まって、予想外の状況に対処しなければなりません。このような誤りは、デザイナーが「クリエイティブ」なデザインを創造しようとするときに生じます。インタラクションにおけるイメージを維持することよりもクールな効果やテクニックを優先するため、こういったことが起き得ます。その結果インタラクションは不明瞭なものになります。優れたマイクロインタラクションは、シンプルでフローを備えています。先の例と次の2つの例を比較しましょう。画像：Andrej Radisic（上） & Matt D. Smith（下）これら2つの例においては、シンプルで的確です。上の例では、行が跳ねるような効果のある要素が使われていますが、基本的なインタラクションモデルに、面白さを追加できるデザインの細部として機能しています。実践のポイント：シンプルに設計する [PR] Webデザインで副業する方法とは3. 単一の動きで実装できなければ、実装しない方がいい私が観察した限り、成功しているマイクロインタラクションは、例外なく単一の統一された動きで構成されています。一方、失敗しているマイクロインタラクションは動きが複雑です。次の例で、Romain Passelande氏は間違いを犯しています（同氏はDribbbleのサイトでとてもクールなポートフォリオを公開していますが）。原因を分析しましょう。アニメーションに慣れていない方には分かりにくいかもしれませんが、単一の動きとして統一できるはずの動きが、2つの別々の動きに分けられています。変形する線回転するアイコン線が変形するのが1つ目の動きで、アイコンが回転するのが2つ目の動きです。次の例で並べて比べると違いが分かりやすいです。左と右のアニメーションは「単一の動き」の法則に反しています。中央のアニメーションだけが、単一の統一された動きで構成されています。シンプルで効率的な動きです。実践のポイント：マイクロインタラクションは、単一の統一された動きで構成しましょう。 4. 問題はアニメーションではなく、デザインにある UIアニメーションの微妙なニュアンスを研究する人は皆、デザイナーが「静的なデザイン」から「動き」を分離するのは難しいという問題に直面します。これはもっともなことであり、優れたマイクロインタラクションが継ぎ目のない動きを備えていることにも起因します。一方、失敗したマイクロインタラクションは非常に目立ちます。次の図表は、デザインとアニメーションの関係性に関する理論を示したものです。一般的には、点と矢印のある領域（良いアニメーション×良いデザインの領域）を目標とすることになるでしょう。この理論を現実に応用してみましょう。次の例では、デザインをアニメーションから分離する練習を行います。Sam Thibault氏は、あまりクールではないデザインに、優れたアニメーションを加えています（同氏は、Hanndsomeに勤める非常に才能のあるデザイナーですが）。「このデザインは斬新で優れているのになぜ？」と疑問に思うかもしれません。たしかにその通りですが、ここで問題としたいのは、「カートに追加（add to cart）」ボタンの扱い方についてです。この例の場合、悪いデザインをアニメーションによって解決することは不可能です。問題はアニメーションではなく、デザインそのものにあるからです。「カートに追加」ボタンには、形を変えて画像周辺のガターを占領するという、変形効果が加えられています。この効果は不必要であるだけではなく、「カートに追加」ボタンのUI要素としての重要性を考えれば、ユーザーの認知的負荷を増やします。映画製作の世界では、セットの問題は脚本に起因すると言われています。悪い脚本は悪い撮影シーンを生み出します。それと同様に、悪いデザインは悪いマイクロインタラクションを生み出すのです。実践のポイント：アニメーションに頼る前に、まずデザインの意味を考えましょう。 5. 打たないショットは100％外れるこのメッセージは、アイスホッケー選手のウェイン・グレツキー氏の名言です。彼はアイススケートのリンク上で、対戦相手の攻撃を軽快に滑ってかわしながら、ゴールのネットにボールを入れるのを得意としています。この名言は、マイクロインタラクションをデザインするデザイナーについても当てはまります。ほとんどのデザイナーは300〜400ミリ秒のアニメーションをデザインすることに慣れていないため、デザインの細部を制御することは難しく、それらに隠されたチャンスに気づくことが難しいのです。比喩で例えるとしたら、これは複雑なジャグリングであり、ボールを見失って落とすのはたやすいことなのです。 Ivan Bjelajac氏による次の例は、デザインの細部で表現できるはずの5つのチャンスを逃しています。メニューボタンと「戻る」ボタンは、アイコンの変形をシンプルに美しくデザインするチャンスです。しかし、最初のトップページ全体がメニューアイコンのスライド効果で覆われるため、統一感のないデザインになっています。四角形の黄色い右向き矢印アイコン ――この回転効果、スケール効果は不必要です。この矢印アイコンだけが主張するデザインは奇妙です。コンテンツに合わせた画面遷移にするべきです。画面遷移において、テキストコンテンツに加えたこのフェードイン・フェードアウト効果は不必要です。一貫して表示したままの方がいいでしょう。見出しごと左から右にスライドさせていますが、コンテンツだけをスライドさせた方が、よりシンプルに美しくなるでしょう。メイン画像は、バナー表示されるときに切り取り効果が加えられています。画像はありふれた方法で表示するのではなく、コンテキストに合わせて再構成することが理想です。細部のデザインに十分な注意が払われた次の例と比較してみましょう。これほどシンプルで美しいマイクロインタラクションは想像できません。あらゆる手段が講じられ、細部のデザインは完璧です。実践のポイント：デザインの細部に注意を向けましょう。あらゆる手段を講じましょう。チャンスを逃してはなりません。結論あなたにこれまでアニメーションをデザインした経験がないとしても、シンプルな美しいマイクロインタラクションをデザインすることは可能です。大事なコンセプトは次の5つです。エゴの抑制ストーリー性単一の動きアニメーションは万能の解決策ではありませんデザインの細部にはチャンスが隠されていますまた、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。これからデザイナーとして働きたい、自分で思った通りのデザインを再現したいと思っている方はぜひご覧ください。

Webデザイン

無限スクロールの課題とは！スクロールが長いサイトのデザイン手法

本稿は、Smashing magazineのブログ記事を許可を得て日本語翻訳し掲載した記事になります。本記事は、UXデザイナーのNick Babich氏によって投稿されました。縦長で無限にスクロールするWebサイトが最近一般的になってきています。ロングスクロールを使うと、ユーザーはページをスクロールするだけで大量のコンテンツを閲覧することができるようになります。無限スクロールはFacebook・Twitterなどのフィードで見られる、エンドレスなスクロールの手法です。ロングスクロールには次のような利点があります。ユーザーをより引き込むことができます。スクロールを利用することで、目的のために必要な操作を最小限に抑えることができます。「次へ」をクリックする必要がないというメリットによって、ユーザーは次のページに移動する変化を気にすることなくコンテンツに没頭することができます。モバイルデバイスにうまく変換されます。ロングスクロール技術の普及の背景には、モバイル画面がよく使われるようになったということが大きく関わっています。画面が小さいほどスクロールの頻度は増えます。モバイルデバイスのジェスチャーコントロールによって、スクロールは直感的で楽しいものになります。しかし、このやり方には欠点がないわけではありません。デザイナーはコンテンツとナビゲーションにしっかりと注意を払う必要があります。この記事ではロングスクロールにおいてのいくつかの利点、考慮すべき点、それと簡単なヒントについて解説します。どのようなときにロングスクロールを利用するかロングスクロールはすべてのWebサイトに使われるわけではありません。次のような場合にふさわしいでしょう。ストーリーテリング(ストーリーテラーのために線型構造を作り出す) 長い記事や複数のステップによるチュートリアルなど、連続した長いコンテンツ(複数のページに分割するよりもユーザーエクスペリエンスが向上する) コンテンツを別々のパーツに分割できず、全体として提示する必要がある場合(インフォグラフィックなど) 製品の機能・品質・特質を物語形式で見せたいときどのようにロングスクロールを実装するか次の10のルールが、ロングスクロールによいユーザーエクスペリエンスをもたらすのに役立ちます。 1. ユーザーにスクロールを促すページが表示されるとすぐにユーザーはスクロールを開始しますが、サイト上部のコンテンツは依然として重要です。訪問者の最初の印象と品質に関する予想は、ページ上部の内容で決まります。ユーザーがページをスクロールするのは、サイトの上部に表示されているのが期待できるものである場合だけです。なので、最も魅力的なコンテンツを置きましょう。良い導入部・前書きを提示しましょう。(コンテンツの状況をはっきりさせて、ユーザーに「このページがどういうものであるか」ということを分かってもらうことができます) 魅力的な画像を使いましょう。(そのサイトに関連する情報を含む画像は、ユーザーの注意を引きつけます) 2. ナビゲーションオプションを常に保持するロングスクロールのWebサイトを作成する場合、ユーザーは現在の位置とナビゲーションを把握したいと思っていることを忘れないでください。ロングスクロールではナビゲーションに関する問題が起こることがあります。ページをスクロールしたときにナビゲーションバーが表示されなくなった場合、下の方までスクロールしていたのに一番上まで戻らなければいけなくなったりします。こういう問題に対しての解決策として、常に一貫した場所に表示され続けるメニューがあります。モバイルデバイスの場合：モバイル画面は他のデバイスよりも小さいため、ナビゲーションバーが画面の大部分を占めることがあります。ユーザーがコンテンツを見るためにスクロールしているときはナビゲーションバーを隠して、トップに戻るために画面を引き下げたときに表示させるとよいでしょう。ヒント：追加のナビゲーションを使用して、ページ内の各セクションの間をジャンプさせることもできます。以下のアニメーションの場合、ユーザーは自分の進行状況を確認することができると同時に特定のセクションへのショートカットとしてこれを利用することができます。 3.「戻る」ボタンが適切に動作することを確認するロングスクロールのサイトでは、ユーザーが自分のページ上の位置を見失うことがよくあります。ロングスクロールのリストからクリックして該当のページに行ったあと「戻る」ボタンを押したとき、元いた場所でなくページの一番上に戻ってしまうというような形です。そうすると、一度見たコンテンツをまたスクロールしなければいけなくなります。適切な場所に戻れないことで、当然ユーザーは不満を感じるでしょう。フィード内の要素をアクティブにしたあと、元いたところにきちんと戻れるようにしておく必要があります。Flickrの「戻る」ボタンはこのような機能についての良い例です。スクロール位置が記憶されており、「戻る」ボタンを押すと元の場所に戻ることができます。 4. スクロール位置に基づいてURLを変更するロングスクロールの一般的な問題のひとつとして、ページ上の特定の場所へのURLによる共有ができないという点があります。スクロール位置はURLに反映されず、そのページの先頭に繋がります。 URLが現在の位置を捉えないので、ユーザーは画面を簡単に切り替えることができなくなり苛立つことになります。 HTML5からは、history.pushState()関数を使うことで、ページをリロードすることなくブラウザに表示されるURLを変更することが可能になっています。 5. ページ内ジャンプ機能を使用するロングスクロールのもうひとつの共通の問題は、方向感覚がなくなることです。ユーザーは前に見たものを探すときに苦労します。長いチュートリアルなど、コンテンツが複数の重要なセクションに分かれている場合に特に深刻な問題になります。「セクションへジャンプ」オプションをつけることでこの現象を解決することができます。例えばTumblrでは、ページ内で迷子になったときのためにページの下や上にジャンプすることができるようになっています。ページ上のコンテンツはいくつかのはっきりしたブロックに分けられており、大きなインジケーターのドットが画面の左に固定されています。ヒント：「セクションへジャンプ」機能では、インジケーターのドットを使いやすくする必要があります。ドットがクリックやタップがしにくい状態だとユーザーを苛立たせることになります。そのため、ドットの大きさが適切であるかどうか確認してください。 6. コンテンツを読み込むときに、視覚的なフィードバックを表示するヤコブ・ニールセンのユーザビリティ10原則のひとつによると、システム状態の視認性はUIデザインにおいて重要な原理です。ユーザーはシステム上の現在の状態をいつでも知りたいと思っており、Webサイトは閲覧者を不安にさせてはいけません。適切な視覚的フィードバックを通して、ユーザーに今何が起きているのかを伝える必要があります。Webサイトがコンテンツを動的に読み込む場合は、ローディングが行われていることをはっきりと示さなければいけません。進行状況を示すインジケーターを使用して、新しいコンテンツが読み込まれていることを表現しましょう。読み込み時間は2秒～10秒の短い時間であるはずですので、システムが動作していることをループアニメーションで表すことができます。 7. スクロールハイジャックを行わないスクロールハイジャックのWebサイトでは、スクロールが制御され基本的なWebブラウザの機能を無効にされてしまいます。ユーザーがページをコントロールできない上に動作の予測ができなくなってしまうため、スクロールハイジャックは好ましくありません。この問題はAppleのMac Proのページで見ることができます。ユーザーがどれだけ早くスクロールしても、レイアウトはあらかじめ決められた速度で移動します。このページの全てのコンテンツはスクロールに関連付けられているため、訪問者はページを遅い速度でブラウズすることを強いられてしまいます。 8. ページの読み込み時間を最適化するロングスクロールのページでは、読み込みの長さの問題も発生します。これはWebサイトにおいて致命的な問題です。実際に、ユーザーの47％が2秒以内のWebページの読み込みを求めています。ページが3秒以内に読み込まれない場合、57％のユーザーが去ってしまいます。ロングスクロールの読み込み時間の問題は解決することができます。レイジーローディングなどの読み込み技術を利用し、ページの読み込み時間を最適化することで基本的なコンテンツにすぐにアクセスできるようにします。 9. リソース消費を考慮するロングスクロールを使用する場合は、ページが消費するリソース(CPUとメモリ)を常に考慮に入れてください。ページをリロードせずに複数のページの写真・アニメーションGIF・動画をスクロールすると、システムリソースが大幅に浪費される可能性があります。リソースが限られているデバイス(iPhoneなど)では大量のアセットの読み込みによる遅延が起きる可能性があります。そのため、さまざまなデバイスでWebサイトをテストし、該当の場所を通り過ぎたときにはアニメーションや動画を一時停止するなどの手法を利用します。 10. ユーザーの行動を考えるロングスクロールがどう効果的であるかを判断するために、ユーザーがどのように操作しているかを調査してください。アナリティクスデータが有効です。例えば、Googleアナリティクスではページ解析によって何人のユーザーが折りたたまれた部分の下をクリックしているか確認することができます。そのデータに応じてデザインを調整することが可能です。 [PR] Webデザインで副業する方法とはECサイトでのロングスクロール ECサイトではロングスクロールは頻繁に使用されます。ユーザーは製品のリストや検索結果を、中断することなくスクロールして閲覧し続けることができます。ただしユーザー満足度を向上させるためには、いくつかの一般的な問題に対処する必要があります。ナビゲーションとフィルタをスティッキーにフィルタリングが適切に行われていると、ユーザーは何千ものWebサイト内の選択肢をニーズに合った数少ない項目に絞り込むことができます。ナビゲーションメニューとフィルタオプションを持続的に表示することで、ユーザーがコンテンツをうまく管理することができます。それぞれのアイテムをブックマークできるようにする後々参照できるように気になったアイテムを簡単にブックマークしておける機能は、ユーザーにとって強力なツールです。条件に一致したアイテムの数を表示する利用できるアイテムの数を表示することで、ユーザーはフィルタリングによる結果内容のスクロールにかかる時間を判断することができます。フッターにアクセスできるようにするユーザーはフッターの概念を理解しており、そこにWebサイトの大事な情報があると思っています。しかし、ロングスクロールではフッターの閲覧が困難なことがあります。ページの下に行くと新しいアイテムが継続的に読み込まれ、フッターは見えないところに押し込まれます。この問題は深刻なもののように思われますが、「もっと見る」ボタンを利用することで解決できます。この手法では、コンテンツはオンデマンドで読み込まれることになります。新しいコンテンツは、ユーザーが「もっと見る」ボタンをクリックするまでは自動でロードされません。これによってフッターに簡単にアクセスできるようになります。ロングスクロールと視差効果インタラクションデザインはロングスクロールを使ったWebサイトの基礎であり、アニメーションはその中でも欠かせない部分です。 Web上でのユーザーの注目のスパンが約8秒であることを考えると、楽しいスクロールは注意を引きつける時間を引き伸ばすことができると言えます。閲覧者を喜ばせるアニメーションのひとつに視差効果があります。視差スクロールでは背景画像は手前のコンテンツよりもゆっくりと動き、深みと没頭の錯覚を作り出します。この効果によって画面の立体感が増します。パララックススクロールをどんなときに使うか視差は大きな印象を与え、訪問者がもっとスクロールしたくなるなる面白い視覚効果です。ユーザーをあっと言わせたいときに便利な手法になります。パララックススクロールは、ガイド付きの物語形式で効果を発揮します。ストーリーをスムーズに直線的に伝えたい場合、視差効果とロングスクロールを組み合わせることによってユーザーは閲覧を実体験のように夢中になって楽しむことができます。 The Boatでは、画面がスクロールされると次のコンテンツのパスを作成しながらアニメーションによって閲覧者を次の場面に導きます。スクロールの動作はより楽しいものになり、ユーザーは「次はどうなるんだろう？」とワクワクするでしょう。パララックススクロールを使うべきではないケース多くのユーザーがはっきりしたタスク(製品の購入など)を目的としている場合は、パララックススクロールは使用しないでください。もし製品を購入するたびに視差効果を見せられるAmazonがあったら、どれだけフラストレーションがたまるか想像してみましょう。パララックスとページパフォーマンス視差効果を使用するWebサイトの多くは、スクロールのパフォーマンスに苦しんでいます。iPhoneのような高画素のデバイスでは特に害のあることです。すべてのパフォーマンスの問題を完全に解決することはできませんが、簡単な手法でスクロールのパフォーマンスを向上させることができます。ブラウザのアニメーションにはtranslate3d・scale・rotation・opacityといった手軽なプロパティのみを使用してください。大量の画像をアニメートしたり、劇的にサイズを変更させたりしてはいけません。ブラウザに画像(特に巨大なもの)をリサイズさせると、コストがかかる可能性があります。一度にたくさんのものをアニメートしないようにしましょう。パララックスとアクセシビリティ前庭機能障害を持つユーザーが、そのWebサイトを使用したとき視覚的にどのようになるかを考慮しましょう。アニメーションによって目まいが起きる可能性があります。 Val Headはより安全なアニメーションをデザインする方法として、もしWebサイトに大量の動きがある場合はモーションをオフにするオプションをつけることを推奨しています。ボタンあるいはトグルスイッチを使用して、Webサイト上のアニメーションを減らしたり消したりできるようにします。このアイデアの研究のために、Nat TarnoffはどのWebサイトでも使用できるトグルスイッチのプロトタイプを開発しました。最後にロングスクロールによって、没入感のあるブラウジングを生み出すことができます。ユーザーが直感的なUIが好きであれば、スクロールの長さは気にならないでしょう。閲覧者の目的が達成され、かつ便利だと感じさせるものにしてください。また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサイトを開発することが可能です。独学に限界を感じている場合はご検討ください。

Webデザイン

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

実際のアプリから学ぶ！UX向上のためのアニメーションの使い方

読み込み（ローディング）の待ち時間が、退屈でなくなる