アプリアイコン

ロボアプリ配信管理画面上で表示される、アイコンの作成方法についてご紹介いたします。

アプリアイコンのデザイン可能範囲について

  1. 1

    1

    青色ゾーンが自由にデザインできるエリアとなります。
    一部であれば、青色ゾーンからデザインがはみ出ることは許容とします。
    ただし、赤色の破線部分までとします。

  2. 2

    2

    デザインが赤色の破線内に収まれば、有効なアイコンです。

  3. 3

    3

    1、2に従っていれば、イラストの形に制限はありません。

アプリアイコンのレイヤーテンプレートについて

  1. 1.イラストレイヤー

    1.イラストレイヤー

    • イラストはシンプルなデザインであること。
    • 使用する色は、最大6色までとすること(グレー系の色合いを除く)。
    • イラストに2ピクセルの影を入れること。
  2. 2.影レイヤー

    2.影レイヤー

    以下の色を使用すること。

    • グレー45%
    • #a7a7a7
    • RGB:167 167 167
  3. 3.背景レイヤー

    3.背景レイヤー

    • 背景のコーナーアングルが6.35mmであること。
    • 背景の中心にイラストレイヤーが表示されること。
    • 以下の色を使用すること。
      • #d0d0cf
      • RGB:208 208 207
  4. 4.完成イメージ

    4.完成イメージ

ロボアプリアイコンの登録方法

Adobe Illustratorで作成した、アプリアイコンは以下の手順で保存し、ロボアプリに登録いたします。

アイコンファイルの用意
  1. Adobe Illustratorで作成したアイコンデザインファイル(.ai)を開きます。
  2. メニュー[ファイル]-[Web用に保存…]をクリックします。
  3. [Web用に保存]ダイアログで、画像形式を “PNG” に、画像サイズを縦 360 px 横 360 pxに設定します。
  4. [保存]ボタンを押し、ファイル名を “icon.png” として保存します。
  5. 保存したファイル “icon.png” をChoregrapheプロジェクトのルートディレクトリに複製します。
プロジェクトにアイコンを登録
  1. Choregrapheでプロジェクト(.pml)を開きます(プロジェクトのルートディレクトリには複製した”icon.png”が含まれています)。
  2. メニュー[ファイル]-[プロジェクトのプロパティ]をクリックします。
  3. [プロジェクトのプロパティ]ダイアロクで、アイコンイメージをクリックし、ポップアップメニューより[ブラウザ…]をクリックします。
  4. ファイルピックアップダイアログにてプロジェクトのルートディレクトリにコピーした ”icon.png” を選択します。
  5. [OK]をクリックします。

アプリアイコンのテンプレート

アプリアイコンのテンプレート

アプリアイコンを一括ダウンロードすることが可能です。
ダウンロードしてアイコンを作成するのにお役立てください。

アプリアイコンを一括ダウンロードする