本文へスキップ

ボタンとカードをデザインする.

BrandStudio ai でボタンとカードの形、角の半径、スタイルを設定 — 自動で保存され、すぐにプレビューと WordPress にも反映されます。

動画ボタンとカード
このページの内容

色、フォント、形

「デザイン」では、ブランドの見た目を設定します。上部で「色」「フォント」「形」を切り替えます。その横には(小さな画面では「プレビュー」リンクから)どのように見えるかが表示されます。

ここには保存ボタンはありません。変更はすべて自動的に保存されます。上部の行に現在の状態が表示されます — 「変更は自動的に保存されます」「保存中 …」「保存しました。」、または問題が起きた場合は「未保存」とその下に理由が表示されます。

空欄は値ではなく「指定なし」を意味します。設定しなかった項目は、それぞれの制作物のテンプレートが決めます。「テンプレートに戻す」を使うと、設定した値が再び解除されます。「デザイン」では AI は使われず、AI ご利用枠も消費されません。

Café Lumen の「デザイン」セクション。「色」「フォント」「形」の切り替え、「変更は自動的に保存されます」の行、その横にプレビューが表示されています。
この録画には英語の画面が表示されています。

ボタンとカード

「形」では「ボタン」を設定します。「形」はワンクリックで「角型」「やわらか」「丸角」「丸型」から選ぶか、「半径 (px)」欄で 0 ~ 40 の範囲で正確に指定します。さらに「スタイル」(「塗りつぶし」または「アウトライン」)、ラベルの「太さ」(「標準」~「太字」)、そして「大文字」にするかどうかも設定できます。

「カード」(サービス、価格、引用、入力欄の枠)では「半径 (px)」と「影」を設定します。各ブロックの下にある「テンプレートに戻す」で、すべての設定を再び解除できます。

ボタンとカードの形は、ウェブサイト、ショップ、フォーム、WordPress に反映されます。ボタンの文字色は、「色」の「ボタンの文字」ロールから取られます。

「形」で Ana が「丸型」をクリックし、「スタイル」を「アウトライン」に設定します — プレビューのボタンが丸くなり、コーヒーブラウンの枠線が付きます。この録画には英語の画面が表示されています。
  1. 「デザイン」を開き、「形」を選びます。
  2. 「形」で「丸型」をクリックするか、半径を入力します。
  3. ボタンとカードの見え方をプレビューで確認します。

プレビュー

「このように表示されます」には、ブラウザーウィンドウのような小さなページが表示されます。ブランド名、見出しフォントで書かれた見出し、リンクを含む段落、ボタン、入力欄付きのカード — すべてがあなたの色、フォント、形で表示されます。

どの設定も、保存される前にすぐプレビューに反映されます。読みにくい色の組み合わせがある場合は、色を置き換える制作物ではここと見た目が異なる旨がプレビューの上に表示されます — 詳しくは 読みやすさ を参照してください。

小さな画面では、プレビューは設定の下に表示されます。「プレビュー」リンクでそこへ移動し、「戻る」で上に戻ります。

Café Lumen の色で表示された「このように表示されます」プレビュー:見出し「私たちがお手伝いします」、リンクを含む段落、ボタン、カード。
この録画には英語の画面が表示されています。

WordPress も自動で追従

WordPress サイトがブランドに従っている場合、BrandStudio は変更後にそれらを最新の状態にします — クリックのたびではなく、少し手を止めたときに一度だけです。そのとき上部に「WordPress を更新しています…」と表示され、その後たとえば「WordPress はブランドと同じ状態です(2 サイト)。」と表示されます。新しいロゴや新しいフォントも同じように反映されます。

うまくいかなかった場合でもブランドは保存されたままで、次に保存したときにサイトへ反映されます。

どのサイトをブランドに従わせるかは、WordPressBuilder の「ブランドを適用」で決めます — ブランドが反映される場所 を参照してください。

関連ガイドと次のステップ

ツールを詳しく見る:⁦BrandStudio ai⁩

KENJTECの改善にご協力ください

Google Analyticsをウェブサイトの改善に利用します。Googleに利用状況と端末のデータが送信され、米国で処理される場合があります。

同意は任意です。選択は180日間保存され、Cookie設定からいつでも変更できます。

プライバシーポリシー