Web アプリケーションのテーマを設定する

1. リンク先からアプリケーションの編集モードに移動します。
   
   
2. 左上の Web アイコンをクリックします。
   
   
   
3. 右上の テーマ アイコンをクリックします。
   
   
   
4. テーマタブが右側からスライド表示されます。ここから、次の項目を選択できます。

• レイアウト
• ロゴの設定
• カラー設定
• フォント
  
  

レイアウトを選択する

1. リンク先からアプリケーションの編集モードに移動します。
   
   
2. 右上の テーマ アイコンをクリックします。テーマタブが右側からスライド表示されます。
   
   
3. レイアウトセクションの設定から、任意のレイアウトを選択します。
   
   
   

ロゴの設定

1. リンク先からアプリケーションの編集モードに移動します。

2. 右上の テーマ アイコンをクリックします。テーマタブが右側からスライド表示されます。

3. テーマタブ右上の ロゴの設定 をクリックします。

4. ロゴの種類を選択します。

• 組織ロゴ

• アプリアイコン

• なし
  
  
  
  

  メモ: 組織ロゴは、組織タブでアップロードされている場合にのみ利用できます。

  
  

5. 組織ロゴの配置位置も選択できます。組織名の左側、またはその上部に配置することができます。
   
   
   

   

   メモ: ロゴの配置は、一部のレイアウトにのみ適用されます。

6. 右上の 閉じる アイコンをクリックして、 テーマ タブを閉じます。変更内容は自動的に保存されます。
   
   
7. 選択したロゴの設定（組織ロゴ／アプリアイコン）は、アプリケーションの公開モードで表示されます。
   
   

カラー設定

1. アプリケーションの編集モードに移動します。


2. 画面右上のテーマアイコンをクリックします。テーマタブが右側からスライド表示されます。


3. Colors セクションで、アプリケーションテーマ用に、利用可能なプリセットカラー から色を選択するか、カスタムカラー を作成します。




メモ: カスタムカラーは、Creatorアカウント内の複数のアプリ、レイアウト、デバイスで共通して使用できます。


5. Custom Color タブでは、テーマ／ブランドカラーに加え、アプリヘッダー、メニュー、サブメニュー用の補助カラーもカスタマイズできます。




メモ: 一部の補助カラーは、レイアウトによっては適用されず、無効になる場合があります。

6. Theme/Brand Colorの横にあるカラーピッカーアイコンをクリックし、表示されるプリセットから色を選択するか、 その他の色 をクリックしてカラーパレットからカスタムカラーを選択し、 OKをクリックします。
     


メモ :

• Theme/Brand color は、ボタン、リンク、ドロップダウンなど、アプリケーションの各コンポーネントで共通して使用されます。
• ここで追加したカラーは、自動的にモバイルおよびタブレットデバイスでも利用可能になります。必要に応じて、各デバイスごとに別の色を選択することもできます。
  
  

7. 同様に、 App Header、 Menu 、 Sub-Menu用の補助カラーも選択できます。


8. 保存をクリックします。カラーは自動的に適用され、プレビュー領域で確認できます。


9. カスタムカラーを編集するには、対象のカスタムカラーにカーソルを合わせ、編集アイコンをクリックします。必要な変更を行ったら、更新するをクリックします。



10. カスタムカラーを削除するには、対象のカスタムカラーにカーソルを合わせ、×アイコンをクリックします。参照がない場合、そのカラーは自動的に削除されます。


11. いずれかのアプリケーションでこのカラーが参照されている場合は、その旨がポップアップウィンドウに表示されます。その場合は、次の手順を実行します。

• 各アプリケーション名の右側にある 表示する をクリックします。アプリケーションが新しいタブで開きます。
• テーマカラーを別の色に変更します。
• 参照ポップアップ（前のタブ）に戻り、 削除 Color ポップアップウィンドウ右上の更新アイコンをクリックします。
• すべての参照が削除されたら、 続ける to 削除 をクリックします。

フォントを選択する

1. アプリケーションの編集モードに移動します。

2. 画面右上の テーマ アイコンをクリックします。 テーマ タブが右側からスライド表示されます。

3. Fonts セクションで、ドロップダウンメニューからフォントを選択します。
   

   メモ: ユーザーは、合計12種類のフォントから選択できます。
   
   
   

4. 選択したフォントは、アプリケーション全体に自動的に適用されます。

電話用のテーマを設定する

1. アプリケーションの編集モードに移動します。
   
   
2. 画面左上の 電話 アイコンをクリックします。
   
   
   
3. 画面右上の テーマ アイコンをクリックします。
   
   
   
4. テーマ タブが右側からスライド表示されます。ここから、次の項目を選択できます。

• レイアウト
• ロゴ設定
• カラー設定
• フォント
  
  
  

レイアウトを選択する

1. アプリケーションの編集モードに移動します。
   
   
2. 右上の テーマ アイコンをクリックします。右側から テーマ タブがスライド表示されます。
   
   
3. レイアウト セクションで、表示されているオプションからレイアウトを選択します。
   
   

ロゴ設定

1. アプリケーションの編集モードに移動します。

2. 右上の テーマ アイコンをクリックします。右側から テーマ タブがスライド表示されます。

3. テーマ タブ右上の ロゴ設定 をクリックします。

4. ロゴの種類を選択します。

• 組織ロゴ

• アプリアイコン

• なし
  
  

  
  

  

  メモ: 組織ロゴ は、組織 タブでアップロードされている場合にのみ利用できます。

5. 右上の 閉じる アイコンをクリックして、 テーマ タブを閉じます。変更内容は自動的に保存されます。
   
   
6. 選択したロゴ設定（組織ロゴ／アプリアイコン）は、アプリケーションの運用モードで表示されます。
   

カラー設定

1. アプリケーションの編集モードに移動します。


2. 右上の テーマ アイコンをクリックします。右側から テーマ タブがスライド表示されます。


3. カラー セクションで、利用可能なプリセットカラーから色を選択するか、アプリケーションのテーマ用にカスタムカラーを作成できます。

4. カスタム タブの下にある + をクリックして、各種インターフェイスコンポーネント用のカスタムカラーを作成します。




メモ: カスタムカラーは、Creator アカウント内のアプリ、レイアウト、デバイス間で共通して使用できます。


5. カスタムカラー タブでは、テーマ／ブランドカラー と、ダークモード 用の補助カラーをカスタマイズできます。



6. テーマ／ブランドカラー の横にあるカラーピッカーアイコンをクリックし、表示されているプリセットから色を選択するか、 その他の色 をクリックしてカラーパレットからカスタムカラーを選択し、 OK をクリックします。選択した色は カスタム タブに追加されます。
     




メモ: テーマ／ブランドカラー は、ボタン、リンク、ドロップダウンなどのコンポーネント全体で使用されます。

7. 同様に、ダークモード 用の補助カラーも選択できます。

8. iPhone デバイスで、ナビゲーションバーを選択した色で塗りつぶすかどうかを切り替えることができます。初期設定では、このボタンは いいえ に設定されています。




9. カスタムカラーを編集するには、対象のカスタムカラーにカーソルを合わせ、編集アイコンをクリックします。必要な変更を行ったら 更新する をクリックします。



10. カスタムカラーを削除するには、対象のカスタムカラーにカーソルを合わせ、バツアイコンをクリックします。参照がない場合、そのカラーは自動的に削除されます。

11. いずれかのアプリケーションにこの色の参照がある場合は、ポップアップウィンドウにその旨が表示されます。その場合は、

• 各アプリケーションの右側に表示されている 表示 をクリックします。アプリケーションは新しいタブで開きます。
• テーマカラーを別の色に変更します。
• 前のタブにある参照ポップアップに戻り、 色を削除 ポップアップウィンドウの右上にある更新アイコンをクリックします。
• すべての参照が削除されたら、 削除を続行 をクリックします。

フォントを選択する

1. アプリケーションのモードに移動し、編集モードを開きます。

2. 右上の テーマ アイコンをクリックします。 テーマ タブが右側からスライド表示されます。

3. Fonts セクションで、ドロップダウンメニューからフォントを選択します。

   メモ: ユーザーは最大 12 種類のフォントから選択できます。

   
   

タブレット用テーマの設定

1. アプリケーションのモードに移動し、編集モードを開きます。
   
   
2. 左上の Tablet アイコンをクリックします。
   
   
   
3. 右上の テーマ アイコンをクリックします。
   
   
   
4. テーマ タブが右側からスライド表示されます。ここから、次の項目を選択できます。

• レイアウト
• ロゴの設定
• カラー設定
• フォント
  
  
  

レイアウトを選択する

1. アプリケーションのモードに移動し、編集モードを開きます。
   
   
2. 右上の テーマ アイコンをクリックします。 テーマ タブが右側からスライド表示されます。
   
   
3. Layout セクションの設定から、レイアウトを選択します。
   

ロゴの設定

1. アプリケーションのモードに移動し、編集モードを開きます。

2. 右上の テーマ アイコンをクリックします。 テーマ タブが右側からスライド表示されます。

3. テーマタブの右上にある ロゴの設定 をクリックします。

4. ロゴの種類を選択します。

• 組織ロゴ

• アプリアイコン

• なし
  
  

  
  
  

  

  メモ: 組織ロゴ は、組織タブでアップロードされている場合にのみ利用できます。

5. 右上の 閉じる アイコンをクリックして、 テーマ タブを閉じます。変更内容は自動的に保存されます。
   
   
6. 選択したロゴの設定（組織ロゴ / アプリアイコン）は、アプリケーションの有効なモードで表示されます。

カラー設定

1. アプリケーションの編集モードに移動します。


2. 右上のテーマアイコンをクリックします。テーマタブが右側からスライド表示されます。


3. Colors セクションで、アプリケーションテーマ用に、用意されたプリセットカラーから色を選択するか、カスタムカラーを作成できます。

4. + を カスタム タブ内でクリックして、各インターフェイスコンポーネント用のカスタムカラーを作成します。




メモ: カスタムカラーは、Creatorアカウント内の複数のアプリ、レイアウト、デバイス間で共通して使用できます。

5. カスタム Color タブでは、Theme/Brand Color用の色と、ダークモード用の補助カラーをカスタマイズできます。



6. Theme/Brand Color の横にあるカラーピッカーアイコンをクリックし、表示されるプリセットから色を選択するか、 その他の色 をクリックしてカラーパレットからカスタムカラーを選択し、 OKをクリックします。選択した色は Customs タブに追加されます。
     

メモ: Theme/Brand Colorは、ボタン、リンク、ドロップダウンなどのコンポーネント全体で使用されます。

7. 同様に、 ダークモード 用の補助カラーも選択できます。

8. iPadデバイスで、ナビゲーションバーに選択した色を適用するかどうかを切り替えることができます。初期設定では、このボタンはいいえに設定されています。



9. カスタムカラーを編集するには、対象のカスタムカラーにカーソルを合わせて編集アイコンをクリックします。必要な変更を行ったら、「更新する」をクリックします。



10. カスタムカラーを削除するには、対象のカスタムカラーにカーソルを合わせて、× アイコンをクリックします。参照がない場合、その色は自動的に削除されます。

11. いずれかのアプリケーションでこの色が参照されている場合、その旨がポップアップウィンドウに表示されます。その場合は、

• 各アプリケーション名の右側にある 表示する をクリックします。アプリケーションが新しいタブで開きます。
• テーマカラーを別の色に変更します。
• 参照ポップアップ（前のタブ）に戻り、 削除 Color ポップアップウィンドウ右上の更新アイコンをクリックします。
• すべての参照が削除されたら、 続ける to 削除 をクリックします。

フォントを選択する

1. 編集モードにアプリケーションを切り替えます。

2. 右上の テーマ アイコンをクリックします。 テーマ タブが右側からスライド表示されます。

3. Fonts セクションで、ドロップダウンメニューからフォントを選択します。

   メモ: ユーザーは最大12種類のフォントから選択できます。
   

   
   

   
   

4. 選択したフォントは、アプリケーション全体に自動的に適用されます。