こんにちは、SO Technologies株式会社ライクル事業部所属のデザイナーNです。
弊社では、Adobe XDをつかってLPやUIのデザインなどを行ってきましたが、2021年の春頃にFigmaに移行しました。
弊社だけでなく、多くの事業会社やデザイン制作会社で利用されているFigmaですが、Figmaでサードパーティのプラグインを使わずに写真の編集ができることをご存知でしょうか？
Figmaで読み込める写真の種類
Figmaでは、多くの種類の画像ファイルを読み込むことができます。 デジカメのjpegファイルももちろんそのままインポートすることができます。 一方で、RAWファイルはインポートすることができません。
RAWは、デジカメ内部で現像処理が行われていない画像データで、拡張子はデジカメメーカーによって異なります。(.dng, .arw, .cr2, .rafなど)
これらのRAWファイルをFigmaにインポートしようとすると、以下のようになり読むこむことはできません。
なので、PhotoshopやLightroomなどでできるRAWファイルの本格的な編集作業はおこなうことができません。あくまで、JPEGファイルでの基本的な編集作業になります。
Figmaにおける写真の編集機能について
Figmaでの写真編集機能は、現在7種類が用意されており、各機能は左右にスライダーを動かすことで編集行うことができます。
一つ一つ見ていきましょう。
露出 (Exposure)
写真の全体的な明るさを調整できます。スライダを右に動かすと写真が全体的に明るくなり、左に動かすと暗くなります。
コントラスト (Contrast)
写真の明暗を調整することができます。スライダを右に動かすと明るいところは明るく、暗いところはさらに暗くなり、左に動かすと明暗の差が縮まっていきます。
彩度 (Saturation)
写真の色の鮮やかさを調整することができます。スライダを右に動かすと色は鮮やかに、左に動かすと鮮やかさは失われ、最後には白黒になります。
色温度 (Temperature)
ざっくりいうと写真の色の雰囲気（温度）を調整することができます。スライダを右に動かすと写真は温かい色（黄色っぽい、オレンジっぽい）になり、左に動かすと冷たい色（青みがかった色）になります。
色合い (Tint)
写真を緑っぽくしたり赤っぽくすることができます。スライダを右に動かすと全体的に赤っぽく、左に動かすと緑っぽくなります。
ハイライト (Highlights)
写真の明るい部分の調整ができます。上記の「露出」と異なるのは、露出では写真全体の明るさ調整に対して、「ハイライト」は「写真の明るい部分の明るさ調整」です。 スライダを右に動かすと明るい部分は更に明るくなり、左に動かすと明るい部分が暗くなります。
シャドウ (Shadows)
写真の暗い部分の調整ができます。スライダを右に動かすと暗い部分が明るくなり、左に動かすと暗い部分はさらに暗くなります。
実際に写真をFigmaで編集してみる
以下の写真は、数年前の秋〜冬ごろ、近くの公園の枯れた噴水をiPhone Xで撮影したものです。
これをFigmaの写真編集機能を使って「冬に撮ったフィルム写真風」に編集していきます。フィルムで撮影した写真とは、ちょっと古めかしいかんじで全体的に青緑がかっているなんとなくノスタルジックな写真を想定しています。
露出の調整
ちょっと全体的に暗い感じがするので、すこし露出をあげます。
コントラストの調整
コントラストをすこし下げて明暗差をすこしだけなくしてやります。
彩度の調整
彩度は上げて、すこし鮮やかにします。
色温度の調整
色温度は少し下げて青みを加え、写真の雰囲気をちょっと冷たい感じにします。
色合いの調整
色合いも下げて、さらに少しだけ緑っぽさを全体にプラスします。
ハイライトの調整
ハイライトはすこし上げてやると、空の青みが少し薄れてさらに冷たい雰囲気が出ます。
シャドウの調整
シャドウも少し上げていますが、ほんの気持ちだけ暗いところが明るくなる程度。
あとは、再度全体的にスライダをすこし動かして微調整すれば完成です！
未編集状態との比較
未編集状態の写真と比較するとこんなかんじです。 だいぶ雰囲気がかわったのがわかりますでしょうか？
他の写真でも試すとこんなかんじ。未編集では真っ黒になっていた建物群が、編集後にはすこし見えるようになっています。
ただ、よくみるとわかりますが、JPEGのため編集による画像の劣化が見られます。
まとめ
このように、基本的な編集であれば、PhotoshopやLightroomではなくてもFigma内で完結することが可能です。
基本的な編集にとどまるので使い所がむずかしいですが、私の場合は広告出稿用バナーとかサイト内で使うバナーに写真を使うときにこの写真編集機能を利用しています。
こうすると、Figmaでバナー作成が完結するのでおすすめです。さらに、Figmaの写真編集機能を使うと、編集内容は常に保存してあるので、いつでも未編集に戻せたり更に調整を行うこともできるのが便利です。
