Canvaの素材で、簡単に写真を切りぬける「フレーム」。とっても簡単に写真が切りぬけるので、使用されている方も多いのではないでしょうか。
しかし、このフレーム。写真を切りぬいたあとに、思っているような箇所が切りぬけず悩んでいる方が多いのです。調整する為に、元画像を切りぬいてアップロードしなおしてみたり。実は私もアップロードを繰り返し、調整していました。
でも、そんな労力実はいらないんです。この記事では、フレームの中の画像を簡単に調整する方法をはじめ、フレームの使い方を解説していきます。
ちょっとしたことですが、知っているのと知らないのでは結果が全く変わってきます。フレームの画像を調整して、あなたの思う通りのお洒落なデザインをつくりましょう！
フレームの使い方！特に写真の位置やサイズの調整方法を解説します！
この記事を書いた人
どんぐり所長
- アイキャッチデザイナー
- ブログ用のアイキャッチ、ヘッダーなどの制作が得意
- CanvaPRO使用
- ブログサイトを４サイト運営
- twitterフォロワー 8,000人以上
- 140名以上在籍のブログデザインコミュニティ運営者
- Nobilista公式アンバサダー
この記事を書いた人
どんぐり所長
- アイキャッチデザイナー
- ブログ用のアイキャッチ、ヘッダーなどの制作が得意
- CanvaPRO使用
- ブログサイトを４サイト運営
- twitterフォロワー 6,900人以上
- 140名以上在籍のブログデザインコミュニティ運営者
- Nobilista公式アンバサダー
Canvaとは
Canvaは無料で使えるデザインツールです！
Canvaとは、今大人気のオンラインデザインツールです。無料でもプロ並みのデザインが作れる、ブロガーにピッタリのサービスです。
クラウドサーバーにデータを保存するので、どの媒体でもログインすれば、どこにいても自分のデザインを作成することができます。
フォントまわりなど機能的に足らないところもありますが、ブログのアイキャッチや装飾素材を作成するには丁度いいツールです。すべてのブロガーに胸を張っておすすめできます。
有料版になると、写真・イラスト・フォントなどの素材が使い放題になります。また切り抜きやサイズ変更などの機能も使用することができます。
有料版を使い始めると、快適すぎて戻れなくなってしまいました。
詳しい記事はこちらをどうぞ。
フレームの使い方
フレームとはなんでしょうか。Canvaの「素材」タブを選んでいただくと沢山の素材を検索することができます。その中にこの「フレーム」があります。
Canvaの「フレーム」とは、写真や画像をドラッグ&ドロップするだけで、簡単に切り抜ける「額」のようなものです。形もさまざまで、簡単にオシャレな形に切り抜くことができます。
フレームを検索する
フレームを使うには、「素材」タブの検索ウインドウで「フレーム」と入力するだけ。
フレームを選ぶ
あとはあなたのお好みの形を選びましょう。選んだ後は、お好きな位置やサイズに調整します。
切り抜きたい写真を用意する
切り抜きたい写真を用意します。Canvaで探してもよし。アップロードしてもよいです。写真を選んだら、一度デザイン画面に表示させます。
写真を切り抜く
写真をフレームの上にドラッグ&ドロップすると、簡単に写真が切り抜かれます。
よくあるフレームの問題点
この画像を見てどう思いますか？上手にできているように見えて問題点が潜んでいます。それが「位置」。
猫ちゃんをもう少し中央に寄せれば、可愛い顔もはっきりと見せることができます。しかし、位置調整しようと左クリックで掴むとフレームが動いてしまう。
ほとんどの方が、ここで諦めてしまうのです。
ちなみに私は、元画像を切り抜いたり、サイズ調整したりして無理やり位置調整していました。しかし、そんなめんどくさい事はする必要がないのです。
私も昔、調整できずにイライラと…おっと、失礼しました。
フレームの中の写真の調整方法
フレームの上でダブルクリックするだけ。
フレームの上でダブルクリックすると、フレーム内の写真の調整モードに入ります。このモード内で画像のサイズ調整や位置調整を行う事で簡単にあなた好みに調整ができます。
フレーム内の画像を調整する方法
画像を入れたフレームの上でダブルクリック！
フレーム内の画像の位置調整
フレームの上でダブルクリックすると、差し込んだ写真が調整できるようになります。画像の位置やサイズを調整しましょう。
フレーム内の画像の調整が完了しました。この方法ならかなり細かい調整をすることができます。
フレームの活用例
フレームを使って写真を好きな形に切りぬいて設置するだけでもオシャレになって良いですが、もっと面白い使い方があります。それが、写真の一部を変換するような使い方。
一部だけカラーにしたり、違う形の写真に変えてしまったりと工夫次第でいくらでもデザインが作れます。
そんなデザイン例をみていきましょう。
文字型のフレームで抜けたデザイン
このデザインはフレームを活用しています。モノクロの世界にアルファベットの中だけが明るい元の世界に切り抜かれているようなデザインです。
このデザインはどのように作られているのでしょうか。
まず、アルファベット１文字１文字がフレームです。背景をモノクロで配置し、その背景と同じ画像をカラーで全てのアルファベットフレームにドラッグ&ドロップします。そして、１文字１文字、背景とまったく同じ位置になるように調整していくのです。
手間はかかりますが、非常にインパクトのある画像ができあがりますね！
写真の一部を変換するような使い方
元の写真の一部を、別の写真のものをデザインチックに入れ替えるのにも「フレーム」は便利です。コツは元画像の位置やサイズに合わせること。位置調整やサイズ調整は今回学んだので簡単にできますね！
一部だけを見せる
この猫ちゃんの目の部分がフレームです。
猫の目の部分はそのままカラーで、元画像をモノクロにしてぼかして使用しています。
こちらも先ほどの画像と同じで、まったく同じ場所になるように猫ちゃんを位置調整しています。画像調整の差でアクセントにしています。
Canvaのフレームに関するQ&A
フレーム内の画像を調整する方法
フレーム内の画像を調整する方法
画像を入れたフレームの上でダブルクリック！…以上！
あれだけ悩んだのに、こんなに簡単にできるなんて…。
知らなければ大変ですが、知っていれば一瞬。この方法を必ず覚えておいてくださいね。
どんぐり所長のおすすめツール
どこでも、どんなデバイスでも順位チェック
ブログ記事の順位を確認していますか？どんなキーワードが上下しているのか知る事はブロガーでは必須と言えます。
ほとんどの方がダウンロード型の順位チェックツールを使用されていますが、私はコレ。「Nobilista」。クラウド型のチェックツールです。
クラウド型とは、ネット上にあるサーバーにデータが保存されている順位チェックツールです。従って、お家のパソコン以外でも情報にアクセスできちゃうんです。これが想像以上に快適で、一度体験すると戻れなくなっちゃう。詳しい記事を書いていますので是非読んでみてください。
実は私、Nobilistaの公式アンバサダーをさせて頂いています。使いだしたら超気に入ってしまって、気づいたらアンバサダーになっていました。そんな私が、おすすめする「Nobilista」。今なら7日間無料でお試しができます。クレジットカードなどの情報を入れなくても試せるので、ぜひあなたにも試してほしい。
＼場所を選ばない快適さを体験して／
Nobilista公式サイト
当サイト推奨 デザインツール
当サイトでは、ブログ初心者でも簡単・無料で美麗なデザインが作成できる、オンライン画像作成フォーム「Canva」を推奨しています。数万点の素材やフォントが用意されていて、選ぶだけで簡単にプロ並みのデザインを作成する事ができます。これから先、会社員の仕事でも使用する事になるかもしれないほど普及が広まっています。覚えるなら早い方がいいですよ！
当サイトのデザインは、SWELLで再現可能
私はSWELLを2年使用してきました。現在４つのサイトでSWELLを使用しています。
SWELLを使用する理由は、簡単・綺麗・速い。
実際このトップページも、SWELLの標準機能だけでデザイン。
お洒落なブログを作りたいあなたにピッタリのWordPressテーマです。
私が実際に使用して実感したSWELLの特徴は以下。
- 完全ブロックエディタ対応
- 直感で使える操作性
- 便利な専用ブロックを多数用意
- お洒落なトップページが簡単に作れる
- 最速レベルのページスピード
- 一度購入すれば複数サイトに何度でも使用可能
- ユーザーの利便性を考える熱意の運営者
- SWELLを紹介すればアフィリエイト報酬が貰える（購入者のみ参加可）
- 販売価格 ￥17,600（税込）
唯一の欠点は価格の高さ。しかしそれは、SWELLがハイクオリティだから。
そして、運営者がとびきりの対応をしてくれる必要経費。
SWELLにはアフィリエイトプログラムがあり、紹介すれば利益を得ることもできます。
よく、「アフィリエイトがあるから紹介しているんでしょ。」と言われますがこれは違います。
惚れ込んだWordPressテーマに、たまたまアフィリエイトがあっただけ。
あなたもSWELLを体験すれば、きっと紹介したくなります。
＼圧倒的な操作性を体験せよ／
あなたも今日からSWELLER！
お気軽にコメントください
コメント一覧 （2件）
こんにちは。
とても勉強になりました。
ひとつ教えていただきたいのですが背景の写真とフレーム内の写真をぴったり合わせるコツはありますでしょうか。
どうしても目視になってしまうのでずれがでてしました。
よろしくお願いいたします。
m(__)m
こんにちは
クマさんご質問ありがとうございます。
まず、背景の画像とはめ込みようの画像のサイズが違うと絶対に合わないので、はめ込む数と同じだけ背景を事前にコピペで用意しておくとやりやすいです。
位置調整については、Canvaの特性上目合わせが基本になるかなと思います。
背景の角合わせなどで分かりやすくしておくとやりやすいと思います