【Figma】 ぼかしでは作れない“動画風モザイク”の作り方｜タイル分解テクニック

一枚の画像にそのままぼかしをかけると、ただのブラー処理になります。
しかし、均一なタイル状に分解することで「動画で使われるようなモザイク表現」を再現できます。

テレビや配信動画でよく見るモザイクは、 ぼかしではなく「解像度を意図的に落としてブロック化」した表現です。

Figmaでも、構造的にグリッドを組むことで動画フレームのようなタイルモザイクを作ることが可能です。 
早速作っていきましょう!

Figmaでモザイクを作る方法は2種類ある

① ブラー（ぼかし）を使う方法

エフェクト → レイヤーブラー / 背景のぼかし。
これは滑らかにぼかす処理であり、厳密にはモザイクではありません。

② タイル分解で作る方法（本記事の方法）

動画モザイクは画像を均等なグリッドに分解し、解像度を落として見せる構造です。
Figmaでもオートレイアウトを使えば再現可能です。

Figmaで動画風タイルモザイクを作る手順

Step1｜タイル1マスを設計する

1つの四角形を作成します。

• 例：30px × 30px
• 角丸：0〜2px
• 塗り：仮でグレー (#ddd) / 透過度 10%
• エフェクト「背景のぼかし」、ぼかしを20に設定
• コンポーネント化

タイルサイズの目安

Step2｜オートレイアウトで横一列を作る

1. step1のコンポーネントを複製
2. Shift + A
3. 横方向に設定
4. Gap：0〜2px
5. 親の長さを固定にして、オートレイアウトに折り返しを指定

これで横一列の帯が完成します。

これで完全なグリッド構造が完成します。 均等配置が崩れず、Gap調整も簡単になります。

Step3｜タイルのサイズ、数、ぼかし度合いを調整

タイルの親のサイズを調整し、枚数を増減させることで適切なモザイク具合を見つけましょう!
これにより、画像を分解したような動画モザイク表現になります。
マスクは使用しません。タイル自体が“切り取り窓”の役割を持ちます。

動画のように見せる仕上げテクニック

• Gapを1px入れる → 分解感が強くなる
• 彩度を-5〜-10調整 → 映像トーンに近づく
• 黒レイヤー（Opacity 8〜12%）を重ねる → シネマ感が出る
• 軽くノイズを加える → 静止画感を消せる

実務での活用シーン

• LPヒーロービジュアル
• 会員限定コンテンツの隠し表現
• ギャラリーサムネの抽象処理
• UI背景の情報量コントロール

まとめ

Figmaで動画のようなモザイクを作るには、

• ぼかしではなく「タイル分解」
• オートレイアウトで構造化
• 各タイルに画像をCropで流し込む

これだけで、動画編集で使われるようなモザイク表現を再現できます。

その他のぼかしに関する記事はこちら!

【完全ガイド】FigmaでLiquid Glass（液体ガラス）エフェクトを作る方法｜初心者でも簡単！

Liquid Glass(液体ガラス)とは？ Liquid Glass(液体ガラス) エフェクトとは、ぼかしと透明感を組み合わせたガラスのよう...

【Figma新機能】公式ファイル和訳解説｜ガラスエフェクトの使い方をマスター

Figmaに新しく搭載された「ガラス（Glass）」エフェクト（現在ベータ版）。まるで本物のガラスのように光を屈折させ、UIデザイン...