昨今、Webデザイン上のありとあらゆる部分に「動きをつける」、つまり動的エフェクトを加えるのが流行しています。きっとあなたもこのクレイジーなトレンドに乗り、徐々にデザインの細部にこだわりを持ちはじめていることでしょう

今回はそんな動的エフェクトの中でも、テキストやロゴにアニメーションを加える「動的タイポグラフィー」に特化した事例を10個ご紹介します。

タイポグラフィーで表現できることが、変わったフォント華やかなホバー効果程度だと考えているのなら、それは間違いだと本記事で証明しましょう。

印象的な動的タイポグラフィー

1. Shattering Text Animation by Arsen Zbidniakov

Arsen Zbidniakovが作成した、テキストが粉々に弾け飛ぶアニメーションをご覧ください。素敵だと思いませんか?

これなら過剰なアニメーションで訪問者を圧倒し過ぎたり、またシステムに負荷をかけ過ぎることもありません。シンプルにきちんと機能しながらも、訪問者に程よいインパクトを与えられるでしょう。

GSAPツールとSVGパスを利用して作られたこのアニメーションは、テキストを組み立てたり分解したりする視覚効果を与えます。マウスカーソルをタイポグラフィーの上に合わせることで、プロセスの速度を制御して動きを変化させることも可能です。

See the Pen
Shattering Text Animation
by Arsen Zbidniakov (@ARS)
on CodePen.

Shattering Text Animation

2. Text Animation by Szenia Zadvornykh

最初の例と同様、このコードスニペットはテキストの組み立てと分解を繰り返すアニメーションです。しかしこれは、Three.jsを使ってすべて構築されています。

クリック&ドラッグによって、アニメーションの速度を制御できます。「制御可能な爆発」とも呼べるこの実験的なアニメーションが気に入りましたら、ぜひSzeniaが開発した他の開発例もご覧ください。

See the Pen
THREE Text Animation #1
by Szenia Zadvornykh (@zadvorsky)
on CodePen.

Text Animation

3. Motion Graphic Typeface and Another Experiment① by Ara

Araは驚くべき動的タイポグラフィーをいくつか残しています。今回ご紹介するのは幾何学的な法則に基づいた抽象的アニメーションで、ハイテクなイメージを与えます。訪問者は不思議な感覚を覚えるでしょう。

テキストが小さな破片で構成されており、3Dトンネル状の粒子アニメーションを動的に形成しています。

See the Pen
motion graphic typeface
by ara (@ara_node)
on CodePen.

1:Motion Graphic Typeface

4. Motion Graphic Typeface and Another Experiment② by Ara

もうひとつAraの制作した動的タイポグラフィーをご紹介します。

こちらの例は、三角形、正方形、長方形などの多角形が移動しながらテキストを構成しています。まるで「見えないデジタルの手」がすべてを一つに織り込んでゆくように見えますね。

See the Pen
motion graphic typeface.
by ara (@ara_node)
on CodePen.

2:Motion Graphic Typeface

5. GSAP Text Animation by Nate Wiley

Nate WileyはGreensockのSplit Textを彼の得意領域でアレンジし、素晴らしいテキストアニメーションに再構築しました。

テキストを一定サイズに切り取り、それらを小さなカケラとして収束・分散を繰り返します。

See the Pen
GSAP Text Animation
by Nate Wiley (@natewiley)
on CodePen.

Text Animation

6. Many Icons in 3D using Three.js by Yasunobu Ikeda

Nate Wileyの事例ではテキスト一つひとつをカケラとして分割したのに対し、Yasunobu Ikedaは画面全体に無秩序に散らばるテキストや記号を「粒子」とし、最終的に一つの大きなテキストとしてまとめています。

Three.jsを使ってこの華やかな3Dアニメーションを表現しています。

See the Pen
Many Icons in 3D using Three.js
by Yasunobu Ikeda a.k.a @clockmaker (@clockmaker)
on CodePen.

Many Icons in 3D using Three.js

7. CSS Motion Typography: Exploding Text by Dudley Storey

これまでのハイエンドな事例とは異なり、このコードスニペットではCSSベースの動きが主役になります。 Dudley Storeyは、CSSのキーフレームとアニメーション、トランジション、JavaScript、SVG、そしてAdobe Illustratorを使ってこの動きを実現しました。

まず単語が振動したのちに、全体が多角形の破片に分裂します。タイポグラフィーにスタイリッシュかつ破壊的なイメージを加えたい時に、このアニメーションがマッチするでしょう。

See the Pen
CSS Motion Typography: Exploding Text
by Dudley Storey (@dudleystorey)
on CodePen.

CSS Motion Typography: Exploding Text

8. SVG Path animated Text by Tamino Martinius

Tamino Martiniusは、SVGパスを使用してこの動的タイポグラフィーを表現しました。なめらかな形、極めて繊細な線、そして液体のような動きから、このアニメーションは優雅さと洗練された雰囲気をもっています。

刺激的でインパクトのあるアニメーションとは言えませんが、多くのプロジェクトに合わられる柔軟性を備えているでしょう。

See the Pen
SVG Path animated Text
by Tamino Martinius (@Zaku)
on CodePen.

SVG Path animated

実用的な動的タイポグラフィー

ここからは、誰もが初めの一歩として取り入れやすい動的タイポグラフィーをご紹介します。

9. Think – create cycle by Mikael Ainalem

Mikael Ainalemの事例は、ドットが回転すると単語がハイライトされるという、循環型のアニメーションが特徴です。

ユーザーの注意を、ある単語から別の単語に誘導したい時に有効ですね。

See the Pen
Think – create cycle
by Mikael Ainalem (@ainalem)
on CodePen.

Think – create cycle

10. P R E S S E D by Tryggvi Gylfason

左から右へスライドする線に追従してテキストが移動するアニメーションです。

動きは控えめですが、応用の効きやすい動的タイポグラフィーといえます。

See the Pen
P R E S S E D
by Tryggvi Gylfason (@tryggvigy)
on CodePen.

P R E S S E D

テキスト/タイポグラフィーとアニメーションの今

思わず魅入ってしまうほど、今回ご紹介した動的タイポグラフィーのアニメーションは魅力的です。

しかし残念なことに、テキストやタイポグラフィーにアニメーションを加える事例は、今はまだ少ないのが実際です。多くの人はアクション満載の、フルスクリーンアニメーションを使うことにより魅力を感じており、単純な文字を動かすアニメーションに心血を注ぐことは稀なようです。

今回の記事でご紹介したように、テキストやタイポグラフィーもアニメーションによって魅力的になる可能性を秘めています。些細なものだと思わず、ぜひ挑戦してみてください。

(原文:Nataly Birch 翻訳:Tomomi Takei)

 

こちらもおすすめ!▼

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ