SITE BUILDER GUIDE

サイトビルダー使い方ガイド

自由なキャンバスにオブジェクトを置いて、あなただけのサイトを作ろう。
困ったらAIに話しかければ、デザインも編集もぜんぶ手伝ってくれます。

ビルダーを開く → ヘルプセンターで調べる

知りたいことは、ヘルプセンターで検索

このガイドは全体の流れをつかむためのものです。1つの機能をくわしく知りたいときは、ヘルプセンターの記事が早いです。
機能の名前でも「文字が切れる」のような困りごとの言葉でも探せます(ホバー=カーソル=マウスを乗せた時、のような言い換えにも対応しています)。

1

はじめる

サイトビルダーはウルトラプラン(2,200円・買い切り)の機能です。お支払いはPayPay、Discordアカウントでログインすればすぐ編集画面が開きます。

ダッシュボードにログインして「サイト作成」タブを開くか、上の「ビルダーを開く」ボタンを押します。
「新しいサイトを作成」を押すと、テンプレートページ付きのサイトが用意されます。
あとは自由に編集するだけ。右パネルでサイトURLを設定して保存すれば、いつでも公開できます。
2

画面の見方

  • 上部バー — サイト名の変更、PCスマホ表示切替、ズーム、元に戻す/やり直す、プレビュー、保存、公開、AI編集
  • 左パネル部品ページテンプレートの3つのタブに分かれています。部品タブは部品をカテゴリ別に一覧・検索・お気に入り(中はさらに「部品」「ページの型」に分かれます)、ページタブはページの一覧・追加・並べ替え、テンプレートタブに「テンプレートから始める」「リッチフッターを挿入」「部品セットから挿入」が並びます。タブの下(左パネルの一番下)には「▶ 画面の使い方ツアー」「詳しいガイドを開く」「ヘルプセンターで調べる」がいつでも出ています
  • 中央キャンバス — サイトの編集エリア。ドラッグで移動、四隅のハンドルでサイズ変更、空白をドラッグすると範囲選択(複数選択)
  • 右パネル — 何も選択していないときはサイト・ページ設定、オブジェクト選択中はそのオブジェクトの詳細設定

よく使うショートカット: Ctrl+S 保存 / Ctrl+Z 元に戻す / Ctrl+D 複製 / Delete 削除 / 矢印キー 1pxずつ移動(Shiftで10px) / Ctrl+G グループ化(Ctrl+Shift+Gで解除) / Ctrl+Shift+CCtrl+Shift+V 見た目だけコピー&貼り付け

作業を速くする道具

  • ゼロから作らない — 左パネルのテンプレートタブにある「テンプレートから始める」で、複数ページ+リッチフッター入りのサイトが一式そろいます。同じタブの「部品セットから挿入」なら、ヒーローやお客様の声などを1ブロックずつ足せます。1ページ分まるごとの完成形がほしいときは部品タブの「ページの型」です。適用したあとも自由に編集でき、Ctrl+Zで元に戻せます
  • ピタッと揃える — 部品を動かすとガイド線が出て、他の部品の端・中央や等間隔の位置に吸い付きます(Altを押している間だけ吸着を切れます)
  • レイヤーパネル — 重なり順の入れ替え、左揃え/中央/等間隔などの整列、グループ化、動かしたくない部品のロック、方眼(グリッド)表示ができます
  • 右クリックメニュー — 部品の上で右クリックすると、複製・削除・重なり順・ロックなどをその場で選べます
  • 迷ったらツアー — 左パネルの一番下(タブを切り替えても消えません)にある「▶ 画面の使い方ツアー」で、画面の各部分を順番に案内します
3

オブジェクト(90種類以上・続々追加中)

左パネルの「オブジェクト」タブに、部品がカテゴリ別に並んでいます。検索ボックスで名前から探せて、よく使うものは星マークでお気に入りに固定できます。ボタンにカーソルを合わせると実物プレビューが表示され、置いたときのアニメーションもその場で確認できます。カテゴリの「すべて表示」や「すべてのオブジェクトを見る」で全種類の一覧が開きます。

基本

テキスト・見出し・画像・ボタン・図形・アイコン。文字はグラデ文字・縁取り・文字影・蛍光マーカー・縦書きの装飾ができます。

レイアウト

ナビバー・セクション区切り・余白・表・HTML。ページの骨組みづくりに。

コンテンツ

箇条書き・お客様の声・バッジ・星評価・実績数値・料金表・タイムライン・手順・プロフィールなど、訴求の定番部品。

メディア

ギャラリー・画像スライダー・比較スライダー・動画・背景動画・地図。画像はフィルタや円形切り抜きも。

操作・動き

タブ切替・開閉パネル・ツールチップ・告知バー・上へ戻る・シェアボタン・追従ボタン・読了バー・QRコードなど。

販売・EC / 会員・交流

商品一覧・フリマ(どちらも自動で伸びる+ページ切り替え対応)・フォーム(1行/メール/複数行に加えプルダウン・ラジオ・チェック・日付・電話・数値の9種類、同意チェックと送信後の自動移動も設定可)・アカウント・DM・チャット・SNSリンク。

共通のスタイル設定と「効果」

すべてのオブジェクトで 背景/角丸/枠線/影/透明度/回転/ぼかし に加えて、ホバー演出(浮く・光るなど)/スクロールで現れるアニメ/背景画像 を設定できます。背景CSS欄には linear-gradient(120deg,#2977f2,#1fd8f9) のようなCSSもそのまま書けます。

商品一覧のヒント: 商品が増えると枠が自動で下に伸び、「1ページの件数」を超えるとページ切り替えになります(設定で従来の枠内スクロールにも変更可)。

このガイドは機能追加にあわせて更新されます(最終更新: 2026-08-10(部品95種類・テンプレート/部品セット・レイヤー/整列/グループ・SEO/OGP/ファビコンに加え、販売・会員(商品一覧/PayPay決済/Discord自販機連携/フリマ/DM/チャット/フォーム)と、テーマ・まとめて変更・検索置換・バージョン履歴・健康診断を追記。ヘルプセンターの7分類すべてに入口をそろえました。2026-08-10に、旧称「セクション集から挿入」を画面と同じ「部品セットから挿入」に統一し、左パネルの説明を現在のタブ構成(部品/ページ/テンプレート)に合わせました))。

4

ページを増やす

  • 左パネルの「+ ページを追加」で何ページでも作成できます(最大30ページ)
  • ページ名の変更(鉛筆マーク)、並べ替え(↑↓)、削除(×)はページ一覧から
  • ボタンの「リンク先」で「ページへ」を選ぶと、サイト内の別ページへ移動するボタンが作れます
  • ページごとに背景(色・グラデーション・画像)と高さを設定できます
5

PC表示とスマホ表示

上部バーの PCスマホ 切替で、それぞれの見た目を別々にデザインできます。訪問者には画面サイズに合わせて自動で切り替わります。

  • PCで作ってから、ページ設定の「PC配置 → スマホへ自動反映」を押すと、スマホ用レイアウトを自動生成できます(そこから微調整がおすすめ)
  • オブジェクト単位でも「スマホへ反映」ボタンで個別にコピーできます
  • 「PC表示/スマホ表示」のチェックを外すと、その画面サイズでは非表示にできます
6

保存・プレビュー・公開

保存 — 上部バーの保存ボタンか Ctrl+S。編集中は60秒ごとに自動保存もされます。
サイトURLを設定 — 右パネル(何も選択していない状態)で好きなURLを入力して保存。
公開URLは nibot-free-panel.pages.dev/site/あなたのURL になります。
プレビュー — 公開前でも「プレビュー」ボタンで実際の見た目を確認できます(自分にだけ見えます)。
公開 — 上部バーの「非公開」ピルを押すと公開中に。もう一度押せばいつでも非公開に戻せます。

公開する前に整えておくと良いもの

右パネル(何も選択していない状態)のサイト設定で、検索結果やSNSに出たときの見た目を決められます。

  • SEO説明 — 検索結果に出る説明文。空のときはサイト説明が使われます
  • OGP画像 — LINEやXにURLを貼ったときに出るサムネイル画像
  • ファビコン — ブラウザのタブに出る小さなアイコン

直したのに公開ページが変わらないときは、保存してから公開中になっているかを確認してください。

7

AI編集 — 話しかけるだけでデザイン

「AIで編集」ボタンでアシスタントを開く

やりたいことを日本語で送るだけで、AIがサイトのJSONを直接編集します。使い方がわからないときの質問もOK。

「全体をカフェ風の落ち着いたデザインにして」
「料金プランを3つ並べるセクションを追加して」
「もっと高級感のある配色にして」

範囲を指定して編集:キャンバスでオブジェクトを選択(クリック/空白ドラッグで囲む)してから指示すると、その部分だけを編集してくれます。

初回特典:100円分のクレジットを無料プレゼント
  • AIへの指示は 1回 3円〜の従量制(使うAIモデルと編集の規模で変わります。無料分でおよそ20〜30回ためせます)
  • 残高が足りなくなったら、AIパネル内またはダッシュボードからPayPayでチャージ(100円単位)
  • AIの編集内容が気に入らなければ Ctrl+Z ですぐ元に戻せます
8

お店を出す・会員を集める

商品を売る

  • 商品一覧のオブジェクトを置いて商品を登録します。商品が増えると枠が自動で下に伸び、「1ページの件数」を超えるとページ切り替えになります
  • 注文の受け取りと、PayPayでの自動決済に対応しています
  • Discordで自販機を使っている場合は、在庫を連携して同じ商品をサイトからも売れます

会員とやりとりする

  • 会員登録・ログインをサイトに付けられます
  • フリマを置くと、会員どうしで売り買いできます
  • DMで会員と個別に、チャットで訪問者の相談を受けられます
  • お問い合わせフォームは9種類の入力(1行・メール・複数行・プルダウン・ラジオ・チェック・日付・電話・数値)に対応し、同意チェックや送信後の自動移動も設定できます
9

まとめて整える・元に戻す

1つずつ直すと大変な作業を、まとめて片づける道具がそろっています。

  • テーマ — サイト全体の色・フォント・角丸・影をまとめて決められます
  • まとめて変更 — 複数の部品を選んで、色や文字の設定を一度に変えられます
  • 検索・置換 — サイト内の文字をまとめて探して置き換えます(社名や価格の書き換えに)
  • バージョン履歴Ctrl+Zで戻しきれないときも、前の状態に戻せます
  • 健康診断 — リンク切れや空の項目など、公開前に直したい点を洗い出します
10

よくある質問

サイトはいくつまで作れますか?
1アカウントにつき10サイトまで、各サイト30ページまで作成できます。
公開したサイトはスマホでも見られますか?
はい。訪問者の画面幅に合わせて、PC用・スマホ用レイアウトが自動で切り替わります。
フォームの送信内容はどこに届きますか?
サイト作成者(あなた)のDiscordのDMに届きます。nibot serviceのBotからのDMを受け取れるようにしておいてください。
AIが思い通りに編集してくれません
対象を選択してから指示する、「〜のセクションだけ」「文字は変えずに」など条件を具体的に伝えるのがコツです。失敗してもCtrl+Zで戻せます。
細かい操作方法がわかりません
AIパネルで直接質問できます(例:「ボタンに影をつけるには?」)。質問もクレジットを消費します(1回3円〜の従量制)。

ここに載っていないことは、ヘルプセンターへ

1つの機能につき1本の記事で、手順つきで説明しています。検索でも、分類からでも探せます。

困ったときは運営に相談