【Figma】ハーフトーンは作れる？Photoshop・Illustratorとの機能比較と実現方法

ハーフトーン（網点・ドットパターン）は、レトロな印刷表現やアートワークに欠かせないデザイン手法です。
本記事では、Figmaでハーフトーンを実装する方法と限界、そしてPhotoshop・Illustratorなら可能な表現との違いを比較しながら解説します。

そもそもハーフトーンとは？

ハーフトーンは、大小のドットを使って濃淡や階調を表現する技法です。
印刷物のモノクロ写真やレトロコミックの質感に多く見られます。
特徴として、ドットの大きさや密度が変化することで、グラデーションや立体感を再現できます。

Figmaでどこまで再現できる?

Figmaでできること

• ドットパターンの作成
  小さな円を複製してパターン化可能。コンポーネント化すれば再利用もしやすい。
• マスクを使ったテキストや画像への適用
  テキストや画像の形状に沿ってドットを表示可能。後からテキストを編集できる（ただしドットサイズは固定）。
• 擬似的な濃淡表現
  手動でドットサイズを少しずつ変えてグラデーション風にすることは可能。
• プラグインを利用して自動生成
  「HLFTN」や「Halftones」などでドット径や角度を自動調整可能。

Figmaではハーフトーン以外にも、ノイズやテクスチャーのエフェクトも使用できるので
デザインの幅を増やすためにも合わせてチェックしておきましょう!

【Figmaの新エフェクト】ノイズ＆テクスチャーが簡単に! イラレ不要で質感表現が可能

---

Figmaでできないこと（標準機能）

• 自動的なドット径の変化（濃淡の自動化）
  写真や文字の階調に合わせてドットを変化させる機能はない。
• リアルタイムで可変なハーフトーン
  テキストを変更すると自動で径や濃淡が更新される処理は不可。
• ラスターベースのフィルター加工
  Photoshopのようなフィルターギャラリーや粒状化機能は非搭載。

Figmaで実装する方法

1. 標準機能で作る

1. ドットパターンを作成
   小さな円を1つ作る（例：直径4px）。複製して等間隔に並べ、縦横グリッド状に配置。コンポーネント化すると再利用が楽。
2. 画像やテキストにマスク
   パターンと対象（写真やテキスト）を選択 → 右クリック → Use as Mask。文字は後から編集可能。
3. 濃淡をつける
   一部のドットを拡大縮小してグラデーション風に。不透明度を変えても雰囲気が出る。

メリット：外部依存なしで作れる
デメリット：手動作業が多く、複雑な階調は難しい

---

2. プラグインを使う

• HLFTN
  ベクターのドットグラデーションを自動生成。ラジアル / リニア / 均一パターンを選択可能。
  サイズ・角度・密度を数値で調整できる。
• Halftones
  写真や画像にレトロ印刷風ドットを適用。
  ワンクリックで効果を適用でき、パラメータ調整も可能。
• Filter
  「Dot Screen」や「Color Halftone」などのフィルター効果を提供。ドット以外の質感加工も可能。

メリット：短時間で高度な表現が可能
デメリット：プラグインの仕様変更や動作制限のリスクあり

Photoshopならできること

• 写真やテキストに対してリアルタイムでハーフトーン化
• フィルターギャラリーで簡単適用
• 階調に応じた自動径変化
• スマートオブジェクトでテキスト変更後も効果維持

Illustratorならできること

• ベクターでのハーフトーン表現
• アウトライン化した文字への適用
• 印刷用に解像度非依存のデータ作成
• グラデーションメッシュとの組み合わせ

ハーフトーン機能比較表

機能	Figma（標準）	Figma（プラグイン）	Photoshop	Illustrator
ドットパターン作成	◯	◯	◯	◯
マスク適用	◯	◯	◯	◯
自動ドット径変化	✕	△	◯	◯
ラスターフィルター	✕	✕	◯	◯（一部）
ベクターハーフトーン	△	◯	✕	◯
リアルタイム可変テキスト	✕	✕	◯	◯
印刷向け高解像度対応	△	△	◯	◯

まとめ

• Figmaは軽量なUI設計ツールなので、マスクやパターンで擬似的なハーフトーンは可能ですが、濃淡自動化はできない。プラグインを使えば短時間で再現可能。
• Photoshopはラスターベースでのハーフトーン加工が得意で、写真やバナー制作に向く。
• Illustratorは印刷向けのベクターハーフトーンやロゴ制作に強い。

この記事の振り返りFAQ