WWGスペース 名古屋のホームページ制作会社が発信するオウンドメディア 無限の情報が集う星

Figmaでちょっとレトロでアナログ感のある「版ズレ文字（印刷のズレを再現したような文字）」を作ってみたいと思ったことはありませんか？
実はドロップシャドウとインナーシャドウを使うだけで、かんたんに表現できるんです！

この記事では、Figma初心者の方でもすぐに試せる「版ズレ文字」の作り方を解説します。

Figmaで版ズレ文字を作る手順

テキストを入力し、「塗り」で好きな色を設定する

まずは、Figmaのテキストツールで任意の文字を入力しましょう。
入力ができたら、塗り（Fill）の色を好きな色に設定します。

※ 文字選びのポイント：少し太めのフォントを選ぶと、版ズレ表現がより際立ちます。

「線（Stroke）」を追加して輪郭をつける

つぎに、文字にストローク（線）を追加します。
ストロークの色は自由ですが、「塗り」としっかり区別できる色を選ぶのがおすすめです。

ドロップシャドウを追加（ズレの影を作る）

文字を選択した状態で、「エフェクト」＞「ドロップシャドウ」を追加します。

ここで設定するポイントは以下の通り。

• 位置（X/Y座標）：ズレさせたい方向に設定（設定値：X = 4、Y = 4）
• ぼかし：0 に設定（ぼかさない）
• 色：文字の「塗り」と同じ色にする

これで、文字が少しズレたような影がつきます。

インナーシャドウを追加（ズレた部分を背景と同化させる）

さらに、新しいエフェクト「インナーシャドウ」を追加します。

設定は以下の通り▼

• 位置（X/Y座標）：ズレさせたい方向に設定（設定値：X = 4、Y = 4）
• ぼかし：0 に設定（ぼかさない）
• 色：背景色と同じ色に設定（白：＃FFFFFFに設定）

こうすることで、実際の文字とは少しズレた位置に色のレイヤーができ、印刷がズレたような演出が完成します！

テキストやフォントは後からでも変更OK！

この方法の最大の利点は、ライブテキストで作っていることで、文字内容を変えたり、フォントを自由に変更できることです♪
テンプレートとして保存しておけば、さまざまな場面で活用できます！

まとめ：Figmaでの版ズレ文字は「重ね技」で表現しよう！

今回ご紹介した手順は以下の通り▼

1. 塗りの色を設定
2. 線（ストローク）を追加
3. ドロップシャドウを文字色で追加（ぼかさない）
4. インナーシャドウを背景色で追加（ぼかさない）

たったこれだけで、Figmaでも簡単に版ズレ風文字が作れます。
ぜひ自分なりの色やズレ加減を調整して、オリジナルのデザインを楽しんでくださいね！

今後とも皆様のホームページ制作の一助となるべく、お役立ち情報を発信させていただきます。