デザインは BrandStudio から取り込まれます
BrandStudio ai でブランドを設定している場合、ショップはそれを自動的に引き継ぎます：色、書体、ロゴ、会社情報、運営者情報、そしてページ下部に表示するソーシャルネットワークのアイコンです。ブランドを変更すると、少し後にショップにも自動的に反映されます。ワークベンチには、戻った時点でその内容が表示されます。
このとき「デザイン」の上部には「デザインと情報は BrandStudio から取得」と表示され、具体的に何が取り込まれるかが示されます。この状態では配色とロゴはロックされています。ブランドカラーがショップで読みにくくなる場合、ショップはその色の代わりに初期設定の色、または黒か白を使用し、ボックスには該当する色が表示されます。
ブランドで色、書体、ロゴが指定されていない場合も、このエリアにその旨が表示され、BrandStudio への導線が示されます。
独自デザインの使用と、元に戻す方法
ショップをブランドとは異なる見た目にしたい場合は、「独自デザインを使う」をクリックします。現在の状態が出発点となり（表示が急に切り替わることはありません）、各項目が編集可能になります。それ以降、ショップはブランドに従わなくなります。
元に戻すには「ブランドに戻す」を使います。ショップは再びブランドのデザインになり、後でブランドを変更した場合もそれに従います。その際、独自の配色は保管されます。「Rückgängig: eigenes Design vom …」で元に戻せます。戻せるのは一段階だけです — 次に「ブランドに戻す」を実行すると、保管内容は置き換えられます。
- 「デザイン」を開きます。
- 「独自デザインを使う」をクリックします。
- 元に戻すには「ブランドに戻す」をクリックします。
配色、独自の色、書体
「配色と書体」には八つの「用意された配色」があり、それぞれに合う書体が設定され、読みやすさも確認済みです。配色は四つの役割を担います：「ページ背景」、カードの「カード面」、「テキスト」、そしてボタンとリンク用の「アクセント」です。
「独自の色」では、各役割を六文字の16進数（#004D40 など）で入力するか、横のカラーピッカーで選びます。その下で「書体」を選びます。配色をクリックしただけでは、まだ何も保存されません。「外観を保存」をクリックするまで、入力画面には「未保存の変更」と表示されます。
「初期値に戻す」を使うと、独自の色が取り消されます。その後、ショップにはブランドの色が適用され、ブランドがない場合は用意された配色の最初のものが適用されます。
- 用意された配色を選ぶか、独自の色を入力します。
- 「読みやすさ」で三つの組み合わせを確認します。
- 「外観を保存」をクリックします。
読みやすさの計算
「読みやすさ」では、ワークベンチが三つの組み合わせのコントラストを計算します：「ページ背景の上の文字」、「カードの上の文字」、「ボタンの文字」です。各組み合わせには数値と評価の言葉が表示され、評価は「とても読みやすい」から「読めない」まであります。
各組み合わせは少なくとも 4,5:1 を満たす必要があります。満たさない場合は配色を保存できず、どの組み合わせのコントラストが不足しているかがワークベンチに表示されます。これにより、視力の弱い方を含め、誰にとってもショップが読みやすい状態に保たれます。
ロゴとサブタイトル
ロゴは、「ロゴ」の「MediaStudioから選ぶ」で自分の画像から選びます。選んだロゴは、ショップの各ページの上部に表示されます。ロゴがない場合は、そこにショップ名が表示されます。商品画像と同様に、ロゴはコピーされません。MediaStudioで差し替えると、ショップのロゴも切り替わります。また、ショップで使用中のロゴは、そちらでは削除できません。「ロゴを削除」を使うと、ショップからロゴを取り除けます。
「サブタイトル」は、ショップ名の下に表示される一文です（例：「リスボンで焙煎したて」）。これはあなた自身の文であり、翻訳されません。空欄のままでもかまいません。
- 「ロゴ」で「MediaStudioから選ぶ」をクリックし、ロゴをタップします。
- 「サブタイトル」に一文を入力し、「保存」をクリックします。
プレビュー
入力項目の横にあるプレビューには、購入者が見るとおりのショップが表示されます。ロゴ、名前、サブタイトル、そして商品の一つが画像、価格、ボタン付きで、選んだ書体で表示されます。画面幅が狭い場合は、「プレビュー」で開きます。
プレビューは表示専用です — その中で購入することはできず、何も公開されません。新しい色が購入者に表示されるのは、保存した後です。
