前回メインビジュアルが完成しました。

SAKUWEB さくうぇぶ

　

今回から、コンテンツを作っていきます。

目次

1. Canvaで新規ページを作成する
2. Canvaのナビゲーションにメニュー名を設定する
3. テキストボックスを追加する
4. アイコンを追加する
5. Canvaで写真を丸く切り抜きたい
6. Canvaの表（テーブル）を使ってプロフィールを作る
   1. 表の列・行の削除と追加
   2. 1列削除する
   3. 表の罫線や色を変える
   4. セルの背景色を変更する
   5. セルの余白を調節する
7. Canvaページの高さを広げる
8. 要素を垂直に整列させる
9. 要素を均等割付けにする
10. 要素をグループ化する
11. Canvaで3カラムのレイアウトを作る
    1. カラムに背景色を付ける
    2. カラムの余白を変更する
    3. Canvaで余白を付ける時には注意が必要！

　

　

SAKUWEB さくうぇぶ

　

Canvaで新規ページを作成する

今回作るのは「在籍ネコちゃんの情報」です。

ネコちゃんの写真+プロフィール情報を配置していきます。

　

想定しているレイアウトは3カラムです。

Canva使用中のテンプレートにはないレイアウトなので、今回は「新規ページ」を作ってゼロベースからコンテンツを作っていきます。

　

　

するとメインビジュアル直下に、真っ白なページが追加されました。

これで新規ページは完成です。

新規ページを作ったら、必ずページタイトルを併せて設定しましょう。

　

Canvaのナビゲーションにメニュー名を設定する

新規にページを追加したら、ナビゲーションメニューに表示させるためにページタイトルを設定します。

設定しないとナビゲーションに表示されませんので、必ず設定しておきます。

　

　

これでナビゲーションメニューに追加されました。

　

テキストボックスを追加する

コンテンツのタイトルを作っていきます。

テキスト入力のため「テキストボックス」を追加しますが、追加方法は複数あります。

一番簡単なのは、他ページのテキストを選択してコピペする方法です。

今回はテンプレートを使っているのでこの方法で良いですね。

もしくは、左メニュー「テキスト」→「テキストボックスの追加」をクリックする方法もあります。

　　

また、Canvaにはすでにデザインされたテキストが用意されています。

これをタイトルとして使うこともできます。

　

　

今回はオリジナルで作るので使いませんが、

タイトル以外にもセール情報、メニュー価格表など、いろんなパターンのデザインが用意されています。

デザイン初心者にとっては、ワンクリックでデザインできるので重宝する機能です。

　

アイコンを追加する

せっかくなので、ネコのアイコンをタイトルに配置したいと思います。

　

　

アイコンの色を変更したい場合は、アイコンを選択して上メニューの「カラー」アイコンから変更できます。

　

　

Canvaで写真を丸く切り抜きたい

作ったロゴマークのデザインが円形なので、コンテンツにも円形のデザインにして、統一感を持たせたいなと思います。

今回はねこちゃんの写真を丸く切り抜きます。

　

　

先にねこちゃんの写真をページに置いておきます。

　

　

するとねこちゃんの写真が丁度良い大きさで円形に切り抜かれました。

　

フレームには様々な形が用意されているのと、写真をドラッグするだけで自動で丁度良く切り抜けるのでラクですね！

　

Canvaの表（テーブル）を使ってプロフィールを作る

次はプロフィールを作っていきます。

キレイに配置するために、今回は表（テーブル）を使います。

　

　

テーブルがページに配置されました。

んが、表のサイズやカラーなどもカスタマイズしてページデザインに合わせたいですね。

　

表の列・行の削除と追加

まずは、プロフィール情報を入力していきます。

エクセルのセルに値を入力するのと同じ要領です。

情報にあわせて、行と列の削除や追加していきます。

　

セルをクリックすると、上と左に3点マークが表示されます。

上3点マークは列を、左3点マークは行を制御します。

　

1列削除する

　

　

1行を削除するのも同じ方法です。

また、追加したい場合は「1列を追加する」でOK。

　

表の罫線や色を変える

ページのデザインにあわせて罫線やカラーを変えていきます。

　

　

　

セルの背景色を変更する

項目名のセルだけ背景色を変更することも可能です。

　

　

　

セルの余白を調節する

ちょっとセルの余白大きいので、狭めます。

　

　

　

Canvaページの高さを広げる

写真とテーブルの2つの要素を縦に並べたいのですが、ページの高さが足りません。

高さを広げてみましょう。

　

　

これで高さを調節できました。簡単ですね。

　

要素を垂直に整列させる

ネコちゃんの名前+写真+プロフィールの3つの要素を作ったので、要素をキレイに中央寄せで整列させます。

　

　

もしくは、上メニューの「配置」からも整列させることができます。

　

要素を均等割付にする

3要素を中央寄せにしたので、これだけでOKではありますが、均等割付する方法も併せてみていきましょう。

　

　

　

要素をグループ化する

作った3要素をグループ化することで、同じレイアウトをコピペで複数作れたり移動するのもラクになりますね。

ですが、残念ながら表だけはグループ化ができませんでした。

なのでとりあえず、名前と写真だけでもグループ化します。

　

　

　

これでグループ化が完了です。　

　

Canvaで3カラムのレイアウトを作る

ネコちゃん情報を3つ横並びで表示させたいと思います。

つまり3カラムを作る必要がありますね。

ただ、フリーハンドでの整列は難しいので、Canvaの「グリッド」機能を利用します。

　

グリッドとは、簡単にレイアウトを作る機能です。

グリッド機能は、基本的に写真を切り抜いてレイアウトするという使い方になります。

ただフリーハンドで3カラムより、グリット機能を使って1カラムの範囲が可視化できるほうがバランスを間違えることがありません。

　

また、カラムパターンが多数用意されています。

それらを組み合わせれば、複雑なレイアウトが組めるようになります。

　

　

　

ここで注意したいのが、「スマホでの表示」です。

ページ全体が対象となると、タイトルパーツがあるため、スマホでは1カラムとして表示されてテキストが小さくなってしまいます。

なので、グリッドのサイズを変更しないといけません。

　

　

　

これで、タイトルは1カラム・プロフィールは3カラムのレイアウトが完成です。

スマホで見た時はすべて1カラムで表示されるようになります。

さらにグリッド機能で1カラムの幅が分かるようになりましたね。

　

ちなみに「プレビュー」をみればわかりますが、この絵面自体は表示されません。

あとは、要素を整列させれば完成です。

　

カラムに背景色を付ける

カラムに背景色を付けて、他のコンテンツと差別化することもできます。

また、作業中にグリッドの絵柄が目障りだなと感じた時はページの背景色を同色、サンプルでは白にしておきましょう。

　

　

　

カラムの余白を変更する

横並びのカラムには、余白も必要です。

デフォルトで余白サイズは10で設定されています。

この余白を調節して、見栄えをよくします。

　

　

これで横並びカラムの余白を調節できます。

　

Canvaで余白を付ける時には注意が必要！

スマホ版だけ余白サイズを変えることができないので、

たとえば余白がデザインでない限り、大きくとりすぎないように注意しましょう。

でないと、スマホで見た時に要素が小さくなって読みにくくなります。

　

最後にプレビューでスマホ表示を確認しましょう。

　

これでCanvaでゼロベースからのコンテンツ制作が完成しました。

Canvaはできることがたくさんあるためにメニューもたくさんでしたね。

どこだったっけ？と迷いましたが、こればかりは慣れですね。

　

次回はコンテンツの3番目「里親になるために」を作っていきます。