TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptで文字を動かすテキストアニメーション10選を現役エンジニアが紹介【初心者向け】
オーダーメイドコース
icon
icon
JavaScript

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

初心者向けにJavaScriptで文字を動かすテキストアニメーション10選について現役エンジニアが紹介しています。テキストアニメーションの方法にはテキストを移動させたり、色を変更したり、拡大縮小など変形させることができます。テキストアニメーションを行うライブラリについて解説します。

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

JavaScriptで文字を動かすテキストアニメーション10選について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

JavaScriptで文字を動かすテキストアニメーション10選について詳しく紹介していくね！

大石ゆかり

お願いします！

 

目次

 

テキストアニメーションとは

魅力的なサイトには必ずと言っていいほど、インパクトあるテキストアニメーションが実装されているかと思います。

ページを開いたときに表示されるテキストや、マウスオーバーなどのアクションに連携するものなど種類も様々にあります。

[PR] コーディングで副業する方法とは

テキストアニメーションでできること

テキストアニメーションの表現方法は本当に沢山あります。

  • 移動系：最もシンプルな方法で、文字を左右上下などへ移動させるアニメーションです
  • 変色系：これも良くあるアニメーションで文字の色を変更させます
  • 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でformのbuttonオブジェクトを操作する方法を現役エンジニアが解説【初心者向け】

JavaScriptでformのbuttonオブジェクトを操作する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向...
JavaScript

JavaScriptのDocumentインターフェースとidプロパティについて現役エンジニアが解説【初心者向け

JavaScriptのDocumentインターフェースとidプロパティについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向...
JavaScript

jQueryのinArrayメソッドの使い方を現役エンジニアが解説【初心者向け】

jQueryのinArrayメソッドの使い方について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJa...
JavaScript

JavaScriptのclass構文の使い方を現役エンジニアが解説【初心者向け】

JavaScriptのclass構文の使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 J...
JavaScript

JavaScriptでargumentsオブジェクトを使って関数に渡された引数を参照する方法を現役エンジニアが

JavaScript で複雑な処理を書くようになると、関数の引数を利用することが増えます。 その引数を扱う上でとても便利な方法として「arguments ...
JavaScript

JavaScriptのtoStringメソッドの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのtoStringメソッドの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。...
JavaScript

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

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

今回はCSSのアニメーションをまとめたサイトや記事を紹介します。 サイトを作っていく上でアニメーションの実装は必須と言えるでしょう。より目立たせたり、クールな印象を持ってもらうためにアニメーションの書き方を覚えておくとサイトの表現に幅が出るはずです。 そもそもCSSが何かよく分からない場合は、先にCSSの書き方をご覧ください。   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。   CSSアニメーションの素晴らしいアイデアのまとめ このサイトはデモページもセットであるために1ページでいくつかのデモを見ることができます。 上記のゲームボーイカラーの生成HTML、CSSなど真似したくなるアニメーションが多くあります・。 他にも動的なコンテンツが多くあるので必見のサイトでしょう。 CSSアニメーションの素晴らしいアイデアのまとめ   Hover.css アニメーションの実装でまず参考にしたいサイトの代表例ですね。 マウスオーバー時に関するアニメーションについては、このサイトを見れば十分表現ができるでしょう。書き方もすべてまとまっているので、初心者の方でも気軽に使用できるはずです。 Hover.css   [PR] コーディングで副業する方法とは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ページ上でユーザーの注目の約66％は、トップの画面領域の下に向けられている」と言われています。ユーザーの注目がページの上から下へ移動するとき、スクロールはインタラクションデザインの重要な要素としての役割を持ちます。 アニメーションによるストーリーテリングは、退屈になりがちなインターフェースにユーザーとの感情的な結び付きを加えることができます。一般的によく使用されるパララックス（視差効果）アニメーションの代わりに、より繊細な設計を試してください。   まず、Webサイトをスクロール可能な部分に分割します。各部分内でアニメーションを使用してコンテンツを紹介できます。 以下の例のアニメーションは、シンプルなアートのイラストレーションをアニメーション化することで、コンテンツに「生き生き」とした雰囲気を与えます。 画像クレジット：Le Mugs 結論 デザインは、単なるビジュアルプレゼンテーション以上の意味を持ちます。デザインとはインタラクションです。アニメーションはコミュニケーションにとって重要です。 私たちは、Webにはインタラクティブな本質があることを受け入れ、それをデザインの自然な一部分と考える必要があります。 他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。   TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。 現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを開発することが可能です。 独学に限界を感じている場合はご検討ください。
Webデザイン

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

ゲームで演出をリッチにするためには、アニメーションを作成する技術が不可欠です。 アニメーションと聞くと何か敷居が高いものと感じる方もいらっしゃるかもしれませんが、Unityでは初心者の方でも簡単にアニメーションを作ることができます。 今回は、Unityでアニメーションを作る方法を解説していきます。 今回は3DのSphereをアニメーションで動かしていきたいと思います。 目次テキストアニメーションとはテキストアニメーションでできることテキストアニメーションを実装する方法テキストアニメーション10選まとめ筆者プロフィール そもそも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] コーディングで副業する方法とは簡単なアニメーションを作成してみる アニメーションを作成する準備ができました。 実際にアニメーションを作っていきましょう。 （画像はクリックで拡大表示されます。） 田島悠介 それではアニメーションを作っていこう。 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

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

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

strstr関数の使い方！PHPで文字列を検索する方法【初心者向け】

PHPで文字列の中から特定の文字列を探す場面というのは比較的多いかと思います。 文字列を検索する方法はいろいろありますが、今回は「strstr関数」「strpos関数」「preg_match関数」について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 strstr・・・区切り文字の前後の文字列を取得します。 strpos・・・文字列が最初に見つかる位置を取得します。 preg_match・・・正規表現で文字列を検索します。 すべての関数の使い方を覚える必要はありませんが、1つでも書き方を覚えておくといざという時に便利でしょう。 目次テキストアニメーションとはテキストアニメーションでできることテキストアニメーションを実装する方法テキストアニメーション10選まとめ筆者プロフィール そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   大石ゆかり PHPで文字を探すプログラムを作りたいんですけど、どうすればいいんでしょうか。 田島悠介 どうして文字を探したいのかな？ 何かの文字で区切っているから？それとも文字の位置を探したい？ 大石ゆかり ええと、文字を探す方法がそんなにいろいろあるんですか？ 田島悠介 そうなんだ。PHPではいろんな文字列の検索方法があるよ。 まずは、区切り文字で検索する方法から見てみよう！   区切り文字で分けて検索 – strstr関数 strstr関数は対象の文字列から検索文字列を探し、見つかったら検索文字列から対象の文字列の最後までを返します。 区切る文字列を境にして文字列を取得したいときに使えます。 構文 検索対象の一部分の文字列 = strstr(検索対象の文字列, 検索文字列, [検索文字列より前の部分を取得するか]) 第1引数は検索文字を探し出す対象の文字列です。 第2引数は検索する文字列です。 検索文字列が半角のアルファベットの場合は、大文字小文字を区別して検索されます。 第3引数は省略でき、検索文字より前の部分を返したい場合にtrueを指定しますが、標準ではfalseつまり検索文字より後の部分を取得します。 戻り値は検索文字列が検索対象の文字列から見つかったときに、検索文字列を含む文字から検索対象の文字列の最後までの文字列を返します。 たとえば、「dog&cat」の文字列から「&」を検索した場合、「&cat」が戻り値として返ります。 ただし第3引数にtrueが指定されている場合は、検索文字を含まない前の部分を返します。 もし検索文字が見つからなかったときはfalseを返します。 ※ある文字列中に別の文字列が存在するかどうかを確認したいだけならstrpos関数またはstr_contains関数（PHPの新しいバージョン8で使用可能)を使います。 ※大文字小文字を区別しないで検索したい場合は「stristr関数」を使うことで実現できます。   strstr関数の使い方 strstr関数を使ってある文字列で区切った文字列の分割をしてみましょう。 ソースコード フルネーム「山田 太郎」を半角スペースで姓と名に分けて出力するプログラムです。 <?php //検索文字列（半角スペース） $search = ' '; //対象文字列（空白で区切られたフルネーム） $target = '山田 太郎'; echo "対象文字列：$target<br>"; //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); //空白を削除（「 太郎」->「太郎」） $firstName = trim($firstName); //姓の取得（空白より前） $lastName = strstr($target, $search, true); //検索結果はあるか if($firstName != false || $lastName != false){ //姓名の出力 echo "姓：$lastName<br>"; echo "名：$firstName"; } else { echo "文字が見つかりませんでした。"; } ?> ※ダブルクォーテーションで変数を囲うと、“$変数名”で変数の値を展開して出力できます。変数の展開について詳しくは公式ドキュメント「変数のパース」をご覧ください。 ※本来なら出力したいWebページ内で<html>タグなどを含める必要がありますが、今回はPHPのプログラムの解説が目的なので省略しています。基本的なPHPの書き方について詳しくは解説記事「基本的なPHPの書き方」をご覧ください。 表示結果 解説 //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); 検索対象の文字列（$target）から検索文字（$search）が見つかったところより後ろの文字列を取得します。 検索対象の文字列
PHP

マイクロインタラクションで気をつけたい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] コーディングで副業する方法とは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デザイン

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

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

オーダーメイドコース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptで文字を動かすテキストアニメーション10選を現役エンジニアが紹介【初心者向け】