BrandStudio のデザインを引き継ぐ
新しいフォームにはすべて、BrandStudio にあるブランドの色と書体が適用されます。テンプレートから作ったフォームや Kenji が作ったフォームも同様です。そのため、「デザイン」ステップの上部に「ブランド」カードがあり、「BrandStudio のデザインを引き継ぐ」スイッチが付いています。オンの間は、その下のコントロールはロックされます。BrandStudio で何かを変更すると、フォームも自動的に追従します。
スイッチをオフにすると、フォームは現在の見た目を保ち、そこから自分でデザインできます。カードには「独自のデザイン」と表示されます。再びオンにすると、フォームはまたブランドに従います。独自のデザインは保管され、「元に戻す：… の独自のデザイン」で復元できます。ブランドにまだ色が設定されていない場合は、それまでブランドの書体を使ったシンプルなテーマが適用されます。
「ブランド」カードは、アカウントにブランドがある場合にのみ表示されます。スイッチは「保存」を押さなくても、すぐに反映されます。
- 「デザイン」ステップでフォームを開きます。
- 自分でデザインしたい場合は、「BrandStudio のデザインを引き継ぐ」をオフにします。
- 色、書体、項目を設定して、「保存」をクリックします。
ロゴと会社情報
同じカードの「ブランドのロゴと会社情報を表示する」をオンにすると、フォームの上にブランドのロゴと名前が表示され、その下に会社名、メールアドレス、電話番号、ウェブサイト、そして SocialStudio に登録したソーシャルメディアのチャンネルのアイコンが表示されます。通知、控え、PDF の控えにも同じ情報が載り、ブラウザーのページタイトルは「Tisch reservieren · Café Lumen」のようになります。
このスイッチは初期設定でオンになっており、デザインとは連動していません。自分でデザインしている場合でも、ロゴは表示されます。ブランドに会社情報がない場合、フォームは Invoice の差出人情報を使用します。設定は「保存」の後に反映され、見え方は「ブラウザーでプレビュー」で確認できます。
- 「デザイン」ステップを開きます。
- 「ブランド」カードで「ブランドのロゴと会社情報を表示する」をオンまたはオフにします。
- 「保存」をクリックし、「ブラウザーでプレビュー」で確認します。
雰囲気と色
自分でデザインする場合は、「雰囲気」でクリックするだけで、すべてを一度に設定できます：シンプル、ミッドナイト、セージ、砂、ローズ、オーシャン、インク、スカイ。その後、「色」で個別に細かく調整します：「背景」、「カード」（項目が置かれる面）、「文字色」、そして「ボタンとアクセント」です。
「背景」と「カード」には、背景画像が透けて見えるように「不透明度」スライダーもあります。文字とアクセントは常に完全に不透明です。半透明の文字は下地に左右され、気づかないうちに読めなくなるおそれがあるためです。文字色とカードの色は、はっきり差のある組み合わせを選んでください。この二つがフォームの読みやすさを支えます。
- 「デザイン」ステップで、BrandStudio からの引き継ぎをオフにします。
- 「砂」などの雰囲気をクリックします。
- 個々の色と不透明度を調整して、「保存」をクリックします。
書体
「書体」では、「システム」、Inter、DM Sans、Poppins、Space Grotesk、Karla、Lora、Playfair Display、Fraunces、Manrope、IBM Plex Mono の十一種類のフリー書体から一つを選べます。選んだ書体はすぐにプレビューに反映されます。
独自の書体はファイルとしてアップロードします：「独自のフォントファイルをアップロード（woff2、2 MB まで）」。ファイル名がその書体の名前になり、「削除」で取り除けます。書体がフォントサービスで提供されている場合は、「リンクで独自フォント」を開き、CSS ファイルへのリンク（https）とフォントファミリー名を入力します。両者が合っているかどうかは、プレビューで確認できます。書体はリンク先から読み込まれます。アップロードしたファイルは、リンクや一覧からの選択よりも優先されます。
- 「デザイン」ステップで、BrandStudio からの引き継ぎをオフにします。
- 「書体」で書体を選ぶか、woff2 ファイルをアップロードします。
- 「保存」をクリックします。
項目のスタイルと角の丸み
「項目」では、入力欄の見た目を決めます。細い輪郭線の「枠線」、薄く色の付いた背景の「面」、下線だけの「線」（最も落ち着いた形）から選べます。「角の丸み」スライダーで、カード、項目、ボタンを角ばった形にも丸みのある形にもできます。
このステップのすべてのコントロールと同様、BrandStudio からの引き継ぎをオフにした場合にのみ機能し、「保存」の後に反映されます。
背景画像
カードの背後に画像を置くことができます。「背景画像」には三つの入手方法があります：自分のファイル（PNG、JPEG、WebP、3 MB まで）、検索「またはフリー画像を探す …」、そして MediaStudio からの「または自分の画像から選ぶ」です。いずれの場合も、画像はフォームにコピーされ、あなたのアドレスから配信されます。外部サービスには依存しません。
項目が並ぶカードは、画像の上でも読みやすいままです。画像がどれだけ透けて見えるかは、「カード」の不透明度で調整します。「画像を外す」で画像を外せます。選んだ画像はすぐに保存されます。フォームがブランドに従っている間は、アップロード、検索、自分のライブラリはロックされます。
- 「デザイン」ステップで、BrandStudio からの引き継ぎをオフにします。
- 「背景画像」で「カフェ」などの語句を入力し、「検索」をクリックします。
- 画像をクリックすると、すぐにフォームの背後に配置されます。
プレビューとテスト
「デザイン」の中央には、ゲストに見えるとおりのフォームが表示されます。色、書体、行の並びはフォームページと同じです。「デスクトップ」「タブレット」「スマートフォン」で表示幅を切り替えられます。スマートフォンの幅では、ゲストの画面と同じく行が縦に並びます。左側には構成が表示され、項目をクリックすると、その項目が選択された状態で「作成する」に移動します。
「テストする」を押すと、プレビューに入力できるようになります。条件は機能しますが、何も保存されません。「プレビュー」で元に戻ります。「ブラウザーでプレビュー」は、まず保存してから、実際のフォームページを新しいタブで開きます。そこではロゴや会社情報、目安価格、注文合計も確認できます。これはフォームがまだ閉じている間でも使えます。上部の帯に「プレビュー」と表示され、そこからは何も送信されません。
「作成する」ステップでは、フォームはあえてニュートラルなスタイルで表示されます。見た目はこのステップで確認します。
- 「デザイン」ステップを開き、「スマートフォン」を選びます。
- 「テストする」をクリックし、試しにフォームに入力します。
- 実際のページを見るには、「ブラウザーでプレビュー」をクリックします。