MENU

【Canva】図形に影をつける方法3選|ドロップシャドウ再現のテクニックをご紹介!

図形に影をつける方法アイキャッチ

図形に影を付けることで、視認性が向上し、デザイン全体に洗練された印象を与えることができます。

たとえば、以下のようなカード型レイアウトでは、図形に影を加えることで、要素が背景から浮き上がって見え、視認性が高まり、情報の区切りも明確になります。

おまかせECマルシェ カード型レイアウト
画像出典:「おまかせECマルシェ|ECサイト構築サービス」https://ec-marche.jp/

今回は、無料版のCanvaでもできる、図形に影を付けるテクニックをご紹介します

目次

Canvaでは図形に影がつけられない?ドロップシャドウを再現!

デザインにおいて「影」は、一般的に「ドロップシャドウ」と呼ばれます。
結論から言うと、Canvaでは図形に直接ドロップシャドウを付ける機能は備わっていません。

文字や画像にはエフェクトの「シャドウ」を適用できますが、IllustratorやFigmaのように、図形自体にドロップシャドウを加えることはできないのです。

とはいえ、工夫次第でCanvaでも図形にドロップシャドウを表現することは可能です。
ここでは、その方法を3パターンに分けてご紹介します。

Canvaで図形にドロップシャドウを付ける方法

方法① 図形を一度保存して「シャドウ」エフェクトをつける

Canvaで図形にシャドウをつける方法

↓Canva初心者さんでも分かるようにキャプチャ付きで解説していきます

STEP
図形をキャンバスに配置する
Canvaで図形に影をつける方法①

「素材」→「図形」から任意の図形を選択し、キャンバスに配置する。

これを図形Aとする。

STEP
図形を画像としてダウンロードする
Canvaで図形に影をつける方法①

小さめの図形Bを作り、(図形はなんでもOK)図形Aの下のレイヤーに配置する。

Canvaで図形に影をつける方法①

① 図形Aと図形Bを選択し、グループ化する。

② グループ化した図形の上で右クリックをし、「選択した素材をダウンロード」からダウンロードする。


※ 1つの図形を単体でダウンロードすることができないため、上記の手順を踏んでいます。

STEP
ダウンロードした図形に「シャドウ」エフェクトを付ける
Canvaで図形に影をつける方法①

① ダウンロードした図形をキャンバスにアップロードする

② 上部バーの「編集」を選択

Canvaで図形に影をつける方法①

③「シャドウ」を選択

④「グロー」を選択

⑤ 数値を調整する

サイズ:0
ぼかし量:50
カラー:デフォルト(#000000)
強度:20

※数値はお好みで調整してください

完成!

図形の形は四角形以外でも可能です。
ただし、ダウンロードした図形を後からトリミングすることはできません。トリミングすると「シャドウ」が見切れてしまいます。

そのため、あらかじめ図形の大きさや形を確定させてから上記の作業を行うことをおすすめします。

方法② シャドウっぽい図形を作って下に重ねる

2つの図形を使ってドロップシャドウを再現します。
この方法では、後からでも図形のトリミングや大きさの変更が可能です。

Canvaで図形に影をつける方法②

① 図形Aを配置
② 影っぽい色(グレー)の図形Bを配置
③ 図形Aの下のレイヤーに、図形Bを少し右下にずらして配置

完成!
光源が左上にあるように見えるドロップシャドウを再現できます。

方法③ Canvaの影素材を使う

Canvaでは、素材の中から「影(シャドウ)」の素材を選ぶことができます。
種類も豊富にあるので、デザインにぴったり合うものを見つけて、ぜひ活用してみてください。

「影」「シャドウ」「ドロップシャドウ」などのキーワードで検索すると、見つけやすいです!

Canvaで図形に影をつける方法②

まとめ

Canvaでは図形に直接ドロップシャドウを付ける機能はありませんが、工夫次第で影を表現することができます。
今回ご紹介した3つの方法を活用すれば、デザインに立体感や奥行きを加えることができます。

どの方法も簡単に試せるので、ぜひ実際に使ってみて、デザインの幅を広げてみてくださいね!

ふくおかクリエイティブでは、WEBサイト制作サービスをご提供しています。
「おしゃれなデザインのサイトを作りたい」、「コストを抑えてサイトを作りたい」などお客様のご要望にお応えします。まずはお気軽にご相談ください。

▼サービス詳細はこちら

福岡情報ビジネスセンター | DX推...
ホームページの設計から開発・運用までご支援「Webサイト制作」 - 福岡情報ビジネスセンター | DX推進とシ... 成果に繋がるコーポレートサイトを制作するには、デザイン力はもちろんのことサイトにおける適正な目的、目標を定め、戦略と構造を整理し、どのような情報・コンテンツを発...
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

IT企業に勤めるデザイナー。
主にデザイン制作、マーケティング、データ分析を行っています。

梅のお菓子が大好きです。

目次