Service logo

    ジョブボード

    有益なデザイン情報をメールでお届けします。

    お役立ちのデザイン情報のみをお送りします。メールは多くとも週に一回で、もちろんスパムメールはありません。

    ツール
    • Figma
    Figma
    • プラグイン
    • 機能
    インスピレーション
    • ポートフォリオ
    • デザイン記事
    • ジョブボード

    Designpedia © 2025 / Trademarks, names, terms and IPs are property of their respective owners unless otherwise stated

    Legal Information

    Figma プラグイン

    Figma 機能

    figma logo

    Figma レイヤーのブレンドモードを変更する

    レイヤーのブレンドモードを変更する

    1. Figma
    2. 機能
    3. デザインパネル
    4. レイヤー
    eyecatch image

    概要

    レイヤーの設定をします。 ブレンドモードを変更してさまざまな加工を行ったり、不透明度を調整することができます。

    1. 不透明度
    2. 表示 / 非表示
    3. ブレンドモード

    change-blend-mode_image01.png

    レイヤーのブレンドモードの設定

    1. 不透明度

    レイヤーの不透明度を設定します。 数値が0になると完全に透明になります。

    2. 表示 / 非表示

    レイヤーの表示 / 非表示を切り替えます。

    change-blend-mode_image02.png

    3. ブレンドモード

    前面のオブジェクトを、どのような効果で背面のオブジェクトに重ねるかを設定します。

    change-blend-mode_image03.png

    ①パススルー

    ブレンド加工しない、そのままの状態。

    change-blend-mode_image04.png

    ②通常

    前面のオブジェクトはブレンド加工せず重ねる。 重なっている部分は前面のオブジェクトに隠れる。

    change-blend-mode_image05.png

    ③暗く

    背面と前面のオブジェクトの色を比較して、暗い方を適用する。

    change-blend-mode_image06.png

    ④乗算

    背面と前面の色を合成する。 色と色が混ざるため暗くなる。 白を合成した場合は変化しない。

    change-blend-mode_image07.png

    ⑤焼き込み(カラー)

    背面オブジェクトを、暗くかつコントラストを強くする。

    change-blend-mode_image08.png

    ⑥明るく

    背面と前面のオブジェクトの色を比較して、明るい方を適用する。

    change-blend-mode_image09.png

    ⑦スクリーン

    色を反転して合成する。 反転して重ねるので明るくなる。 黒を合成した場合は変化しない。

    change-blend-mode_image10.png

    ⑧覆い焼き(カラー)

    背面オブジェクトを、明るくかつコントラストを強くする。

    change-blend-mode_image11.png

    ⑨オーバーレイ

    前面に重ねた色で、全体的にコントラストを高める。

    change-blend-mode_image12.png

    ⑩ソフトライト

    前面に重ねた色で、全体的にコントラストを少し高める。

    change-blend-mode_image13.png

    ⑪ハードライト

    前面に重ねた色で、全体的にコントラストを強く高める。

    change-blend-mode_image14.png

    ⑫差分

    背面と前面のオブジェクトの差を抽出する。 差によっては写真のネガのような結果になる。

    change-blend-mode_image15.png

    ⑬除外

    背面と前面のオブジェクトの差を、コントラスト控えめに抽出する。 差によっては写真のネガのような結果になる。

    change-blend-mode_image16.png

    ⑭色相

    背面オブジェクトの色の輝度と彩度に、前面オブジェクトの色相を適用する。

    change-blend-mode_image17.png

    ⑮彩度

    背面オブジェクトの色の輝度と色相に、前面オブジェクトの彩度を適用する。 背面オブジェクトの彩度がゼロ(グレー)の場合は変化しない。

    change-blend-mode_image18.png

    ⑯色

    背面オブジェクトの色の輝度に、前面オブジェクトの色相と彩度を適用する。 モノクロをカラー化できる。

    change-blend-mode_image19.png

    ⑰輝度

    背面オブジェクトの色の色相と彩度に、前面オブジェクトの輝度を適用する。

    change-blend-mode_image20.png

    author icon

    Designpedia Team

    2024年1月15日(月) 公開