WWGスペース 名古屋のホームページ制作会社が発信するオウンドメディア 無限の情報が集う星

デザインがなんとなく素人っぽい…
実はそれ、レイアウトではなく「画像の整え方」が原因かもしれません。

今回は

• 画像を配置
• トリミング
• 色調整
• 色をかぶせる
• フォントを変える

この簡単な5ステップだけで、ぐっと完成度を上げる方法をご紹介します。
難しいことはしません。本当に“これだけ”です。

Figma（フィグマ）を使い始めたばかりの方、操作はわかってきたけどデザインが納得いかない…という方におすすめのテクニックです。

画像を配置する

まずは画像をFigmaに入れます。

やり方はとても簡単です。画像をドラッグ＆ドロップするだけです。
画面に画像が表示されればOKです。

ここではまだ細かいことは考えなくても大丈夫。
まず置く。これが第一歩です。

トリミングする

配置した画像は、そのままだと少し大きすぎます。
主役をしっかり見せるために、不要な余白をカットします。

手順はシンプル。
画像を選択して右のパネルの「塗り」にある「画像」をクリックしてさらに「塗り」を「トリミング」にします。

四隅の青い角をクリックして
表示範囲をドラッグで調整しEnterで確定です。

「全部見せたい！」はいったん我慢。見せたい部分だけ残すと、一気に締まります。見えない部分があるから想像力をかき立てるのです。

画像の色を調整する

せっかくなので次は色を少しだけ整えます。

Figmaでは簡易的ではありますが色補正をその場でできる機能があります。かなりクセが強くＰhotoshopの色補正とは少し違ったものなので、使う使わないは人それぞれだったりします。

「露出」と「コントラスト」でメリハリを調整し、「彩度」で鮮やかさを決めて「温度」「濃淡」で狙った色味を出して「ハイライト」「シャドウ」で印象の軽さと重さを整えるといった考え方でやっています。これについてはまたいつか記事にできたらと思っています。

ここでのコツは、「やりすぎないこと」です。
「ちょっと物足りないかな？」くらいで止めると自然に仕上がります。
色味が整うだけで、写真がぐっと“ちゃんとした感”を出してくれます。

上から色をかぶせる

次に、写真の上に薄く色をのせます。

やり方は簡単。

先程の「塗り」設定部分の右にある「+」をクリックして色の層を増やします。
そして好きな色を設定して不透明度を下げるだけです。

今回はしずくマークの「ブレンドモード」から「オーバーレイ」を使って、画像と色の重なりでできる効果を加えています。

これだけです。するとどうなるか。

• 写真の印象が統一される
• 文字が読みやすくなる
• 一気にデザインっぽくなる

いわば“仕上げの魔法”です。

フォントを変更して完成

最後に文字を整えます。
いよいよ「甲子園開幕」に合わなくなったのでフォントを変えました。

これだけで印象がガラッと変わります。

写真を整えた後にフォントを変えると、全体のバランスがとても良く見えますね。

まとめ

今回やったことはたったこれだけです。

• 画像を置く
• 余分を切る
• 色を整える
• 色をかぶせる
• 文字を変える

難しいレイアウトは一切していません。
それでも、「なんとなく素人感」はかなり減るはずです。

デザインは、特別なテクニックよりも丁寧なひと手間の積み重ね。
まずはこの5ステップ、ぜひ自分の画像で試してみてください。