MOSHのページビルダーでは
AIが作成した申込ページをもとに
画像や文字
背景色や余白などを調整できます。
しかし編集画面には
さまざまなボタンや設定があるため
どこを触ればよいのか
迷ってしまうこともあります。
この記事では
MOSHのページビルダーを使い
AIで作成したページを
自分らしいデザインへ整える方法を
初心者向けに解説します。
画像の追加や文字サイズの変更
スマートフォン表示の確認から
完成したページを
イベントサービスへ連携する流れまで
順番に確認していきましょう。
ページビルダーの基本構造を確認しよう
MOSHのページビルダーでは
ページ全体が
セクションとパーツを
組み合わせて作られています。
この2つの違いを理解すると
編集する場所を
見つけやすくなります。
セクションはページを分ける大きな枠
セクションとは
ページの内容を分ける
大きなブロックです。
例えば申込ページは
・ページ上部の案内
・よくある悩み
・サービスの特徴
・お申込みの流れ
・よくある質問
などのセクションに
分けて作られています。
セクションを選択すると
・背景色
・背景画像
・上下左右の余白
などを変更できます。
編集したい部分の
外側の枠をクリックすると
そのセクション全体が
選択された状態になります。
パーツはセクションの中身
パーツとは
セクションの中へ配置する
文章や画像などの要素です。
追加できる主なパーツには
次のようなものがあります。
・見出し
・文章
・ボタン
・画像
・動画
・オートウェビナー
・区切り線
空のセクションを追加した場合は
セクションを作っただけでは
中身が表示されません。
セクションの中で
パーツを追加し
必要な文章や画像を
配置していきます。
AIのチャット画面を使いやすく表示する
ページビルダーの右下には
AIとやり取りするための
赤いボタンがあります。
ChatGPTなどと同じように
文字を入力したり
マイクを使って話しかけたりして
ページの修正を
依頼することができます。
サイドメニューとして表示する
赤いボタンを押すと
編集画面の横に
AIのチャット画面が
表示されます。
画面内の四角いボタンを押すと
チャット画面を
編集画面から分離して
表示できます。
チャット画面を閉じたい場合は
斜めの矢印ボタンを押します。
チャット画面が収納され
再び右下の赤いボタンへ戻ります。
新しいチャットを始めるときの注意点
新規チャットのボタンを押すと
それまでのやり取りがリセットされ
新しい状態で
AIとのやり取りを始められます。
ただし
リセットしたチャットの内容は
そのまま残らないため
重要な文章や指示内容は
事前にメモ帳などへ
保存しておきましょう。
人類は保存を忘れた瞬間に限って
良い文章を生み出します。
なかなか見事な仕様です。
背景色とブランドカラーを設定する
AIが作成したページは
セクションごとに
背景色が変わることがあります。
色を統一したい場合は
セクションを選択し
背景色・画像の設定から
背景色を変更します。
カラーコードで色を指定する
使用したい色が決まっている場合は
カラーコードを入力すると
同じ色を正確に
設定できます。
例えば下のセクションと
同じピンク色にしたい場合は
下のセクションの色をコピーし
上のセクションへ
貼り付けて変更できます。
よく使う色は保存しておく
MOSHには
設定した色を保存する機能があります。
講座やサービスで使う
ブランドカラーを登録しておくと
毎回カラーコードを
探す必要がなくなります。
次のような色を
あらかじめ登録しておくと便利です。
・ページの背景色
・見出しの色
・本文の色
・ボタンの色
・アクセントに使う色
自分専用の
カラーパレットとして管理できるため
複数のページでも
統一感を出しやすくなります。
操作を元に戻す方法
色や文字を変更したあとに
元へ戻したくなった場合は
画面右上にある
戻るボタンを押します。
編集内容を一つ前の状態へ
戻すことができます。
画像をアップロードしてページへ追加する
AIが作成したページには
画像が入る予定の場所に
画像が表示されていない
アイコンが入る場合があります。
MOSHのAIへ
画像生成を依頼することもできますが
ページ全体の世界観を
きれいに整えたい場合は
ChatGPTやGemini
Canvaなどで画像を用意し
MOSHへアップロードする方法が
使いやすいでしょう。
画像はまとめてアップロードできる
画像を追加する画面から
事前に用意した画像を
複数アップロードできます。
一度アップロードした画像は
MOSH上へ保存されるため
必要な場所から
呼び出して使用できます。
画像を追加する2つの方法
ページへ画像を追加する方法は
大きく分けて2つあります。
方法1：既存セクションへ画像を入れる
すでに作成されている
セクションを選択し
画像パーツを追加します。
文章と画像を
同じセクション内で
表示したい場合に向いています。
方法2：画像専用のセクションを作る
新しく空のセクションを追加し
その中へ画像パーツを配置します。
ページ上部の
ヘッダー画像など
画像を大きく見せたい場合に
使いやすい方法です。
画像の周りにできる余白を調整する
画像を配置したときに
周りへ白い縁が表示される場合は
セクションに設定されている
余白が原因です。
セクションを選び
余白の設定を開きます。
余白を0にすると
画像の周囲にある空間をなくし
セクションの幅いっぱいに
画像を表示できます。
ページの一番上へ配置すると
ヘッダー画像のような
見せ方ができます。
ただし
すべての余白を
なくせばよいわけではありません。
文章の周りには
適度な余白を残した方が
内容を読みやすく
見せることができます。
画像を大きく見せる場所と
余白を残す場所を分けて
調整しましょう。
文字サイズと文章の間隔を整える
AIが作成したページは
見出しが大きすぎたり
文章同士の間隔が
狭く感じたりすることがあります。
その場合は
見出しや文章を選択し
フォントサイズや余白を
調整します。
見出しと本文のサイズを確認する
動画内の例では
見出しのサイズを
36から32へ変更し
本文は18のまま
使用しています。
数字だけで判断するのではなく
実際のページを見ながら
読みやすい大きさへ
調整することが大切です。
上下の余白を追加する
文字やボタンの周囲に
空間を作りたい場合は
対象となるパーツを選択し
余白を設定します。
例えば上側の余白へ
32ピクセルを設定すると
前の文章との間に
空間を作ることができます。
余白が少ないと
内容が詰まって見えます。
反対に余白が大きすぎると
ページが長くなりすぎるため
スマートフォン表示も見ながら
ちょうどよい間隔を探しましょう。
スマートフォン表示を確認しながら編集する
申込ページは
スマートフォンから
見られることが多いため
パソコン画面だけでなく
モバイル表示の確認が必要です。
パソコンでは
ちょうどよく見えていても
スマートフォンでは
・見出しが大きすぎる
・文章の改行が不自然になる
・余白が広すぎる
・画像が小さく見える
といったことがあります。
画像や文字を追加したら
モバイル表示へ切り替え
実際の見え方を
確認しましょう。
最初から完璧に整えるよりも
画像を追加する
文字を調整する
モバイルで確認する
という流れを
繰り返す方が進めやすくなります。
AIへ選択した部分だけ修正してもらう
MOSHのAIでは
ページ全体だけでなく
選択した見出しや
セクションを指定して
修正を依頼できます。
修正したい部分を選択する
見出しを選択すると
AIのチャット画面に
この見出しについて
という形で
選択中の場所が表示されます。
セクションを選択した場合は
そのセクションについて
指示を出せます。
何も選択していない場合は
ページ全体に対する指示として
受け取られます。
複数の見出しをまとめて整える
例えば動画内では
次のような指示を
AIへ入力しています。
すべての見出しの
フォントサイズを32に統一し
下の余白を10ピクセルにしてください。
このように指示すると
同じ種類の見出しを
まとめて変更できます。
一つずつ手作業で変更するよりも
短い時間で
デザインをそろえられます。
ただしAIの変更後は
必ずページ全体を確認しましょう。
意図していない場所まで
変わっていないかを
確認することが大切です。
必要な画像をAIへ確認する
申込ページに
どのような画像を用意すればよいか
分からない場合は
AIへ質問できます。
例えばページの内容から
・ページ上部のヒーロー画像
・悩んでいる様子を表す画像
・サービスを選ぶ理由の画像
・お客様像を表すアバター
・お申込みの流れを表す画像
などを提案してもらえます。
提案された内容を
そのままMOSHで生成することもできますが
別の画像生成AIやCanvaで
作成するための参考として
利用する方法もあります。
すでに用意できている画像を伝え
まだ必要な画像だけを
一覧にしてもらうと
作業を整理しやすくなります。
ボタンにリンクを設定する
ページ内のボタンには
リンクを設定できます。
ボタンを押した人を
・申込ページ
・予約ページ
・サービス詳細
・LINE公式アカウント
・別の案内ページ
などへ移動させるための設定です。
ボタンを選択し
リンクの設定欄へ
移動先のURLを
貼り付けます。
設定後は
実際にボタンを押し
正しいページへ
移動できるか確認しましょう。
作成したページをイベントサービスへ連携する
申込ページが完成したら
MOSHのイベントサービスと
連携します。
ページビルダーの
連携メニューを開き
サービス名や
開催日時などを設定します。
サービス名と開催日時を登録する
最初に
イベントのサービス名を
入力します。
サービス名は
あとから変更できるため
最初は仮の名称で
作成することもできます。
続いて
イベントの開催日時を
追加します。
作成したサービスは
MOSHのサービス一覧へ
追加されます。
サービス一覧から内容を編集する
MOSHのサービス一覧を開き
作成したサービスを選択します。
編集するを押すと
・サービス画像
・開催スケジュール
・料金
・決済方法
・必要なもの
・サービスの流れ
・キャンセル方法
・キャンセルポリシー
などを設定できます。
複数の画像を登録した場合
サービス画像は
複数登録できます。
複数登録した場合は
申込画面で画像が
順番に切り替わります。
ただし画像を増やしすぎると
一枚あたりの情報が
伝わりにくくなることがあります。
必要な枚数に絞り
サービス内容が分かる画像を
選びましょう。
料金と決済方法を設定する
有料のイベントやサービスでは
料金と決済方法を設定します。
オンライン開催の場合は
MOSHで対応している
決済方法を選択します。
リアル開催の場合は
現地払いを設定することもできます。
料金だけでなく
・支払いの時期
・キャンセル時の対応
・返金の条件
なども
分かりやすく記載しておくと
申込者が安心して
手続きを進められます。
キャンセルポリシーを確認する
キャンセル設定では
お客様が
どのようにキャンセルするかを
決めることができます。
独自のキャンセルポリシーを
作成して記載することもできます。
独自設定をしない場合は
MOSHで用意されている
初期設定が適用されます。
動画収録時の画面では
開催日の1日前まで
キャンセルできる設定が
表示されていました。
サービスの仕様や
初期設定は変わる可能性があるため
公開前に
現在の設定内容を
必ず確認してください。
公開前に販売者情報を登録する
MOSHでサービスを公開するには
販売者情報の登録が必要です。
販売者情報では
・個人または法人の選択
・氏名や事業者情報
・販売に必要な各種情報
などを入力します。
販売者情報が登録されていないと
ページやサービスを作成しても
公開まで進めない場合があります。
ページ制作を始める前か
公開準備に入る前に
販売者情報の登録を
済ませておくとスムーズです。
編集後は下書き保存を忘れない
ページの修正が終わったら
下書き保存を行います。
AIへ修正を依頼した場合や
画像を追加した場合も
変更内容が反映されていることを
確認してから保存しましょう。
ページ編集では
次の流れを習慣にすると安心です。
・編集する
・モバイル表示を確認する
・リンクを確認する
・下書き保存する
・公開前に全体を確認する
保存を忘れると
せっかくの修正内容が
残らない場合があります。
機械は保存ボタンを
押してくれません。
そこだけ妙に人間の自主性を尊重します。
まとめ
MOSHのページビルダーでは
セクションとパーツを
組み合わせながら
申込ページの画像や文章
背景色や余白を調整できます。
まず覚えておきたいのは
次のポイントです。
- セクションはページを分ける大きな枠
- パーツは画像や文章などの中身
- ブランドカラーは保存しておく
- 画像は事前にまとめてアップロードできる
- モバイル表示を確認しながら調整する
- AIには選択した場所だけを修正してもらえる
- 完成後はイベントサービスへ連携する
- 公開前に販売者情報を登録する
- 編集後は必ず下書き保存する
最初からすべてを
きれいに整えようとせず
まずは画像を一枚追加する
見出しを一つ調整するなど
小さな編集から
試してみてください。
動画と画面を見比べながら
一つずつ操作すると
ページビルダーの仕組みが
少しずつ分かるようになります。