CanvaでLPを作る手順|スマホ用の文字サイズ換算表と公開前チェック
この記事の要点
- 作業幅をスマホ幅に近い400前後に決め、換算表とスマホ実機で文字サイズを確かめる
- ボタンは外部フォームへ。事前入力URLでLP経由の件数を数える
- 検索集客や頻繁な更新が要るならCanva以外へ。判断表を本文に掲載
CanvaでLPを作るときは、最初にキャンバスの横幅をスマホの画面幅に近い値に決めます。そのうえで、1つのゴールに向けて要素を縦に積み、ボタンを外部の問い合わせフォームにつないで公開します。つまずきやすいのは、文字サイズの換算、ボタンのリンク、公開後の計測の3か所です。
この記事は、チラシやSNS画像はCanvaで作れるけれど、LPは初めてという広報・営業担当の方に向けたものです。読み終わる頃には、キャンバスの設定からスマホ実機での確認、公開まで自分で進められる状態を目指します。
LPに何をどの順で載せるかは、LPの構成案の作り方で詳しく解説しています。この記事では、Canvaでの作り方と公開の進め方に絞ります。
Contents / 目次
Canvaで作れるLPと、別の方法が向くLPの判断表
Canvaで作るLPが向いているのは、広告・SNS・チラシから人を呼び、1つの行動(問い合わせ、予約、資料請求)に絞って案内する短いページです。LPとは「ランディングページ」の略です。訪問者が最初に着地するページで、1つの行動へ導くために作る縦長の1枚のページを指します。
Canvaはデザインツールなので、見た目は早く作れます。一方で、検索からの集客、フォームで受け付けたデータの管理、細かいアクセス解析は得意分野ではありません。どちらを選ぶかは、次の条件で決めます。
| 条件 | Canvaで足りる | 別の方法が向く |
|---|---|---|
| 人を呼ぶ経路 | 広告・SNS・チラシのQRコード | Google検索からの流入を増やしたい |
| 公開する期間 | イベント告知・キャンペーンなど数か月 | 会社の窓口として何年も使う |
| 更新の頻度 | 公開後はほぼ変えない | 事例やお知らせを毎月足したい |
| 申込の受け付け | 外部フォームへのリンクで足りる | 予約・決済をページ内で完結させたい |
| 効果の測り方 | 申込件数を数えられれば十分 | どこで離脱したかまで分析したい |
「別の方法が向く」列に当てはまる項目が2つ以上ある場合は、Canvaはデザイン案づくりまでにとどめます。公開はWordPressやSTUDIOなどのWeb制作ツールで行うほうが、あとで移行する手間を減らせます。Canvaで作ったデザインをもとに公開まで任せたい場合は、ホームページ・LP制作にご相談いただく進め方もあります。
この章の結論。広告やチラシから人を呼ぶ短期のLPなら、Canvaで公開まで進めて構いません。検索からの集客や継続的な更新が必要なら、公開先を別のツールにします。
スマホ基準で作るCanva LPの6ステップ
手順は次の6つです。この順に進めます。
- ゴールと構成を決める
- 作業幅と文字サイズを決める
- コピーを作る
- 縦に積む
- ボタンをつなぐ
- 実機で確認して公開する
ステップ1 ゴールを1つに絞り、構成を縦に書き出す
最初に「このLPを見た人に何をしてほしいか」を1つだけ決めます。問い合わせと資料請求と電話を並べると、読む人が迷って、どれも押されにくくなります。ゴールが決まったら、次の7つのブロックを上から順に、メモ帳などに書き出します。
- ファーストビュー(ページを開いて最初に目に入る範囲。誰の、どんな悩みを、どう解決するかを1文で書き、申込ボタンもここに配置する)
- 読む人の悩み(3つまで)
- 解決策とサービスの内容
- 根拠(実績の数字、写真、お客さまの声)
- 申込から利用までの流れと料金
- よくある質問(3問程度)
- 最後の申込ボタンと連絡先
ステップ2 作業幅を決め、文字サイズを換算する
作業幅は、スマホの画面幅に近い400前後にするのがおすすめです。ここでいう画面幅は、CSSピクセルという単位で数えた、ページの表示に使う幅です。画面の物理的な画素数とは別の値で、機種によって違います。作業幅と画面幅が近いほど、キャンバスが画面幅に合わせて縮小された場合でも、文字の大きさの差は小さくなります。
Canvaでカスタムサイズのデザインを新しく作り、単位をpxにして幅を400にします。高さは、7つのブロックが収まるように長めに取ります(例:幅400に対して高さ4000)。メニューの名前が画面と違うときは、Canva公式ヘルプで「カスタムサイズ」と検索してください。
すでにSNS投稿と同じ1080幅で作り始めている場合は注意が必要です。1080幅のキャンバスが390の画面幅まで縮小されると、計算上、文字はおよそ3分の1の大きさになります。
文字サイズを決める前に、仮の文字を入れた試しのページを一度公開し、スマホで開いて表示を確かめます。キャンバス全体が画面の横幅に収まるように縮小されて表示されていれば、文字も同じ割合で小さくなるので、次の表が使えます。画面幅を仮に390として、作業幅ごとに換算した値です。
表の「画面上で置く仮の値」は、公的な基準ではなく、作業を始めるための仮の値です。ボタンの高さだけは、GoogleのMaterial Designのガイドラインが、タップできる要素を48dp×48dp以上にするよう示していることに合わせています。本文・見出し・余白の値は、ステップ6の実機確認で読みやすさを見て調整してください。
| 画面上で置く仮の値 | 作業幅400 | 作業幅600 | 作業幅1080 |
|---|---|---|---|
| 本文の文字(16以上) | 17 | 25 | 45 |
| 見出し(28〜40) | 29〜41 | 43〜62 | 78〜111 |
| ボタンの高さ(48以上) | 50 | 74 | 133 |
| ブロック間の余白(48〜80) | 50〜82 | 74〜123 | 133〜222 |
1行の文字数とボタンの横幅には、決まった基準はありません。試しのページをスマホで開き、1行が途中で不自然に折り返されていないか、ボタンを親指で押しやすいかを見て決めます。すでに1080幅で作り始めている場合は、この表の作業幅1080の列に合わせて文字とボタンのサイズを修正すれば、作った分を活かせます。試しのページで要素の並びが変わっていたり、キャンバスが縮小されずに表示されていたりした場合は、表の値は使えません。スマホで本文を拡大せずに読めるかを基準に、文字サイズを調整してください。最終的な見え方は、ステップ6でスマホ実機を使って確かめてください。
ステップ3 AIで見出しとボタンの文言のたたき台を作る
ファーストビューの1文とボタンの文言は、AIにたたき台を出してもらうと早く進みます。ClaudeやChatGPTなどの生成AIが使えます。
AIには、ステップ1で書き出した7ブロックのメモを渡します。
あなたはBtoB向けLPのコピーライターです。
次のメモをもとに、スマホのLPのファーストビューに入れる見出し案を5つ出してください。
条件:1行20字以内で2行まで。[サービス名][対象の業種]の語を入れる。数字は、メモにあるものだけ使う。
あわせて、申込ボタンの文言案を5つ(10字以内)出してください。
[ステップ1で書き出したメモを貼り付け]
あとはAIと対話しながら、自社の状況に合わせて詰めてください。出てきた案は、次の3点をご自身で確認してから採用します。
- 数字と実績:メモに無い件数や割合が足されていないか
- 約束の範囲:「必ず」「最短」など、自社が保証できない言葉が入っていないか
- ボタンの文言:押したあとに何が起きるか(「無料で相談する」「資料を受け取る」)が分かるか
ステップ4 テンプレートは配色と書体だけ借り、白紙に縦に積む
スマホ基準で作るなら、白紙のデザインに7つのブロックを上から積むほうが崩れにくくなります。テンプレートには横長の画面を前提にしたものも多く、配置を1つずつ組み替える手間がかかるためです。
テンプレートから借りるのは配色と書体だけにし、見出しの色と文字サイズはすべてのブロックで同じ値にそろえます。文字は、写真の上に文字を載せた画像として貼らず、Canvaのテキストとして入力します。
ステップ5 ボタンを外部フォームにつなぎ、LP経由の件数を記録する
申込ボタンのリンク先は、Googleフォームなどの外部フォームにします。受け付けた内容が表やメールで届くので、社内で管理しやすいためです。
Googleフォームには、項目にあらかじめ値を入れたURLを作る「事前入力」の機能があります。流入元を入れる項目を1つ用意し、LPのボタンに次のようなURLを設定すると、回答一覧で「LPから来た申込」を数えられます。
https://docs.google.com/forms/d/e/[フォームのID]/viewform?usp=pp_url&entry.[項目の番号]=canva-lp-ad
このURLは、Googleフォームの事前入力の機能で、流入元の項目に「canva-lp-ad」と入力して作ります。操作の場所は画面の更新で変わることがあるので、Googleドキュメント エディタ ヘルプで「事前入力」と検索して、最新の手順を確認してください。広告用とチラシのQRコード用でLPを分けるなら、末尾の値を「canva-lp-flyer」のように変えます。
Canvaでは、ボタンにする要素を選び、リンクの設定からこのURLを貼り付けます。操作の場所はパソコンとスマホアプリで違うので、Canva公式ヘルプで「リンク」と検索して確認してください。
ボタンは、図形と文字のどこをタップしてもフォームが開くかを、公開後にスマホで1つずつタップして確かめてください。
ステップ6 スマホ実機で確認してから公開する
Canvaのプレビューで確認したあと、公開前に必ず自分のスマホで開きます。確認する項目は次の8つです。
- 文字:本文を拡大せずに読めるか
- ファーストビュー:開いた画面に見出しとボタンが両方入っているか
- ボタン:すべてのボタンがタップでき、正しいフォームが開くか
- 画像:人物や商品が端で切れていないか
- 表示速度:モバイル回線で開いて、待たされないか
- 電話番号:番号をタップして発信できるか(リンク設定の確認)
- 公開URL:相手に配るのが、編集画面ではなく公開したページのURLか
- 表記:会社名、料金、日付に誤りがないか
確認が済んだら、デザインをWebサイトとして公開します。公開の操作はデザインの種類や画面の更新で変わることがあるので、Canva公式ヘルプで「ウェブサイト 公開」と検索して、最新の手順を確認してください。公開すると発行されるURLが、広告やQRコードに載せる公開ページのURLです。
公開後は、そのURLをもう一度スマホで開き、上の8項目を確かめ直します。
この章の結論。作業幅を先に決めて換算表の数値で作り、ボタンを事前入力URLで外部フォームにつなぎます。これで、公開後も申込件数を数えられるLPになります。
Canva LPで起きやすい失敗と防ぎ方
CanvaのLPで起きる失敗の多くは、デザインの良し悪しではなく、SNS画像づくりの習慣をそのまま持ち込むことが原因です。代表的な4つを、起きる条件と防ぎ方のセットで挙げます。公開したのに問い合わせが来ない場合の確認順は、LPで問い合わせ0の原因と確認する順番もあわせてご覧ください。
文字入りの画像で作った見出しは、拡大するとぼやける
SNS用に作った文字入りの画像を貼ると、その文字は画像の一部になります。スマホで拡大したときに文字がぼやけるうえ、料金や日付を変えるたびに画像を作り直すことになります。見出し・本文・料金は、すべてCanvaのテキストとして入力してください。
写真の端に人物を配置すると、スマホで切れる
横長の写真を背景にすると、スマホの縦長の画面では左右が切れることがあります。人物や商品が中央にある写真を選び、切れて困る要素は写真の中央3分の1に収めます。
編集用の共有リンクを配ると、社外の人が中身を変えられる
デザインを共有するリンクと、公開したページのURLは分けて扱います。取引先に送るURLやチラシに載せるURLは、公開したページのURLだけにします。デザインの共有リンクを社外に送る場合は、送る前に共有の設定で、相手が編集できる状態になっていないかを確認してください。権限の種類と変え方は、Canva公式ヘルプで「共有」と検索すると確認できます。
大きな画像を並べると、表示が遅くなる
スマホで撮った写真や高解像度の素材をそのまま何枚も並べると、モバイル回線では表示に時間がかかります。ファーストビューが出る前に離脱されやすくなります。1ブロックに写真は1枚までにし、アップロード前に写真の横幅を作業幅の2倍程度(作業幅400なら800前後)まで縮小しておきます。
この章の結論。文字はテキストで入力し、写真は中央に要素がある軽いものを選び、配るURLは公開ページのものだけにします。これでCanva特有の失敗はほぼ防げます。
見積書に出ないコストとCanvaから移るタイミング
Canvaで作ったLPの費用は、作るときよりも、あとでURLや公開先を変えるときにかかります。特に次の3つは、最初に決めておかないと手間が膨らみます。
- URLの差し替え:Canvaが用意するURLで公開したあとで独自ドメインや自社サイトへ移すと、広告の設定、名刺、印刷済みチラシのQRコードまで差し替えが必要になる
- 素材の使用条件:有料素材や写真は、利用規約で認められる範囲が素材ごとに違う。制作会社へ移すときに同じ素材を使えるかも、Canvaの利用規約で確認が要る
- 編集できる人:LPを作った担当者の個人アカウントにしかデザインが無いと、異動や退職のときに修正できなくなる。会社で管理するアカウントやチームで作る
URLの差し替えは、印刷物に載せる前なら防げます。QRコードには自社サイトの短いURL(例:自社ドメインの「/lp/」)を載せ、そこからCanvaのLPへ転送する設定にしておきます。公開先を変えても、転送先を変更すれば済みます。
転送の設定方法は、自社サイトの作り方やサーバーによって違います。サイトを管理している担当者や制作会社に、転送元(/lp/)と転送先(CanvaのLPの公開URL)を伝えて設定を依頼してください。転送先をあとで変える前提なので、転送の種類は一時的な転送(302)を指定します。
設定したら、スマホで「自社ドメイン/lp/」を開き、CanvaのLPが表示されるかを確かめます。広告にパラメータ付きのURLを使う場合は、そのURLでも開いて、CanvaのLPが表示されるかを確かめてください。
Canvaから移るタイミングは、次のようなことをしたくなったときです。
- 検索:検索からの問い合わせを増やしたい
- 更新:事例やお知らせを毎月足したい
- 分析:LP内で離脱した位置を分析したい
移すときは、Canvaのデザインを「完成見本」として制作会社に渡し、文章と画像の元データをそろえておくと、制作の打ち合わせが短く済みます。
社内で続けるか外部に依頼するかの目安は、ホームページの内製と外注の判断軸で作業の一覧と費用の差を比べています。
この章の結論。印刷物には転送用の自社URLを載せ、素材の使用条件と編集権限を公開前に決めておきます。そうすれば、あとでCanvaから移るときの費用を抑えられます。
CanvaのLPづくりでよくある質問
CanvaのLPはGoogle検索にも表示されますか?
公開したページを検索エンジンが読み込めば、表示される可能性はあります。ただ、LPは1ページだけで情報量が少なく、検索からの集客には向きません。CanvaのLPは広告・SNS・チラシから人を呼ぶ前提で使い、検索からの集客はWordPressなどで作るページで狙うのが確実です。
CanvaのLPで、GA4を使わずに効果を測るにはどうすればいいですか?
申込件数は、フォームの事前入力URLで「LP経由」を記録すれば数えられます。広告から人を呼ぶなら、申込件数を広告の管理画面のクリック数で割ると、LPの申込率が出ます。この2つがあれば、GA4が無くても、広告からの申込がどれだけ取れているかを判断できます。
チラシのQRコードに、CanvaのLPのURLをそのまま載せても大丈夫ですか?
短期のキャンペーンなら問題ありません。長く配る印刷物なら、自社サイトの短いURLを載せ、そこからCanvaのLPへ転送する形がおすすめです。あとで公開先をWordPressなどに移しても、印刷物を刷り直さずに、転送先の変更だけで対応できます。
CanvaのLPをWordPressへ移すとき、制作会社に何を用意すればいいですか?
用意するのは、公開中のLPのURL、見出しと本文のテキスト、写真やロゴの元データ、フォームのURL、使った有料素材の一覧の5つです。文章をテキストでそろえておくと、画像から文字を書き起こす作業が要らないので、見積もりを抑え、制作期間を短くしやすくなります。
まずは、いま作っているCanvaのデザインの横幅を確かめてください。そのうえで換算表を使って文字サイズを決め、スマホの画面上で本文を拡大せずに読めるかを確認します。LPだけで足りるのか、会社案内サイトも要るのかを決めたい方は、LPと会社案内サイトの使い分けの判断軸を次にご覧ください。
Canvaで作ったLPの公開先をWordPressなどに移したい、申込件数まで測れるようにしたいと感じた方は、ホームページ・LP制作についてご相談ください。いまのLPの状況を伺い、公開先を移すかどうかを一緒に考えます。料金や詳細はリンク先のページでご確認ください。
個別のご相談
サービスの選び方やご依頼について、ご相談いただけます。
相談する