Canvaでデザインを楽しまれていますか?もっとこんなデザインできたらいいのになと思う事はないですか?
その中の一つ。画像のまわりにふちどりをつける方法を解説します。
画像のまわりにふちどりをつける事ができれば、ポップな感じ仕上げる事もできます。また、ロゴやワッペンなどの作成時に周囲にふちどりを入れる事で、一気にプロっぽい仕上げにすることもできます。
画像のまわりにふちどりをつける方法だけでなく、ふちどりを付けた作品例も掲載いたしますので、最後まで読んでいってくださいね。
目次
Canvaとは

Canvaとは、言わずと知れたオンラインデザインソフトの雄!
Canvaはオンラインクラウド上で操作できる、デザインサービス。データがクラウドで保存されているので、場所や端末が変わっても、ログインさえすれば、どこでもどの端末でもデザインすることができます。
用意されている画像や写真、フォントの数が非常に多く、そこから選んでいくだけで簡単にデザインが完成します。
さらに有料プランである「CanvaPRO」に加入すれば、画像・写真・フォントが使い放題になります。その他にも便利機能が使えるようになりますので、ぜひCanvaPROも検討してください。
➤Canvaの無料版と有料版の比較記事はこちら
Canvaで画像のまわりにふちどりをつける方法

ここからは、実際に画像にふちどりをつけるまでの手順を解説していきます。
グローとは、画像の周りぐるっと等幅の影をつける機能です。この機能を上手に活用してふちどりを作ることができます。
グローを使ってふちどりをつける手順
STEP
切り抜き画像を用意する
Canvaから画像を引用まずは切り抜き画像を用意しましょう。自分で「背景リムーバ」や「透過保存」を使って作ってもいいですが、Canvaでは、切り抜き画像の素材が多数用意されています。その中から選んでもいいですね。
今回は「アニメ」で検索して、その中から女の子の画像を選択してみました。
切り抜き画像を作るには、canvaPROにすると簡単!
STEP
影付きを選択する
画像を編集➤影付きを選択- 画像の上でクリックし上部バーで「画像の編集」を選択
- 左サイドバーから「影付き」を選択
STEP
グローを選択
左サイドバーからグローを選択- 左サイドバーからグローを選択します
STEP
グローの設定にはいる
再度グローを選択- 再度、グローを押し設定画面に切り替えます。
STEP
グローの設定方法
グローの設定方法- 透明度を100にする
- ぼかしを0にする
- ふちどり幅のサイズを調整(今回は15にしてみました)
- ふちどり色の選定(今回は白にしました)
- 適用を押して完成
STEP
完成!
女の子のまわりにふちどりがついたあとはサイズの調整をして完成!
動画で確認
今回は実際にふちどりを作っているところの動画を用意致しました。ぜひ、実際のやりかたを確認してみてくださいね。
グローの活用例
ここでは、ふちどりを使った作品例を挙げていきます。グローの機能を使えばいろいろなことができます。
二重ふちどり

グローを適用して保存したのち、再度グローをかける事で二重ふちどりを作成することができます。
再度、適用➤グロー➤適用➤グロー…と繰り返していくことで、いくらでもふちどりを重ねることができます。
いくらでもふちどりを重ねられるテキストと画像を一緒にふちどりする方法
kenchicoさんが作ったロゴデザインこのグローを上手に使えば、テキストとイラスト(写真)等をまとめてふちどりすることができます。
上記の画像は、kenchicoさんが作成されたロゴデザインです。
左の画像でも素敵なのですが、なにか物足りなさを感じませんか?
右側がふちどりを入れた画像です。こちらはポップな印象がついて、まるでアメリカの商品のような仕上がり。一気に本格的になりましたね。
kenchicoさんは美味しそうなブログを書かれていますので、この機会にぜひ覗いてみてくださいね。
➤kenchico生活力
テキストとイラストを一緒にふちどりにする方法
- テキストと画像を一緒に配置してデザインを完成
- png形式で透過保存
- 新しいデザインに先ほど保存したpng形式の透過画像を貼付け
- その画像にグローでふちどり加工
この手順を踏む事で、画像とテキストを合わせた形でふちどりをすることができます。
文字のまわりにグローをかけたい場合も同じ手順です。
ロゴを作ってみよう!
ブログデザインラボのサイトロゴ当サイトのサイトロゴも、グローを使ったふちどりを使用しています。
一文字一文字バラバラに配置していますので、スプライスなどを使ったふちどりが使えません。
この場合、前述したいったん透過保存して、そのまわりにふちどりを配する方法なら簡単にふちどりをつける事ができます。
最後にまたpng形式で透過保存すれば、立派なサイトロゴの出来上がり!ぜひ、あなたのサイトのロゴも作ってみましょう。
上手にふちどりをつけられれば、お洒落なサイトロゴが完成しますね!
グローでふちどりを作る Q&A

- なぜ透明度を100に、ぼかしを0にするのですか?
ふちどりにする為です。グローはもともと影ですので、リアルな感じに仕上げるため透かしたり、ぼかしたりしています。縁取りの場合は必要ありません。
- 画像のまわりに四角にふちどりができるのですが。
それは切り抜き画像ではないからです。普通の画像にグローをかけると画像のまわりに影がつきます。必ず切り抜き画像にしてからグローをかける必要があります。
- 切り抜き画像は無料版のCanvaでも作れますか?
作れません。png形式での透過保存、背景リムーバによる背景削除はCanvaPROの専用機能です。比較記事にてご確認ください。
ふちどりを使って、楽しくデザインしよう!



いろいろな事に応用できるから、覚えておいて損はない技です。
切り抜き画像のまわりにふちどりをつけられれば、デザインの幅が広がります。応用すれば、ポップな画像やロゴの作成が非常にはかどります。
いつもと変わり映えのしないデザインから脱却するためのひとつの方法として、このふちどり法を覚えていただければ、あなたもきっと素敵なデザインを作る事ができます。
推奨デザインツール
当サイトでは、無料でもオシャレなデザインが簡単に作成できる、「 Canva 」を推奨しています。無料でも相当なレベルのデザインができるのですが、一度PROにすると無料には戻れなくなってしまいました。その秘密は、下記の記事に。
あわせて読みたい
【CanvaPRO】有料プランでもっと快適・便利に【比較】
Canvaをお使いのあなた。写真やイラスト素材を選ぶときに、ほとんどが有料のマークが付いていてイライラ…こんな経験していませんか? 有料のCanva Proにすれば、このイ… Canvaを詳しく知る ➤
おすすめWordpressテーマ
私は、導入するだけで一気にお洒落になるWordpressテーマ「SWELL」をおすすめします。デザイン性はもちろん、その操作性は特筆ものです。
SWELLを愛用する私が実際に使用してきた内容を加えた、詳しい記事を書いています。ぜひご参照ください。
あわせて読みたい
SWELLを2年使った感想を本音レビュー【WordPressテーマ】
お洒落なブログを作りたい─あなたはそうお考えではないですか? お洒落にするにはデザインセンスが必須。確かにそういうところもあります。なら、デザインのセンスがな… SWELLを詳しく知る ➤

お気軽にコメントください