ホームページを組み立てる

コミュニティの公開ページ(ホームなど)は、「ページビルダー」で組み立てます。ヒーローや紹介文、投稿・プラン・ギャラリーといったパーツを、実際の見た目を確認しながら並べて作れます。この記事では、ページの組み立て方を説明します。

1. ページを開く

左メニューの「ページ」を開くと、公開サイトのページ一覧が表示されます。「ホーム」は公開トップの常設ページです(削除・URLの変更はできません)。行をクリックすると、そのページの編集画面(ページビルダー)が開きます。

ページ一覧(ホーム)

右上の「新しいページ」からは、ホーム以外のページを追加できます。名前やURLを入れる画面はありません。ボタンを押すとその場で「無題のページ」という名前の下書きが作られ、そのまま編集画面が開きます。URLも page-1page-2 のように自動で割り当てられますので、公開する前に内容に合ったURLへ変えておくのがおすすめです(名前とURLはどちらも編集画面で変えられます)。ボタン右端の「▼」からは「テンプレートから作る」を選べます(次の「2. テンプレートから作る」)。追加したページをナビゲーションに出すかは「サイト設定 > メニュー」で設定します。

  • ページのタイトルは100文字までです。
  • URLは2〜32文字の小文字の英数字とハイフンで、先頭は英数字にします(例:lesson-guide)。大文字や日本語、記号は使えません。
  • コミュニティの標準の画面と混ざらないよう、いくつかのURLは使えません。使えないのは homejoincontactpostsplansshopticketslivemembersnewsvideosbioportfolioprofilemecartmediapdeleted の19語です(newsprofile のような使いたくなる言葉も含まれるのでご注意ください)。使えないURLを入れると「このURLは予約されているため使用できません。」と表示されるので、別の言葉に変えてください。同じコミュニティ内で同じURLを2つ使うこともできません
  • ホームは非公開にできません(削除・URLの変更もできません)。公開トップとして常にある扱いのためです。

ページを削除しても、すぐには消えません。一覧の下に「削除済みのページ」の枠が現れ、30日間はそこから「復元」でいつでも元に戻せます(削除したページが無いあいだ、この枠は表示されません)。30日を過ぎると復元できなくなります。

2. テンプレートから作る

ゼロから組むのが大変なときは、作り置きのテンプレートからページ一式を追加できます。ページ一覧の「新しいページ」の「▼」>「テンプレートから作る」で、テンプレートの一覧(ギャラリー)が開きます。一覧は次の2つに分かれています。

  • コミュニティサイト:ホーム・料金・お知らせなど複数ページで、コミュニティの入口を整えるテンプレートです(ファンクラブ・教室・スクール・オンラインサロン・ショップ・オンライン講座)。
  • ランディングページ:申込・登録を1ページで完結させるLPです。ナビゲーションとフッターのない単独URLで公開されます(体験レッスン募集・イベント/セミナー集客・先行会員募集・商品/講座販売・ファンクラブ入会)。

カードを選ぶと、公開ページと同じ描画で実物大のプレビューが開きます。上部のタブでページを切り替えたり、デスクトップ/モバイルの見え方を見比べたりできます。プレビューに出ているお知らせ・プラン・写真などは見本の内容で、適用しても登録されません。適用後は、あなたのコミュニティの実際のデータが表示されます。写真を入れる場所には「写真スロットのガイド」が付いていて、どんな写真を用意すればよいかが読めます(差し替えは適用後に、その場所をクリックして行います)。

下部の「このテンプレートを使う」を押すと確認が出て、「適用する」で追加されます。追加後は最初のページの編集画面が開くので、そのまま文字や画像を差し替えていけます。

  • いまあるページは消えません。テンプレートのページが新しく追加されるだけで、既存のページ・投稿・商品には手を加えません。確認画面にも、追加されるページの件数が表示されます。
  • 同じURLのページがすでにあるときは、番号を付けて追加されます(例:about があれば about-2)。既存のページが上書きされることはありません。
  • 追加されたページは、その時点で公開状態になります(URLを知っていれば読者から見えます)。ナビゲーションに出るかどうかはテンプレートごとに決まっているので、出したくないページは「サイト設定 > メニュー」やページ設定の「公開」タブで調整してください。
  • 配色・フォントは変わりません。テンプレートの配色を使いたいときは、プレビュー画面にある「この配色・フォントをデザインタブで適用する」から、デザインタブの通常の流れ(確認して保存)で適用します。デザインはサイト全体にかかるので、ページの追加とは分けてあります。
  • テンプレートの適用は途中で止まりません。何かの理由で失敗したときは1ページも追加されない(元のまま)ので、安心してやり直せます。

3. パーツを並べて編集する

編集画面は、左に「パーツを追加」、中央に実際の見た目のキャンバス、右に選んだ要素の設定が並ぶ構成です。見たままを編集できます。

ページビルダーの編集画面
  • パーツを追加:左の一覧から、見出し・テキスト・画像・ボタン・カード・カラム・経歴(年表)などの「基本」パーツや、投稿・プラン・ギャラリーなどの「コンテンツ」パーツを、クリックまたはドラッグで追加します。クリックで追加したパーツが入る位置は、そのとき何を選んでいるかで決まります。パーツを選んでいればその直後、セクションを選んでいればその中の末尾、何も選んでいなければページの末尾に新しいセクションができてその中に入ります。位置を自分で決めたいときはドラッグしてください。
  • 選べるパーツの一覧:「基本」は見出し+テキスト・テキスト・見出し・画像・アイコン・ボタン(リンク)・区切り線・カード・カードグリッド・カラム・ビジュアル帯・経歴(年表)、「コンテンツ」はコミュニティヘッダー・コミュニティ紹介・About・ショップ&チケット・投稿・プラン・商品・講座・ギャラリー・FAQ・数値・フォーム・参加ボタンです。コンテンツのパーツは登録済みの中身を自動で並べるので、文章を書き写す必要はありません(商品を追加すれば、そのページの一覧にも自動で増えます)。似ているもので迷いやすいのは次の3つです。コミュニティヘッダーはカバー画像・アイコン・名前・会員数・参加ボタンの定型一式、コミュニティ紹介は紹介文+SNSリンク+紹介画像、Aboutは「サイト設定」のAboutタブに書いた本文をそのまま表示するパーツです。
  • カラムの中にカラムは入れられません。入れようとすると「カラムの中にカラムは追加できません。」と出ます。段組みの中をさらに分けたいときは、カラムの数を増やして調整してください。
  • ビジュアル帯:ページの顔になる、動きのある背景の帯です。演出は波・粒子・流体・オーロラ・メッシュ・星空・グリッド・グレインから選べます(「なし」にすると静かな帯になります)。色・強さ・速さ・高さ・文字の位置は、決められた段階から選ぶ形なので、細かい数値を考えなくても崩れません。ビジュアル帯は1ページに1つまでです。2つめを置こうとすると「ビジュアル演出は1ページに1つまでです。」と出るので、置き換えたいときは先にいまの帯を削除してください。
  • 経歴(年表):年・出来事・説明を縦に並べる、活動の歩みを見せるためのパーツです。置いたあとに選ぶと、右のパネルでエントリの追加・削除・上下の並べ替えができます。年は空欄のままでもかまいません。
  • 数値(コミュニティ統計):いまの実績を数字で見せるパーツです(見出しの初期値は「コミュニティの今」)。出す指標は会員数・総投稿数・総応援数・運営歴・イベント開催数・講座レッスン数・ギャラリー作品数から最大4つ選べます(既定は会員数・総投稿数・総応援数・運営歴)。会員数には「今月 +◯」と当月の増加も添えられます(日本時間の月で数えます)。運営歴は開設から11ヶ月までは「◯ヶ月」、12ヶ月以上は「◯年目」と表示されます。数が0の指標は自動で出ませんので、まだ実績が少ないうちは伸びている指標だけを選ぶのがおすすめです。
  • 要素を選んで編集:キャンバスの要素をクリックすると、右のパネルに編集項目が表示されます。テキストはダブルクリックでその場編集できます。
  • ホームの「キャッチコピー」「紹介文」「コミュニティ紹介」:ホームのヒーローと紹介の文は、ここで編集した内容が公開ページとコミュニティ紹介(About)で共通に使われます。文字数はキャッチコピー120文字・紹介文2,000文字・コミュニティ紹介5,000文字までです。
  • 並べ替え:パーツはドラッグで好きな位置へ動かせます。ドラッグしているあいだは、入る先のセクションやカラムが枠で強調され、掴んでいるパーツ(ゴースト)に「セクション2の中」「先頭に挿入」といった入る位置が表示されるので、狙った場所に落とせます。
  • 表示の確認:上部でパソコン/スマートフォンの表示を切り替えたり、「元に戻す/やり直す」で操作をやり直したりできます(キーボードなら元に戻すは Ctrl+Z(Macは ⌘+Z)、やり直すは Ctrl+Y または Ctrl+Shift+Z です。文字を打っている最中に押したときは、その入力欄の中だけが元に戻ります)。ページ全体にかかわる設定は、右の「ページ設定」にまとまっています。デザイン(セクションどうしの間隔・配色などの見た目)、公開(ナビに表示するか・並び順・URL)、シェア(SNSでシェアされたときのタイトル・説明文・画像。タイトルは120文字・説明文は300文字まで)の3つのタブに分かれていて、ページの削除は「公開」タブのいちばん下にあります。このページだけ別のデザインにすることもできます:「デザイン」タブでページ専用のデザインをオンにすると、その時点のコミュニティのテーマを写し取ってこのページだけの配色・フォントを編集できるようになり、あとからコミュニティのテーマを変えてもこのページには反映されません(オフに戻すと、確認のうえページ専用の設定を破棄してテーマ追従に戻ります)。「シェア」タブのタイトルを空欄にしたときは、「ページ名 | コミュニティ名」が使われます。ホームは常設ページなので「デザイン」タブだけが出ます。

4. AIアシストに手伝ってもらう

キャンバスの右下に浮かんでいる「AIアシスト」ボタンを押すと、やりたいことを言葉で書くだけで、AIが編集案を作ってくれます(もう一度押すと閉じます)。まず対象を「選択中」「ページ全体」「デザイン」から選び(「選択中」はキャンバスで要素を選んでいるときに使えます。パネルを開いたままでも要素を選べます)、「この見出しをもっと短く」「料金セクションを追加して」「もっと明るい雰囲気に」のように指示を書いて「AIで提案を作る」を押します。提案が始まるとパネルはいったん畳まれ、キャンセルすると開き直します。

  • 提案はいったんプレビュー:AIの案はキャンバスにそのまま表示され、「AIの提案をプレビュー中」という帯が出ます。気に入れば「反映」、やめるなら「キャンセル」で元に戻せます(案が複数あるときは、帯のボタンで見比べられます)。
  • できること:文章の書き換え、パーツ(セクション)の追加、配色・フォント・角丸といったデザインの調整です。ページが壊れないよう、AIが行える操作はあらかじめ決められた範囲に限られています。
  • ポイント:実行するとAIポイントを消費します(目安0.1〜2pt)。設定でご自身のAPIキーを登録している場合は、ポイントを消費しません。
  • 使えないと表示されたとき:当月のポイントを使い切ると「今月のAIポイント枠を使い切りました」、ナカーマ側でポイントの計算に使う情報が止まっているあいだは「一時的に利用できません」と表示され、提案を作れません。どちらもご自身のAPIキー(BYOK)を登録すれば、その場から使えますヘルプ記事「AIポイントと追加購入」)。このボタンを使えるのは、オーナー・管理者・編集のロールです(経理・サポートのロールでは、ページの編集自体ができません)。

「反映」を押した時点では、まだキャンバス上の変更です。次の手順で保存・公開してください。

5. 下書き保存して公開する

編集した内容は、まず「下書き保存」で未公開のまま保存できます(公開中のページの見た目は変わりません)。上部の「プレビュー」を押すと、下書きが自動で保存され、公開後の見え方が新しいタブで開きます(このプレビューは運営者にだけ表示され、読者や検索結果には出ません)。「プレビュー用のタブを開けませんでした。ポップアップを許可してください。」と出たときは、ブラウザが新しいタブの表示をブロックしています。アドレスバー横に出るブロックの通知から、このサイトのポップアップを許可してもう一度押してください。よければ「変更を公開」を押すと、公開ページにそのまま反映されます。やり直したいときは「変更を破棄」で保存前の状態に戻せます。

保存しないまま別の画面へ移ろうとすると、「保存していない編集内容があります。このページを離れると失われます。離れますか?」という確認が出ます。ブラウザの「戻る」やタブを閉じたときも同じで、うっかり組み立てた内容を失わないようになっています。そのまま離れると編集は残りませんので、途中でやめるときは「下書き保存」を押してからにしてください。

組み立てた公開ホームページ

公開すると、組み立てた内容がそのまま公開ページに並びます。まずはヒーローと紹介文を整えるところから始め、慣れてきたらパーツを足して自分らしいページに仕上げていきましょう。

色やロゴなど全体の見た目はヘルプ記事「サイトのデザインを変える」、SNSでシェアされたときの見え方はヘルプ記事「SNSでシェアされたときのカード画像(OGP)」で調整できます。