ページを作り込む前に、ひとつだけ意識してほしいことがあります。
あなたのページ、ほとんどの人はスマホで見ています。
こんにちは、LINEマーケターの花果（かか）です。
パソコンで作っていると、つい大きな画面での見え方だけで完成としてしまいがちです。でも実際に見られているのはスマホ。今回はそこを踏まえた編集のコツを書きます。
編集画面の構造をお弁当箱で考える
前にも出てきた黄色・緑・青の入れ子構造ですが、お弁当箱でイメージすると分かりやすいです。
| 箱 | イメージ | 役割 |
|---|---|---|
| 黄色 | お弁当箱そのもの | 一番外側の大きなブロック。増やすと段が増える |
| 緑 | 中の仕切り | ご飯とおかずを分ける区切り |
| 青 | ご飯やおかず | 実際の中身（画像・テキスト・動画） |
黄色い箱を追加していくのが「お弁当箱を増やす」、緑で仕切りを作って、青に中身を詰めていく。この感覚で触ると迷いにくくなります。
削除するときは、消したい階層の削除ボタンを押すのを忘れずに。上の階層を消すと、その中身ごと消えます。
余白の調整
「ここの空白をなくしたい」というのは、作っていて一番よく出てくる要望だと思います。
編集画面の表示位置の設定に、こういった項目があります。
- 上部の余白
- 下部の余白
- 左右の余白
詰めたいところ、空けたいところをここで調整します。
⚠ PCとスマホで見え方が違う
ここが今回の本題です。
編集画面には、PC表示とスマホ表示の切り替えがあります。 そして両方の見え方は、けっこう違います。
スマホでの改行崩れに注意
一番よく起きるのがこれです。
PCで見ると自然に収まっている文章が、スマホだと変なところで改行されて読みにくくなることがあります。
例えば「時間をかけずにファンを作るメソッド」のような一文が、スマホでは中途半端な位置で折り返されてしまう、といったことが起きます。
なので、編集したらスマホ表示に切り替えて確認する癖をつけてください。
スマホだけの設定ができる
便利なことに、スマホ表示だけに適用される設定があります。
- スマホのときだけ文字サイズを変える
- スマホでは改行を解除する
PCの文字サイズはそのままに、スマホだけ小さくする、といった調整ができるわけですね。
作業自体はパソコンの大きい画面のほうがやりやすいので、「作るのはPC、確認はスマホ表示」という進め方がおすすめです。
動画を埋め込む
ページには動画も入れられます。使えるのは3種類です。
- UTAGEにアップロードした動画
- YouTubeのリンク
- Vimeoのリンク
おすすめはUTAGEにアップロード
Vimeoについて注意点があります。
Vimeoの動画は、視聴者がログインしないと見られないケースが見受けられます。 見てもらうつもりで埋め込んだのに、見られない状態になっていたら機会損失です。
UTAGEにアップロードできるなら、そのほうが確実です。
アップロードは動画管理から「新規アップロード」で行えます。動画名やチャプターの設定もできるので、講座コンテンツを置く場合は活用してみてください。
ページに置ける要素
編集画面から追加できるものは、かなり種類があります。
| 要素 | 用途 |
|---|---|
| 画像・動画・音声 | コンテンツの基本 |
| 登録フォーム | メールアドレスなどを取得。シナリオと連携する |
| 決済フォーム | 商品を作っておけば、連携商品を選んで設置できる |
| 表 | 料金比較やプラン一覧に |
| 引き出し（開閉式） | よくある質問など、長くなる情報をたたむ |
| 左右分割 | 画像とテキストを横に並べる |
| 対話形式 | 吹き出しでの会話表示 |
| イベント | セミナーや個別セッションの申し込みを埋め込む |
| オーダーバンプ | 「一緒に買うとお得」のセット販売 |
| カスタムHTML | 自由にHTMLを書いて配置できる |
イベント埋め込みは2種類ある
セミナーと個別セッションで挙動が違います。
- セミナー … 日時を設定して申し込みを受ける
- 個別セッション … 自分のカレンダーと連携して、空いている枠を出す
個別相談を受けている方は、カレンダー連携型が便利です。
オーダーバンプは後回しでOK
「セットで買うと安くなります」という提案を決済画面に出す機能です。売上を伸ばす仕掛けとしては有効ですが、最初から使うことはあまりありません。 商品が増えてきてから考えれば十分です。
自動ウェビナーはテンプレートを使う
自動ウェビナーのページは、テンプレートから作るのがおすすめです。一から組むと構成が複雑になります。
デザインにこだわりたいとき
用意されている要素で物足りない場合は、カスタムHTMLが使えます。
自分でHTMLを書いて貼り付けられるので、テンプレートの見た目から抜け出したいときに有効です。前回書いた「テンプレートの既視感」が気になる場合の解決策のひとつになります。
おわりに
今回のポイントです。
- 箱の構造はお弁当箱でイメージすると分かりやすい
- スマホ表示で必ず確認する。改行崩れが起きやすい
- スマホだけ文字サイズを変える、といった個別設定ができる
- 動画はUTAGEへのアップロードが確実（Vimeoは視聴に制限がかかることがある）
- 表・引き出し・対話形式など、要素は豊富。触りながら覚えるのが早い
次回は、ファネルに紐づくアクションの話です。お金に関わる大事な注意点があるので、決済を使う予定の方は必ず読んでください。
📚 このシリーズの目次はこちら → 【保存版】UTAGEマニュアル｜初期設定から販売・会員サイトまで全21記事で解説
UTAGEの詳細はこちらから
14日間無料で使える
コメントを残す