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

以下は、ブラウザ内でセクションとそのコンポーネントを別々のパネルにしたテーマの例です。

1. アプリケーションを編集します。
   
   
2. 左上隅の Web アイコンをクリックします。
   
   
   
3. 右上隅の Themes アイコンをクリックします。
   
   
   
4. 右側から Themes タブがスライドインします。ここから以下のオプションを選択できます：

• レイアウト
• ロゴの選択
• カラーオプション
• フォント
  

レイアウトの選択

1. アプリケーションの編集モードに移動します。
   
   
2. 右上の テーマ アイコンをクリックしてください。 テーマ タブが右からスライドしてきます。
   
   
3. 「レイアウト」セクションの下にあるオプションからレイアウトを選択します。
   

 

ロゴのプレファレンス

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

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

3. 右上の ロゴの設定 をクリックしてください。

4. ロゴタイプを選択してください:

• 会社ロゴ

• アプリアイコン

• なし
  
  
  
  
  

  注: 会社ロゴは、 会社の詳細 でアップロードされた場合のみ利用可能です。

  
  

5. 会社のロゴの配置も選択できます。会社名の左側に配置するか、会社名の上に配置するかを選択できます。
   
   
   

   

   注: ロゴの配置 は、特定のレイアウトにのみ適用されます。

6. 右上の 閉じる アイコンをクリックして、 テーマ タブで変更を保存します。
   
   
7. 選択したロゴのプレファレンス（会社ロゴ/アプリアイコン）がアプリケーションのライブモードに表示されます。
   
   

色オプション

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


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


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




注：Creatorアカウントでは、アプリ、レイアウト、デバイス間でカスタムカラーを使用できます。


5. カスタムカラータブでは、テーマ/ブランドカラー用のカラーをカスタマイズしたり、アプリヘッダー、メニュー、サブメニュー用のサポートカラーを設定することができます。




注：一部のサポートカラーは特定のレイアウトには適用できず、無効になる場合があります。

6. [敬語]テーマ/ブランドカラーの横にあるカラーピッカーアイコンをクリックし、与えられたプリセットの中から色を選択するか、もしくは、[敬語]More Colorsをクリックし、カラーパレットからカスタムカラーを選択し、[敬語]OKをクリックしてください。
     


注意 :  

• テーマ/ブランドカラー  は、ボタン、リンク、ドロップダウンなどのアプリケーションのコンポーネント全体で使用されます。 
• ここで追加された色は、モバイルデバイスとタブレットデバイスに自動的に利用可能になります。 しかし、必要に応じて、それぞれのデバイス用に異なる色を選択することもできます。
  
  

7. 同様に、アプリヘッダー、メニュー、サブメニューのサポートカラーを選択することができます。


8.「保存」をクリックします。色が自動的に適用され、プレビュー領域に表示されます。


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



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


11.いずれかのアプリケーションがこの色の参照を持っている場合、ポップアップウィンドウにそれが表示されます。その場合は、次の手順を実行する必要があります：

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

  注：Creatorアカウントには最大30のカスタムカラーを追加できます。

フォントの選択

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

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

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

   注：ユーザーは全部で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. もし、どのアプリケーションからもこの色の参照がある場合、ポップアップウィンドウに同じものが表示されます。その場合、

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

  注：Creatorアプリケーションには最大30のカスタムカラーを追加することができます。  

フォントの選択  

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

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

3. 「フォント」セクションの下にあるドロップダウンメニューからフォントを選択してください。

   注：ユーザーは全部で12種類のフォントから選択できます。

   
   

テーブルのテーマを設定する  

1. アプリケーションを編集します。
   
   
2. 左上隅の タブレット アイコンをクリックします。
   
   
   
3. 右上隅の テーマ アイコンをクリックします。
   
   
   
4. 右側からスライドインする テーマ タブから、以下のものを選択できます。

• レイアウト
• ロゴのプリファレンス
• カラーオプション
• フォント
  
  
  

レイアウトの選択

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

 

ロゴのプレファレンス

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

2. 右上隅にある テーマ アイコンをクリックしてください。右側から テーマ タブが表示されます。

3. 右上の ロゴプリファレンス をクリックしてください。 テーマ タブからです。

4. ロゴタイプを選択します：

• 会社ロゴ

• アプリアイコン

• なし
  
  

  
  
  

  

  注： 会社ロゴ は、 会社の詳細 にアップロードされている場合にのみ利用できます。

5. 右上の 閉じる アイコンをクリックして、 テーマ タブを閉じます。変更は自動的に保存されます。
   
   
6. 選択したロゴプリファレンス（会社ロゴ/アプリアイコン）は、アプリケーションのライブモードで表示されます。

色オプション  

1. アプリケーションの編集モードに移動してください。


2. 右上隅にある テーマ アイコンをクリックしてください。 テーマ タブが右からスライドして表示されます。


3. 「カラー」セクションで、利用可能なプリセットカラーのいずれかを選択するか、アプリケーションテーマのカスタムカラーを作成することができます。

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




注：カスタムカラーは、Creatorアカウント内のアプリ、レイアウト、デバイスで使用できます。

5. 「カスタムカラー」タブで、テーマ/ブランドカラーにカスタマイズした色を設定し、「ダークモード」のサポートカラーを設定できます。



6. 「テーマ/ブランドカラー」の横のカラーピッカーアイコンをクリックし、プリセットから色を選択するか、「もっとカラー」をクリックしてカラーパレットからカスタムカラーを選択し、「OK」をクリックします。色は「カスタム」タブに追加されます。
     
6. 「テーマ/ブランドカラー」の横のカラーピッカーアイコンをクリックし、プリセットから色を選択するか、「もっとカラー」をクリックしてカラーパレットからカスタムカラーを選択し、「OK」をクリックしてください。色は「カスタム」タブに追加されます。
     

注：テーマ/ブランドカラーは、ボタン、リンク、ドロップダウンなどのコンポーネントで使用されます。

7. 同様に、ダークモードのサポートカラーも選択できます。

8. iPadデバイスのナビゲーションバーに色を塗るためのボタンをトグルできます。デフォルトでは、このボタンは No としてトグルされています。



9. カスタムカラーを編集するには、カスタムカラーの上にカーソルを合わせて編集アイコンをクリックします。 必要な変更を加えた後、 更新 をクリックしてください。



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

11. もしどれかのアプリケーションがこの色の参照を持っている場合、ポップアップウィンドウは同じものを言及します。その場合、

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

  注：Creatorアプリケーションには最大30のカスタムカラーを追加できます。

フォントを選択

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

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

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