---
title: "Visual Editor: サイトを直接編集 | Briks"
url: https://briks.dev/ja/docs/visual-editor
description: "AIホームページ作成ツール。ページ上をクリックして文章やリンク、画像、デザイン、セクション、ページを変更。チームで編集し、クレジットを使わず公開できます。"
last_updated: 2026-10-08
---

# Visual Editor: サイトを直接編集

Visual Editorは、デザインツールのように、パネルの横にサイト本来のページを開きます。何かをクリックすると、その文章、リンク先、画像、スマートフォン・タブレット・デスクトップでの見た目を変えられます。要素、セクション、ページの追加、移動、コピー、非表示もでき、サイト全体の色や書体も設定できます。変更はチームで共有する下書きに保存され、公開すると反映されます。クレジットは使いません。有料プランに含まれます。

読了時間 10 分 2026年10月8日にスタジオで確認済み

## 開く

どこで

1. Projects
2. Your project
3. Visual Editor

**Visual Editor** タブは、有料プランのワークスペースで **Studio** の隣に表示されます。Freeでは表示されません。エディタはウィンドウいっぱいに広がり、左上の矢印でプロジェクトに戻れます。上部には次のものが並びます。

| バーの中 | できること |
| --- | --- |
| **Open layers** | ページをセクションごとに表示する **Layers** を開閉します。 |
| **Pages** | 作業するページを選び、ページの追加、名前の変更、移動、削除ができます。 |
| **Add** | 要素またはセクションを追加します。Aキーでも同じ操作ができます。 |
| 元に戻す・やり直しの矢印 | 変更を前後に戻ったり進めたりします。⌘Z と ⇧⌘Z でも同じ操作ができます。 |
| **Changes** | 公開を待っている変更を一覧にし、それぞれに **Drop this change** が付きます。 |
| **Comments** | ページ上の要素に固定されたコメントです。 |
| **History** | サイトのバージョンです。確認したり、元に戻したりできます。 |
| **Publish** | たとえば **Publish 3 changes** と表示されます。下書きを公開します。 |
| **Desktop**、**Tablet**、**Phone** | ページを表示する幅です：1440、834、390ピクセル。 |
| **ページを使う** | サイトのクリックを有効にして、メニューやポップアップを開き、その中で選べるようにします。P を押すと編集に戻ります。 |
| ⋯メニュー | **Keyboard shortcuts** と **Discard draft**。 |
| **ページを開く** | 公開中のページを新しいタブで開きます。 |

知っておくと便利なこと

Visual Editorが登場する前に公開したサイトは、エディターが読み込めるようになる前に一度公開し直す必要があります。ページに「This page has not answered the editor. Publish the site once, then open the editor again.」と表示されたら、スタジオから一度公開して、もう一度エディターを開いてください。

## 変更するものを選ぶ

- ページ上の好きな場所をクリックするか、**Layers** で探します。行の矢印を開くと、その中身が見えます。ページ上で選ぶと、そこまで自動で開きます。
- パネル上部の階層表示には、選んだ要素がどこにあるかが示されます。階層をクリックするとそちらを選択でき、Escapeでも選択を戻せます。
- Shiftを押しながらクリックすると複数選べます。見た目の変更はすべてに反映されます。
- リストのカードのように同じ要素が繰り返されている場合は、すべてが強調表示され、見た目の変更はすべてに反映されます。文章は各要素ごとに別です。
- どの項目でも右クリックするか、Shift+F10を押すと、メニューが開きます。

### 右クリックメニュー

| 項目 | できること |
| --- | --- |
| **Edit text** | ページ上の文字の上から直接入力します。 |
| **Rewrite with AI** | **Rewrite**、**Shorter**、**Longer**、**Friendlier tone**、**More formal tone**、**Bolder tone** は、それぞれ最大0.20クレジットです。新しい文章を確認してから、**Keep**、**Try again**、**Discard** を選べます。 |
| **Replace picture** または **Replace video** | メディアライブラリから別のものを選びます。 |
| **Alt text…**、**Link…**、**Style…** | パネルのその部分を開きます。 |
| **Ask AI** | **New design for this section**、**Fix the layout**、**Ask about this…**。Ask AI とビルダー をご覧ください。 |
| **Move up**、**Move down**、**Move out of its container**、**Move into the next container** | 隣にあるものの間や、ボックスの内外へ移動できます。 |
| **Select parent**、**Select section** | その中に入る要素、またはセクション全体を選びます。 |
| **Lock** | ページ上で誤って選択されるのを防ぎます。同じ項目で解除できます。 |
| **Duplicate**、**Copy style**、**Paste style** | コピーするか、その見た目をほかの要素に引き継ぎます。 |
| **Show** | **Hide on phone**、**Hide on tablet**、**Hide everywhere** から選べます。 |
| **Section** | **Quick edit section…**, **Add section above…**, **Add section below…**, **Move section up**, **Move section down**, **Duplicate section**, **Section background…** |
| **Comment**、**Check the page…** | コメントを固定するか、ページに問題がないか確認できます。 |
| **Delete** | 削除します。セクション全体の場合は **Remove from page** と表示されます。 |

適用できない項目は薄く表示され、その理由が示されます。入力中は、小さなバーに **Bold**、**Italic**、**Link**、**Line break** が表示されます。

## 文字とリンク

1. 文字をダブルクリック

   場所: Page

   ページ上で直接文字を入力します。Enterで確定、Escapeで元に戻ります。パネルの **Content** から入力することもできます。

2. リンク先を変更

   場所: Link

   リンクやボタンの移動先は、サイトの **Page**、**Section**、**Web address**、**Email**、**Phone** 番号、**File** から選べ、**Open in a new tab** も設定できます。

3. 各幅で確認する

   場所: Bar

   **Desktop**、**Tablet**、**Phone** を切り替えて、文章がどう折り返されるかを確認できます。

メールアドレスや名前など、サイトの詳細情報に保存されている言葉を変えると、表示されているすべての場所で変わり、パネルにはその箇所数が表示されます。エディタは、区切りとして使われたダッシュについて警告して読点を提案し、ボタンの文字が2行に折り返される場合にも警告します。パネルの **Quick edit** では、1つのセクションにあるすべての言葉と画像を1つのフォームに一覧できます。

## 見た目

パネルには **Element**、**Motion**、**Quick edit**、**Site**、**Check** の5つのタブがあります。**Element** の中の **Look** には、**Layout**、**Space inside** と **Space outside**、**Text**、**Fill**、**Stroke**、**Effects** があります。いま見ている幅で設定した値は通常の色で表示され、より小さい幅から引き継がれた値は灰色で表示されます。欄にカーソルを重ねると、クリアボタンが表示されます。

| こんな方に | 操作 |
| --- | --- |
| スマートフォンだけ見出しを小さく | **Phone** に切り替えて、**Text** の下で小さめの **Size** を選びます。タブレットとデスクトップはそのままです。 |
| スマートフォンで非表示にするもの | 右クリックして **Show** を選び、次に **Hide on phone** を選びます。 |
| サイト独自の色 | **Fill** の下でスウォッチをクリックします。それぞれサイトでの表示どおりに描かれ、文字がその背景の上でどれだけ読みやすいかがパネルに表示されます。 |
| 内側の余白を増やす | ページ上の緑のハンドルをドラッグするか、**Space inside** で設定します。そこにある枠のボタンで、各辺を個別に設定できます。 |
| ホバー時の変更 | ルックの上部で **On hover** を選んでから設定します。ページ上でポインタを重ねると確認できます。 |
| 動きのあるもの | **Motion** で、**Fade**、**Rise**、**Slide from the left** などの **Entrance** を選び、**Time** と **Wait** を設定して、**Play** を押すと一度だけ確認できます。 |

色はサイト独自のロールで、独自の色は持たないため、サイトの統一が保たれます。パネルで設定できないクラスはそのまま保持され、**Kept as written** に一覧されます。

**Site** タブでは、すべてのセクションが読み取る設定を行います。**Colours**、見出しと本文の **Type**、**Text styles**、**Buttons**、**Boxes**、そして **Page** の下のモード、角、幅、リズムです。設定の横の×を押すと、サイト本来のデザインに戻ります。

## 追加と配置

- **Add** には **Section**、**Text**、**Heading**、**Button**、**Picture**、**Video**、**Icon**、**Divider**、**Form**、**Embed** があります。1つをクリックすると選んだ場所に追加され、置きたい場所へドラッグすることもできます。
- **Embed** は、他のウェブサイトのページを表示します。Google、YouTube、Vimeo、Spotify、SoundCloud、Calendlyの地図やプレーヤーは、どのサイトでも使えます。それ以外のウェブサイトは、先に **Settings**、**Preferences**、**Allowed websites** で追加する必要があります。
- 2つのセクションの間にある **+ Add section** では、**Designed**（無料。Briksが使うセクションを、サイトの色で作ります）、**Blank**（無料）、または **Generate with AI**（約5クレジット）を選べます。入力した言葉は、変更としてビルダーに送られます。
- **Element** タブの **Picture** では、**Replace from your media** で画像を差し替え、**Alt text** を設定し(または **Decorative, nothing to read aloud** に指定し)、切り抜きと、各幅で表示にとどめる位置を設定できます。**Section background…** では、セクションの背景に色、グラデーション、画像、動画を設定できます。
- 画像の差し替えは下書きに加わり、ほかの変更と一緒に公開されます。
- **Layers** では、ホームページのセクションの行から、上下に移動、コピー、非表示にでき、非表示のセクションは **Hidden from this page** に並び、再表示できます。他のページでは、セクションの行から移動したり、ページから外したりできます。**Rename** はレイヤーに独自の名前を付けます。これはエディタ内だけのもので、公開されることはありません。

## ページ

**Pages** にはサイトのページが一覧されます。**Add page** で、**Title** と **Address** を付けて **Blank page** または **Copy of a page** を作成します。各ページのメニューには、**Search and share** (**Search title**、**Search description**、**Hide from search engines**、**Share picture**)、**Rename**、**Duplicate**、**Move up**、**Move down**、**Hide from menu**、**Delete** があります。ページを削除するときは、そのページへのリンクの代わりの移動先を尋ねられます。ページの変更も、ほかの変更と同じく下書きで待機します。

## 一緒に作業する

- **共有の下書きは1つ。** 変更は1つ行うたびに少し後でプロジェクトの下書きに保存されるので、再読み込みやタブを閉じても、別の端末でも残り、エディタを開く全員に見えます。バーには **Draft saved · not live yet** と、いつ誰が保存したかが表示されます。開いてから他の人が下書きを変更した場合は、続ける前に **Reload** するようバーが求めます。
- **ほかに誰がいるか。** エディタを開いている他の人の顔が、バーに並びます。1人にカーソルを合わせると、その人がいるページと要素が分かります。その人が選んだ要素は、その人の色で枠が付きます。ロックされるものはありません。
- **コメント。** 要素を選んでCを押すか、右クリックして **Comment** を選びます。@を入力すると、人を指定できます。コメントは2,000文字までで、要素に固定され、**Reply**、**Resolve**、**Open again** があります。ワークスペースのメンバーなら、閲覧者も含め誰でもコメントできます。解決できるのは、エディター、管理者、オーナーだけです。ベルは全員に通知し、指定された人にはBriksボットとのチャットにも通知が届きます。

Viewerはエディターを開いて、サイトを見たりコメントしたりできます。ページには「You can look through this site here. Your role in this workspace can't change it.」と表示されます。

## Ask AI とビルダー

新しい要素や別のレイアウトなど、パネルでできないことは、右クリックメニューの **Ask AI** か、**Element** タブの下部にある **Ask the builder** で、選んだ要素についての言葉をビルダーに送れます。これは通常の変更としてクレジットを使います。

- **New design for this section** と **Fix the layout** は、送信前に、作業に通常必要な量とあなたの残高を並べて表示します。たとえば **Design it for about 5 credits** のようにです。変更はStudioのメッセージと同じように制作され、公開されます。元に戻すには **Versions** を使います。
- **Ask about this…** は、ここにある要素についての質問に、何もビルドせず無料で答えます。
- 先に下書きを公開するか破棄してください。ビルダーは公開済みのサイトをもとに作業するため、送信前にエディターから確認が入ります。
- **Picture** の **Write alt text** は、画像の説明がすでに保存されている場合は無料、そうでない場合は最大0.10クレジットです。**Use this** を押すと保存されます。

**Check** タブは、いま表示している幅のページを調べ、alt テキストのない画像、読みにくい文字、順序の乱れた見出し、読み上げ順、名前のないリンクやボタンを見つけます。チェックは無料です。**Uses credits** と表示された修正はビルダーに送られます。

## 公開するか、やめるか

- 公開するまで、何も本番環境には反映されません。下書きには最大300件の変更を保持できます。
- **Publish** は、変更をサイトのコードに書き込み、新しいバージョンとして公開します。通常は30秒ほどで、クレジットは使いません。公開すると下書きは空になります。
- 変更を行えない場合は何も公開されず、エディタがどの変更で、なぜなのかを伝えます。
- **Changes** の **Drop this change** で1件を取り消します。⋯メニューの **Discard draft** は、サイトを編集しているすべての人の分をまとめて破棄し、先に確認します。
- **History** にはサイトのバージョンが並びます。**Preview** は公開されていたときの状態を表示し、**Restore** で公開中に戻します。下書きは残ります。[バージョン、元に戻す、やり直し](https://briks.dev/ja/docs/versions) をご覧ください。

## キーボードショートカット

| キー | できること |
| --- | --- |
| Escape | 要素を入れる先を選ぶか、入力した文字を元に戻します。 |
| 下、左、右の矢印キー | 中の最初の要素か、その隣の要素を選びます。 |
| Enterキーまたはダブルクリック | 要素の文言を入力します。 |
| ⌘B, ⌘I, ⌘K | 入力中に、太字、斜体、リンクを設定できます。 |
| Altキーと上または下の矢印キー | これ、またはそのリスト項目を移動します。 |
| ⌘D, Backspace | 複製または削除できます。 |
| ⌘Alt+C, ⌘Alt+V | スタイルをコピーするか、コピーしたスタイルを貼り付けます。 |
| A, C, P | 追加、コメント、またはページの利用ができます。 |
| ? | ショートカットをすべて表示します。 |

Windowsでは、⌘の代わりにCtrlを使います。

### Visual Editorはクレジットを使いますか?

その中での変更と公開には、クレジットを使いません。使うのはAI関連の項目だけです。文章の書き直し(最大0.20クレジット)、まだ保存されていない代替テキストの作成(最大0.10クレジット)、ビルダーに送った内容(変更として課金されます)です。

### 誰が使えますか?

有料プランのワークスペースにいる全員です。Owner、Admin、Editorは変更と公開ができ、Viewerは閲覧とコメントができます。

### 入力できない文章があるのはなぜですか?

その文章はサイトのコード内で作られているか、ほかの要素の中にあります。各部分を個別に選ぶか、ビルダーに依頼してください。

### 2人で同時に編集できますか?

はい。1つの下書きを共有し、バーでお互いの様子が見えます。開いたあとにほかの人が下書きを変更した場合は、エディタが再読み込みをお願いします。

## 次に読む

- [プロジェクトで作業する **変更を加える** Briksに書いてサイトを変更する方法です。伝え方、画像の追加、変更の内容と費用、内側のページ、順番待ちのリクエスト、うまくいかなかったときの直し方を説明します。](https://briks.dev/ja/docs/making-changes)
- [プロジェクトで作業する **バージョン、元に戻す、やり直し** ビルドや変更はすべて、サイトのバージョンとして保存されます。変更を元に戻す、やり直す、以前のバージョンをそのままの状態で本番環境に戻す、といった操作ができ、クレジットは保留されません。](https://briks.dev/ja/docs/versions)
- [サイトの機能 **メディアライブラリ** ご自身の画像や動画をワークスペースのメディアライブラリに一度アップロードすれば、プロンプトボックスからどのプロジェクトにも配置でき、サイトの画像の差し替えは無料です。](https://briks.dev/ja/docs/media-library)
- [はじめに **クレジットとプラン** Briksのクレジットの仕組み:50と5の確保、作業分の請求、見積もりと待機するビルド、残高ゼロのとき、各プランの内容。](https://briks.dev/ja/docs/credits-and-plans)

まだ解決しませんか?

プロジェクト名と、表示されると思っていた内容を添えて [hello@briks.dev](mailto:hello@briks.dev) までご連絡ください。スクリーンショットがあると助かります。