クリエイターラボ

【Figma】簡単！おしゃれな「版ズレ文字」の作り方｜ドロップ・インナーシャドウの活用術

良かったら”♥”を押してね！

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でも簡単に版ズレ風文字が作れます。
ぜひ自分なりの色やズレ加減を調整して、オリジナルのデザインを楽しんでくださいね！

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

▼その他のWeb制作「デザイン」に関するお役立ち情報（記事一覧）は下記の記事からご確認いただけます。

関連記事

【Web制作ガイド-デザイン編】心地よいサイトを作るヒント集
良かったら”♥”を押してね！
shoppingmode関連タグ
person_editこの記事を書いた人
デザイナー ロッキー
プロフィール写真

2024年8月入社。印刷会社で10年近くデザイナーの経験を積み、WWGへ。WEBデザインだけでなく、印刷物全般やロゴなど幅広い案件にご対応可能。デザイナー目線で皆様に役立つ情報をお届けします。冬になったせいか最近すごくお腹がすきます。

この人が書いた記事をもっと見る

おすすめ記事のご紹介

目次へ戻る