デザイン設定

• ナビゲーションバー - デザイン設定

  CMS（管理画面）の「デザイン」＞「ナビゲーションバー」では、アプリ上部に位置する「ナビゲーションバー」エリアの編集が可能です。

  

  「ナビゲーションバー」エリアでは、以下の項目について編集が可能です。

  ①レイアウト
  ②スタイル 

   

  なお、ボディ部分〜下部タブバーの色やデザインについては、以下のサポートページをご確認ください。

  参考：『共通スタイル - デザイン設定』

   

  レイアウト

  

  ロゴ画像やアイコンのレイアウト設定です。

  ①	表示項目	以下の3つから選択可能です。 ロゴ　※デフォルト 全ての画面でロゴを表示します。 タイトル+ホームのみロゴ ホーム画面のみ設定されたロゴを表示し、ホーム画面以外では各コンテンツのコンテンツ名を表示します。 ※ホームはアクティブの一番左の機能を指します。 タイトル 全ての画面でタイトル（コンテンツ名）を表示します。 タイトル表示を選択している場合のご注意 v12.0.0以上のアプリでは、ウェブビュー機能を表示している際はコンテンツ名ではなく、ウェブサイトのタイトルを表示いたします。
  ②	表示位置	以下の2つから選択可能です。 中央　※デフォルト ロゴまたはタイトルを中央寄せで表示します。 アイコンは無視して端末の横幅の中央に配置します。 左 ロゴまたはタイトルを左寄せで表示します。 左にアイコンがある場合はアイコンの右から表示し、左にアイコンがない場合は左詰めで表示します。
  ③	ロゴ画像	ヘッダーに表示されるロゴ画像を入稿できます。 ロゴの表示エリアに合わせて画像が収まるよう拡大縮小され表示されるため、推奨サイズの規定はありません。 なお、ロゴの表示エリアはアイコンの数や揃えにより変動します。
  ④	アイコン	トグルをONにすることで、左に1つ、右に最大2つのアイコンを設置することができます。 アイコン画像はコンテンツ一覧で設定されているもので表示されます。 リンク設定で表示する機能を選択してください。

   

  リンクファインダーにて設定可能な機能

  • リンク
  • ボトムシート
  • ポップアップ
  • モーダル（従来のウェブビュー機能、ポイントカード機能の見え方）
  • バーコードリーダー/QRコードリーダー

   

  ご注意

  • ナビゲーションバーにイントロ機能を設置することは非推奨です。
  • ナビゲーションバーにて、Shift+クリックでのURL直接入力（外部ブラウザ起動）を行うことは非推奨です。
    参考：『リンク設定でウェブビューを通さず直接ブラウザを立ち上げる』

   

   

  アイコン画像の変更方法

  ナビゲーションバーに配置したアイコン画像を変更するには、通常のコンテンツ一覧画面での変更に加え、ナビゲーションバー画面でのリンク設定の再保存が必要です。

  1. コンテンツ一覧にて、該当コンテンツの「アイコン変更」より編集します。
     参考：『コンテンツのアイコンを変更する』
  2. ナビゲーションバー＞該当のアイコンにて、リンクファインダーをクリックし再度保存します。
     
     こうすることで1.で変更されたアイコン情報を更新することができます。

   

   

  スタイル

  

  色味のスタイル設定です。

  ①	ステータスバー	時刻や電池残量などが表示される部分です。白か黒を選択できます。
  ②	背景画像	jpg、png形式の背景画像を入稿可能です。 推奨サイズは、1536×375ピクセルです。 画像を設定しない場合は、「背景カラー」に設定した色が表示されます。
  ③	背景カラー	背景のカラー設定です。
  ④	タイトルカラー	タイトルのカラー設定です。
  ⑤	アイコンカラー	アイコンのカラー設定です。 ※旧「戻るボタンのカラー」が反映されています。   ご注意 表示させているアイコンが「カスタムアイコン」かつ「フルカラー」の場合、アイコンカラーはここでの設定ではなく、カスタムアイコンで登録した元画像の色が反映されます。 参考：『画像作成時の注意点 - カスタムアイコン』
  ⑥	罫線カラー	ナビゲーションバーの下罫線はデフォルトでは非表示（0%）ですが、デザインにあわせて設定可能です。

   

  カラー設定

  カラーコードでの設定の他にも、カラー領域をクリックすると色を直感的にドラッグ＆ドロップで操作できるパレットが表示されます。イメージに合う色を選択してください。
  
  また、右側のパーセンテージを変更することで透明度を変更することができます。
  ※0%が透明、100%が不透明です。

  

   

   

  更新履歴

  • 2025年6月5日 CMS（管理画面）でのナビゲーションバーの設定方法について、説明を追記
  • 2025年4月22日 リンクファインダーにて設定可能な機能内に、イントロ機能設置が非推奨である旨ご注意に追記
  • 2025年3月12日 リンクファインダーにて設定可能な機能内と、スタイル⑤「アイコンカラー」にご注意を追記
  • 2025年2月12日 レイアウト①「表示項目」に、タイトル表示を選択している場合のご注意を追記
  • 2025年2月5日 アプリナビゲーション改修に伴い、内容を更新

• 共通スタイル - デザイン設定

  CMS（管理画面）の「デザイン」＞「共通スタイル」では、ボディ部分〜下部タブバーの色やデザインについて編集が可能です。
  ①共通設定
  ②リスト
  ③閉じるボタン

   

  アプリ上部に位置する「ナビゲーションバー」エリアの色やデザインについては、以下のサポートページをご確認ください。

  参考：『ナビゲーションバー - デザイン設定』

   

  共通設定

  背景

  

  アプリ中央、ボディ部分のデザイン設定です。

  ①	背景画像	jpg、png形式の背景画像を入稿可能です。 推奨サイズは、1242×2688ピクセルです。 画像を設定しない場合は、「背景カラー」に設定した色が表示されます。 Androidでは横幅が足りない場合、右端が透明になり、背景色が表示されます。
  ②	背景カラー	背景のカラー設定です。

   

   

  タブバー

  

  アプリ下部、アクティブメニューのアイコンが並んでいるエリアのデザイン設定です。

  ①	背景カラー	背景のカラー設定です。
  ②	アイコンカラー	アイコンのカラー設定です。
  ③	選択中のアイコンカラー	選択中（表示中コンテンツ）のアイコンのカラー設定です。
  ④	アイコンアニメーション	アイコンに動き（アニメーション）をつけることができます。 ご利用にはアプリバージョン要件を満たす必要がございます。 設定方法などの詳細については以下のページをご確認ください。 参考：『タブバー（アクティブメニュー）のデザイン設定をする』
  ⑤	太字	テキスト表示した際の、太字の設定です。
  ⑥	テキスト表示	アイコンの下にコンテンツ名のテキストを表示するかどうかの設定です。

   

   

  リスト

  

  記事などのコンテンツが一覧で表示されるエリアのデザイン設定です。

  ①	カラー設定	それぞれのカラー設定です。 上の画像と実際のCMS左側のプレビュー画面を参考に、それぞれ設定します。
  ②	リストの間隔	0が最小、5が最大の間隔です。

   

   

  閉じるボタン

  

  ご利用にはアプリバージョン要件を満たす必要がございます。

  設定方法などの詳細については以下のページをご確認ください。

  参考：『閉じるボタンのデザインを変更する』

   

   

  更新履歴

  • 2025年2月5日 アプリナビゲーション改修に伴い、内容を更新

• タブバー（アクティブメニュー）のデザイン設定をする

  タブバー（アクティブメニュー）のアイコンに次のような動きをつけることや、アイコン下のテキスト表示の有無や太字設定を変更することができます。

  

   

  必要なアプリバージョン

  本機能をご利用いただくには、アプリが以下のバージョンとなっている必要がございます。

  項目名	iOS用アプリの対応バージョン	Android用アプリの対応バージョン
  アイコンアニメーション	10.28.0以降
  太字	10.67.0以降
  テキスト表示	10.67.0以降

  設定を行う前に、必ず公開済みのアプリが上記バージョン以上であるかをご確認ください。

  参考：『アプリのバージョンを確認する方法』

  対応しているバージョン未満の場合、管理画面の「アプリ登録」より『再申請』をいただくと、弊社にてバージョンアップの対応をさせていただきます。

  参考：『アプリを再申請する』

   

  設定方法

  1. 管理画面の「デザイン」より「共通スタイル」をクリックします。
     
  2. 「アイコンアニメーション」「太字」「テキスト表示」の項目を任意の設定にします。
     参考：『共通スタイル - デザイン設定』
     
  3. Preview Yappliで挙動を確認し、問題がなければ再構築をします。
     参考：『再構築とは』

   

  更新履歴

  • 2025年3月7日 テキスト表示や太字設定について追記

   

• 閉じるボタンのデザインを変更する

  電子書籍機能やプッシュ通知など、各機能の右上にある閉じるボタンはデザインの変更が可能です。

  このページではそれぞれの閉じるボタンの変更方法について記載いたします。

   

  必要なアプリバージョン

  本機能をご利用いただくには、アプリが以下のバージョンとなっている必要がございます。

  アプリの種類	必要なアプリのバージョン
  iOS用アプリ	10.76.0以降
  Android用アプリ	10.76.0.0以降

  設定を行う前に、必ず公開済みのアプリが上記バージョン以上であるかをご確認ください。

  参考：『アプリのバージョンを確認する方法』

  対応しているバージョン未満の場合、管理画面の「アプリ登録」より『再申請』をいただくと、弊社にてバージョンアップの対応をさせていただきます。

  参考：『アプリを再申請する』

   

  対象機能

  全画面表示の場合とポップアップ表示の場合、合計７機能が「閉じるボタン」のデザイン変更が可能な機能です。

   

  全画面表示の場合

  • 電子書籍
  • クーポン
  • フォーム2

  ポップアップ表示の場合

  • プッシュ通知
  • ポップアップリンク設定時（フリーレイアウト、ニュース、Block UI）
  • スタンプカードの各種リンク設定（ご利用方法、特典マス表示）

   

  設定できるデザイン

  「アイコンカラー」白/黒、「ボタンの背景」非表示/表示の組み合わせで、全４種類のデザインを設定できます。

  

   

  デザイン変更方法

  管理画面のデザイン設定下部より閉じるボタンのデザインを変更します。

  

  「全画面表示」「ポップアップ表示」から、それぞれ「アイコンカラー」「ボタン背景」を設定してください。

   

   

  ヒント

  • アプリ対象バージョンが10.76.0以降の場合、デザイン設定で設定した値が参照され、アプリ上の対象機能全てに反映されます。
    アプリ対象バージョンが10.76.0未満の場合は、今まで通り機能ごとに実装されているデフォルトの閉じるボタンが反映されます。
  • 以下の機能については対象外となります。
    ・ポイントカード
    ・ポイントカード2
    ・ショップ機能

   

  更新履歴

  • 2025年2月7日 ECコネクト提供終了に伴い表記を削除