コンテンツの配置
続いて、キャンバス上に画像や文字などのコンテンツを配置します。
まず、背景となる画像を配置します。
左部にあるバーより、”写真”をクリックします。
バーの右の部分に検索ボックスが現れましたら、”camera”と入力し、Enterキーを押します。
また、検索ボックス下に表示された写真の中から下の画像を探し、クリックします。
![](https://i0.wp.com/muralnotes.com/wp-content/uploads/2020/12/photographer-407068_640.jpg?resize=480%2C320&ssl=1)
もし、上の画像が見当たらない場合は、代わりに使用したい画像を選んでクリックします。
クリック後、キャンバス上にクリックした画像が表示されていれば成功です。
![](https://i0.wp.com/muralnotes.com/wp-content/uploads/2020/12/designcap5.png?resize=746%2C473&ssl=1)
次に、画像の四隅・四辺の中央にある黒い点をドラッグして、キャンバスを覆うように大きさを調整します。
この時、完全にキャンバスの四隅と画像の四隅を重ねる必要はありません。キャンバスを僅かにはみ出す程度で問題ないと思います。
![](https://i0.wp.com/muralnotes.com/wp-content/uploads/2020/12/designcap6.png?resize=740%2C508&ssl=1)
次に、文字を配置します。
左部バーより、”テキスト”をクリックし、バーの右に表示されたコンテンツの中から、”Add Heading”を探してクリックします。
キャンバス上に文字が表示されれば、成功です。
![](https://i0.wp.com/muralnotes.com/wp-content/uploads/2020/12/designcap7.png?resize=752%2C363&ssl=1)
次に、文字をクリックし、ページ上部にテキストの設定バーを表示させます。
設定バーのボタンは右から、フォント、フォントサイズ、文字色、太字、斜体、下線、大文字の設定ボタンとなっています。
これらのボタンを使って、以下のリストに沿って文字の設定を変更してみましょう。
- フォント:日本語の”源流明朝”に設定
- フォントサイズ:数字部分をクリックし、”115″と半角英数字で入力
- 文字色:白
- 太字(B)にする
- 下線を引く
![](https://i0.wp.com/muralnotes.com/wp-content/uploads/2020/12/designcap8.png?resize=1024%2C648&ssl=1)
設定後、文字が上の画像のようになっていれば、フォントの設定は成功です。
さらに、文字の枠を四隅・四辺の黒点をドラッグして、文字列が一行になるまで広げます。
うまく枠を広げられましたら、次に文字列の内容を編集します。
文字は、文字部分をダブルクリックすることで編集可能な状態になります。
今回は、文字列の内容を”写真上達最短ルート“とします。
また、テキストの設定バーのアイコンのうち、右から4番目のものをクリックし、アイコン下に表示される6つのアイコンのうち、真ん中の2つをクリックします。
![](https://i0.wp.com/muralnotes.com/wp-content/uploads/2020/12/designcap9.png?resize=1024%2C650&ssl=1)
ここまでの操作で上の画像のようになれば、成功です。
続いて、2つ目の文字を配置します。
先ほどと同じように、左部バーより、テキストをクリックし、”Add Heading”をクリックします。
キャンバス上に2つ目の文字が表示されたら、一度文字の無い部分をクリックした後、2つ目の文字を1つ目の文字の下辺りにドラッグします。
また、2つ目の文字をクリックして、テキストの設定バーより、下記リストで示した部分を変更します。
- フォント:日本語の”を元に製作されたフ…”に設定
- フォントサイズ:72に設定
- 文字色:ドキュメントカラーの+ボタンをクリックし、黄色に近い色に設定
- 太字(B)に設定
![](https://i0.wp.com/muralnotes.com/wp-content/uploads/2020/12/designcap10.png?resize=1024%2C672&ssl=1)
設定後、上の画像のようになっていれば成功です。
こちらの文字列の内容は、”初心者必見!徹底解説”とします。
また、文字の枠を1つ目の文字と同じように、1行に収まるように広げます。
次に、文字の背景となる、四角形の部分を配置します。
左部バーより、”素子”をクリックし、”基本形状”の下に表示される四角形を2回クリックします。
キャンバス上に表示された四角形のサイズを、先ほど作成した2行の文字を覆う大きさに調節します。
また、それぞれの四角形を選択し、色を大きい方を赤、小さい方を青に変更します。
![](https://i0.wp.com/muralnotes.com/wp-content/uploads/2020/12/designcap11.png?resize=768%2C483&ssl=1)
ここまでの手順で上の画像のようになれば完了です。
次に、四角形をそれぞれ選択し、上部設定バーの右から3番目のアイコンをクリックします。
さらに、クリックして、アイコンの下に表示された項目のうち、”後方”をクリックします。
クリック後、文字が四角形の上に重なれば成功です。
もし、四角形の大きさが中途半端だった場合は、この時点で再度調節することも可能です。
最後に、お好みで”Add Subheading”をクリックし、チャンネル名を隅に配置して作成完了です。
![](https://i0.wp.com/muralnotes.com/wp-content/uploads/2020/12/designcap12.png?resize=1024%2C497&ssl=1)
出力
作った作品の出力は、ページの右上付近にある”ダウンロード”ボタンをクリックして、表示されるメニューより、ファイル名や形式、サイズを設定し、”ダウンロード”をクリックすることで行うことができます。
![](https://i0.wp.com/muralnotes.com/wp-content/uploads/2020/12/designcap13.png?resize=360%2C317&ssl=1)
最後に
これだけ様々なジャンルの画像を作成できるのにもかかわらず、製作が全てオンライン上で完結し、テンプレートや素材など、初心者にも配慮した設計となっていることには驚きを感じました。
保存や出力には、アカウントの登録が必要になること、無料プランの制限があること、狭い幅のウィンドウでのページの不可視部分の発生について改善されることにより、さらにサイトが使いやすくなるのではないでしょうか。
使い方の説明がかなり長くなってしまいましたが、慣れれば素早く操作ができるようになると思います。
最後までお読みくださり、ありがとうございました。
コメント