CanvaでLPを作る手順｜スマホ基準の構成と公開の進め方

Canvaでランディングページ（LP）を作ってみたものの、スマホで見ると文字が切れる、ボタンがずれる。そんな状態で止まっていませんか。

この記事では、Canvaを使ったLPの作り方を、スマホ基準の構成づくりから外部フォームの連携、公開前チェック、公開後の計測まで、実際に手を動かせる順番で解説します。デザイン経験がない広報担当や、まず1本自分たちで出してみたい小規模事業者の方に向けた内容です。

読み終わる頃には、今日のうちに1枚目のLPの骨組みを作り、公開まで進められる状態を目指します。逆に、SEOで検索流入を狙う本格サイトを作りたい場合は途中で判断軸も示しますので、そこで進路を切り替えてください。

Contents / 目次

1. 結論。CanvaのLPはスマホ幅を基準に作り、先に3つを決める
2. CanvaでのLPの作り方6ステップ。手を動かす順番
3. canva lp 作り方 ai。AIに任せていい範囲と人が直す箇所
4. 作ったあと何が変わるか。成果の見え方と改善の回し方
5. 初心者がやりがちな失敗5つと、その防ぎ方
6. 正直に言うCanvaの限界と、外注に切り替える判断ライン
7. CanvaでのLP制作に関するよくある質問
8. まず1画面分だけ作ってみてください

結論。CanvaのLPはスマホ幅を基準に作り、先に3つを決める

CanvaでLPを作るときの答えは明確です。PCとスマホの両方を器用に成立させようとせず、最初からスマホ幅を基準に設計すること。レイアウト崩れの多くは、この一点で防げます。

ランディングページ（LP）とは、広告やSNSから流入した人が最初に着地する、1枚の縦長ページのことです。会社案内サイトのように回遊させるのではなく、問い合わせや申し込みという1つの行動に絞って設計します。

Canvaでの制作に入る前に、次の3つを決めてください。ここが決まっていないまま編集画面を開くと、テンプレート選びで永遠に迷います。

• ゴール1つ：このLPで起こしたい行動を1つだけ決める。問い合わせ、資料請求、LINE登録、予約のどれか。2つ以上並べると成果が落ちます
• 読む相手1人：誰が、どんな場面で、どの端末で見るか。SNS広告からの流入ならほぼスマホ。この時点でスマホ基準が確定します
• 受け皿の置き場所：問い合わせをどこで受けるか。この記事では、フォームツールを別に用意してLPのボタンからつなぐ方法で進めます。使うフォームツールを先に決めておいてください

そもそもLPの並び順に自信がない方は、先にLPの構成案の作り方｜問い合わせが増える要素の並べ方で骨組みの考え方を押さえてから戻ってくると、この記事の手順がそのまま形になります。

Canvaで作って正解なLPと、別の手段が向くLP

Canvaは万能ではありません。向き不向きをはっきりさせておくと、途中で作り直す無駄がなくなります。判断の目安は次のとおりです。

こういうLPなら	Canvaで作る判断	理由
SNS広告・LINE・チラシのQRから飛ばす1枚もの	向いている	流入元が決まっており、検索順位に依存しない。スマホ縦読みの体験と相性が良い
期間限定のキャンペーン・セミナー告知	向いている	公開までの速さが価値。数日で出して、終わったら下げられる
検索で見つけてもらいたい商品ページ	向かない	記事を積み上げて内部リンクで束ねる設計は、WordPress等のほうが素直に組める
決済・会員登録・予約枠管理を伴うページ	条件付き	外部サービスへ飛ばす設計が前提になる
スクロール連動の凝ったアニメーションが必要	向かない	細かい動きの制御には限界がある。ノーコードのWeb制作ツールが向く

判断の目安。「広告やSNSから人を連れてくるLP」はCanvaで十分戦えます。「検索から人が来るのを待つページ」はCanvaでは不利です。この一点で選べば、まず外しません。

なお、この記事ではCanvaの画面上のボタン名やメニュー階層、プランごとに使える機能の範囲までは踏み込みません。仕様は更新されるためで、名称・場所・プラン条件はCanva公式ヘルプで確認してください。代わりに、変わらない部分である設計の考え方・具体的な数値・作業の順番を書ききります。

CanvaでのLPの作り方6ステップ。手を動かす順番

ここからが実作業です。この6ステップの順で進めれば、初めてでも半日から1日で1本公開できます。逆に順番を入れ替えると、後半で必ず作り直しが発生します。

ステップ1。ゴールと1行メッセージを紙に書く

最初にやるのはデザインではなく、言葉の確定です。次の1行を埋めてから編集画面を開いてください。

［誰の］［どんな困りごと］を、［自社の何］で［どうなる］。
だから今すぐ［してほしい行動］してください。

記入例
・大分市内で店舗を1〜3店運営していて、口コミ返信が追いつかない方の
・返信作業を、専門スタッフの代行で
・月2時間の作業ゼロにします
・まずは無料の現状診断に申し込んでください

この1行がファーストビュー（スマホで開いた瞬間に見える最初の画面）の見出しの元になります。ここが曖昧なままテンプレートを選ぶと、きれいだけど何も伝わらないLPになります。

ステップ2。構成をワイヤーフレームで先に決める

Canvaを触る前に、載せるブロックの順番を決めます。これをワイヤーフレーム（骨組みの設計図）と呼びます。紙でもメモアプリでも構いません。

初めての1本なら、次の8ブロック構成をそのまま使ってください。上から順に並べるだけで、必要な要素が揃います。

【スマホLP 8ブロック構成テンプレート】
1. ファーストビュー ／ 見出し＋一言補足＋ボタン
2. 共感      ／ 「こんなことで困っていませんか」を3つ
3. 解決の提示   ／ 自社が何をするのか。1文で
4. 選ばれる理由  ／ 3つまで。多いと読まれない
5. 実績・お客様の声／ 実名や写真があれば強い。無ければ数字だけでも
6. 料金・流れ   ／ 申込から納品までを3〜5ステップで
7. よくある質問  ／ 不安をつぶす。3〜5問
8. 最後のご案内  ／ 見出し＋ボタン（1と同じ行動）

・ボタンは 1・6の後・8 の最低3か所に置く
・スクロールしながら3回、同じ行動を提案する形にする

ブロック数を欲張らないことも大切です。適正なブロック数は商材や伝える内容によって変わりますが、上の構成に載っていない要素を足したくなったら、本当に必要かを一度立ち止まって考えてください。

ステップ3。スマホ基準の作業エリアを決めて縦に積む

ここがCanvaでLPを作る最大のコツです。使うテンプレートやサイズの選び方はCanva公式ヘルプで確認いただくとして、大事なのは、どのサイズで作るにせよその中にスマホ用の作業エリアを自分で決めておくことです。

具体的な進め方は次のとおりです。

1. Webページとして公開できるサイズで新規デザインを作る
2. キャンバスの中央に、スマホの縦画面と同じくらいの細い帯を四角形でガイドとして置く
3. 文字・画像・ボタンは、すべてこのガイドの内側に収める
4. ガイドの外側（左右の余白）には何も置かない。背景色だけにする
5. 実機のスマホで見て、帯の幅と実際の表示が合っているか確認しながら調整する

細い帯を基準にするのは、スマホの表示幅に収まる縦長の帯として設計しておくと、PCで開いても「中央に細長い1枚」として自然に見えるからです。ひとことで言うと、スマホの見た目を正とし、PCは左右に余白が出るだけという割り切りです。

左右いっぱいに要素を広げると、スマホ表示で端が切れたり、文字が窮屈になったりします。「PCで格好よく作ってからスマホを直す」順番は、ほぼ必ず作り直しになります。順番は逆にしてください。

テンプレートを使うか白紙から作るかも迷うところです。既存テンプレートは早い反面、要素の重なりが多くスマホ幅に詰め直すと崩れやすい傾向があります。スマホ特化で作るなら、白紙から縦に積む方が結果的に速いというのが現場の実感です。テンプレートは配色とフォントの参考にとどめるのが扱いやすいやり方です。

ステップ4。文字・ボタンのサイズを数値で固定する

デザインのセンスに悩む必要はありません。スマホで読めるかどうかは、ほぼ数値で決まります。次の値は公的な基準値ではなく、私たちが制作時の初期設定として使っている自社の目安です。まずはそのまま当てはめて、実機で見ながら調整してください。

要素	自社で使っている初期値	この値にしている理由
本文の文字サイズ	16px以上（作業エリアの幅の中で）	これより小さいと、自社の実機確認で読みづらいと感じることが多かったため
見出しの文字サイズ	28〜40px	スクロール中に目に留まる大きさ。本文の2倍前後にしている
1行の文字数	全角20字前後	長いと折り返しが読みにくい。改行位置は手で調整する
ボタンの高さ	48px以上	指でタップしやすい大きさ。小さいと押し間違いが増える
ボタンの横幅	作業エリアの8割程度	中途半端な幅より、目立って押しやすい
ブロック間の余白	上下48〜80px	詰めすぎると内容の切れ目が分からなくなる
文字と背景の明暗差	はっきり差をつける	薄いグレー文字は屋外のスマホでほぼ読めない

上の数値はあくまで自社の運用値です。文字の読みやすさや色のコントラストについて公的な考え方を押さえておきたい方は、デジタル庁が公開しているウェブアクセシビリティ導入ガイドブックを確認してください。読みやすさへの配慮は、結果として高齢の顧客層にも届くLPになります。

ステップ5。問い合わせフォームを外部ツールでつなぐ

CanvaのLPで最初につまずくのがここです。この記事では、フォームツールを別に用意し、LP上のボタンからそのフォームへ飛ばす方法で進めます。同じやり方で、決済が必要な場合も外部の決済サービスへ飛ばす形にできます。

つなぎ方の手順は次のとおりです。

1. フォーム側で入力項目を作る。項目は5つ以内に絞る（会社名・お名前・メール・電話・ご相談内容）
2. フォームの公開URLを取得する
3. CanvaのLP上のボタン図形に、そのURLをリンクとして設定する
4. ボタンごとにURLの末尾を変えて、どのボタンから来たかを判別できるようにする
5. スマホの実機でボタンをタップし、フォームが開いて送信まで通るか自分で試す

4番目が地味ですが効きます。フォームURLの末尾に次のような文字列を付けておくと、あとで「どの位置のボタンが押されたか」が分かります。

<!-- ボタンに設定するリンク先URLの例。?以降がラベルになる -->
<!-- ［  ］の中は自社の値に変更してください -->

ファーストビューのボタン
https://［フォームのURL］?utm_source=canva_lp&utm_medium=cta&utm_content=fv

料金セクションのボタン
https://［フォームのURL］?utm_source=canva_lp&utm_medium=cta&utm_content=price

ページ最下部のボタン
https://［フォームのURL］?utm_source=canva_lp&utm_medium=cta&utm_content=footer

utm_content の値を変えるだけなので、専門知識は要りません。アクセス解析を入れている場合はこの値で流入を分けて見られますし、入れていなくても、フォーム側で「どこから来たか」を自動記録する設定にしておけば十分役に立ちます。

入力項目を何にするか迷ったら、問い合わせフォームは5項目に絞る｜BtoBの入力設計と問い直しで、削っていい項目と残すべき項目を整理しています。項目を1つ減らすだけで送信数が変わる領域なので、ここは丁寧にやる価値があります。

ステップ6。公開設定とドメインを決めて出す

完成したデザインをWebページとして公開する方法や、使えるアドレスの種類・条件は、Canva公式ヘルプで最新の内容を確認してください。ここでは、どの公開方法を選ぶかの判断軸だけをお伝えします。

広告出稿を予定しているなら、まず自社ドメインで公開できるかを公式ヘルプで確認し、可能なら自社ドメインを優先してください。理由は信頼感で、名刺やチラシに載せるアドレスが自社ドメインかどうかで、法人相手の反応は変わります。逆に、社内向けの申込ページや短期イベントの告知なら、サービス側が用意するアドレスのままで何の問題もありません。

公開前チェックリスト12項目

公開ボタンを押す前に、この12項目を上から確認してください。1つでも抜けると、せっかくの流入が無駄になります。

• 実機確認：自分のスマホで全画面をスクロールした。PCのプレビューだけで済ませていない
• ファーストビュー：スマホで開いた最初の画面に、見出しとボタンの両方が入っている
• 文字切れ：見出しの改行が変な位置で切れていない
• ボタン動作：すべてのボタンをタップし、フォームが開くことを確認した
• フォーム送信：テスト送信し、自社に通知メールが届いた
• 返信先：フォームの通知先が個人アドレスでなく、共有アドレスになっている
• 電話番号：タップで発信できる形式になっている（スマホからの問い合わせは電話が多い）
• 会社情報：ページ下部に社名・所在地・連絡先がある
• 個人情報の扱い：フォーム付近にプライバシーポリシーへの導線がある
• 画像の重さ：読み込みが遅くないか、モバイル回線でも確認した
• 誤字：他の人に一度読んでもらった。自分では気づけない
• ページ名と説明文：SNSでシェアしたときに表示される文言を設定した

canva lp 作り方 ai。AIに任せていい範囲と人が直す箇所

2026年のいま、LP制作でAIを使わない理由はありません。ただしAIが強いのは「たたき台の量産」であって、「良し悪しの判断」ではないという線引きを外すと、それらしいだけのLPが出来上がります。

Canva側でどんな作成支援が使えるかはCanva公式ヘルプで確認してください。ここでは、どのAIツールを使っても変わらない任せ方の設計を書きます。

AIに任せる作業と、人がやる作業の分担表

作業	担当	補足
構成案・見出し案を10パターン出す	AI	ゼロから考えるより速い。並べて選ぶ作業に変わる
お客様の悩みを言語化する候補出し	AI	営業の会話メモを渡すと精度が上がる
キャッチコピーの言い換え案	AI	20案出させて、社内で3案に絞る使い方が現実的
FAQの下書き	AI	実際に受けた質問を渡して整えてもらう
自社の強みが本当にそれか判断する	人	AIは一般論を書く。現場の差別化要因は社内にしかない
実績・数字・お客様の声の確認	人	AIが数字を作ってしまう最大の危険箇所。必ず事実確認する
料金・保証・納期の記載	人	誤記が契約トラブルに直結する。AI出力をそのまま載せない
最終的な文言の決定	人	誰に向けて何を約束するかは、経営判断そのもの

AIに渡す材料と、出発点になる短い指示文

AIの出力品質は、プロンプトの上手さより渡す材料の量で決まります。次の4つを手元に用意してから話しかけてください。

• 受注した案件のメモ：どんな相談から始まり、何が決め手になったか
• 失注した理由：断られた言葉そのまま。ここに読者の不安が入っている
• よく聞かれる質問：営業や電話対応でくり返される質問を5つ
• 既存の資料：会社案内、見積書の項目、サービス説明のPDF

指示文は作り込む必要がありません。いまのAIは、ざっくり頼めば自分で整えてくれます。次のくらいの短いたたき台から始めて、あとは対話で詰めるのが速いやり方です。

あなたはBtoBのLP構成を考えるプランナーです。
以下の材料をもとに、スマホで縦読みするLPの構成案を3パターン出してください。
各案はブロックの並びと、各ブロックの見出し案（20字以内）まで書いてください。

・商品／サービス：［  ］
・想定読者：［  ］
・読者の悩み：［  ］
・流入元：［SNS広告／チラシのQR など］
・してほしい行動：［  ］
・失注理由でよく言われること：［  ］

出したあと、私が現場の情報を追加するので、一緒に詰めていきましょう。

返ってきた案は、次の3点で人が確認します。ここが一番価値のある工程です。

1. 数字と固有名詞：実績件数、年数、社名、受賞歴などが勝手に付いていないか。1つずつ事実確認する
2. 約束の強さ：「必ず」「絶対」「最短◯日」など、守れない表現が混ざっていないか
3. 自社らしさ：他社の名前に差し替えても成立する文章になっていないか。成立するなら、それは自社のLPではありません

AIを使ったサイト制作全般の進め方は、AIホームページ作成5ステップ｜ツール選びとプロンプト例でもツール選びの判断軸を整理しています。Canva以外の選択肢も含めて比較したい方はあわせてどうぞ。

現場の所感。AIで作った文章がしっくりこないときの原因は、ほぼ材料不足です。指示文をこねくり回すより、失注理由の生の言葉を1つ足すほうが、出力は劇的に変わります。

作ったあと何が変わるか。成果の見え方と改善の回し方

Canvaで自社LPを作れるようになると、いちばん変わるのは公開までの速さです。外注では要件整理から公開までの調整が挟まりますが、社内で作れば構成が決まった状態からすぐ着手でき、自分たちのペースで公開まで進められます。

これは単なる時短ではありません。キャンペーンの告知や急な展示会出展など、「今週中に出せないと意味がない」案件に対応できるようになることが本質的な価値です。

成果の見方には注意が必要です。LPの成約率は業種・単価・流入元で大きく変わるため、他社の数字を目標にしても意味がありません。仮に広告から100人が訪問して2人が問い合わせるなら成約率2%、といった具合に、まず自社の基準値を1本目で取ることが出発点になります。

改善で最初に見る3つの数字

改善に使う数字は、Canvaの管理画面に頼らず、自分たちの手元で確実に取れるものから始めるのが現実的です。次の3つで足ります。

• ページを見た人の数：広告やSNSの管理画面側でも確認できる。母数がなければ改善しても分からない
• フォームを開いた数：フォームツール側で確認する。LPからフォームまで到達した人数
• 送信された数：実際の問い合わせ件数。フォームを開いた数との差が入力の脱落

この3つを並べると、直すべき場所が自動的に決まります。ページは見られているのにフォームが開かれないならLP本文の問題、フォームは開かれるのに送信されないなら入力項目の問題です。感覚で全体を作り直すのではなく、詰まっている一箇所だけを直すのが改善の鉄則です。

うまく回している会社の共通点

自社でLPを内製できている会社を見ていると、共通点は3つあります。デザインが上手いことではありません。

1. 1本目を完璧にしない：7割の出来で出して、反応を見てから直している。長く悩んだ完璧な1本より、早く出して数を重ねるほうが学びが多い
2. 使い回す土台を持っている：1本目のLPを複製して、文言と画像だけ差し替えて2本目を作る。2本目以降は手早く出せる
3. 担当と更新日を決めている：「誰が」「いつ」見直すかが決まっている。決まっていないLPは、料金改定後も古いまま放置されます

初心者がやりがちな失敗5つと、その防ぎ方

ここからは、実際によく見かけるつまずきです。どれも公開後に気づくと痛いものばかりなので、作りながら照らし合わせてください。

失敗1。PCで作り込んでからスマホを直そうとする

PCの大きな画面で横並びのレイアウトを作り込み、最後にスマホ表示を確認して愕然とする。これが最も多いパターンです。横並びの3カラムは、スマホ幅では文字が細く潰れます。

結果として、スマホ用に全部作り直しになり、「Canvaは使えない」という誤った結論に至ります。防ぎ方は単純で、ステップ3の作業エリア運用を最初から徹底することです。作業中も、こまめに自分のスマホでプレビューを開いて確認してください。

失敗2。フォームを最後に考えて、行き先がないボタンが並ぶ

デザインが完成してから「問い合わせはどう受けるんだっけ」となるケースです。急いでフォームを作ると、項目が10個以上ある入力しづらいフォームになりがちで、そこで送信されずに終わります。

こうなると、LPの見た目は立派なのに問い合わせがゼロという最悪の状態になります。防ぎ方は、ステップ1の時点でフォームを先に作ってしまうこと。行き先が決まっていれば、ボタンの文言も自然と決まります。

失敗3。テンプレートのまま使い、他社と見分けがつかなくなる

魅力的なテンプレートをそのまま使い、写真も配色も既定のまま公開してしまうパターンです。同じテンプレートを使った他社のページと並ぶと、印象が薄まります。

特に、素材集の外国人ビジネスマンの写真をそのまま載せているLPは、地域密着型の商売ほど逆効果です。防ぎ方は、写真だけは必ず自社のものに差し替えること。スマホで撮った現場の写真、実際のスタッフ、実物の商品。この3枚があれば信頼感は一気に変わります。

失敗4。要素を詰め込みすぎて、編集画面が重くなる

画像や図形を大量に配置していくと、データが重くなり編集の動作が遅くなることがあります。保存待ちが長くなり、作業効率が落ちます。

防ぎ方は次の3つです。

• 使っていない要素を消す：非表示にしたまま残っている要素は削除する
• 写真の解像度を上げすぎない：必要以上に高解像度のものを置かない
• 区切りごとに複製する：デザインを複製してバックアップを取っておく

作業前の複製は、レイアウトを大きく変える前の保険としても有効です。

失敗5。公開して終わりにして、誰も見に来ない

いちばんもったいない失敗です。LPは公開しただけでは人が来ません。会社サイトと違い、検索から自然に流入する力が弱いページだからです。

公開と同時に、次の導線を必ずセットで用意してください。

• SNSのプロフィール欄：リンクを置く
• 既存顧客へのメール：文面にLPのURLを入れる
• 名刺やチラシ：QRコードを載せる
• 広告：流入元として出稿する

「どこから人を連れてくるか」を決めてから作るのが正しい順番です。

公開したのに反応がない場合の原因の切り分けは、LPで問い合わせ0の原因は5か所｜確認する順番と直し方まで解説で確認する順番を整理しています。作り直す前に、まず原因の場所を特定してください。

正直に言うCanvaの限界と、外注に切り替える判断ライン

ここまで手順を書いてきましたが、Canvaで作らないほうがいい場面もあります。相談を受ける立場として、率直にお伝えします。

検索から集客したいなら、そもそも土俵が違う

CanvaのLPは1枚もののページを速く出すためのツールです。記事を積み上げ、内部リンクでつないで検索流入を育てていく用途なら、そのために作られたWordPress等のほうが素直に組めます。

判断ラインは明確です。「広告費を払って人を連れてくる」ならCanvaで十分。「検索から人が来る資産を作る」ならWordPress等を選ぶ。ここを混同すると、半年後に「作ったのに検索で出てこない」と嘆くことになります。

見落とされがちなコストは、作る費用ではなく更新の手間

内製の話で抜けやすいのが、公開後の運用です。料金改定、キャンペーン終了、担当者の異動。LPは作った瞬間から古くなります。

実際によくあるのが、作った担当者が退職し、Canvaのアカウントに誰もアクセスできなくなるパターンです。防ぐには、制作は個人アカウントではなく会社の共有アカウントで行い、編集権限を2名以上が持つこと。無料で今すぐできる、最も費用対効果の高い対策です。

外注に切り替えたほうが早い3つのサイン

次のどれかに当てはまるなら、内製にこだわらず相談したほうが結果的に安く済みます。

• 広告費をまとまった額かける予定：広告費に対して制作費の比重が小さくなるほど、設計にお金をかける価値は上がる。自社の広告予算と制作費を並べて判断する
• 社内に作業時間を出せる人がいない：本業の合間に片手間で作ると、いつまでも公開できないことがある。判断だけ社内、手は外部という分け方が現実的
• 決済・予約・在庫連動が必要：Canvaの範囲を超える。無理に組み合わせるとかえって複雑になる

逆に、内製をおすすめしないケースを挙げるなら「完璧なものを一発で作りたい」場合です。内製の価値は、早く出して直せることにあります。1本目から完成度を求めるなら、最初からプロに任せたほうが早いです。

全部を外注しなくていい。分け方のコツ

私たちが相談を受けるとき、最初にお伝えしているのは「全部お任せか、全部自社か」の二択で考えないでください、ということです。

現実的なのは、構成と文言の設計だけプロと一緒にやり、Canvaでの制作と更新は社内でやるという分け方です。成果を左右するのは主に構成と言葉で、そこさえ固まれば、Canvaでの組み立ては社内で回せます。更新のたびに外注費が発生する状態から抜けられるのは、長い目で見て大きな差になります。

CanvaでのLP制作に関するよくある質問

まず1画面分だけ作ってみてください

今日のうちにできる最初の一歩は、ファーストビューの見出しを1行書くことです。ステップ1のテンプレートに自社の言葉を当てはめるだけなら、5分で終わります。そこができれば、残りは同じ作業の繰り返しです。

作ったあとの改善まで見据えたい方は、LPの構成案の作り方｜問い合わせが増える要素の並べ方を次に読むと、並び順の根拠まで理解できます。

ここまで読んで、構成は分かったけれど自社でやり切る時間がない、あるいは広告費をかける前に設計を見てほしいと感じた方もいると思います。コレットラボでは、AIを使ったLP・サイト制作の内製化を伴走で支援しています。「自分たちで作りたい」「プロに任せたい」のどちらでも設計できますので、現状を整理するだけでも構いません。ホームページ制作・運用の詳細はこちらからお気軽にご相談ください。