.png)
Wix Studioのテキストマスクとは？文字の中に画像や動画を流し込んで魅せる設定方法をご紹介
- 2 時間前
- 読了時間: 8分
サイトのファーストビューで、大きな見出しの文字そのものが写真や動画で埋め尽くされているデザインを見たことはないでしょうか。
文字の輪郭の内側だけに映像がのぞく、あの印象的な表現です。
以前のWixでこれをやろうとすると、デザインした文字を画像として書き出して貼り付けるしかありませんでした。
ところがWix Studioには、文字をテキストのまま残したまま同じ表現ができる「テキストマスク」という機能が用意されています。
この記事では、Wix Studioのテキストマスクとは何か、どこから追加するのか、そして文字の中に画像・グラデーション・動画を流し込む具体的な設定方法まで、順を追ってご紹介します。
結論：Wix Studioのテキストマスクとは、文字を「窓」にして中に画像・動画・グラデーションを流し込んで見せる機能
まず結論からお伝えします。
Wix Studioのテキストマスクとは、文字の形そのものを「窓」として使い、その窓の内側に画像・動画・グラデーションを流し込んで見せる機能です。
文字の外側は透明になり、文字の輪郭の内側だけに素材が現れます。
たとえば「BRAND」という大きな見出しを置き、その中に企業のブランドムービーを流し込めば、文字の形にくり抜かれた映像が再生されます。
写真であれば、文字の中だけに風景やプロダクトの写真がのぞく表現になります。
ページを開いた瞬間に目を引く、印象の強いビジュアルをつくれるのが最大の魅力です。
ここで重要なのは、これがあくまで「テキスト」として扱われる点です。
画像を貼り付けたわけではないので、後から文言を打ち替えることもできますし、見出しタグ（H1やH2）を設定することもできます。
デザイン性と、検索エンジンに正しく認識される内部SEOの両方を、この一つの機能で成立させられるわけです。
テキストマスクはどこにある？「テキスト」メニューを開いて追加する
Wix Studioのテキストマスクを使ううえで、多くの方が最初につまずくのが「機能の場所」です。
普段タイトルや段落を追加するときに使う「クイック追加」の中を探しても、テキストマスクは見つかりません。
ここが最初のポイントです。
テキストマスクは、エディタ左側の「テキスト」メニューの中にまとめられています。
追加の手順は次のとおりです。
Wix Studioのエディタ画面を開く。
左側のツールバーから「テキスト」メニューを開く。
開いたパネルの中に、通常の「テキストスタイル」（段落・タイトル）に加えて、複数の特殊なテキストパーツが並んでいることを確認する。
その中から「テキストマスク」を選び、ページ上にドラッグして配置する。
この「テキスト」メニューの中には、テキストマスク以外にも、動くマーカー演出の「マーカーテキスト」、文字を曲線に沿わせる「パス状のテキスト」、塗りや枠線・グロウで質感をつける「テキストエフェクト」、長文を折りたためる「折り畳み可能テキスト」などが並んでいます。
テキストマスクは、これら装飾テキスト群の一つという位置づけです。
まずはこのメニューの場所を覚えておくと、以降の作業がスムーズになります。
文字の中に画像・グラデーションを流し込むテキストマスクの手順
テキストマスクを配置したら、次は中に入れる素材を選びます。
テキストマスクでは、文字の中に流し込む素材として「画像」と「グラデーション」を選べます。
設定の流れは次のとおりです。
配置したテキストマスクのパーツを選択する。
文言を、表示したいテキストに打ち替える。
設定パネルで、中に入れる素材のタイプとして「画像」または「グラデーション」を選ぶ。
画像を選んだ場合は、流し込みたい画像をアップロードまたはメディアから選択する。
グラデーションを選んだ場合は、色や向きを調整して文字全体にグラデーションをかける。
プレビューで、文字の中に画像やグラデーションが入っていることを確認する。
以前のWixでは、文字にグラデーションを直接かけることができませんでした。
そのため、デザイン上で文字にグラデがかかっている場合は「文字ごと画像として書き出して」貼り付ける必要がありました。
テキストマスクを使えば、テキストのままグラデーションを適用できるので、この画像化の手間がまるごと不要になります。
なお、日本語で使う場合はフォントに注意してください。
初期状態では英語向けのフォントが当たっていて、日本語が崩れて見えることがあります。
モリサワフォントなど日本語向けのフォントに切り替えると、きれいに表示できます。
こうした表現の使いどころや、自社サイトにどう落とし込むか迷ったときは、お気軽にご相談ください。
文字の中で動画を再生させるテキストマスクの設定方法
テキストマスクは画像やグラデーションだけでなく、文字の中に動画を流し込んで再生させることもできます。
文字の形にくり抜かれた映像が動く表現は、ファーストビューのインパクトを一段引き上げてくれます。
設定の流れは次のとおりです。
テキストマスクのパーツを選択する。
中に入れる素材として動画を指定し、流し込みたい動画ファイルを選ぶ。
プレビュー表示に切り替える。
文字の中で動画が再生されていることを確認する。
プレビューすると、文字の輪郭の内側だけで動画が動いている状態を確認できます。
ブランドムービーやプロダクトの映像、抽象的なモーション素材などを入れると、文字とは思えないほど動きのあるビジュアルに仕上がります。
動画を使う際は、文字数が少なく、線の太い（マスクの面積が広い）見出しほど映像が見えやすくなります。
細い文字や長い文章に動画を入れると、素材がほとんど見えなくなってしまうため、大きめのキービジュアルとして使うのがおすすめです。
つまずきやすいポイント：テキストパーツが見つからない・Wix Editorでは使えない点に注意
最後に、テキストマスクを使うときに引っかかりやすいポイントを整理しておきます。
一つ目は、前述のとおり「機能の場所」です。
テキストマスクは「クイック追加」ではなく、左側の「テキスト」メニューの中にあります。
ここを知らないと、そもそも機能にたどり着けません。
二つ目は、最も注意したい点です。
テキストマスクをはじめとするこれらの装飾テキストパーツは、Wix Studioでのみ利用できます。
旧来のWix Editorでは使えません。
同じWixでも、制作環境がStudioかEditorかで使える機能が変わるため、テキストマスクを前提としたデザインを進める場合は、必ずWix Studioで制作しているかを確認してください。
三つ目は、日本語の表示崩れです。
初期は英語フォントが当たっているため日本語が崩れて見えることがあります。
日本語向けフォントに変更すれば解決します。
四つ目は、制作体制の話です。
テキストマスクのような機能は、デザイナーがその存在を知らないとデザインに落とし込めません。
実装担当者だけが機能を知っていても、デザイン段階で盛り込まれていなければ活かせないため、デザイナー側の機能理解が前提になります。
この点は、社内で制作する場合も外部に依頼する場合も同じです。
「自社サイトでテキストマスクのような表現を取り入れたいが、どう進めればよいか分からない」という場合は、Wix Studioの制作実績が豊富な私たちにご相談ください。
よくある質問（FAQ）
Q. テキストマスクは旧Wix Editorでも使えますか？
A. いいえ。
テキストマスクはWix Studio限定の機能で、旧Wix Editorでは利用できません。
テキストマスクを前提とした制作をする場合は、Wix Studioで作業しているかを必ず確認してください。
Q. テキストマスクを使うと文字が画像扱いになってSEOに不利になりませんか？
A. なりません。
テキストマスクはあくまでテキストとして扱われるため、H1やH2などの見出しタグを設定できます。
文字を画像化する従来の方法では見出しタグを付けられませんでしたが、テキストマスクなら装飾性と内部SEOを両立できます。
Q. 文字の中に入れられるのは画像だけですか？
A. いいえ。
テキストマスクでは、文字の中に画像・グラデーション・動画の3種類を流し込めます。
動画はプレビューすると文字の輪郭の中で再生されます。
Q. テキストマスクはどこから追加できますか？
A. エディタ左側の「テキスト」メニューの中にあります。
タイトルや段落を入れる「クイック追加」の中にはないため、見つからないときは「テキスト」メニューを開いてください。
Q. 日本語を入れると文字が崩れて見えます。
どうすればよいですか？
A. 初期状態では英語向けフォントが当たっているために起こる現象です。
モリサワフォントなど日本語向けのフォントに切り替えると、きれいに表示されます。
Q. どんな文字に使うと効果的ですか？
A. 文字数が少なく、線の太い大きな見出しに使うと、中の画像や動画が見えやすくなり効果的です。
細い文字や長文に動画を入れると素材がほとんど見えなくなるため、ファーストビューのキービジュアルとして使うのがおすすめです。
Q. テキストマスク以外にどんな装飾テキストがありますか？
A. 「テキスト」メニューには、動くマーカー演出の「マーカーテキスト」、文字を曲線に沿わせる「パス状のテキスト」、塗り・枠線・グロウで質感をつける「テキストエフェクト」、長文を折りたためる「折り畳み可能テキスト」などがあります。
いずれもWix Studio限定の機能です。
【この記事の監修者】
中田ディレクター（株式会社ラジャ｜SEO担当監修）
保有資格・実績：Wixレジェンドレベルパートナー／サイト制作400サイト以上／Wix Studio制作100サイト以上（日本トップクラス）／Wix Studio専門スクール「ノコド道場」運営
