Webデザインで写真を使いたいんだけど四角ではなく
まるや三角で切りぬいたものを使いたい！
マスクと呼ばれる機能を使えば実現できるよ！
Figmaだけでなく一般的に使われるような言葉だからぜひおぼえていってね！
今回はFigmaで画像をマスクする方法を解説します。
マスクとは？の基本的なところから実際にマスクをする方法やショートカットの使い方まで丁寧に解説させていただきます。
▼この記事のポイント
▼記事を書いたひと
都内でシステムエンジニアをしているkentos(@kento_jpn)と申します。Web制作やプログラミングの情報発信を幅広く行っております。
figmaでマスクをしよう
figmaでマスクをする方法を解説します。
マスクって何？どんなことができるの？
そもそもマスクとは何かをご存知でない方に説明します。
マスクとは、画像を直接編集することなく、余分な箇所を覆い隠す機能のことです。
トリミングと似ていますが直接画像に変更をするかどうかという点で違いがあります。
こちらにイメージ画像をご用意しました。
マスクしたい画像に対してくり抜きたい形（今回は丸）でくりぬかれるイメージです。
実際使用するケースとしては
- SNSのプロフィール画像
- ブログ、動画のサムネイル用画像
- Webサイトの素材用画像
などなどあらゆる用途で使用できるテクニックになります。
マスクの使い方を解説
それではいよいよfigmaにおけるマスクの使い方を解説していきましょう。
画像を配置しよう
マスクしたい画像と図形を重ねて配置します。
例はまるい図形としていますが、星型や三角形でも問題ありません。
今回使用した画像は「unsplash」と呼ばれるフリー画像サービスから手に入れました。
下記のリンクから取得いただいても構いませんし、figmaではプラグインという形でも連携が可能です。
プラグインについてはまた別記事でご紹介します。
図形を一番下のレイヤーに移動させよう
左のレイヤパネルにて図形をドラッグ&ドロップしてマスクしたい画像レイヤーの下に配置します。
レイヤーの移動はショートカットキーでも行うことができます。とても重宝します。
- ⌘＋[：レイヤーを下に移動
- ⌘＋]：レイヤーを上に移動
マスクは下のレイヤーから上のレイヤーに向かって行われるため、
くり抜きたい図形は必ず下のレイヤーに配置しましょう！
画像をグループ化してマスクしよう
最後に、マスクする画像と図形をグループ化してから、画面上部のマスクボタンを押してマスクが完了です。
グループ化を行うには左のレイヤープロパティにて画像と図形を選択して「右クリック＞Group selection」を選択します。（ショートカットキー：⌘ + G）
マスクを解除するときはマスクした図形を選択してからもう一度マスクボタンを押すことで解除することができます。
グループ化しなくてもマスクできちゃったんだけど、絶対に必要ではないの？
実はグループ化は必須ではないんだ。
ただグループ化をしなかった場合、図形の上に配置された全てのオブジェクトに対してマスクされてしまうから意図しないデザインになることがあるよ。
基本は必要なオブジェクトだけをグループ化してからマスクを使おう！
その他のマスク例
文字にマスクする
マスクができるのは画像だけではありません。
下記の例のように文字を使ってマスクすることも可能です。
やり方は図形と同様の手順で可能です。
境界線をぼかす
切り抜きの境界線をぼかすことも可能です。
丸い図形を選択し、右側のプロパティより「Effects＞＋＞Leyer blur」を選択することで境界線にブラーがかかり優しい感じになりました。
ホームページのオブジェクトとして背景と馴染ませたいときに使うのがいいかもしれません。
3. まとめ
いかがでしたでしょうか。本日はFigmaでのマスクの使い方を詳しくご説明しました。
ぜひマスターして様々な場面でご活用ください！
