TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS 【すぐに使える！】CSSのアニメーションをまとめたサイト・記事20選
icon
icon
CSS

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

初心者向けにCSSで書けるアニメーションをまとめたサイトや記事を厳選して紹介しています。Webサイトの制作において重要なアニメーションですが、すぐ使えるサンプルをまとめているので、ぜひ参考にしてみてください。

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

今回はCSSのアニメーションをまとめたサイトや記事を紹介します。

サイトを作っていく上でアニメーションの実装は必須と言えるでしょう。より目立たせたり、クールな印象を持ってもらうためにアニメーションの書き方を覚えておくとサイトの表現に幅が出るはずです。

そもそもCSSが何かよく分からない場合は、先にCSSの書き方をご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

CSSアニメーションの素晴らしいアイデアのまとめ

css_13_01

このサイトはデモページもセットであるために1ページでいくつかのデモを見ることができます。

上記のゲームボーイカラーの生成HTML、CSSなど真似したくなるアニメーションが多くあります・。

他にも動的なコンテンツが多くあるので必見のサイトでしょう。

CSSアニメーションの素晴らしいアイデアのまとめ

 

Hover.css

css_13_02

アニメーションの実装でまず参考にしたいサイトの代表例ですね。

マウスオーバー時に関するアニメーションについては、このサイトを見れば十分表現ができるでしょう。書き方もすべてまとまっているので、初心者の方でも気軽に使用できるはずです。

Hover.css

 

[PR] Webデザインで副業する学習方法を動画で公開中

CSS3アニメーションをらく～に実装！オンラインツール7選

このサイトでは実装結果が分かった状態で、使いたいものを選ぶことができます。アニメーションを再現できる便利ツールをまとめているので、表現したいアニメーションが見つかるはずです。

CSS3アニメーションをらく～に実装！オンラインツール7選

 

 ここまで動かせる！楽しいcss アニメーションのサンプル集

ここには動くサンプルが多く乗っています。

文字が奥にスクロールするものは実行してみたくなりますね。

ここまで動かせる！楽しいcss アニメーションのサンプル集

 

コラム

コスパとタイパ、両方結果的に良くなる良くなる学び方とは？

「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困ったときに、質問や相談できる相手がいるため挫折しなかった
  • ・プロとして必要なスキルのみを深く学べたので無駄がなかった
  • ・副業案件の提供と納品までのサポートがあったので目的を達成できた

安価・短期間で広く浅く学んでも意味がありません。 本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に 無料相談 に参加してみませんか？

カウンセラー・現役のプロへ、何でも気軽に無料相談可能。 30分か60分お好きな時間が選べて、かつ3回まで すべて無料で ご利用できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！

ここに乗っているサンプルは、オリジナルを作る際に参考になると思います。シンプルなアニメーションから3Dを用いた難易度の高いものも紹介されているので、ぜひ試してみましょう。

ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！

 

CSS3でアニメーション！transitionとanimationまとめ（サンプル付き）

上記にあげたようにオリジナルを作るための基礎になります。サイト内のアニメーションの動きとソースコードの書き方がどちらも載っているので、CSSでアニメーションを書いたことがないという人でも記載されているコードをペーストするところから始められるでしょう。

CSS3でアニメーション！transitionとanimationまとめ

 

1時間でできる無料体験！

 初心者にもコピペで使える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を学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい
1時間でできる無料体験！

CSSを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する

記事を検索

関連するキーワード

関連する記事

擬似要素を使いこなそう！CSSのbefore/afterの使い方【初心者向け】

CSSで書く::before,::aterの使い方を解説している記事になります。 全くの初心者という方が今すぐ覚える必要のある知識ではありませんが、サイト...
CSS

CSSで画像の縦横比を維持したまま拡大する方法を現役エンジニアが解説【初心者向け】

CSSで画像の縦横比を維持したまま拡大する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

CSSで文字サイズをディスプレイサイズに合わせて可変にする方法【初心者向け】

CSSで文字サイズをディスプレイサイズに合わせて可変にする方法について解説します。 そもそもCSSについてよく分からないという方は、CSSの書き方について...
CSS

CSSでposition: fixedを使うと文字が重なる原因と対処法を現役エンジニアが解説【初心者向け】

CSSでposition: fixedを使うと文字が重なる原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者...
CSS

CSSでcalcが効かない原因と正しい使い方を現役エンジニアが解説【初心者向け】

CSSでcalcが効かない原因と正しい使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

CSSでテーブルの枠線を消す方法と注意点【初心者向け】現役エンジニアが解説

CSSでテーブルの枠線を消す方法と注意点について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
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をアニメーションで動かしていきたいと思います。 目次CSSアニメーションの素晴らしいアイデアのまとめHover.cssCSS3アニメーションをらく～に実装！オンラインツール7選 ここまで動かせる！楽しいcss アニメーションのサンプル集ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！CSS3でアニメーション！transitionとanimationまとめ（サンプル付き） 初心者にもコピペで使えるCSSジェネレーター8個CSSのみでエフェクト・アニメーションを実装する方法 css3アニメーションのレパートリーがきっと増える！動きの参考になる22サイト 【保存版】CSS3アニメーションを簡単に利用できるライブラリのまとめ【Webサイトに動きと個性を】CSSでアニメーションを駆使する方法！CSSアニメーション 入門担当サイトが受賞したので、アニメーションの演出に使ったJavaScriptライブラリ、webツールを晒してみる最近のWebサイトで見かけるHTML/CSSスニペット・JSライブラリ33個まとめ【CSS】最新マウスオーバーアニメーションスニペットサイト６選。CSSでのロールオーバーアニメーションのチュートリアル集まとめコピペで使えるアニメーションcss集コピペで簡単！ローディングアニメーションの参考になるサイトまとめCSS3アニメーションを手軽に作成できるオンラインツール9選ちゃちゃっとCSSで色々とやりたい時に激しく便利なサイトとまとめ記事CSSを学習中の方へ そもそも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）   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ
Unity

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

本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、ソフトウェアデベロッパーのNick Babich氏によって投稿されました。   モーションによってモバイルアプリに命を吹き込む 10年前、アニメーションやモーションを使用したユーザーインターフェースは効率の悪いものとされていました。派手なサイトに飛び跳ねるポップアップ、点滅するボタンなどを連想させるものでした。 しかしここ数年でそれらの考え方は大きく変化しました。iPhoneやモバイルアプリが導入され、デザイナーの多くは動的なアニメーションの将来性について経験を積んてきました。アニメーションは時が経つとともにインターフェイスの重要な要素になり、デザイナーに全く新しい次元を与えています。 最新のインターフェイスはもはやただの静止画の連続ではありません。アニメーションを使用すると、時間という次元を製品に加えることでソフトウェアと人の間のギャップを埋めることができます。 最高に直感的で楽しい体験はいつもモーションデザインに細かい描写を入れます。 この記事ではユーザー体験をより生き生きと楽しくするために、どこに美しさを追加できるかといういくつかの例を提示します。   読み込みの時間を楽しいものにする 刺激的なオープニングアニメーションがあると、アプリを開くたびにユーザーの気持ちを盛り上げることができます。 しかし、それ以上の役割を果たす場合もあります。下の例のアニメーションは単に楽しいというだけのものではなく、ユーザーの目に影響を与えて集中するべき場所をコントロールしています。 ユーザーがUberアプリを起動すると、マップ上のピンに変化するドロップに目が行きます。   [PR] Webデザインで副業する学習方法を動画で公開中新規ユーザーにとって外観的な魅力のあるコンテンツ ユーザーは初めてアプリに触れたときに、何をしたのかを知り理解しなければなりません。 スムーズな画面遷移と優れたアニメーションは、新規のユーザーをどのようにアプリに引き込むかということにすさまじく影響があります。 以下の例でのオンボーディングは創造性と個性が満載です。ビジュアルデザインとマイクロコピーが際立っており、新しいユーザーがアプリを体感することができます。 Ramotionによるアニメーション   対話型TIPSの組み入れ アニメーションは、アプリ内の各機能についての対話式ショートストーリーを作ることができます。これによってユーザーは次にどうするべきか明確に理解できるようになります。 Ramotionによるアニメーション   視覚的なオリエンテーション デザインにアニメーションを追加する最適の場所は、変化の瞬間です。状態変化が起こるとき、ユーザーは新しい場面が前のものとどう関係しているかを理解する必要があります。 静的なデザインでは状態と状態の間の前後関係を把握することができません。 接続とコンテンツの関係が成立するのは、アニメーションが機能的にも様式的にも役立ったときです。アニメーション化されたトランジションは異なるUI間の中継となり、ユーザーを導くのに役立ちます。 アニメーションはインターフェイス内でユーザーが現在の位置を確認するのに役立ちます。ユーザーは要素の動きに従って、2つの状態がお互いにどのように関係しているのかということを理解することができます。 Anton Aheichankaによるアニメーション   要素間の関係を説明する よいデザインのトランジションは、アプリに触れたときにユーザーの目を必要な場所に正確に誘導します。アニメーションは目的の対象に応じて適切な要素を強調します。 再生ボタンを一時停止ボタンに変換することで2つのアクションがリンクされています。ひとつを押すともう片方のアクションが表示されるようになっています。 Anish Chandranによるアニメーション   空間認識 アニメーションはユーザーが空間インターフェイスのメンタルマップを作成するのに役立ちます。自分がどこから来て、どこに行くのかということをはっきりすることができます。 アニメーションはインターフェイス内で自分の位置を確認し、適切な場所にたどり着くのに役立ちます。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。 コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。
アプリデザイン

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

JavaScriptで文字を動かすテキストアニメーション10選について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptで文字を動かすテキストアニメーション10選について詳しく紹介していくね！ 大石ゆかり お願いします！   目次 テキストアニメーションとは テキストアニメーションでできること テキストアニメーションを実装する方法 テキストアニメーション10選 まとめ   テキストアニメーションとは 魅力的なサイトには必ずと言っていいほど、インパクトあるテキストアニメーションが実装されているかと思います。 ページを開いたときに表示されるテキストや、マウスオーバーなどのアクションに連携するものなど種類も様々にあります。 [PR] Webデザインで副業する学習方法を動画で公開中テキストアニメーションでできること テキストアニメーションの表現方法は本当に沢山あります。 移動系：最もシンプルな方法で、文字を左右上下などへ移動させるアニメーションです 変色系：これも良くあるアニメーションで文字の色を変更させます 3D系：最近流行りのアニメーションで、文字を立体に表現することが出来ます 変形系：これも最近よく見ます。文字を分解したり、結合させてみたり、文字を変形させるアニメーションです ざっと分類してみました。これにあたはまらないものや、組み合あわせされたものなどもあるかと思います。また、アニメーションが発生するタイミングなども多数あるかと思います。 テキストアニメーションを実装する方法 実装方法としては、JavaScriptだけではなく、CSSのみで出来るものありますし、jQueryなどライブラリーで提供されているものなどもあります。 コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。 コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。
JavaScript

マイクロインタラクションで気をつけたい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要素としての重要性を考えれば、ユーザーの認知的負荷を増やします。   映画製作の世界では、セットの問題は脚本に起因すると言われています。悪い脚本は悪い撮影シーンを生み出します。それと同様に、悪いデザインは悪いマイクロインタラクションを生み出すのです。 実践のポイント：アニメーションに頼る前に、まずデザインの意味を考えましょう。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
Webデザイン

animateメソッドを使ってjQueryでアニメーションを実装する方法

JavaScriptのライブラリであるjQueryのanimateメソッドを使ってアニメーションを実装する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 animateメソッドを利用すると、簡単にアニメーションを適用できます。 実務で、ちょっとアニメーション処理を加えたい時に利用してみてください。   目次CSSアニメーションの素晴らしいアイデアのまとめHover.cssCSS3アニメーションをらく～に実装！オンラインツール7選 ここまで動かせる！楽しいcss アニメーションのサンプル集ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！CSS3でアニメーション！transitionとanimationまとめ（サンプル付き） 初心者にもコピペで使えるCSSジェネレーター8個CSSのみでエフェクト・アニメーションを実装する方法 css3アニメーションのレパートリーがきっと増える！動きの参考になる22サイト 【保存版】CSS3アニメーションを簡単に利用できるライブラリのまとめ【Webサイトに動きと個性を】CSSでアニメーションを駆使する方法！CSSアニメーション 入門担当サイトが受賞したので、アニメーションの演出に使ったJavaScriptライブラリ、webツールを晒してみる最近のWebサイトで見かけるHTML/CSSスニペット・JSライブラリ33個まとめ【CSS】最新マウスオーバーアニメーションスニペットサイト６選。CSSでのロールオーバーアニメーションのチュートリアル集まとめコピペで使えるアニメーションcss集コピペで簡単！ローディングアニメーションの参考になるサイトまとめCSS3アニメーションを手軽に作成できるオンラインツール9選ちゃちゃっとCSSで色々とやりたい時に激しく便利なサイトとまとめ記事CSSを学習中の方へ   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   animateメソッドとは animateメソッドはその名の通りアニメーションを実装するためのメソッドです。 animateメソッドでは、オブジェクトの移動や透過率などを変更できます。 アニメーションを実装するためのメソッドは何個か存在しますが、簡単なアニメーションの場合、animateメソッドが一番使用されています。   大石ゆかり 田島メンター！アニメーションのように要素を動かしたり、変化させたりできますか？ 田島悠介 jQueryのanimateメソッドがいいね。取得した要素を、指定した大きさや位置に、指定した時間で、移動させることができるんだよ。 大石ゆかり toggleメソッドやhideメソッドなんかも、ゆっくりと変化しますよね。 田島悠介 そうそう。あれも一種のアニメーションなんだ。では、animateメソッドを書いてみよう！   animateメソッドの書き方 ここではanimateメソッドの基本的な書き方を解説します。 基本のコード 基本のコードとしては、動かす要素名に対してparamsプロパティで指定したアニメーションを適用します。 [duration], [easing], [complete]は省略可能です。 $('動かす要素名').animate(params, [duration], [easing], [complete]) 使用例 $(function() { $('動かす要素名').animate({ '動かすアニメーション名': '動かす距離' }); }); 動かす要素名はclassやidで指定します。 動かすアニメーション名はopacity(透明度)や、marginLeft（右に動かす）などの指定が可能です。 動かす距離は、100pxのように指定可能です。   animateメソッドのプロパティ例 animateメソッドでアニメーションに利用できるプロパティは、以下の4つです。 params duration easing complete これら4つの役割と利用例を解説します。 params paramsプロパティは必須です。 paramsプロパティでは、最終的に変化させるCSSのキーと値のマップ値を指定します。 animateメソッドのparamsプロパティに指定できるCSSのコードは、基本的に数値で表せるものです。 よく利用するものとして次の10個を例示します。 width（幅） height（高さ） top（上） left（左） right（右） bottom（↓） margin（マージン） padding（パディング） fontSize（フォントサイズ） opacity（透明度） 実際にはCSSのmargin-leftを指定する場合、leftとmarginを組み合わせてmarginLeftのような指定を行います。 CSSのmargin-leftとは異なり、marginLeftという記法にする必要があります。 fontSizeもCSSの記法であればfont-sizeと記載するところを、fontSizeという記法で指定します。 これはキャメルケースという記法で、区切り文字部分を大文字で表す記法です。 animateメソッドを利用する上での文法上の決まりですので使ってみてください。 実際の指定は、pxやemや%を単位として指定します。   たとえば、”width”: “100px”と指定することで、id=”box”要素の幅が100pxに伸びるアニメーションになります。 $("#box").animate({ "width": "100px", });   duration durationプロパティは省略可能なオプションです。 一般的には数値を指定します。 1000を指定すると、1秒のアニメーションを意味します。 何も指定しないとnormalという指定になります。 normal以外にもslowやfastという指定値も可能です。   easing easingプロパティは省略可能なオプションです。 easingプロパティでは、値の変化を調節する独自関数を指定できます。 easingプロパティでは、swingとlinearという指定値が用意されています。 swingが初期値です。 swingは、始めと終わりは緩やかで途中は速めのアニメーションです。 linearは 、一定スピードのアニメーションです。   complete complete プロパティは省略可能なオプションです。 complete プロパティでは、アニメーション終了時に実行する処理を指定できます。   [PR] Webデザインで副業する学習方法を動画で公開中実際にアニメーションを作ってみよう 簡単にアニメーションを実装してみましょう。 id=”box”という要素をアニメーションによって動かしてみます。 今回のコードは幅40px、高さ40pxの箱を下に200px動かすコードです。 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS overflow</title> <link rel="stylesheet" type="text/css" href="sample.css"> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script type="text/javascript">
JavaScript

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS 【すぐに使える！】CSSのアニメーションをまとめたサイト・記事20選