Visual Editor: サイトを直接編集

#開く

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

#変更するものを選ぶ

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

右クリックメニュー

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

#文字とリンク

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

#見た目

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

色はサイト独自のロールで、独自の色は持たないため、サイトの統一が保たれます。パネルで設定できないクラスはそのまま保持され、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 で公開中に戻します。下書きは残ります。バージョン、元に戻す、やり直しをご覧ください。

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