> ## Documentation Index
> Fetch the complete documentation index at: https://craft-support.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# アプリスタイル

> ドキュメントのスタイルをアプリのインターフェイスに反映させ、より没入感があり一貫した編集体験を実現します。

アプリスタイルでは、ドキュメントの色を周囲のアプリインターフェイスに反映させることで、より統一された没入感のある編集体験を作ります。有効にすると、sidebar、toolbar、その他の UI 要素がドキュメントのテーマを反映します。

## アプリスタイルとは

アプリスタイルは、ドキュメントの**テキストと背景色**をCraftのインターフェイスの一部に適用します。これにより、コンテンツと編集環境の視覚的一貫性が生まれます。

### 比較例

**アプリスタイル無効時:**

<img src="https://mintcdn.com/craft-support/L5zMoIm2o8A5WVUD/images/write-and-edit/styling/app-styles/en/content/app-style-disabled.png?fit=max&auto=format&n=L5zMoIm2o8A5WVUD&q=85&s=d0045f0dfada83655f5ca289dfe063c5" alt="App with default interface colors" width="1471" height="942" data-path="images/write-and-edit/styling/app-styles/en/content/app-style-disabled.png" />

**アプリスタイル有効時:**

<img src="https://mintcdn.com/craft-support/L5zMoIm2o8A5WVUD/images/write-and-edit/styling/app-styles/en/content/app-style-enabled.png?fit=max&auto=format&n=L5zMoIm2o8A5WVUD&q=85&s=c6cee8bf6aaddfa0ba743cee10ccb138" alt="App with document colors applied to interface" width="1471" height="942" data-path="images/write-and-edit/styling/app-styles/en/content/app-style-enabled.png" />

## 対応プラットフォーム

<Tabs>
  <Tab title="macOS">
    macOS ではアプリスタイルが完全にサポートされています：

    * **Available in**: Editor view only (Home and Browse use system default)
    * **Applies to**: sidebar, toolbar, and UI chrome
    * **Uses**: ドキュメントのテキストと背景色
    * **Fonts**: 可読性とパフォーマンスのため、システムフォントが維持されます
  </Tab>

  <Tab title="iPad">
    iPad ではアプリスタイルが完全にサポートされています：

    * **Available in**: Editor view only (Home and Browse use system default)
    * **Applies to**: sidebar, toolbar, and UI chrome
    * **Uses**: ドキュメントのテキストと背景色
    * **Fonts**: 可読性とパフォーマンスのため、システムフォントが維持されます
  </Tab>

  <Tab title="iPhone">
    iPhone ではまだアプリスタイルは利用できません。将来のアップデートでの提供を予定しています。
  </Tab>
</Tabs>

## アプリスタイルの有効化／無効化

この機能はいつでも切り替えられます：

<Tabs>
  <Tab title="Mac">
    サイドバー上部の**スペース名**をクリックして、設定を開きます。

    <Frame>
      <img src="https://mintcdn.com/craft-support/uCmTok0gNp17u6Tw/images/snippets/open-settings/en/content/mac-space-name.png?fit=max&auto=format&n=uCmTok0gNp17u6Tw&q=85&s=b2a80ae0eb9e67d830298c30f3046f02" alt="サイドバーのスペース名をクリック" width="1473" height="905" data-path="images/snippets/open-settings/en/content/mac-space-name.png" />
    </Frame>
  </Tab>

  <Tab title="Web / Windows">
    <Steps>
      <Step title="Spaceのドロップダウンを開く">
        左上隅の**スペース名**をクリックします。
      </Step>

      <Step title="設定を選択する">
        ドロップダウンの下部にある**設定**をクリックします。

        <Frame>
          <img src="https://mintcdn.com/craft-support/uCmTok0gNp17u6Tw/images/snippets/open-settings/en/content/web-space-dropdown.png?fit=max&auto=format&n=uCmTok0gNp17u6Tw&q=85&s=8fe2f1b7ca147ccd7de2d4851d2857e1" alt="設定オプションが表示されたSpaceドロップダウン" width="1426" height="967" data-path="images/snippets/open-settings/en/content/web-space-dropdown.png" />
        </Frame>
      </Step>
    </Steps>
  </Tab>

  <Tab title="iOS">
    <Steps>
      <Step title="Spaceアイコンをタップする">
        左上隅の**スペースアイコン**をタップします。

        <Frame>
          <img src="https://mintcdn.com/craft-support/uCmTok0gNp17u6Tw/images/snippets/open-settings/en/content/ios-space-icon.png?fit=max&auto=format&n=uCmTok0gNp17u6Tw&q=85&s=82ed814971491d12743fb924294f595a" alt="左上隅のSpaceアイコン" width="731" height="1568" data-path="images/snippets/open-settings/en/content/ios-space-icon.png" />
        </Frame>
      </Step>

      <Step title="設定を開く">
        **設定**をタップします。
      </Step>
    </Steps>
  </Tab>

  <Tab title="Android">
    <Steps>
      <Step title="プロフィール写真をタップする">
        右上隅の**プロフィール写真**をタップします。
      </Step>

      <Step title="設定を開く">
        **設定**をタップします。

        <Frame>
          <img src="https://mintcdn.com/craft-support/uCmTok0gNp17u6Tw/images/snippets/open-settings/en/content/android-profile-menu.png?fit=max&auto=format&n=uCmTok0gNp17u6Tw&q=85&s=04626672ba7545613f9b039a5d363698" alt="設定オプションが表示されたプロフィールメニュー" width="703" height="1567" data-path="images/snippets/open-settings/en/content/android-profile-menu.png" />
        </Frame>
      </Step>
    </Steps>
  </Tab>
</Tabs>

<Steps>
  <Step>
    **Appearance and Sound** に移動します
  </Step>

  <Step>
    **"Use document style for the app"** をオンまたはオフに切り替えます
  </Step>
</Steps>

<img src="https://mintcdn.com/craft-support/L5zMoIm2o8A5WVUD/images/write-and-edit/styling/app-styles/en/content/app-style-settings.png?fit=max&auto=format&n=L5zMoIm2o8A5WVUD&q=85&s=ec1daf872b856910d3a8deedbfaf8873" alt="App Style toggle in settings" width="1112" height="812" data-path="images/write-and-edit/styling/app-styles/en/content/app-style-settings.png" />

## アプリスタイルを使う理由

アプリスタイルには次のような利点があります：

* **没入感の向上** - 視覚的に統一された環境を作ります
* **ムードの一致** - インターフェイスをコンテンツのトーンに合わせます
* **注意の分散を減らす** - コンテンツとインターフェイス間の視覚的な断絶を最小化します
* **パーソナライズ** - Craft を自分専用の作業空間のように感じられるようにします

## 制限事項

<Info title="アプリスタイルで変更されない点">
  * **フォント** - UI は可読性のため引き続きシステムフォントを使用します
  * **その他のビュー** - Home、Browse、その他のセクションはデフォルトの UI を使用します
  * **プラットフォーム** - 現時点では iPhone では利用できません
</Info>

## 関連記事

<CardGroup cols={2}>
  <Card title="スタイルのクイックガイド" href="/ja/write-and-edit/styling/quick-guide">
    すべてのスタイリング機能を網羅したガイド
  </Card>

  <Card title="デフォルトスタイル" href="/ja/write-and-edit/styling/default-styles">
    好みのスタイルをデフォルトに設定する方法
  </Card>

  <Card title="カバー画像" href="/ja/write-and-edit/styling/cover-images">
    ドキュメントのカバー画像をカスタマイズする
  </Card>
</CardGroup>