WEBデザイン

canvaのフレームから人の頭だけを出すデザインテクニック

canvaを使ってるんだけどもっとおしゃれなデザインにしたい!サムネイルやバナーで使われてるようなフレームから一部分だけ飛び出させるようなデザインってどうやれば作れるの?

本記事では、canvaを使ってフレームから一部分だけを飛び出させるようなデザインについて紹介しています。

 

本記事はこんな方におすすめ

  • canvaを使い始めたばかりの初心者向け
  • canvaでちょっとこだわったデザインを作りたい
  • 説明分だけじゃ分かりにくいから動画で詳しく説明して欲しい

 

当記事を書いている人は?

  • ネットショプ店長歴4年の店長ブロガー。
  • 年商1億円突破の個人ショップオーナー。
  • ネットショップ運営の人材育成をするネットショップ学習コンサルタント。
  • ネットショップ向け情報メディア「ECzine」でコラムの担当。

 

canvaのフレームから人の頭だけを出すデザインテクニック

canvaのフレームから一部分だけを飛び出させるためには以下のような手順になります。

  1.  フレームを設置
  2. 人物を設置(人物Aとする)
  3. 人物をコピー(人物Bとする)
  4. 人物Aをフレームの中に入れる
  5. フレームにロックをかける
  6. 人物Bの大きさを調整してフレームの上に重ねる
  7. 不要な部分を切り取る



canvaのフレームから人の頭だけを出すための具体的な方法

canva

動画ではまずフレームを2つ用意しました。

なぜかと言うと、1つのフレームには1つの要素しか入れれないため、背景用フレームと人物用フレームを作るためです。

背景用フレームがいらない場合にはフレームは1つだけで大丈夫です。

 

canva

背景用フレームに適当な背景をいれました。

同時に人物も一緒に配置します。

 

背景フレームと何も入っていないフレームを重ねます。

背景フレームは何も入っていないフレームの後ろに設置します。

人物もコピーしておきます。

 

canva

人物を1つフレームの中にいれました。

人物を上に重ねてあったフレームに入れると人物の入った所以外は透過されて後ろに配置した背景が表示されるようになります。

 

canva

このまま入れてしまうとコピーしてあった人物を重ねた時にフレームの中に配置してあった人物に上書きされてしまいます。

なので、フレームはロックして動かないようにしてからコピーした人物を上に重ねます。

 

大体重なったら不要な所を消すために表示されている青い線を小さくして必要な所だけを表示させるようにします。

このときに大きさや位置などを再度調整すれば完成です。


canvaのフレームから人の頭だけを出すデザインテクニックまとめ

canvaで人物の頭や手などの一部分だけを表示したい場合には

  1.  フレームを設置
  2. 人物を設置(人物Aとする)
  3. 人物をコピー(人物Bとする)
  4. 人物Aをフレームの中に入れる
  5. フレームにロックをかける
  6. 人物Bの大きさを調整してフレームの上に重ねる
  7. 不要な部分を切り取る

の順番で作業をすると簡単に一部分だけフレームの外に出す事が出来ます。

簡単なわりに使い勝手が良いのでcanvaを使う時には便利なテクニックの1つです。

 

canvaは42万点以上のテンプレートがあるので、他にもいろいろとデザイン性の高い画像を簡単に作る事が出来ます。

canvaをもっと有効に使いたい場合にはCanva Proで背景透過や多彩なフォントを活用してみてください。

 

バナーデザインがどうしてもうまく作れない時には

デザインツールは自由度が高いため、しっかりとしたデザイン知識がないと「なぜか分からないけど作ったデザインが変だなぁ」って言う状態になります。

 

デザイン知識って言うのは日々の勉強の積み重ねや、デザインテクニックの引き出しをどれだけ持っているか?で決まるので一朝一夕に身に付く物ではありません。

 

デザインテクニックとは

  • フォントの使い分け
  • フォントの関係性
  • 整列
  • 目的にあった色の選択
  • 色同士の関係性
  • 色の選択
  • 色のコントラスト
  • 余白

をバランスよく配置する事でターゲットにした顧客を惹きつける画像を作る事が出来ます。

 

作ったバナーデザインに納得がいかない時にはこちらの本を推奨。

ノンデザイナーにも分かるようにデザイン知識が基本からまとめられています。

 

しかし、基本的なデザインの知識を覚えただけでは魅力的なバナー画像を作る事は出来ません。

なぜかと言うと、反応率の高いバナー画像は検証・分析を2年、3年行い少しずつコツを掴んでいく物だからです。

 

もし、この2年、3年必要なデザインノウハウを一瞬で埋める方法があるとしたら、目的にバナー作りに特化した専用ツールを使う事でしょう。

例えば、『超簡単!素人でもプロのようなバナーが作れるバナープラス!』にも「ダサいバナーはサイトの信用を大きく落とす」と書かれています。

 

そして、プロが作るバナーは見た目がオシャレなだけではなく、見た人がクリックしたくなる『心理テクニック』が使われているんですね。

 

素人がどれだけ頑張ってもプロに太刀打ちできない原因は、デザイン知識・デザインノウハウ・デザインの心理テクニック・実務経験。

だからと言って、プロに本当に効果の高いバナーを外注すると1パターンで90,000円以上の費用が!

 

ネットショップのバナーは毎月何パターンも作らないといけないので、どう考えても現実的な値段とは思えないですね。

 

しかし!『バナープラス』を使えば14,700円でプロ並みのバナーが作り放題!

 

さらに4つの特典付き!

バナープラス4つの特典

  • 動画マニュアル・オンラインマニュアル
  • デザイン基礎マニュアル
  • プロのデザイナーが作ったプロジェクトマニュアル
  • プロのデザイナーからのデザインアドバイス

↓こちらからの申込で4つの特典をGET↓

バナープラス公式サイト

 

ついでに、バナーにかわいらしいキャラクターアイコンを使いたいって時には

に登録されているイラストレーターさんが、人の目を魅了する魅力的なキャラクターアイコンを作ってくれます。

バナープラスと合わせる事でバナーの魅力が2倍にも3倍にも倍増する事間違いなし!

  • この記事を書いた人
  • 最新記事

井川 裕輝

ネットショップ総合管理職3年の経験を経て独立、現在は法人代表。小規模低予算少人数でのネットショップ立ち上げ経験が最も多い。

-WEBデザイン
-

© 2021 ネットショップ運営情報ブログ『WellMaga』