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

アプリを利用する上で大事なのは使うストレスが無いかどうか。心地よく使ってもらうためにアニメーションは有効です。いくつか海外のアプリを事例として紹介しながら、自然なアニメーションを取り入れる方法について紹介しています。

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

本稿は、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デザイナーのサポートで学びたい場合はご参加ください。

心理学から学ぶ！心地よいUXデザインを作る方法

本稿は、Design School Canvaのブログ記事を、Design School Canvaより了解を得て日本語翻訳し掲載した記事になります。過去1...

アプリデザイン

プロトタイプの作成に役立つ！デザインツールInVisionの使い方【初心者向け】

プロトタイプの作成でよく使われているInVisionというツールの使い方を解説している記事になります。デザインツールとして便利な機能も多いのでぜひ利用してみ...

アプリデザイン

ユーザー満足度を上げる！UXデザインで守るべき10のルール

本稿は、Designmodoのブログ記事を、Webdesigner Depotより了解を得て日本語翻訳し掲載した記事になります。 Webサイトやアプリにお...

アプリデザイン

「Sketch vs. Figma」デザインツールとして優れているのはどちらか

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、WebデザイナーであるChristian...

アプリデザイン

デザイナーなら必見！どんな作業にも便利なSketch用プラグイン12選

本稿は、WebDesignerDepotのブログ記事を許可を得て日本語翻訳し掲載した記事になります。本記事は、ライターでありUXデザイナーでもあるJak...

アプリデザイン

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

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

アプリデザイン

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

【すぐに使える！】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デザイン

簡単に作成できる！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

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

本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、ソフトウェア・デベロッパーのNick Babich氏によって投稿されました。アニメーションはストーリーを伝えることができます。ただし、伝えるのは長くて複雑なストーリーではなく、シンプルなストーリーです。例えば、「このコンテンツを見て！」、「操作は正常に完了しました。」などのメッセージの伴う、短いストーリーです。アニメーションを使う目的は、単にユーザーを楽しませることではなく、ユーザーがアプリの動作や使い方を最も効率的に理解するのを助けることです。次に引用するように、ZURB社もこの考え方を表明しています。「ZURB社では、静的な画面だけをデザインする時代は終わりました。ユーザーが画面からコンテンツを実質的に見ることができるようなデザインを実践しています。」（同社のブログ記事より）アニメーションは美しさと機能を兼ね備えたデザインを、幅広いコンテキストにおいて実現できます。：プログラムの振る舞い（処理や動作）に影響を与えたり、コンピュータのステータス（動作状態）や動作結果をユーザーに知らせたり、ユーザーの注意を引いてを上手く誘導することも可能です。この記事では、UX向上のためのアニメーションの例をいくつか紹介していきます。読み込み（ローディング）の待ち時間が、退屈でなくなるもしプログラムのソースコードの行数を減らすことが難しければ、データ読み込み中の待ち時間が、ユーザーにとってなるべく楽しいものとなるよう工夫するべきです。ユーザーを退屈させる、クルクルと回るローディングアイコン（このアイコンは、ユーザーにデータ読み込み中という事実を伝えるだけです。）の代替として、アニメーションを活用できます。アニメーションとスケルトンスクリーン（Skeleton screen）を組み合わせて活用すれば、ユーザーの関心をコンテンツに集中させ続ける効果もあります。この組み合わせは、ほとんど全てのWebサイトやアプリにおいて利用できます。スケルトンスクリーンは、コンテンツのデータ読み込みが完了するまでに、UIを段階的に表示する手法です。（画像左側）自然なトランジション（画面遷移）をデザインするアニメーションは、トランジション（画面遷移）をよりクリアに表現できるため、操作の過程を明確に示すことができます。ユーザーも意識をどこに向けたらいいのかを理解しやすくなります。 Adrian Zumbrunnen氏による次のデザイン例では、スクロール画面とアニメーションを組み合わせています（スクロールエフェクト）。ユーザーがリンクをクリックした後も、コンテキストの状態を維持する助けとなります。これと比較して、処理の最初と最後の2つの静的な画面だけでトランジションをデザインした場合、途中経過が欠けているような印象を与えます。トランジションを2つの静的な画面だけでデザインした場合画面が急に変わることは不自然であり、ユーザーにとってはインターフェースの操作を理解する妨げとなります。トランジションをアニメーションでデザインした場合アニメーションとは、静的な画面に「息を吹き込む」ことです。自然なトランジションにより、ユーザーはインターフェース上でのフロー（流れ）や進行速度を理解しやすくなります。また、インタラクションの次のステップで何が起こるかを予測しやすくなります。 [PR] Webデザインで副業する方法とは要素間の関係を明らかにするアニメーションは、直接操作しているような感覚を高めることもできます。次の例では、スムーズなトランジションが実現されています。メニューアイコンをプレイバックコントロール（コンテンツ再生時のボタン操作の機能）に変化させ、また元のメニューアイコンに戻しています。ユーザーにボタンの機能を示すとともに、インタラクションに「感動や驚き」の要素を加える効果があります。「再生ボタン」から「停止ボタン」に変化するデザインは、これら2つの機能が関連していること、また同時に成立しえないことを上手く示しています。ユーザーの視線を画面中央にあるプレイバックコントロールに集めるために、アニメーションを使っています。（GoogleのMaterial Design（マテリアルデザイン））その他の例―― フローティングアクションボタン（Floating Action Button）をタップすると、プラス記号から鉛筆のアイコンに変化します。鉛筆のアイコンが、最初に生成されるメソッドだと分かります。このような細部の設計があるかどうかが、ユーザーが次に何が起こるかを予測しなければならないデザインとなるか、またはユーザーがアイコンの意味を直感的に理解できるデザインとなるかの分岐点です。 GoogleのMaterial Design（マテリアルデザイン）操作の誤りを伝えるフィードバック（応答）として活用する例えば、フォームの入力画面にもアニメーションを活用できます。もし正しいデータが入力されたら、「頷く」ようなアニメーションで肯定の意味、間違ったデータが入力されたら「首を横に振る」ようなアニメーションで否定の意味を伝えることができます。こうしたアニメーションは、ユーザーにとってその意味を瞬時に理解しやすいといえます。間違ったデータが入力されたら、「首を横に振る」ようなアニメーションで操作に誤りがあると伝えます。操作完了を知らせるフィードバック（応答）として活用するアニメーションは、ユーザーに操作の結果を視覚的に示すことができます。「Show, don’t tell（言葉で説明するよりも、見せる）」という原則に従うなら、アニメーションを操作への応答として使うことができます。例として、Michaël Villar社の提供するオンライン決済ツール「Stripe」では、ユーザーが「決済する」のボタンをクリックすると、決済完了前に、データ処理中を示すスピナー（Spinner：ローディングアイコン）が現われます。 Michaël Villar社結論アニメーションは、使い方によっては大きな効果を発揮できます。アニメーションを使った方がいい場面、使わない方がいい場面について時間をかけてよく考えることが大切です。アニメーションは、デザインを構成する要素の1つとして、設計プロセスの始まりから考慮に入れるべきです。なぜならデザインは、ビジュアル・プレゼンテーション（Visual presentation：プレゼンテーション、店舗のウィンドウディスプレイなど、視覚的に訴えるデザイン）以上のものだからです。スティーブ・ジョブズ氏の言葉を引用すると「デザインとは、見た目や使い心地だけではない。デザインとは、それがいかに機能するかだ。」 [お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。

アプリデザイン

JavaScriptで文字を動かすテキストアニメーション10選を現役エンジニアが紹介【初心者向け】

JavaScriptで文字を動かすテキストアニメーション10選について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptで文字を動かすテキストアニメーション10選について詳しく紹介していくね！大石ゆかりお願いします！目次テキストアニメーションとはテキストアニメーションでできることテキストアニメーションを実装する方法テキストアニメーション10選まとめテキストアニメーションとは魅力的なサイトには必ずと言っていいほど、インパクトあるテキストアニメーションが実装されているかと思います。ページを開いたときに表示されるテキストや、マウスオーバーなどのアクションに連携するものなど種類も様々にあります。 [PR] Webデザインで副業する方法とはテキストアニメーションでできることテキストアニメーションの表現方法は本当に沢山あります。移動系：最もシンプルな方法で、文字を左右上下などへ移動させるアニメーションです変色系：これも良くあるアニメーションで文字の色を変更させます 3D系：最近流行りのアニメーションで、文字を立体に表現することが出来ます変形系：これも最近よく見ます。文字を分解したり、結合させてみたり、文字を変形させるアニメーションですざっと分類してみました。これにあたはまらないものや、組み合あわせされたものなどもあるかと思います。また、アニメーションが発生するタイミングなども多数あるかと思います。テキストアニメーションを実装する方法実装方法としては、JavaScriptだけではなく、CSSのみで出来るものありますし、jQueryなどライブラリーで提供されているものなどもあります。テキストアニメーション10選 animate.js 文字だけではなく色々なアニメーションが表現できます。実装は難しいですが、複雑なアニメーションを表現することが出来ます。 jQuery TextFX これだけでフェイドイン・スライドイン・一文字づつ表示のアニメーションを表現できます。とりあえず簡単にアニメーションを表現するのに向いています。 Typed.js タイプライターのように文字が打ち出されるアニメーションが表現できます。 iTyped.js こちらもタイプライターのように文字が打ち出されるアニメーションが表現できます。ただし、こちらはjQueryに依存することなく利用できるので、場合によっては使い勝手がよいかと思います。 Splitting.js 文字を浮き上がさせるようなアニメーションが表現できます。 Three.js 3Dアニメーション用のライブラリーです。TextGeometryを利用して文字を3D化できます Blotter.js 文字を波のように揺らすアニメーションなど、５種類ほどのアニメーションパターンが表現できます。 textillate.js jQuery のプラグインです。［animate.css］でエフェクトを表現するのでアニメーションの種類が豊富です。 Granim.js グラデーションを制御するライブラリーですが、文字にも応用できるので、シンプルなテキストアニメーションを表現できます。 LetterFx 文字を回転しながら表示(spin)したり、徐々に文字を見せる(fade)などシンプルなアニメーション表現が複数できます。まとめ今回は、JavaScriptと連携して表現できるテキストアニメーションをご紹介しました。実装方法は各キーワードで検索して調べてみてください。テキストアニメーションにはJavascriptを利用せず、CSSのみで表現できるものなども沢山ありますので、そちらも合わせて挑戦してみてください。筆者プロフィール小宮山晃史（こみやまこうじ) 現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。 iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

JavaScript

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

本稿は、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デザイン

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

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

モーションによってモバイルアプリに命を吹き込む

読み込みの時間を楽しいものにする