画像/動画をテキストで切り抜いた文字マスク作品13選！文字に柄やアニメーションをつけよう

柄やアニメーションがついた文字は人気が高く、さまざまな場面で活用されています。なかでも人気なのは、画像・動画をテキストの形で切り抜いたデザイン（文字マスク）でしょう。

今回は、画像・動画を文字で切り抜いたバラエティ豊かな文字マスク作品を13選ご紹介します。ぜひWebサイト制作のヒントにしてみてください。

1. Webサイトに華を添える

Codepenをご紹介する前に、まずはStratego Brandingの例を見てみましょう。Stratego Brandingのデザインチームは、文字マスクを使うことで、スローガンをよりどっしりと、力強く、そして魅力的に表現しています。優れている点を3つにまとめてみました。

• スローガンを背景やコンテンツから分離させ、際立たせている
• スポーツを想起させる画像を適切に選んでいる
• マスクを使うことにより、Webデザインをより豊かなものにしている

Stratego BrandingのエレガントでビジネスライクなWebデザインは、カリスマ性と個性を兼ね備えています。ソリューションのシンプルさを利点に変えている、お手本のような例ですね。このように、シンプルなデザインに華を添えたい場合には、特に文字マスクがおすすめです。

では、Codepenの作品を見ていきましょう！

2. 文字の中に海がひろがる

最初にご紹介するのは、Dudley Storeyによるクラシックな方向性の作品です。このような効果がついた文字はあちこちで目にしますよね。この作品には、HTML / SCSS / JavaScriptが使われています。背景はHTML5の動画です。この作品は編集可能ですので、ぜひ遊んでみてください。

See the Pen
SVG Text Mask w/ Video Fill by Dudley Storey (@dudleystorey)
on CodePen.

SVG Text Mask w/ Video Fill

3. SVGを使ったオリジナルの文字

Jesus Graciaによるこの作品も、古典的なデザインです。画像マスクとSVGテキストを組み合わせ、オリジナルの文字を作っています。使われているのはHTML・CSS・JavaScript。安定感のあるトリオです。最初に紹介したStratego Brandingの例を再現したい方にもおすすめです。

See the Pen
Masking image with svg text by Jesús Gracia (@JesGraPa)
on CodePen.

Masking image with svg text

4. オンマウスでデザインが変化

このAlexによる作品には、ホバーエフェクトが使われています。CSSのみで作られているため、軽量で高速です。オンマウスで拡大・縮小できます。Google Chromeで試すのがおすすめです。

See the Pen
Mask Effect by Alex (@alexpopovich)
on CodePen.

Mask Effect

5. CSSとHTMLのみで作りたいなら

CSSとHTMLのみで作品を作りたいなら、この作品を参考にしてみましょう。作者であるWifeoはHTMLとCSSのみで、この優れたデザインを実現しています。こちらもGoogle Chromeで試すのがおすすめです。

See the Pen
CSS3 font mask animation by Wifeo (@wifeo)
on CodePen.

CSS3 font mask animation

6. ぼかしの上に浮かぶ文字

ここまでは比較的シンプルなデザインをご紹介してきましたが、この作品はすこしアイデアをひねり、ぼかし効果を使っています。作者のMatt DesLauriersは、ぼかした背景の上にクリーンなテキストを表示させました。とてもスタイリッシュなデザインですね。

See the Pen
Blur Mask by Matt DesLauriers (@mattdesl)
on CodePen.

Blur Mask

7. GSAPとSVGによるアニメーション

さらに複雑なのが、Marti Fenosaによるこの作品です。GSAPとSVGを使うことにより、遊びごころ溢れる魅力的なアニメーションを可能にしています。こちらもGoogle Chromeから見るのがおすすめです。

See the Pen
Mask animation with GSAP & SVG by Martí Fenosa (@martifenosa)
on CodePen.

Mask animation with GSAP & SVG

8. JavaScriptを使わないシンプルなアニメーション

文字を装飾する要素として人気なのは画像や映像ですが、グラデーションも負けていません。MahdIMの作品は、マスクとグラデーションを使ったシンプルなデザインです。JavaScriptは使わず、アニメーションつきのグラデーションとSVGのマスクを組み合わせています。シンプルでありながらエレガントさもあり、さまざまなプロジェクトで活躍してくれそうです。

See the Pen
SVG mask + animated gradient by MahdIM (@MahdIM)
on CodePen.

SVG mask + animated gradient

9. Granim.jsを使ったマスク

このMiles Mannersの作品はMahdIMの作品とよく似ていますが、こちらはマスクを作るのにGranim.jsを使っています。設定からフォント、サイズ、文字などが変更可能で、簡単にプロジェクトに活用可能です。

See the Pen
Includable Granim.js Text Masking by Miles Manners (@milesmanners)
on CodePen.

Includable Granim.js Text Masking

10. 現れたり消えたりを繰り返す文字

DroidPinkmanは、文字を一色で塗りつぶすのではなく、グラデーションをつけて文字を現れたり消えたりさせています。

See the Pen
Animated SVG Mask by DroidPinkman (@dennisgaebel)
on CodePen.

Animated SVG Mask

11. Snap.svgを使ったポップなアニメーション

アニメーションも、画像や映像と同じく文字を装飾するのにぴったりです。Rachel Smithによるこの作品は、ほぼSnap.svgで作られています。遊び心があって、実用性にも優れたデザインです。

See the Pen
text masking with snap.svg by Rachel Smith (@rachsmith)
on CodePen.

12. Appleのプロモーションを思わせるアニメーション

この作品を見た人の多くは、AppleによるiPhoneのプロモーションを思い浮かべるのではないでしょうか。作者のSusan Leeは、SVG、GSAP、そしてScrollMagicを活用してこの洗練された作品を作りました。

See the Pen
SVG Video Mask Animation – ScrollMagic & Greensock by Susan Lee (@susan8098)
on CodePen.

SVG Video Mask Animation – ScrollMagic & Greensock

13. CSSとSVGで作られたバラエティ豊かな文字たち

最後にご紹介するのは、Tympanusによる作品。さまざまな特徴をもつ11種類の文字がセットになっています。CSSとSVGで作られたこれらの文字は、アニメーションがついたfill（塗り）とstroke（線）に特化しています。

Tympanus

おわりに

シンプルそうに見えて奥深いのが、画像・動画の文字切り抜き（文字マスク）の特徴です。映像や視差効果、グラデーション、アニメーションなど、さまざまな要素と組み合わせられます。

キャッチフレーズやスローガンを装飾しながらも、決して目立ちすぎない文字マスク。ぜひ活用して、Webデザインに華を添えてみてください。

（原文：Nataly Birch　翻訳：Asuka Nakajima）

こちらもおすすめ！▼