# ビジュアルエディター

文書を書き、対応するコンポーネントを編集し、ソースに切り替えます。

## 文書を開く

Content から Markdown・MDX の項目を開きます。文書の上の切り替えで Visual または Source を選びます。ビジュアル編集用に解析できない場合は、Source で修正してください。

## コンテンツの挿入と書式設定

`/` を入力すると挿入メニューが開きます。利用できるブロックはコレクションのプロファイルによって異なります。文章を選択すると書式の操作が表示され、ブロックにカーソルを合わせると移動ハンドルやメニューが現れます。

メインツールバーでは、元に戻す・やり直し、画像の選択ができます。各ブロックには、表の行メニューやコールアウトの種類など、専用の操作があります。[Markdown の基本](/docs/ja/editor/markdown/)と各 MDX コンポーネントのガイドをご覧ください。

<figure>
  <video
    src="https://media.prosefly.com/_video/visual-editor-1.mp4"
    width="1920"
    height="1080"
  ></video>
  <figcaption>ビジュアルモードで Markdown と Steps コンポーネントを編集。</figcaption>
</figure>

## 属性、目次、集中モード

Properties には、タイトル、日付、タグなど、コレクションのスキーマが公開する frontmatter の項目が表示されます。Outline から文書内の見出しへ移動できます。集中モードでは本文の領域が広がり、狭い画面では属性がドロワーで開きます。

Starlight コレクションでは、対応する標準の項目が Properties に表示されます。下の例では、タブと補足を含むガイドの横に Pagefind、Template、Edit URL、Head などを表示しています。編集できる属性は、コレクションのスキーマとエディタープロファイルによって異なります。

<figure>
  <img
    src="/images/screenshots/starlight/properties.png"
    alt="Prosefly で開いた Starlight の Getting Started ガイド。本文のタブと補足、Pagefind などの標準項目を含む属性パネルを表示しています。"
    width="2880"
    height="1620"
    loading="lazy"
    decoding="async"
  />
  <figcaption>
    Starlight の例。本文と対応する標準のページ属性を、同じ画面で編集できます。
  </figcaption>
</figure>

## サイトのナビゲーション

**Outline** は現在の文書内の見出しです。**Navigation** は、コレクションで対応するナビゲーションとの関連付けを確認すると、サイトのページ構成を表示します。

Navigation では、書き込み可能な既存のグループにページを配置し、対応する順番を変更できます。レビューを開く前に、ナビゲーションの保存完了を待ってください。配置の保存で Git にコミットすることはありません。

パネルと操作の流れは[サイトのナビゲーションを管理する](/docs/ja/repositories-and-spaces/#サイトのナビゲーションを管理する)を参照し、公開前には[本文とナビゲーションを一緒に確認する](/docs/ja/publishing/#本文とナビゲーションを一緒に確認する)をご覧ください。

## ソースで作業する

Source には frontmatter、MDX の import、独自の構文を含むファイル全体が表示されます。専用のビジュアル操作がない内容に使ってください。ローカルの復元を促す表示が出た場合は、現在の共有文書と内容を比べてから復元します。

## 保存して確認する

ビジュアル編集は自動保存されます。移動する前に保存済みの状態を確認してください。macOS の `⌘S`、その他の環境の `Ctrl+S` は、ローカルのソースをバックアップし、共有の下書きを保存します。Git にコミットはしません。

下書きが整ったら[公開前レビュー](/docs/ja/publishing/)を開きます。ソースの差分と、影響するナビゲーションのファイルを確認して公開してください。

## AI ライティングと翻訳

1つのブロック内の文章を選択して、書き換えやスペル・文法チェックを行えます。[AI ライティング](/docs/ja/editor/ai-writing/)では、直接の置換、個別の校正提案、クレジットを説明します。設定済みの別の言語で記事全体を作るには、[言語と翻訳](/docs/ja/languages-and-translation/)をご覧ください。どちらも下書きの変更として作成され、公開前に確認できます。
