UTAGEでLPを作る方法｜基本をおさえてもう迷わない！ | UTAGEを使った講座ビジネス・コンテンツマーケの解説サイト

UTAGEでLPを作ろうと編集画面を開いたけど、「どこから何を触ればいいの？」と固まってしまうこと、ありませんか？

枠が何重にも重なっていて、クリックする場所によって出てくる設定が違う。
背景色を変えたいだけなのに、狙った場所が選べない。結局、テンプレートの文字だけ書き換えて終わり。

そんな進み方だと、いつまでも「自分の伝えたい形」にはなりません。

実は、UTAGEの編集画面は「セクション（黄）」「行（緑）」「要素（青）」の3階層でできています。
この構造さえ分かってしまえば、迷う時間はほとんどなくなります。

今日は、その3階層の見方と、作ったパーツを次のLPで使い回す方法までお伝えします。

Contents

1 まずは3つの枠を覚える
2 STEP1：セクション（黄色枠）で、ブロックの土台を作る
3 STEP2：行（緑枠）で、列の並びを決める
4 STEP3：要素（青枠）を置いていく
5 STEP4：お気に入り保存で、2枚目以降を速くする
6 作るLPの種類別、押さえどころ
7 公開前に見ておきたい3つのチェック
8 FAQ
9 まとめ

まずは3つの枠を覚える

編集画面で表示される枠には、それぞれ役割があります。

- セクション（黄色枠）：ページを構成する大きなブロックです。「ヘッダー」「お客様の声」「料金」など、意味のかたまり単位で考えます
- 行（緑枠）：セクションの中で、列を組むための枠です。左右に並べたいときはここを使います
- 要素（青枠）：テキストや画像、ボタンなど、実際に目に見えるパーツです

大きい枠から小さい枠へ、外側から内側へ順に作っていくのが基本の流れです。
逆に、うまく選択できないときは「今どの階層を触っているか」を確認すると、たいてい解決します。

STEP1：セクション（黄色枠）で、ブロックの土台を作る

いちばん外側の枠です。
セクションは最大4列まで追加できます。

そして背景まわりでは、次の設定ができます。

- グラデーション
- 背景色
- 画像アップロード
- 背景画像スタイル
- 透明度の調整
- セクション幅の選択

たとえばファーストビューなら、背景に画像を入れて透明度を下げ、上に乗せる文字を読みやすくする、といった調整がここでできます。
「このブロック全体の雰囲気を変えたい」ときは、まず黄色枠を選ぶと覚えてください。

STEP2：行（緑枠）で、列の並びを決める

セクションの中で、中身をどう並べるかを決める枠です。こちらも最大4列で構成できます。

行では、次の設定ができます。

- 列の数（最大4列）
- スマホ表示時の列の並び（縦／横）
- 背景のグラデーション
- 背景色（全体／内側）
- 透明度
- 最大幅

ここでいちばん見落とされやすいのが、スマホ表示時の列の並びです。

パソコンの画面では横に3つ並べてきれいに見えていても、スマホでそのまま横並びのままだと、文字が小さく潰れてしまいます。

読み手の多くはスマホで見ていますから、列を作ったら、必ずスマホでの並びも確認してください。

背景色を「全体」と「内側」で分けられるのも便利な点です。
外側に薄い色を敷き、内側を白にすると、枠で囲ったような見た目を簡単に作れます。

STEP3：要素（青枠）を置いていく

土台ができたら、いよいよ中身です。

1.【＋】ボタンをクリックします

2.追加したい要素を選びます

選べる要素には、テキスト、画像、動画、ボタンなどがあります。
ここは難しい操作はなく、置いて、書き換えるだけです。

コツは、要素を置く前に、行の列を先に決めておくこと。
あとから列を変えると、せっかく入れた要素の位置がずれてしまいます。
「セクション → 行 → 要素」の順番を守ると、やり直しが減ります。

STEP4：お気に入り保存で、2枚目以降を速くする

LPを作るのが速い人は、毎回ゼロから作っていません。
一度作ったパーツを、保存して使い回しています。

1.保存したい枠の右上にある、フロッピーマークをクリックします

2.ポップアップで【お気に入りとして保存】を選びます

3.名称を入力して確定します

4.次回以降は【＋】＞【お気に入りから追加】で呼び出します

たとえば、プロフィール欄、お客様の声のブロック、申込ボタン周りのデザインなど、毎回同じ形で使うものは、最初の1回で保存しておいてください。
2枚目のLPからは、呼び出して文字を差し替えるだけになります。

「LPを作るのに何日もかかる」という状態から抜け出す、いちばん確実な方法がこれです。

作るLPの種類別、押さえどころ

同じ編集画面でも、作るページの目的によって力を入れる場所は変わります。

- メルマガ・LINE登録ページ（オプトイン）
  情報を詰め込みすぎず、登録ボタンまでを短くします。
  セクション数を絞るほど、登録率は安定しやすくなります

- 商品販売ページ（決済付き）
  お客様の声や実績を、行の列を使って読みやすく並べます。
  長くなるぶん、申込ボタンをページの途中にも置いておくと親切です

- 自動ウェビナーページ
  動画要素が主役です。
  まわりの要素を減らし、視聴に集中してもらう作りにします

- イベント申込ページ（セミナー／個別相談）
  申込フォームを埋め込んで、読んだ流れのまま申し込めるようにします

なお、ページの上下に固定表示できる追従型バナー機能もあります。
長いLPでは、スクロールしても申込ボタンが常に見えている状態を作れるので、あわせて使ってみてください。

公開前に見ておきたい3つのチェック

作り終えたら、公開ボタンを押す前にここだけ確認しておいてください。
どれも1分ほどで終わりますが、見落とすと申し込みが止まる原因になります。

- スマホの実機で開いてみる
  編集画面のプレビューだけで判断せず、自分のスマホで一度開いてください。
  行の列がスマホで横並びのままになっていないか、文字が小さすぎないか、画像がはみ出していないかを、指でスクロールしながら見ていきます

- ボタンのリンク先が入っているか
  デザインを整えることに集中していると、ボタンのリンク先が空のまま、ということが起こります。
  申込ボタンや次のページへのボタンは、すべて実際に押して、正しい行き先に飛ぶかを確かめてください

- ファーストビューだけで内容が伝わるか
  ページを開いた瞬間に見える範囲に、「誰に向けた、何のページなのか」が入っているかを見ます。
  ここが伝わらないと、その先はほとんど読まれません。
  迷ったら、スクロールせずに見える部分だけを人に見せて、何のページか言い当ててもらうのが早い確認方法です

この3つを習慣にしておくと、公開後に慌てて直す回数がぐっと減ります。

FAQ

Q1. UTAGEのファネルページでは、枠がたくさんあって、どれを選べばいいか分かりません。

外側から順に「セクション（黄）＝ブロック全体」「行（緑）＝列の並び」「要素（青）＝テキストや画像などのパーツ」と覚えてください。背景全体を変えたいなら黄色枠、左右に並べたいなら緑枠、文字や画像を触るなら青枠です。狙った設定が出てこないときは、階層を1つ外側か内側に変えてみてください。

Q2. UTAGEでLPを作成後、パソコンでは整って見えるのに、スマホだと崩れます。

行（緑枠）の設定にある「スマホ表示時の列の並び」を確認してください。横並びのままだと、スマホでは1つ1つが細くなって読みにくくなります。縦に切り替えると、スマホでも上から順に読める形になります。

Q3. UTAGEで毎回LPを作るのに時間がかかります。速くする方法はありますか？

お気に入り保存を使ってください。枠の右上のフロッピーマークから【お気に入りとして保存】を選び、名称を付けておけば、次回は【＋】＞【お気に入りから追加】で呼び出せます。プロフィールやお客様の声など、繰り返し使うブロックを保存しておくと、2枚目以降はあっという間に仕上がります。

まとめ

UTAGEのLP作成は、セクション（黄）・行（緑）・要素（青）という3階層でできています。

ブロック全体の雰囲気はセクション、列の並びは行、実際のパーツは要素。この順番で外側から作っていけば、迷う場面はほとんどありません。

スマホ表示時の列の並びを必ず確認すること、そして一度作ったパーツはお気に入りに保存して使い回すこと。

この2つを習慣にすると、LP制作の時間は目に見えて短くなります。

なお、LP作成時に必要な写真などのメディアの管理については、関連記事はこちらで解説しています。

現在、「UTAGE攻略無料セミナー」を開催しています。

UTAGE攻略無料セミナーの中で、ファネル全体の流れとして実際の設計例を交えながら、より具体的に解説しています。

UTAGEを使って

・売上が生まれる仕組みを作りたい
・ファネル設計を理解したい
・業務を自動化したい

という方は、ぜひ一度チェックしてみてください。