M小学生でもわかる MiriCanvas

第07話画像付き操作ガイド

MiriCanvasで告知を縦長に!サイズ変更と余白の選び方

画面の赤枠を見て、同じ順番で試してみましょう。入力文はそのままコピーでき、最後にできあがりも確認できます。

  • 画像を大きく見られる
  • 入力文をコピー
  • 完成まで確認
第7話のテーマ
最初に:元のタルト告知を作る(第1話と同じ手順)

STEP01同じテンプレートを開く

同じテンプレートを開く
同じテンプレートを開く(画像をクリックすると拡大)

下のテンプレートのページを開き、赤枠の「このテンプレートを使う」をクリックします。

タルトのテンプレートを開く

確認:新しいタブに編集画面が開き、中央にタルト、左に編集する道具が見えれば進めます。元のタブのままなら、新しく開いたタブを確認してください。

STEP02見出しと価格を入れ替える

見出しと価格を入れ替える
見出しと価格を入れ替える(画像をクリックすると拡大)

左の「夏本番」をダブルクリック。文字を選んで「週末限定」へ変えます。次に、右上の「1300円」もダブルクリックし、「650円」へ変更します。

確認:デザインの外をクリックして、「週末限定」「650円」の2つが表示されることを確認します。枠だけ選ばれたときは、文字の上をダブルクリックし直してください。

STEP03店名と下の説明文を変える

店名と下の説明文を変える
店名と下の説明文を変える(画像をクリックすると拡大)

右側の小さな店名をダブルクリックし、「こもれびカフェ」へ変更。下の説明文もダブルクリックし、下の2文へ入れ替えます。絵と「ザクロタルト」の商品名はそのまま使います。

確認:外をクリックし、店名と2文が入っているか、文字が枠からはみ出していないか見ます。

STEP04元のタルト告知を用意する

元のタルト告知を用意する
元のタルト告知を用意する(画像をクリックすると拡大)

下のテンプレートを開き「このテンプレートを使う」を押します。ページ上部の折りたたみ「最初に:元のタルト告知を作る」を開き、文字を入れ替えます。これで新しいデザインから試せます。既存のデザインを使う場合は元を残して作業してください。

タルトのテンプレート

確認:週末限定・650円・こもれびカフェ・下の2文が入った新しい告知から進めます。Proで確認したテンプレートです。

STEP05ページの幅と高さを入れる

サイズの直接入力で単位px・幅1080・高さ1350を指定する実画面。
サイズの直接入力で単位px・幅1080・高さ1350を指定する実画面。(画像をクリックすると拡大)
サイズ適用直後の3方式。塗りつぶし、配置、元のサイズから、配置の行を赤枠で示す。
サイズ適用直後の3方式。塗りつぶし、配置、元のサイズから、配置の行を赤枠で示す。(画像をクリックすると拡大)
上部のサイズ表示を開き、メニューの直接入力を選ぶ場所を赤枠で示す。
上部のサイズ表示を開き、メニューの直接入力を選ぶ場所を赤枠で示す。(画像をクリックすると拡大)

上のサイズ表示の右矢印→「直接入力」の右矢印→単位px→W1080・H1350→「適用」。 適用直後に「デザインの適用方法を選択」が出たら、「配置」をクリックします。

確認:上のサイズ表示が1080×1350 pxになっていることを確認します。

STEP06内容と余白を確認する

実出力1080×1350の縦長PNG。正方形のタルト告知が中央へ収まり、上下に白い余白がある。
実出力1080×1350の縦長PNG。正方形のタルト告知が中央へ収まり、上下に白い余白がある。(画像をクリックすると拡大)

タルト、見出し、価格、店名、下の説明文が切れていないか見ます。今回の出力は上下の余白を残しました。

確認:追加検証で「配置」を選び、上下の余白と文字の欠けがないことを確認。「塗りつぶし」では今回は左右が切れました。 ここで配布するPNGは初回の出力です。方式を明示的に選び直した画面とは分けて扱っています。

STEP07PNGを保存して実寸を見る

縦長版のPNG保存画面。1倍・1ページ・1080×1350 pxの設定を確認する。
縦長版のPNG保存画面。1倍・1ページ・1080×1350 pxの設定を確認する。(画像をクリックすると拡大)

右上のダウンロードでPNG・1倍・1ページ・1080×1350 pxを確認し、「高解像度ダウンロード」。

今回の縦長PNG

確認:取得したファイルを開き、1080×1350の縦長になり、価格と店名が残っていれば完成です。

赤枠や小さな文字を大きく確認できます