SITE BUILDER GUIDE

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

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

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

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

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

1

はじめる

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

画面の見方

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

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

作業を速くする道具

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

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

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

基本

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

レイアウト

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

コンテンツ

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

メディア

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

操作・動き

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

販売・EC / 会員・交流

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

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

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

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

このガイドは機能追加にあわせて更新されます(最終更新: 2026-08-06(部品90種類以上・テンプレート/セクション集・レイヤー/整列/グループ・SEO/OGP/ファビコン設定を追記し、ヘルプセンターへの入口を追加))。

4

ページを増やす

  • 左パネルの「+ ページを追加」で何ページでも作成できます(最大20ページ)
  • ページ名の変更(✎)、並べ替え(↑↓)、削除(×)はページ一覧から
  • ボタンの「リンク先」で「ページへ」を選ぶと、サイト内の別ページへ移動するボタンが作れます
  • ページごとに背景(色・グラデーション・画像)と高さを設定できます
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アカウントにつき10サイトまで、各サイト20ページまで作成できます。
公開したサイトはスマホでも見られますか?
はい。訪問者の画面幅に合わせて、PC用・スマホ用レイアウトが自動で切り替わります。
フォームの送信内容はどこに届きますか?
サイト作成者(あなた)のDiscordのDMに届きます。nibot serviceのBotからのDMを受け取れるようにしておいてください。
AIが思い通りに編集してくれません
対象を選択してから指示する、「〜のセクションだけ」「文字は変えずに」など条件を具体的に伝えるのがコツです。失敗してもCtrl+Zで戻せます。
細かい操作方法がわかりません
AIパネルで直接質問できます(例:「ボタンに影をつけるには?」)。質問もクレジットを消費します(1回3円〜の従量制)。

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

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