記事一覧/ ARTICLES
デザイン設定
-
デザイン設定とは
アプリ全体に関わるデザインを変更できる画面です。
ステータスバーやナビゲーションバー、アプリ全体の背景色、その他機能などに使用しているリスト、下部タブバーなどの色や画像を変更できます。
詳細については以下それぞれのサポートページをご確認ください。
参考：『ナビゲーションバー - デザイン設定』
参考：『タブバー - デザイン設定』
参考：『共通スタイル - デザイン設定』必要なアプリのバージョン
デザイン設定内の以下の項目をご利用いただくには、アプリバージョン要件を満たす必要がございます。
項目名 iOS用アプリの対応バージョン Android用アプリの対応バージョン アイコンアニメーション 10.28.0以降
太字 10.67.0以降
テキスト表示 10.67.0以降
SVGアイコン対応
（ナビゲーションバー）12.0.0以降
選択時のみ太字 12.23.0以降
中央のタブを強調 12.23.0以降
SVGアイコン対応
（タブバー）12.23.0以降
通知バッジ 14.0.0以降
設定を行う前に、必ず公開済みのアプリが上記バージョン以上であるかをご確認ください。
参考：『アプリのバージョンを確認する方法』
対応しているバージョン未満の場合、管理画面の「アプリ登録」より「再申請」をいただくと、弊社にてバージョンアップの対応をさせていただきます。
参考：『アプリを再申請する』
ご注意
- 対応アプリバージョンを満たしていない場合、設定しても反映されません。
詳細は以下のサポートページをご確認ください。
参考：『タブバー - デザイン設定』
更新履歴
- 2026年6月24日 通知バッジのUI変更により、内容を更新
- 2025年9月3日 公開
- 対応アプリバージョンを満たしていない場合、設定しても反映されません。
-
ナビゲーションバー - デザイン設定
CMS（管理画面）の「デザイン」＞「ナビゲーションバー」では、アプリ上部に位置する「ナビゲーションバー」エリアの編集が可能です。
「ナビゲーションバー」エリアでは、以下の項目について編集が可能です。
①レイアウト
②スタイルなお、ボディ部分〜下部タブバーの色やデザインについては、以下のサポートページをご確認ください。
参考：『共通スタイル - デザイン設定』
参考：『タブバー - デザイン設定』レイアウト
レイアウト設定では、ロゴ画像の位置やナビゲーションバーに表示するアイコンを設定します。
① 表示項目 以下の3つから選択可能です。
・ロゴ ※デフォルト
全ての画面でロゴを表示します。
・タイトル+ホームのみロゴ
ホーム画面のみロゴを表示し、ホーム画面以外では各コンテンツ名を表示します。
※ホームはアクティブの一番左の機能を指します。
・タイトル
全ての画面でタイトル（コンテンツ名）を表示します。
ご注意
・v12.0.0以降のアプリのウェブビュー画面では、コンテンツ名ではなくウェブサイトのタイトルが表示されます。② 表示位置 ・以下の2つから選択可能です。
・中央 ※デフォルト
ロゴまたはタイトルを中央寄せで表示します。
アイコンは無視して端末の横幅の中央に配置します。
・左
ロゴまたはタイトルを左寄せで表示します。
左にアイコンがある場合はアイコンの右から表示し、左にアイコンがない場合は左詰めで表示します。③ ロゴ画像 ・ヘッダーに表示されるロゴ画像を入稿できます。
・ロゴの表示エリアに合わせて画像が収まるよう拡大縮小され表示されるため、推奨サイズの規定はありません。
・ロゴの表示エリアはアイコンの数や揃えにより変動します。④ アイコン ・トグルをONにすることで、左に1つ、右に最大2つのアイコンを設置することができます。
・アイコン画像はコンテンツ一覧で設定されているもので表示されます。
・リンク設定で表示する機能を選択してください。リンクファインダーにて設定可能な機能
- リンク
- ボトムシート
- ポップアップ
- モーダル（従来のウェブビュー機能、ポイントカード機能の見え方）
- バーコードリーダー/QRコードリーダー
ご注意
- ナビゲーションバーにて、イントロ機能を設置すること、Shift+クリックでのURL直接入力（外部ブラウザ起動）を行うことは非推奨となります。
参考：『リンク設定でウェブビューを通さず直接ブラウザを立ち上げる』
アイコン画像の変更方法
ナビゲーションバーに配置したアイコン画像を変更するには、通常のコンテンツ一覧画面での変更に加え、ナビゲーションバー画面でのリンク設定の再保存が必要です。
- コンテンツ一覧にて、該当コンテンツの「アイコン変更」より編集します。
参考：『コンテンツのアイコンを変更する』 - ナビゲーションバー＞該当のアイコンにて、リンクファインダーをクリックし再度保存します。
ヒント
- ナビゲーションバーのアイコンは、SVG形式に対応しています。
- v12.0.0未満のアプリでは、SVGアイコンを設定しても空白で表示されますのでご注意ください。
参考：『デザイン設定とは』
スタイル
スタイル設定では、背景画像やアイコン、通知バッジなどのカラー設定をします。
基本スタイル
① 背景 背景画像 jpg、png形式の背景画像を入稿可能です。
推奨サイズは、1536×375ピクセルです。
画像を設定しない場合は、「背景カラー」に設定した色が表示されます。② 背景カラー 背景のカラー設定です。 ③ 罫線カラー ナビゲーションバーの下罫線はデフォルトでは非表示（0%）ですが、デザインにあわせて設定可能です。 ④ テキスト タイトルカラー タイトルのカラー設定です。 ⑤ アイコン アイコンカラー アイコンのカラー設定です。
※旧「戻るボタンのカラー」が反映されています。
ご注意
・表示させているアイコンが「カスタムアイコン」かつ「フルカラー」の場合、アイコンカラーはここでの設定ではなく、カスタムアイコンで登録した元画像の色が反映されます。
参考：『画像作成時の注意点 - カスタムアイコン』⑥ ステータスバー ステータスバー 時刻や電池残量などが表示される部分です。白か黒を選択できます。 通知バッジ
⑦ 通知バッジ 背景カラー 通知バッジの背景カラー設定です。 ⑧ テキストカラー 通知バッジのテキストカラー設定です。 参考：『アプリ内の通知バッジのカラーを設定する』
カラー設定
カラーコードでの設定の他にも、カラー領域をクリックすると色を直感的にドラッグ＆ドロップで操作できるパレットが表示されます。イメージに合う色を選択してください。
また、右側のパーセンテージを変更することで透明度を変更することができます。
※0%が透明、100%が不透明です。更新履歴
- 2026年6月24日 通知バッジのUI変更により、内容を更新
- 2025年9月3日 タブバー改善により、内容を更新
- 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年9月3日 タブバー改善に伴い、内容を更新
- 2025年2月5日 アプリナビゲーション改修に伴い、内容を更新
-
ご利用にはアプリバージョン要件を満たす必要がございます。
-
タブバー - デザイン設定
CMS（管理画面）の「デザイン」＞「タブバー」では、アプリ下部のタブバーのデザインについて編集が可能です。
アプリ上部〜ボディ部分の色やデザインについては、以下のサポートページをご確認ください。
参考：『ナビゲーションバー - デザイン設定』
参考：『共通スタイル - デザイン設定』スタイル
背景
① 背景カラー 背景のカラー設定です。 テキスト
① テキスト表示 アイコンの下にコンテンツ名のテキストを表示するかどうかの設定です。 ② テキストの太さ テキストを表示した場合に、「標準」「太字」「選択時のみ太字」から選択して表示が可能です。 ヒント
- アイコンの名称の文字数が多い場合の挙動は以下の通りです。
・v12.23.0未満：iOSは貫通して全文表示、Androidは2行で表示
・v12.23.0以降：両OSともにフォントサイズを小さくし、全文を表示します。
これにより、タブバーのコンテンツ名ごとに文字サイズが揃わない場合があります。
アイコン
① アイコンカラー アイコンのカラー設定です。 ② 選択中のアイコンカラー 選択中（表示中コンテンツ）のアイコンのカラー設定です。 ③ アイコンアニメーション アイコンに動き（アニメーション）をつけることができます。 ヒント
- タブバーに配置するアイコンは、SVGアイコンに対応します（その他機能を除く）。
- 対応アプリバージョンを満たしていない場合、SVGアイコンを設定していても表示されません。
・iOS v12.23.0未満：表示されません（空白になる）
・Android v12.0.0未満：表示されません（空白になる）
・Android v12.0.0以降：表示されます
中央のタブ
① 中央のタブを強調 アクティブにアイコンが3個もしくは5個の場合のみ、「中央のタブを強調」設定が可能になります。 ② アイコンカラー 中央のタブアイコンのカラー設定です。 ③ 背景カラー 中央のタブアイコンの背景のカラー設定です。 ④ 選択中のアイコンカラー 選択中（表示中コンテンツ）のアイコンのカラー設定です。 ⑤ 選択中の背景カラー 選択中（表示中コンテンツ）のアイコンの背景カラー設定です。 ヒント
- 「中央のタブを強調」を有効にした場合、円形のタブがコンテンツの一部に重なり、隠れてしまう領域が発生します。
そのためPreview Yappliにて全画面で表示をご確認いただくことをお勧めします。
通知バッジ
① 背景カラー 通知バッジの背景カラー設定です。 ② テキストカラー 通知バッジのテキストカラー設定です。 ご注意
- 対応アプリバージョンを満たしていない場合、設定しても反映されません。
対応アプリバージョンについて、詳しくは以下のサポートページをご参考ください。
参考：『デザイン設定とは』
更新履歴
- 2026年6月24日 通知バッジのUI変更により、内容を更新
- 2025年9月3日 タブバー改善により、内容を更新
- 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コネクト提供終了に伴い表記を削除