エムスタ

アプリの作り方

アプリ基本設定

アプリ名・アイコン・スプラッシュ画面・カラーパレットなど、アプリの基本的な見た目と情報を設定する方法を解説します。

  • #モバイルUI
  • #アプリ設定
  • #ブランド

アプリ基本設定では、アプリの名前やアイコン、カラーパレットなど、アプリ全体の見た目に関わる重要な設定を行います。この設定はアプリストアでの表示やユーザーの第一印象に直結するため、慎重に設定しましょう。

アプリ基本設定画面へのアクセス

  1. ダッシュボードにログインし、左サイドバーの 「構築」 をクリックします
  2. 展開されたメニューから 「モバイルUI」 をクリックします
  3. さらに表示されるサブメニューから 「アプリ設定」 を選択します
  4. アプリ基本設定画面(/build/mobile-ui/app-settings)が表示されます

アプリ基本設定画面

アプリ名の設定

画面上部の 「アプリ名」 フィールドに、アプリの表示名を入力します。この名前はアプリのホーム画面アイコンの下やアプリストアの一覧に表示されます。

  • 推奨文字数: 12文字以内(長すぎると端末によって省略表示されます)
  • 日本語・英語・数字・記号が使用できます
  • アプリ名はいつでも変更可能ですが、ストアに反映するには再ビルドが必要です

アプリアイコンの設定

アプリアイコンはユーザーの端末ホーム画面やアプリストアに表示される重要なビジュアル要素です。

  1. 「アプリアイコン」 セクションを見つけます
  2. 「画像をアップロード」 ボタンをクリックします
  3. ファイル選択ダイアログが表示されるので、アイコン画像を選択します
  4. アップロード後、プレビューが表示されます

アイコン画像の要件

  • サイズ: 1024×1024px(正方形)
  • フォーマット: PNG形式を推奨(透過背景も可)
  • 注意: 角丸処理はiOS/Androidが自動的に適用するため、元画像は正方形のまま用意してください
  • ロゴや文字が小さすぎると視認性が低下するため、シンプルなデザインを推奨します

スプラッシュスクリーン画像の設定

スプラッシュスクリーンはアプリ起動時に数秒間表示されるブランディング画面です。

  1. 「スプラッシュスクリーン」 セクションまでスクロールします
  2. 「画像をアップロード」 ボタンをクリックします
  3. スプラッシュ画像を選択してアップロードします
  4. プレビューで表示を確認します
  • 中央にロゴを配置し、背景色はカラーパレットのプライマリカラーに合わせると統一感が出ます

カラーパレットの設定

カラーパレットはアプリ全体のデザインテーマを決定します。

プライマリカラー(メインカラー)

  1. 「プライマリカラー」 のカラーピッカーをクリックします
  2. カラーパレットからお好みの色を選択するか、HEXカラーコード(例: #FF5722)を直接入力します
  3. この色はヘッダーバー、ボタン、リンクテキストなどアプリ全体の主要な要素に適用されます

アクセントカラー

  1. 「アクセントカラー」 のカラーピッカーをクリックします
  2. プライマリカラーと調和しつつ、目立つ色を設定します
  3. アクセントカラーはCTAボタンや通知バッジなど、ユーザーの注目を集めたい要素に使用されます

背景色

  1. 「背景色」 のカラーピッカーをクリックします
  2. コンテンツの読みやすさを考慮して、白(#FFFFFF)や薄いグレー(#F5F5F5)など明るい色を推奨します

アプリ説明文の設定

「アプリ説明」 テキストエリアに、アプリの概要や特徴を記述します。この説明文はアプリストアの掲載情報として使用される場合があります。

  • 簡潔かつ魅力的な文章で記述してください
  • ユーザーがアプリをダウンロードしたくなるような内容を心がけましょう

設定を保存する

すべての設定が完了したら、画面右上の 「保存」 ボタンをクリックして変更を保存します。保存後、プレビュー画面で実際の表示を確認できます。

設定変更はすぐにプレビューに反映されますが、公開中のアプリに反映するには再ビルド・再デプロイが必要です。

この記事は役に立ちましたか?

アプリ制作を、もっと自由に。

まずは2週間無料トライアルで、エムスタの管理画面・CMS・モードの違いを体験してください。