フォームをデザインする

Sami B2B OnboardingのAppearance設定では、フォント、サイズ、幅、フィールドスタイル、色など、フォーム全体の見た目を変更できます。設定は1つのフォームにのみ適用されるため、フォームごとに異なる見た目にでき、テーマが変更されることはありません。

Appearance設定を開く

1. フォームを開く

   Formsに移動し、フォームの横にあるEditをクリックします。ビルダーが開きます。

2. Appearanceを開く

   左側のレールでAppearanceをクリックします。パネルに、以下のすべての設定が一覧表示され、設定を変更すると、中央のプレビューも変化します。

   

   Appearanceの各設定は、プレビューにすぐ反映されます。

3. 保存する

   フォームの見た目が整ったら、保存バーのSaveをクリックします。フォームが公開されている場合、買い手は次に開いたときから新しい見た目を目にします。

Appearance設定

設定	変更される内容	デフォルト
Font	フォーム全体の書体。Select fontパネルが開きます。	Theme default
Font size scale	フォーム内のすべてのテキストのサイズ。テーマのサイズの80%から130%まで、5%刻みです。	100%
Width	フォームの最大幅。px（320〜1200）、またはフォームが置かれるスペースの**%**（30〜100）で指定します。フォームは中央に配置され、小さい画面では幅が狭くなります。	640 px
Layout	Defaultはフィールドをページにそのまま配置します。Boxedはフォームを、余白と枠線のある専用のカードに入れます。	Default
Style	すべてのフィールドボックスの見た目。フィールドスタイルを参照してください。	Classic
Field spacing	フィールド間の余白。ComfortableまたはCompact。	Comfortable
Color scheme	フォームの背景、テキスト、ボタンの色。色を参照してください。	Default
CSS class	フォームに独自のクラス名（たとえばwholesale-form）を追加し、テーマのスタイルから指定できるようにします。	空

Widthをpxと**%**の間で切り替えると、640 pxまたは100%から再開されます。

フォントを選ぶ

1. フォント一覧を開く

   AppearanceでFontボックスをクリックします。Select fontパネルが開きます。

2. フォントを探す

   Searchに入力するか、スクロールします。一覧は2つのグループに分かれています。

   • System fonts：テーマがすでに使用しているフォントであるTheme defaultに続いて、System UI、Helvetica、Arial、Georgia、Times New Roman、Monospace。これらでは、追加で読み込まれるものはありません。
   • Other fonts：1,000近いWebフォント。それぞれ独自の書体で表示されます。ストアフロントではGoogle Fontsから読み込まれるため、ページの読み込みが少し遅くなることがあります。

3. フォントとウェイトを選ぶ

   フォントをクリックします。プレビューがすぐに変わります。フォントに複数のウェイトがある場合は、パネル下部のWeightリストで、たとえばRegular、Bold、Italicから選択します。Doneをクリックします。

   Fontの下のメモに、選択した内容（たとえばBold. Loads from Google Fonts on the storefront.）が表示されます。

フィールドスタイル

Styleボックスをクリックすると、8つのスタイルが、それぞれサンプルのCompany nameフィールドとして表示されます。1つクリックすると、フォーム上のすべてのフィールドに適用されます。

スタイル	フィールドの見た目
Material filled	上部にラベルが入った、グレーのボックス。
Material outlined	枠線付きのボックスで、ラベルが上辺に載っています。
Classic	薄い影と角丸のある、やわらかいグレーのボックス。デフォルトです。
Classic rounded	Classicで、1行のボックスが完全な丸型になります。
Flat	角が四角く、影のないグレーのボックス。
Flat rounded	Flatで、1行のボックスが完全な丸型になります。
Line	回答の下に線があるだけです。
Line rounded	Lineと同じ見た目です。下線には丸める角がありません。

丸型のスタイルでも、Long textのような複数行のボックスは、完全な丸型にはならず、やわらかい角丸のままです。

各カードは、そのスタイルでフィールドがどのように表示されるかを示します。

色

Color schemeの行には、10種類の既成のスキームが表示されます。Default、Forest Light、Cool Ocean、Matcha Calm、Warm Sand、Blush、Slate、Charcoal、Forest Dark、Midnightです。各スウォッチには、背景、テキスト、ボタンの色が表示されます。クリックすると、そのスキームが適用されます。

• Defaultはページ自体の色を使用するため、フォームがテーマに合います。その色を変更するには、テーマの設定を変更します。
• それ以外のスキームでは、フォーム自体の背景が背面に表示されます。ボタンとステップのマーカーには、スキームのボタンの色が使われます。

独自の色を作る

1. スキームを開く

   スウォッチの下でEdit schemeをクリックします。選択したスキームのEditingパネル（たとえばEditing Warm Sand）が開きます。

2. 色を変更する

   色をクリックして、カラーピッカーを開きます。四角形と色の帯の中でドラッグするか、16進コードを入力するか、ブラウザが対応していればスポイトで画面上の色を選びます。設定できる色は次のとおりです。

   色	適用先
   Background	フォームの背景。
   Text	ラベル、見出し、回答。
   Solid button background	Submit applicationなどのメインのボタンと、ステップのマーカー。
   Solid button label	それらのボタン上のテキスト。
   Outline button	Backなどのアウトラインボタンの枠線。

   Background、Text、Outline buttonにはTheme colorと表示されることがあり、その場合、フォームはその部分にテーマの色を使用します。

   色を変更するとすぐに、スキームはCustomになり、行にCustomスウォッチが追加されます。これらの色は、このフォームにのみ適用されます。テーマ自体のカラースキームは変更されません。

   

   いずれかの色を変更すると、フォームに専用のCustomスキームが作成されます。

3. 閉じる、またはリセットする

   パネルを閉じると、設定した色が保持されます。テーマの色に戻すには、パネル下部のRemove color schemeをクリックします。フォームはDefaultに戻ります。

ロゴを追加する

ロゴは、フォームのヘッダー内、見出しの上に表示されます。

1. ヘッダーを開く

   レールでElementsをクリックし、リストの先頭にあるHeaderをクリックします。

2. ロゴをアップロードする

   Show store logoをオンにして、Upload imageをクリックし、ファイルを選択します。1 MB以下の.jpg、.png、.svg画像である必要があります。サイズは200×60 px程度が最適です。

   後で変更するには、Replace imageをクリックします。削除するには、Removeをクリックします。

3. 保存する

   保存バーのSaveをクリックします。

デザインを確認する

ビルダーのプレビューは、ストアフロントと同じコードでフォームを描画するため、表示されるレイアウト、フィールドスタイル、余白、スキームが、そのまま買い手に表示されます。

• プレビューの上にあるDesktop previewとMobile previewボタンで、両方の画面サイズを確認できます。
• テーマに任せている設定、つまりフォントのTheme defaultと色のDefaultは、ストアフロントではテーマのフォントと色になります。確認するには、ツールバーのPreview（目のボタン）をクリックします。最後に保存した状態のストア上のフォームのページが、新しいタブで開きます。

次のステップ

• フォームを作成する — 各フィールドの幅、ラベル、プレースホルダーを設定します。
• 買い手が送信した後 — このフォームの後に買い手に表示されるサンクス画面を書きます。
• ストアにフォームを追加する — 完成したフォームを、ページ、テーマのセクション、HTMLが使える場所に配置します。