【実践】iPhoneアプリ版「Canva」テンプレート編集基本の解説

Canvaアプリのテンプレート操作方法解説(実践)

記事内に商品プロモーションが含まれる場合があります

iPhoneアプリ版のCanvaの使い方解説です。この記事ではテンプレートの編集方法を、実際の操作画面を使って初心者向けに丁寧に説明します。一緒にCanvaアプリを操作して実践してみましょう。

サルワカくん
サルワカくん
Canvaアプリの登録方法や画面の見方、基本的な操作など、基本のキはこちらの記事で解説しています。

1.練習用テンプレートをアプリで開こう

Canvaアプリでテンプレートを編集する

この記事では、左のテンプレートを編集して右のデザインに変更していく過程を解説します。

まずは、この記事の解説で使うテンプレートと同じものを、Canvaアプリで開きましょう。(すでに開いている場合はスキップしてくださいね)

テンプレートを使用をタップ

まずはこちらをタップしてリンクを開いてください。続いて「テンプレートを使用」をタップします。

Canvaに会員登録した方法でログイン

初回のみログインを求められるので、Canvaに会員登録した方法をタップし、ログインします。

右上の開くをクリック

ログインすると、ブラウザ上のCanvaで編集画面が開きます。アプリで開きたいので、上の方にあるCanvaアプリを「開く」ボタンをタップしましょう。

Canvaのアプリでテンプレートを開けた

すると自動でアプリに遷移します。無事Canvaアプリでテンプレートが開きました。

2.テンプレートの構成を理解しよう

まずは練習用のテンプレートの構成をみてみましょう。

中級者以上向けの考え方ですが、テンプレートをみて何でできているのかをぱっと理解できると、その後の編集やアレンジでどんな操作をできるか想定できるので、テンプレートの編集がよりスムーズになります。(慣れが必要ですが…)

練習用テンプレートの構成

このテンプレートは、デザインのメインの「写真」、テキスト3つ、左下の薄茶のイラスト素材でできています。背景はデフォルトの白です。

写真はフレームに写真がはめ込まれている

写真がぐにゃぐにゃなのは、そういうデザインのフレームに写真をはめこんだからです。とても簡単です。

なお、Canvaではパーツ(素材やテキスト)の重なっている順番も大事です。前面に出したり、背面に回り込ませたりできます。

Canvaデザインのパーツの重なり

今回のテンプレートでは、「背景→写真→イラスト素材→テキスト」の順で重なっています。

例えばテキストがイラストの下だったら、文字がはっきり読めません。最前面にテキストがあることで、イラストと重なっていてもしっかり表示されているというわけです。

サルワカくん
サルワカくん
中級者以上向けですが、この重なり(レイヤー)を理解して駆使すると、おしゃれなデザインを作ったり、「これどうやったの?」というグラフィックを作ったりもできます。最初の頃はぱっとみてレイヤーを理解できるようになれば上出来です。

3.テンプレートを編集してみよう

それでは、実際にテンプレートを編集していきましょう。

Canvaアプリでテンプレートを編集する

左のテンプレートを編集して、右の画像のようにします。

Canvaアプリ実践用の猫画像

猫画像はこちらの画像を長押しして、メニューが出たら「”写真”に保存」をタップしてiPhoneに保存し、ご使用ください。

以下のことを行って、編集していきます。ひとつずつ解説するので、一緒にやってみましょう。

  1. 写真をアップロード
  2. 写真を差し替え
  3. テキストを編集
  4. イラスト素材を追加・編集
  5. 写真を編集(フィルター)
  6. テキストにエフェクト

なお、Canvaは編集内容が自動で保存されます。自分で保存ボタンをタップする必要はないのでご安心ください。

1.写真をアップロードする

まずは自分で用意した写真を、Canvaにアップロードします。(Canva内にも写真素材が山程ありますが 、今回は自分で用意した写真を使用します)

テンプレートの追加や素材の追加は左下のボタン

Canvaアプリでテンプレートを開いたら、まずは左下のここをタップします。

イラストや写真の追加・検索ができる

するとメニューが開きます。上の検索バーから素材等の検索もできますが、今回は下のメニューの「カメラロール」をタップしてください。(表示されていなければ、左にスワイプしてスクロール)

写真の使用を許可

もしこのような画面や、ポップアップで「写真へのアクセスを許可しますか」等でてきたら、許可してください。(そうしないとiPhone内の写真を使用できません)

写真をタップしてCanvaへアップロード

写真フォルダが開いたら、使用したい写真をタップして、下の「ページに追加」をタップします。

写真がCanvaアプリのデザイン上に追加された

すると、デザインの画面に戻り、写真が追加されました。ここから写真を動かしていきます。

2.写真を回転・差し替える

写真のフレームが縦長なので、横向きの猫だといいかんじに収まりません。なので、写真をあらかじめ回転させておきます。

矢印をタップして回転させる

まず、写真が紫色の線で囲まれた選択された状態になっていなければ、一度写真をタップしてください。選択された状態で、下に表示された回転矢印をタップしたまま、くるっと指を動かしてください。

Canvaのデザイン上で縦向きになった

写真がいいかんじの角度になったら指を離しましょう。フレームに猫が収まりそうな、縦向きになりました。

フレーム上に写真をのせる

続いて、写真をタップしたまま動かし、フレーム上にのせましょう。

写真が変わったら指を離す

このとき、フレーム内の写真が差し替わる場所を探して、指を離します。

写真が置き換わった

写真がフレーム内に表示されました。もし角度がいいかんじになっていなければ…

元に戻す、進むボタン

フレーム内では写真の回転はできないので、左上の「元にもどす」のボタンをタップして戻り、もう一度写真の回転からやり直しましょう。

さらに、写真の切り抜き位置を調節できます。

ダブルタップして切り抜き位置を調節

ダブルタップしてこの画面になったら、写真をタップしたまま動かして、いい位置にきたら右下の「完了」をタップすればOKです。

四隅の丸でCanva上の写真サイズを調節

なお、四隅の丸をタップしたまま動かすと、写真のサイズを調節することもできます。(元のサイズによっては画面内で非常に動かしづらいですが…)

3.テキストの色を変える

さて、ここからはテキストの編集をしていきます。

Canvaアプリでテキストの色を変える

まずは、編集したいテキストをタップします。すると下にテキスト関連メニューが表示されます。

カラーのメニューをタップ

メニューは横にスワイプすると、いろいろな項目が表示されます。スワイプして「カラー」の項目をタップしましょう。

自分で好みの色を選択

するとカラーパレットが表示されます。「+」マークをタップすれば自分で色を自由に設定できます。

好みの色を設定する

2つの丸をタップしたまま動かして、色を作りましょう。

パレット上から色を選択することも可能

もちろん、すでにある色を使用してもOKです。パレット上の色をタップすれば、そのまま色を使用できます。

4.テキストのグループを解除する

続いて、テンプレート下部のテキストを編集したいと思います。実はこの下部のテキスト、「March〜」と「2回目の〜」でグループになっているんですね。

テキストがグループになっている

タップするとこのように、タップした方が実線で、されていないほうが点線で一緒に囲まれた状態になります。さらに下のメニューに「グループ解除」の項目が表示されています。

グループ化されていても各々の編集は可能ですが、位置を動かすときに不便なので、今回は解除してしまいましょう。

サルワカくん
サルワカくん
テンプレート編集時にタップしたもの以外も選択状態になってしまう、パーツを動かしたときに不要なパーツまでついてくる、そんなときはグループ解除しましょう。

Canvaアプリでテキストのグループを解除する

グループのパーツをタップして、下に表示された「グループ解除」をタップします。

グループ解除された

パーツそれぞれが実線で囲まれていればOKです。グループが解除されました。

5.テキストを編集する

テキストを削除する

まず、不要なテキストを削除します。こちらの「2回目の〜」を消したいので、一度タップして選択した状態にしてから、上に表示されるゴミ箱マークをタップして削除します。

テキストの文章を変更するためにダブルタップ

続いて、日付のテキストを変更します。ダブルタップしましょう。

文章を変更する

すると文字を入力できるようになるので、×で消したあとに、好きな文章(ここでは日付)を入力します。

6.テキストの不要な余白を消す

テキストの無駄な余白

続いて、テキストの無駄な余白をなくしたいと思います。ちなみに今回のテンプレ上のこのテキストの余白は、文章の先頭でキーボードの×をタップしても消えません

別にこのままでも問題ないのですが、テキストの枠が無駄に大きいと編集時に邪魔になることもあるので、なぜ余白が生じているのか解説しておきますね。

テキストの余白を消すためにフォーマットを確認

まず、テキストが選択された状態で表示される画面下のメニューで、スクロールして「フォーマット」という項目を探してください。

フォーマットを確認

これですね。タップしてみましょう。

右寄りのフォーマットになっている

「フォーマット」では、太字にしたり縦書きにしたり、左寄せ・中央・右寄せなどもできます。ここで今「右寄せ」になっているのが確認できますね。

テキストの無駄な余白

無駄な余白ができてしまったのは、①文章の長さに対してテキストの枠が大きいのと、②大きい枠の中で文章が右寄せになっていることが原因です。

なので、余白を消すためにテキストの枠の横幅を小さくしましょう。

右端の縦棒をタップしたい

横幅の調節には、テキストの枠の端の縦棒をタップしたまま移動します(注:枠の角の丸ではない)。

ただ、フォントサイズが小さいので枠線も小さく、縦棒をタップしづらいと思います(縦棒と近い角丸をタップしたことになってしまい、フォントサイズが変わってしまう)。

そこで一旦、フォントサイズを大きくして枠も大きくし、縦棒をタップしやすくするとよいでしょう。(画面表示を拡大してもいいですが、ちまちま縮めることになってしまうので…)

作業しやすくするために一度フォントサイズを大きくする

フォントサイズ(テキスト枠)を大きくするため、左上の角の丸をタップしたまま、左上に移動させ、ほどよいところで離します。

右端の縦棒をタップしたまま移動

おそらく縦棒がタップしやすくなっていると思います。タップしたまま左に移動させ、テキストの枠を縮めましょう。

横幅を縮める

余白が消えて、枠線の左端が文章の頭と揃うくらいまでズズズ〜〜っと移動させ、よさげなところで指を離しましょう。いいかんじになったかと思います。

あとはテキストをタップしたまま右側に移動し、ちょうどよさげなところに配置しましょう。

7.フォントサイズを変更する

フォントサイズの変更は簡単です。

角の丸でフォントサイズを変更

テキストの枠の角の丸を、タップしたまま移動して離すだけでOKです。画面下メニューの「フォントサイズ」をタップすれば、数値で指定も可能です。

8.フォントの種類を変更する

Canvaアプリのフォント種類を変更

フォントの種類を変更したければ、タップして画面下に表示されるメニューから、「フォント」の項目をタップします。

スクロールすればフォントがたくさん出てくる

下にスクロールすればたくさん表示されますし、検索バーにフォント名や言語(「日本語」など)を入力して検索することもできます。

使用したいフォントをタップ

使用したいフォントをタップすれば、テキストに反映されます。右上の×でメニューを閉じるまで確定されないので、いろいろなフォントをタップして、実際にどうなるのか見てみるのもよいでしょう。

9.イラスト素材を追加する

続いて、もう少し華やかにしたいので、イラスト素材を増やしたいと思います。

ただ、追加するイラスト素材が、デザイン上にすでにあるイラスト素材と雰囲気が違いすぎると、散らかった印象のデザインになってしまいます。追加するイラストは既存イラストの色違いや、似たテイストのものを使用しましょう。

イラスト素材をタップ

まずは色違いを追加したいと思います。左下のほわわんとしたイラスト素材をタップして選択します。

コピーマークをタップ

すると素材の上にメニューが表示されるので、一番左のコピーのマークをタップしましょう。

コピーされた素材を移動

元のイラストと少しずれてコピーが追加されたと思います。このコピーを、タップしたまま上の方に移動させましょう。

角丸でサイズを変更

ちなみに、イラスト素材もテキスト同様、枠の角の丸をタップしたままスライドさせて程よいところで指を離せば、サイズを変更できます。

10.イラスト素材の色を変更する

続いて、コピーしたイラスト素材の色を変更してみましょう。

Canvaのイラスト素材の色を変更する

イラストが選択された状態で表示される下のメニューから、「カラー」の項目をタップします。

好きな色に設定する

あとはテキストの色変更のときと同様です。パレットから色をタップして選択してもよいですし、+マークをタップして…

点を動かして色を探す

2つの点を動かして、好みの色にするのもよいでしょう。

11.イラストを写真の背後に配置する

現時点で、コピーしたイラストが写真の上にのってしまっている構成になっています。これを変更します。

写真の上のイラストの配置を変更

配置を変更したいイラスト素材をタップし、表示されたメニューの「・・・」ボタン(もっとみるボタン)をタップします。

背面に移動させる

すると配置変更の項目が表示されるので、「最背面に移動」をタップしましょう。

写真の下にイラストが配置された

イラスト素材が写真の下にくる構成になり、写真がしっかりみえるようになりました。

12.写真にフィルターをかける

さて、ここまでテンプレートを編集してきましたが、テンプレートの優しい色味にあわせて、写真の色味を柔らかくしたい気がしてきました…。

そこで、フィルターの機能を利用します。

サルワカくん
サルワカくん
スマホに標準的に機能があるので、Canvaにアップロードする前にフィルターをかけることもできると思いますが、デザインしながらデザインにあわせてフィルターをかけるのがおすすめです。

Canvaで写真にフィルターをかける

フィルターのかけかたは簡単です。写真をタップして、下に表示されたメニューから、「フィルター」をタップします。

フィルターの強度を調節できる

あとは使用したいフィルターをタップするだけです。下の丸を左右に動かせば、フィルターの強度も調節できます。

13.イラストを新規で追加する

もう完成でもいいかな?というデザインになってきましたが、もう少し華やかさを加えたいですね。

そこで、今使用しているイラストと似たテイストのイラスト素材を、デザインに追加したいと思います。

Canvaでデザインに素材を追加する

イラスト素材の追加は左下の+マークをタップします。(写真を追加するときと同じですね)

素材をタップ

今回追加するのはイラスト素材なので、「素材」をタップします。すると素材がたくさん表示されます。

素材の検索もできる

なお、上の検索バーに単語を入力して検索することも可能です。

似たようなものを長押しタップ

すでに使用されているイラスト素材と似たようなものがちょうど表示されているので、これにしようかな?と思いましたが、もうちょっとちがうのがいいな〜ということで、探してみましょう。惜しい素材を長押しでタップします。

開いたメニューから「似ているアイテムを表示」

するとメニューが開くので、「似ているアイテムを表示」をタップします。

出てきたものから気に入ったものをタップ

すると似ているイラスト素材がずらっと出てくるので、気に入ったものをタップします。

この「似ているアイテムを表示」は、素材探し中に「惜しい…もう少し違うヤツ…」となったときに非常に便利な機能です。覚えておいて損はありません。

中央に配置されるので、移動したり増やしたり、カラーを変更したりする

タップした素材は中央に配置されるので、コピーして増やしたり、タップしたまま動かして配置を変えたり、下のメニューからカラーを変更したりしましょう。

2箇所にイラスト素材を追加した

こんなかんじで2箇所に配置しました。もし、文字の上にイラストがのって邪魔になったら、「・・・」をタップして「最背面へ移動」など、レイヤーの順番を変更しましょうね。

ちなみに、イラスト素材を探しているときに「似ているアイテムを表示」の機能を使いましたが、これは素材メニューではなくデザイン画面上でも使用できる機能です。

詳細をタップ

まずは素材をタップして選択された状態にしてから、下に表示されたメニューを右にスクロールして、「詳細」をタップします。

似ているアイテムを表示をタップ

表示されたメニューから「似ているアイテムを表示」をタップします。(メニュー下部が見切れている場合は、上にスワイプしてすべて表示させましょう)

似ているイラスト素材が表示される

すると素材メニューに遷移して、似ているイラスト素材が表示されました。下にスクロールすればたくさん出てきますし、タップして使用できます。

サルワカくん
サルワカくん
テンプレートにすでに使用されているイラストと同じテイストのものを簡単に探せるので、とても便利な機能です。覚えておいてぜひ活用してください。

14.文字にエフェクトをかける

さて、ほぼほぼ完了ですが、最後にテキストにエフェクトをかけてみましょう。

テキストをタップして「エフェクト」

エフェクトをかけたいテキストをタップしたら、下に表示されたメニューを右にスクロールし、「エフェクト」をタップします。

使用したいエフェクトをタップ

使用したいエフェクトをタップ(ここでは「影付き」)します。するとテキストにエフェクトがかかります。

エフェクトの強度を調節できる

同じエフェクトを再度タップすると、調節メニューが開きます。丸を左右に動かすか、数値を入力すれば調節できます。

Canvaにはたくさんのエフェクトがあるので、ぜひいろいろ試してみてくださいね。

4.完成デザインをダウンロードしよう

さて、デザインが完成したらダウンロードしましょう。方法は2つあります。

シンプルにサクッとダウンロード

ワンタップで即ダウンロードする方法です。

Canvaアプリでダウンロードは右上のボタン

アプリ画面右上の下矢印のマークをタップします。

Canvaアプリでダウンロードされている状態

するとそのままダウンロードが始まって、デザインがPNGの画像としてデバイスに保存されます。

設定を変更してダウンロード

続いては、画像の形式などを設定変更してダウンロードする方法です。(有料プランなら、背景透過やサイズ変更、圧縮が可能です)

もうひとつダウンロードの方法がある

まずは右上の端の共有ボタンをタップします。

メニューをタップしたらダウンロードをタップ

メニューが開いたら、「ダウンロード」をタップします。

形式等を選んでダウンロード

あとは、画像形式を選んで下の「ダウンロード」をタップするだけです。有料プランなら、画像形式以外の王冠マークのついた項目も変更できます。

Canvaアプリで編集したデザイン

これで、テンプレートを編集したデザインが完成しました。お疲れ様でした。

今回のテンプレート編集は、無料機能のみ使用して行いました。Canvaの有料プランである「Canva Pro」だと、もっと多くのテンプレや素材、便利な機能を使えます。

下の記事で、実際に使用して感じたメリットやCanvaを使い込むなら知っておきたいおすすめ機能を抜粋して解説しているので、気になったら読んでみてくださいね。他の人よりもお得に無料体験できるリンクも貼ってあります。

まとめ

この記事では、テンプレートの編集を通しておおまかに以下の操作を解説しました。

  1. 写真をアップロード
  2. 写真を差し替え
  3. テキストの編集・フォーマット変更・フォント変更・エフェクト
  4. イラスト素材を追加・サイズや色の変更
  5. 写真にフィルター
  6. ダウンロード

操作に慣れれば、上の表の文章を見ただけで「あのボタンをタップすればOKだな」「あのメニューのあそこから操作できるやつだ」と頭の中に思い浮かべられるようになります。ぜひいろいろ実践してみてください。

Canvaは本当にいろいろなことができるので、使いこなせると非常に便利です。サルワカではいろいろな解説記事が無料で読めるので、ぜひ活用してくださいね。

同じカテゴリーの記事
同じカテゴリーの記事一覧
Canvaの使い方
サルワカ