そら

「ひまわり組」というテーマでクラスページのデザインを作ってみました。

同じものが作れるように、作り方や使っている素材を紹介します。

ひまわり組のデザイン案

ひまわり組というテーマで、ひまわりの花と青空をあしらったクラスページのデザイン案をつくってみました。
CanvaとイラストACの無料素材を使って作成できます。
以下に作り方を紹介します。

作り方

まずは、「クラスページの作り方」を参照して子供の写真フレームを配置してください。
ガイド線の位置は以下のように読み替えて、フレームを丸に変えるだけで同じ手順で作れます。

使ったのは「Oval Frame with Border」というフレーム素材です。

使っている素材

使った素材を順に紹介します。以下を参考にタイトル文字やイラストを配置していってください。

タイトル

ひまわりのイラスト

以下のイラストACのページリンクから「PNG」でダウンロードできます。

素材をCanvaにアップロードして使う方法は「自身で用意したイラスト素材を使う方法」を参照してください。

雲のイラスト

以下のテンプレートで使われている雲のイラストをコピーして使いました。
テンプレートの利用法は「Canvaのテンプレート活用法」を参照してください。

背景（空の部分）

背景の色は「#A7E1E8」に指定しています。
背景の色の指定方法は「背景を指定の1色にする方法」を参照してください。
カラーコードは「＋」をクリックすると入れることができます。

子供の写真フレーム

Canvaの素材の「フレーム」カテゴリで「Oval Frame with Border」で検索したらでてくる丸いフレームを使っています。

黄緑の地面の部分

黄緑の地面の部分はCanvaの素材の「線と図形」カテゴリの四角を使っています。
色は「#C9E265」にしています。
見開き2ページで位置がずれないようにガイド線を使って高さをそろえましょう。

先生の写真

フレームは使わずそのまま写真を貼り付けて必要なサイズにトリミングします。
具体的なやり方は「写真をそのまま貼り付ける方法」を参照してください。

トリミングした後に影付き機能で白い縁取りをつけます。
具体的なやり方は「ふちどりする方法」を参照してください。

マスキングテープのイラスト

以下のイラストACのページリンクから「PNG」でダウンロードできます。

画像の一部のマスキングテープを切り抜いて使っています。
切り抜き方は「画像の一部を切り抜く方法」を参照してください。

そら

卒園アルバムの定番、クラスページをCanvaで作る方法を紹介します。

以下が完成イメージです。このサンプルを例に作り方を説明していきます。
基本を押さえれば、写真の枠を丸に変えたり、イラストを変えたりしてアレンジも可能です。

白紙の原稿を用意する

まず、アルバムのサイズにあったcanvaの原稿ファイルを用意してください。

PDF原稿の場合は【PDF入稿用】Canvaで原稿のひな型をつくろう
PNG/JPEG原稿の場合は【フォトブック用PNG/JPEG】Canvaで原稿のひな型をつくろう
を参考にしてください。

白紙の原稿ファイルを準備できたら次に進んでください。

テンプレートを検索してお気に入りに追加する

1. ① ホーム画面で「テンプレート」をクリック

1. ② 「青　モダン　空と虹　グッドラック」で検索
   ※Canvaのテンプレートは日々増えているので同じ検索結果にならないかもしれません。使いたいテンプレートを使ってもらえば大丈夫です。
2. ③ 使いたいテンプレートの星マークをクリック（お気に入りに追加）

2ページ目にテンプレートを適用する

用意した原稿のデザイン編集画面を開いてクラスページを作っていきます。
※左のメニューに「スター付き」がでてない場合はデザイン編集画面に「スター付き」フォルダを表示させるを参照してください。

1. ① 左メニューから「スター付き」をクリック（先ほどお気に入りされたテンプレートが表示されます）
2. ② 「ページを追加」をクリック

1. ③ 2ページ目をクリック

1. ④ スター付きの中のテンプレートをクリック
2. ⑤ 2ページ目にテンプレートが適用されます

1ページ目に背景色を設定

1. ① 1ページ目をクリック
2. ② 上部の「背景色」の四角をクリック
3. ③ 表示されたカラーパネルからテンプレートの背景と同じ水色をクリック

ガイドを入れる

写真を整列させるための補助線としてガイド線をいれます。
以下のように【縦：56ｍｍ、275ｍｍ】、【横：16ｍｍ、200mm】で2本ずついれます。
※PDF用A4に塗り足し「３ｍｍ」がふくまれているサイズの原稿を例としています。
※PNG/JPEGなどでピクセル(px)単位で作っている場合は、比率などで大体の位置を決めてください。

1. ① 上の定規エリアをクリックして下向きにドラッグし、65㎜のところにガイドを入れてください

1. ② 左の定規エリアをクリックして右にドラッグし、16㎜のところにガイドを入れてください
2. ③ 同様に200㎜のところにガイドを入れてください

1. ④ 上の定規エリアをクリックして下向きにドラッグし、275㎜のところにガイドを入れてください

写真フレームを入れる

1. ① 左メニューから「素材」をクリック
2. ② 検索窓に「Frame with Border」と入力して検索を実行
3. ③ 検索結果から、長方形のフレームをクリックして用紙にいれます（フレームのサイズは、幅40mm高さ53mm程度にします）

フレームの枠の色を白色にしましょう。（すでに白色の場合はスキップしてください）

1. ④ 用紙の上のフレームをクリック
2. ⑤ 上部のカラーパネルをクリック
3. ⑥ 表示されたカラーパネルから白色をクリック

名前を入れる文字スペースを追加する

1. ① 左メニューから「テキスト」をクリック
2. ② 「テキストボックスを追加」をクリック
3. ③ クラスで一番長い氏名の人の名前を入れる（最長の名前が枠におさまるように調整するため）

文字サイズとフォントを決める

1. ① 用紙に入った文字をクリック
2. ② 写真のフレームの横幅に収まるようにフォントサイズを決める
3. ③ フォント欄をクリック
4. ④ 利用したいフォントを選択します

写真フレームと名前スペースを整列（中央揃え）する

1. ① フレームと文字を両方選択（Shiftを押しながらフレームと文字をクリック）
2. ② 上部の「配置」をクリック
3. ③ 「中央揃え」をクリック（グレーになっていればすでに中央揃えされている状態です）

1. ④ フレームと文字を両方選択（Shiftを押しながらフレームと文字をクリック）
2. ⑤ 上部の「グループ化」をクリックしてフレームと名前を1つのグループにする

写真フレームを並べて整列する（横方向）

1. ① フレームと名前のグループを右クリック
2. ② 「コピー」をクリック
3. ③ もう一度画面を右クリックして「貼り付け」をクリック

3回繰り返して4枚のフレームが並ぶようにします。

1. ④ 1番目のフレームの左角をガイド線にあわせます
2. ⑤ 2番目、3番目はフレームの上辺をガイド線より下に配置します
3. ⑥ 4番目の右角をガイド線にあわせます

1. ⑦ 4つのフレームグループをすべて選択します
2. ⑧ 「配置」をクリック
3. ⑨ 「上揃え」をクリック（グレーになっていたらすでに揃っています）
4. ⑩ 「水平に」をクリック（グレーになっていたらすでに揃っています）

1. ⑪ 4つのフレームグループをすべて選択します
2. ⑫ 上部の「グループ化」をクリックして1つのグループにします

写真フレームを並べて整列する（縦方向）

1. ① グループを選択して右クリック
2. ② 「コピー」をクリック
3. ③ 右クリックして「貼り付け」

2回繰り返して12枚のフレームが並ぶようにします。

1. ④ 2列目の左辺をガイドにあわせます
2. ⑤ 3列目の左下をガイドにあわせます

1. ⑦ 3つのグループをすべて選択します
2. ⑧ 「配置」をクリック
3. ⑨ 「左揃え」をクリック（グレーになっていたらすでに揃っています）
4. ⑩ 「垂直に」をクリック（グレーになっていたらすでに揃っています）

以下のように12枚の写真と名前スペースが整列された状態になります。

1ページ目を複製して2ページ目を作成する

1. ① ページを複製のボタンをクリック

以下のように1ページ目をコピーした2ページ目ができます。

先生用の写真フレームを入れる

1. ① 左メニューから「素材」をクリック
2. ② 検索窓に「Frame with Border」といれてenterキーを押す
3. ③ 検索結果から丸いフレームを選んでクリック（2ページ目に入れます）
4. ④ 用紙にフレームが入ります

1. ⑤ フレームをクリック
2. ⑥ 上部のカラーパネルをクリック
3. ⑦ 表示されたカラーパネルから白色をクリック

1. ⑧ 先生の人数分丸フレームをコピーする（右クリック「コピー」「貼り付け」）

先生の名前を入れる

1. ① 左メニューから「テキスト」をクリック
2. ② 「テキストボックスを追加」をクリック

1. ③ 先生の名前をいれる
2. ④ フォントサイズとフォントの種類を選ぶ
3. ⑤ 「エフェクト」をクリック

1. ⑥ 「湾曲させる」をクリック
2. ⑦ 湾曲の大きさを円フレームにあうように調節します
3. ⑧ 円フレームの上に先生の名前をのせます

1. ⑨ 同様にしてもう一人の先生分の名前も作成します

テンプレートのイラストを利用する

虹のイラストを入れる

1. ① ３ページ目のテンプレート素材から虹を右クリック
2. ② 「コピー」をクリック

1. ③ １ページ目で右クリック「貼り付け」で虹のイラストを貼り付けます
   ガイドに合うように配置します

1. ④ ２ページ目に虹を貼り付けます
2. ⑤ 「反転」をクリック
3. ⑥ 「水平に反転」をクリック

１ページ目同様にガイドに合うように配置します。

雲や星のイラストを入れる

1. ① ３ページ目のテンプレートから雲のイラストをコピーします（右クリックから「コピー」）

1. ② 好きな位置に雲のイラストを貼り付けます（右クリックから「貼り付け」）

以下のようにフレームの下に雲のイラストを入れる方法を説明します

1. ③ 対象の雲のイラストを右クリック
2. ④ 「最背面へ移動」をクリック
   これで雲を背面に移動できます

星のマークなども同様にテンプレートからアルバムへコピーして入れてください。

見出しを入れる

1. ① 左メニューから「テキスト」をクリック
2. ② 「見出しを追加」をクリック
3. ③ クラス名を入れます
4. ④ 好きなフォントやフォントサイズを選びます

1. ⑤ 「テキストの色」（Aのマーク）をクリック
2. ⑥ 好きな色をクリック

自分で用意した素材を入れる

1. ① 左メニューから「アップロード」をクリック
2. ② 使いたいイラスト素材をドラッグしてアップロード

1. ③ 素材をクリックして１ページ目に入れます
2. ④ 必要な部分だけをトリミングで切り抜きます
3. ⑤ サイズが合うように四隅の丸で拡大縮小して調整します

1. ⑥ 配置出来たら右クリックで「コピー」（もしくは[Ctrl]+[c]）

1. ⑦ ２ページ目を選んで右クリック「貼り付け」（もしくは[Ctrl]+[v]）

Canvaの素材を入れる

クラス人数の関係で右下に隙間ができる場合は、イラストを入れてみましょう。
今回はCanvaの素材を入れてみました。

1. ① 左メニューから「素材」をクリック
2. ② 検索窓に「気球」と入力しenterキーを押す
3. ③ 検索結果から気球のイラストをクリック
4. ④ 適当な位置に配置します

写真を入れる

フレームの中にアップロードした子供の写真を入れてください。
写真の入れ方は「Canvaで写真を入れよう」を参照してください。

名前を入れる

フレームの下の名前エリアをクリックしてそれぞれの子供の名前に変更していってください。

PDFでダウンロードして確認してみる

右上の「共有」＞「ダウンロード」＞「PDF（印刷）」で１，２ページを選択して「ダウンロード」をクリックするとPDFでダウンロードできます。
※PDF出力手順は「原稿のひな型をつくろう」を参照してください。

ダウンロードしたPDFをPDFリーダーやブラウザで表示してみて、ずれているところがないかどうかチェックしてください。
Chromeで確認するには、ダウンロードしたファイルをChromeのブラウザ上にドラッグします。

1. ① 右上の…をクリック
2. ② ２ページ表示をクリック

以下のように２ページを並べて確認することができます。

そら

これで完成です！
まったく同じデザインで使ってもらってもいいですし、お好みでイラストや写真の枠を変えてもらってもいいです。

そら

このページでは、Canvaのテンプレートを使ってアルバムを装飾する方法を紹介します。

Canvaには、たくさんのデザインテンプレートが登録されています。
テンプレートのデザインを利用してページを装飾することで簡単に統一感のあるページデザインができます。

以下は、テンプレートの素材を使って装飾したサンプルイメージです。

以下が目次になります。

テンプレートを検索してお気に入りに入れる

1. ① ホームからテンプレートをクリック

1. ② 検索キーワードをいれてEnterキーを押す
2. ③ 表示された検索結果から使いたいテンプレートの星のマークをクリックする
   （星を付けたテンプレートがお気に入りに保存されます）

デザイン編集画面に「スター付き」フォルダを表示させる

デザイン編集画面の左側に「スター付き」のフォルダが表示されていない場合は以下の手順を行ってください。表示されている場合はここはスキップしてください。

1. ① デザイン編集画面の「もっと見る」をクリック
2. ② 「フォルダー」マークをクリック

1. ③ 「スター付き」をクリック
   これで左側に「スター付き」フォルダが表示されるようになります

テンプレートをサブページに反映する

1. ① 左から「スター付き」をクリック
2. ② テンプレートを適用するサブページを作るため、用紙下の「ページを追加」をクリック
3. ③ スター付きの中の使いたいテンプレートをクリック

1. ④ 複数ページあるテンプレートの場合は、使いたいページのデザインをクリック
2. ⑤ 2ページ目（サブページ）にテンプレートのデザインが適用されます

テンプレートをアルバム用のページに反映する

1. ① テンプレートを適用したいアルバムのページを作ります(写真やタイトルなどを入れたもの)

1. ② 文字などは不要なものを選択します
2. ③ ゴミ箱マークもしくはdeleteキーで削除します

1. ④ 使いたい素材を選択します
   （siftキーを押しながら使いたい素材をすべてクリックするか、ドラッグで使いたい素材を囲むと複数の素材を選択できます）

1. ⑤ 素材を選択した状態で右クリック→メニューから「コピー」をクリック
   （もしくは選択した状態で[Ctrl]+[C]）

1. ⑥ 素材を貼り付けたいページ（今回は1ページ目）を右クリック
2. ⑦ メニューから「貼り付け」をクリック
   （もしくは1ページ目をクリックして[Ctrl]+[V]）

1. ⑧ 以下のようにコピーした素材が貼り付けられました。

反映したテンプレートのイラストを移動させる

素材は前面に貼り付けられるので、写真より後ろにしたいものは背面に移動させます。

1. ① 背面に移動させたい薄い黄色の丸の素材をクリック
2. ② 上部の「配置」をクリック
3. ③ 「最背面へ」をクリック
   （重なっている素材の一番下に移動されます）

1. ④ 背面に移動させたいピンクの丸の素材をクリック
2. ⑤ 上部の「配置」をクリック
3. ⑥ 「最背面へ」をクリック
   （重なっている素材の一番下に移動されます）

以下のように黄色とピンクの丸のイラストは、写真の後ろに移動されました。
あとは、飾りのお花などを好きな位置に移動させましょう。

以下のように、写真の邪魔にならない位置にイラストを移動させて完成です。
背景の丸もイベントごとに色分けするような感じで右上と左下に移動させています。

そら

最初に気に入ったテンプレートをたくさんお気に入りに入れておいて、デザインする時にテンプレートからイラストを持ってくる方法が便利です。