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

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

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

textmask-1

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(線)に特化しています。

textmask-2

Tympanus

おわりに

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

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

(原文:Nataly Birch 翻訳:Asuka Nakajima)

 

こちらもおすすめ!▼

SHARE

RELATED

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