---
modificationDate: June 13, 2026
title: ステータスバー、スプラッシュスクリーン、アプリアイコンを設定する
description: このチュートリアルでは、ステータスバー、アプリアイコン、スプラッシュスクリーンを設定する基本を学びます。
---

<AgentInstructions>

## Submitting Feedback

If this page contains errors, outdated information, or gaps that blocked you from completing a task, report it so the docs can be improved:

curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/ja/tutorial/configuration/","feedback":"🤖 Agent feedback for docs: <specific, actionable description> (<model>, <harness>)"}'

Only submit when you have something specific and actionable to report. Replace <model> with the model you are running as and <harness> with the tool you are running in (for example, Claude Code, Cursor, Codex CLI).

</AgentInstructions>

# ステータスバー、スプラッシュスクリーン、アプリアイコンを設定する

このチュートリアルでは、ステータスバー、アプリアイコン、スプラッシュスクリーンを設定する基本を学びます。

> For the complete documentation index, see [llms.txt](/llms.txt). Use this file to discover all available pages.

この章では、アプリストアへのデプロイ前に、ステータスバーのテーマ設定、アプリアイコンとスプラッシュスクリーンのカスタマイズなど、アプリの細部を整えていきます。

[視聴：ユニバーサル Expo アプリの仕上げを行う](https://www.youtube.com/watch?v=OgGCYdElcZo) — アプリストアへのデプロイ前に、ステータスバーを設定し、アプリアイコンをカスタマイズし、スプラッシュスクリーンを準備します。

## ステータスバーを設定する

[`expo-status-bar`](/versions/latest/sdk/status-bar) ライブラリは、`create-expo-app` で作成したすべてのプロジェクトにあらかじめインストールされています。このライブラリは、アプリのステータスバーのスタイルを設定するための `StatusBar` コンポーネントを提供します。

**app/_layout.tsx** で次の手順を行います。

1.  `expo-status-bar` から `StatusBar` をインポートします。
2.  `StatusBar` と既存の `Stack` コンポーネントを [React の Fragment コンポーネント](https://react.dev/reference/react/Fragment) でまとめます。

```tsx
import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';

export default function RootLayout() {
  return (
    <>
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      </Stack>
      <StatusBar style="light" />
    </>
  );
}
```

それでは、Android と iOS でアプリの様子を見てみましょう。

## アプリアイコン

プロジェクト内の **assets/images** ディレクトリに **icon.png** ファイルがあります。これがアプリアイコンです。1024px × 1024px の画像で、見た目は次のとおりです。

スプラッシュスクリーン画像と同様に、**app.json** ファイルの `"icon"` プロパティでアプリアイコンのパスを設定します。デフォルトでは、新しい Expo プロジェクトには `"./assets/images/icon.png"` という正しいパスが設定されているため、何も変更する必要はありません。

> アプリストア向けにアプリをビルドする段階になると、[Expo Application Services (EAS)](/eas) がこの画像を使って、各デバイスに最適化されたアイコンを生成します。

アプリアイコンは Expo Go のさまざまな場所で確認できます。次は Expo Go の開発者メニューに表示されるアプリアイコンの例です。

## スプラッシュスクリーン

スプラッシュスクリーンは、アプリのコンテンツが読み込まれる前に表示されます。アプリアイコンのような小さな画像を中央に配置し、アプリのコンテンツが表示できる状態になると非表示になります。

[`expo-splash-screen`](/versions/latest/sdk/splash-screen) プラグインは、`create-expo-app` で作成したすべてのプロジェクトにあらかじめインストールされています。このライブラリは、スプラッシュスクリーンを設定するためのコンフィグプラグインを提供します。

**app.json** では、アプリアイコン ([ダウンロード可能なアセット](/ja/tutorial/create-your-first-app#download-assets) に含まれます) をスプラッシュスクリーン画像として使用するように、`expo-splash-screen` プラグインが次のスニペットですでに設定されています。何も変更する必要はありません。

```json
{
  "plugins": [
    ... 
    [
      "expo-splash-screen",
      {
        "image": "./assets/images/splash-icon.png"
        ... 
      }
    ]
  ]
}
```

ただし、**スプラッシュスクリーンをテストするには、Expo Go や [開発ビルド](/develop/development-builds/introduction) は使用できません**。テストするには、アプリのプレビュービルドまたはプロダクションビルドを作成する必要があります。スプラッシュスクリーンの設定とテスト方法の詳細については、次のリソースを参照してみてください。

-   [スプラッシュスクリーンアイコンの作成](/develop/user-interface/splash-screen-and-app-icon#splash-screen) ガイドで、スプラッシュスクリーンアイコンの設定方法を確認できます。
-   プレビュービルドの作成方法については、EAS チュートリアルの [内部配布](/tutorial/eas/internal-distribution-builds) ガイドを参照してください。プロダクションビルドを作成する場合は、[Android](/tutorial/eas/android-production-build) と [iOS](/tutorial/eas/ios-production-build) のガイドを参照してください。

## まとめ

第 9 章：ステータスバー、スプラッシュスクリーン、アプリアイコンを設定する

おつかれさまでした！同じコードベースから Android、iOS、web で動作するアプリを作り上げました。

次のセクションでは、ここで扱った概念や軽く触れたトピックについて、さらに詳しく学べるリソースを紹介します。

[次へ：学習リソース](/ja/tutorial/follow-up)