22 複数ページを重ねたモックアップの作り方|影と傾きで魅せるコラージュ

投稿者 | 高コンバージョンファネル

こんにちは、下坂栄里子です。

この記事では、前回の書籍風モックアップとは違うタイプ、複数のページを傾けて重ねる「コラージュ風」のモックアップの作り方を解説します。

使うページを3枚ダウンロードする

リードマグネットの中から、表紙・中身のページ・チェックリストなど、見せたい3枚を選びます。「共有」から「ダウンロード」を選び、PNG形式でページを指定してダウンロードしましょう。

16:9のキャンバスに3枚を配置する

新しくCanvaのデザインを作成し、サイズは「カスタムサイズ」から「プレゼンテーション」(16:9)を選びます。左側の「アップロード」から先ほどの3枚をまとめてアップロードし、1つずつキャンバスに配置していきます。

影と傾きをつけて立体感を出す

シャドウ設定パネル。「傾き」スタイルが選択され、ぼかし量・回転・強度のスライダーが並んでいる

1枚ずつ選択し、「編集」→「シャドウ」から影をつけていきます。「傾き」というスタイルを選ぶと、後ろに自然な影が落ちます。回転の角度が強すぎる場合は、数値を調整して薄めにしましょう。影が見えにくいと感じたら、「ドロップ」スタイルに変えると、よりくっきりとした影になります。

キャンバス上で複数のページを重ねて配置している様子。回転ハンドルでページを斜めに傾けている

画像の下に出る回転ハンドルをドラッグすると、ページを斜めに傾けられます。微調整はキーボードの矢印キーを使うとやりやすいです。ここで大事なのは、影も含めてキャンバスの外にはみ出さないようにすることです。はみ出すと不自然な見た目になってしまいます。厳密に揃える必要はなく、全体としてバランスよく重なって見えていれば十分です。

背景透過でダウンロードし、ClickFunnelsに反映する

完成したコラージュ風モックアップ。3枚のページが少しずつ角度をつけて重なって配置され、ダウンロード設定パネルに「背景透過」のチェックが入っている

配置ができたら「共有」→「ダウンロード」で、今回もファイル形式をPNGにし、必ず「背景透過」にチェックを入れてダウンロードします(背景透過はCanvaの有料プランが必要です)。できあがった画像は、ClickFunnelsの画像要素にそのままアップロードして使えます。

まとめ

表紙だけでなく複数ページを重ねたコラージュ風モックアップも作れる

「編集」→「シャドウ」→「傾き」または「ドロップ」で自然な影がつく

回転ハンドルと矢印キーで、ページの角度を微調整できる

影を含めてキャンバスの外にはみ出さないように配置する

ダウンロード時は「背景透過」を忘れずにチェックする

ファネルデザイナー® 下坂栄里子でした。

SNSをやめても、あなたの知識は売れ続けます。

眠っている間に世界中で売れ続ける仕組み「5つのデジタル導線」の作り方を、16分の無料動画で公開中です。

▶︎ 無料動画を視聴する