Canva LPのテンプレートの編集方法

告知
デザイン・イラスト

このようなCanvaのLPテンプレートを編集する方法について解説します!
2504_note_美容LP_2.jpg

✏️ 文字の編集について

詳しくは動画をチェック!

1. 文字の変更

編集したい文字をダブルクリックして、好きなテキストに書き換えましょう。
フォントは画面上部の「フォント一覧」から、
お好みのフォントを選ぶだけで雰囲気が変わります。
フォントを選んだあと、「すべて変更」をクリックすると、すべてのページのフォントが一括で変更されます!
スクリーンショット 2025-04-28 17.07.10.png

2. 色変更

文字の色は、「カラー」パネルから選択できます。
背景に合わせて、見やすい色に調整しましょう。
色も同様に「すべて変更」をクリックすると、全てのページの色が変更した色に一括で変更されます。

3. エフェクトの活用

文字が背景と重なって見えにくくなってしまうときは、 「背景」エフェクトを使うと、読みやすさがぐんとアップします!
スクリーンショット 2025-04-28 17.08.08.png


3-1 背景エフェクトの設定方法

編集したい文字を選択

上部メニューの「エフェクト」をクリック

右側に表示されるサイドパネルでエフェクトを編集できます

このパネルで角の丸み・スプレッド(余白)・透明度・背景の色が自由に調整できます。

3-2 .「感動の美肌ケア」のタイトルについて

スクリーンショット 2025-04-28 17.09.09.png
このタイトル部分は、あえて一文字ずつ個別に入力しています。
一文字ずつ入力すると、文字の位置調整がしやすかったり、サイズ・装飾も自由にカスタマイズできます。
「感動」という文字は、ブラウン色にして、「ネオン」効果を入れています。
このエフェクトを使うと…文字のまわりがふんわり光るような見た目にすることができます。

スクリーンショット 2025-04-28 17.09.55.png

▶ ネオン効果の編集方法

1.テキストを選択
2.上部メニューの「エフェクト」をクリック
3.「ネオン」を選択
4.「強度」で光の強さを調整できます

4. グループ化されてる文字の編集方法

この3つの要素(バブルと文字)はグループ化されているため、
そのままだと1つずつ動かせません。
位置を細かく調整したい場合は…

4-1. グループ解除の方法

対象の3つのバブルを右クリック

「グループ解除」を選択

これで、バブル1つ1つを個別に動かせるようになります!

💡おすすめTIP
グループ解除をして、再びグループ化しようとすると背景や他の不要なパーツも一緒に選択されてしまう場合があります。その場合は、一時的に白紙のページで編集する方法がおすすめです!1. 編集したいグループをコピーして、新しい空白ページに貼り付ける
2. そのページ内で、自由に編集&再グループ化
3. 元のページに戻して貼り直す4. 使い終わったページは削除
ちょっとしたひと手間ですが、
効率と仕上がりがぐんとアップします✨

4-2.テキストを増やしたら、画像も大きくなった…!?

例えばこちらのような「天然成分」バッジのように、
テキストと円形の画像がグループ化されている場合、
テキストを増やすと…画像のサイズも一緒に大きくなってしまいます。
スクリーンショット 2025-04-28 17.12.41.png

なので、一度グループ解除してから編集してください✨
でもこの機能は使い方によってはとても便利な機能なんです!
カード型のボックスを使って、
「タイトル+説明文」のテキストを入れるデザインを作るとき…(例えば、商品の特長説明ボックスやQ&Aコーナーなど)
背景(画像または図形)とテキストをグループ化しておけば
テキストの量に応じて自動でボックスの高さが変わるため、
わざわざ毎回、背景サイズを微調整する必要がありません。

📸 写真の編集について

詳しくは動画をチェック!

1.商品の写真を自然に馴染ませたいときは?

スクリーンショット 2025-04-28 17.13.57.png
写真の下に背景色を加えたいけど、
そのまま敷くと「境目がくっきり」して不自然…ということありますよね。
そんなときは、 “グラデーション”でなじませるのがコツ!
スクリーンショット 2025-04-28 17.14.27.png

1-1. グラデーション使い方

スクリーンショット 2025-04-28 17.14.55.png

例えば、商品の写真の下に…

上:透明度 0%(完全に透明)
下:透明度 100%(しっかり色が出る)

というグラデーションをかけると、
写真がスーッと自然に溶け込むような仕上がりになります。

1-2. モデル写真の合成には「Image Blender」アプリが便利!

スクリーンショット 2025-04-28 17.15.28.png
モデル画像と背景を自然に合成したいときにおすすめなのが
【Image Blender】です!
スクリーンショット 2025-04-28 17.15.50.png

▶ 使い方

1.サイドバー→「アプリ」をクリック
2.検索窓で「Image Blender」と入力してアプリを選択
3.商品や背景など「重ねたい画像」を選ぶ
4.「Blender Selected Image」をクリック
5.合成の方向とレベルを調整!

▶ 合成レベルのコツ

・レベルを上げすぎるとシャープになりすぎるので注意
・50前後に設定すると、自然にふんわりなじみます
・横向きや縦向きの調整が可能

2.写真の色味を自然に整える方法

写真の印象を変えたいときは、「調整」機能を使うのが便利です!

2-1. 色温度・色合いの調整

写真を選択した状態で「調整」をクリック
「色温度」や「色合い」をスライドして、お好みの雰囲気に変更
スクリーンショット 2025-04-28 17.16.59.png
→ 青みを足したいときは「色温度」を下げて、柔らかくしたいときは「色合い」を暖色寄りにするのがオススメです。

2-2. 特定の色だけ変更したいとき

スクリーンショット 2025-04-28 17.17.39.png
「カラー調整」では、現在使われている色が一覧で表示されます。
ピンクを青に変えたい場合
→ ピンク色を選んで「色相」を左右にスライドするだけで、簡単に色味変更できます!

2-3. モノクロにしたいとき

スクリーンショット 2025-04-28 17.18.15.png

フィルターMono を選ぶと白黒になります。
「 強度」もスライドで調整できるので、イメージに合わせてカスタマイズ可能です!

2-4. 調整をリセットする方法

写真の色味を調整してみたけど…
「やっぱり元の状態に戻したい!」という時も、ワンクリックでOKです。
スクリーンショット 2025-04-28 17.18.52.png

1.編集パネルの「調整」をクリック
2.パネル下部の「リセット」ボタンを押す

3.写真の差し替え方法

3-1. 差し替えの手順

ご自身の画像を ドラッグ&ドロップ でアップロード

アップロードした画像を、フレームに そのままドラッグ&ドロップ すると自動で差し代わります

すでに写真の色味を「調整」していた場合でも…
→ ドラッグ&ドロップ すると、同じ調整がそのまま適用されます!
つまり、最初に設定した雰囲気をキープしたまま、簡単に別の画像へ変更できます。

🔗 リンクの設定方法(CTAボタンなど)

CTAボタン(「詳しくはこちら」など)にリンクを設定して、
外部サイトや電話番号へ遷移させたいときの手順です。
詳しくは動画をチェック!

1.基本的なリンクの設定方法

スクリーンショット 2025-04-28 17.20.27.png

1.リンクを設定したいボタンを右クリック
2.「リンク」をクリック
3.遷移させたいURLを入力し、「完了」をクリックすればOK!

2.電話番号をリンクにしたい場合

電話番号をリンクにしたい場合は、以下のように入力します
この形式でリンクを設定すると、
スマートフォンでタップしたときにそのまま電話がかけられるようになります
スクリーンショット 2025-04-28 17.21.15.png

tel:090-1234-5678

3. 内部リンク(同じテンプレート内のページへのリンク)の設定方法

「TOP」「料金プラン」など、ページ間の移動ができるリンクを設定することもできます。
スクリーンショット 2025-04-28 17.21.52.png


1.「メモを追加」アイコンをクリック
2.一番上の欄にページタイトルを入力します(例:「TOP」「料金」「特徴」など)
3.「リンク」をクリックして、先ほど設定したページタイトルを選ぶ

リンク設定後に自動で下線がついてしまうときは?

テキストにリンクを設定すると、自動で下線が引かれる仕様になっています。
リンクを設定したテキストを選択して、上部メニューにある「下線(U)」をクリックすると線が消えます。

Webサイトの公開方法

テンプレートの編集がすべて完了したら、Webサイトとして公開することができます!
詳しくは動画をチェック!
1.画面右上の「Webサイト公開」ボタンをクリック
2.「Webサイトurl」で、URL(ドメイン)を英数字で入力
※ 例:mybeauty や sampledesign など
3.最後にもう一度「Webサイトを公開」をクリック

これで、LPがオンライン上に公開されます!


⚠️モバイルファーストLPを作るときの注意点

スマホでの表示を重視して作るモバイルファーストLP。
でも、意外と「見た目が崩れる」「幅がバラバラになる」といった現象が起きがちです。
ここでは、モバイルで綺麗に見せるための基本ルールと対処法をご紹介します。
詳しくは動画をチェック!

✅ まず大前提:600px以内に収める

スクリーンショット 2025-04-28 17.24.17.png



文字・画像・ボタンなどの要素はすべて600px以内に配置しましょう。
この幅を超えてしまうと…
・要素が勝手にレスポンシブ変換されて上下にズレる
・デザインの統一感が失われる

✅ 勝手にレイアウトが崩れる場合の対処法

スクリーンショット 2025-04-28 17.24.59.png

「600px以内に収めてるのに、なぜかズレる…」
そんなときは、透明の図形を使った調整が効果的です!

▶ 解決方法
スクリーンショット 2025-04-28 17.25.27.png

1.任意の図形(四角形)を挿入
2.高さ(縦)をページいっぱいまで引き伸ばして、中央に配置
3.透明度を0に設定して非表示にする

これで不要な自動レスポンシブ挙動を防ぎ、
デザインが固定されたように表示されます。

✅ 一部のページだけ幅が狭く表示される

「他のページは問題ないのに、特定のページだけ幅が変…」
そんなときは以下をチェックしてみてください:

▶よくある原因:
スクリーンショット 2025-04-28 17.26.27.png

・オブジェクトが600pxの範囲外にはみ出ている
文字のサイズが大きい
特定のフォント自体がレスポンシブに不向き

▶解決の方法
600px以内にガイドを引いて、その中でデザインする
フォントサイズを小さくする
それでも直らない場合は、別のフォントに変更してみましょう

テンプレートの購入はこちら

デザインに自信がなくても、「プロっぽく仕上がる」テンプレート、ぜひ使っ
てみてくださいね。
その他にもいろんな業種のLPをご用意してるので、気になる方はぜひチェックしてみてください




サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す ココナラコンテンツマーケット ノウハウ記事・テンプレート・デザイン素材はこちら