ウェブサイトの色、フォント、ロゴを変更する方法
ウェブサイトの上部メニューとフォントは、ウェブサイト作成 → デザインで選びます。色とロゴはビジネス全体で共通のもので、構成 → 一般で設定します。
上部メニューとフォントを選ぶ
- 1
「ウェブサイト作成 → デザイン」を開く
プレビューに選んだ内容がすぐに表示され、その下にウェブサイトの色が表示されます。
- 2
上部メニューを選ぶ
上部メニューで、テーマカラーか白(ダークなウェブサイトではページの色)を選びます。
- 3
フォントを選ぶ
フォントで、クラシック、エディトリアル、クリーンのいずれかを選びます。
- 4
「保存」を押す
保存は右上にあります。公開中のウェブサイトでは、変更がすぐに反映されます。
ブランドカラー
ウェブサイトの色は、ショップ、バウチャー、メールと同じく、ブランドカラーから決まります。ブランドカラーは構成 → 一般 → ブランドカラーで変更します。ウェブサイト作成 → デザインの色にはブランドカラーが表示され、変更する画面へのリンクもあります。
| ブランドカラー | 色が付く場所 |
|---|---|
| ライトまたはダーク | ウェブサイトとショップを、明るいページに暗い文字にするか、暗いページに明るい文字にするか。バウチャーとメールは明るいままです。 |
| アクセントカラー | ボタン、リンク、強調部分。ウェブサイトの色付きのセクション、暗い帯、フッターもこの色から作られます。 |
| サブカラー(任意) | ウェブサイトの小さなアクセントだけ:見出しの上の小さな文字、その下の線、アイコン。 |
色は、ページの背景に対して目立つ必要があります。目立たない色の場合は、目立つ最も近い色が欄に表示されます。おすすめの色から、目立つ色を選ぶこともできます。
上部メニュー
ページのトップ写真の上では、上部メニューは透明で、文字は白です。スクロールした後や、トップ写真のないページでは、選んだスタイルになります。
| 上部メニュー | スクロール後 |
|---|---|
| テーマカラー | アクセントカラーに白い文字 |
| 白(ダークなウェブサイトではページの色) | ページと同じ色に、アクセントカラーのメニュー |
スマートフォンでも、メニューは同じ色で開きます。
フォント
どの選択肢も、見出し用と本文用の 2 つのフォントの組み合わせです。クラシックは Playfair Display と Inter、エディトリアルは Fraunces と Source Sans 3 を使い、クリーンは見出しにも本文にも Manrope を使います。
ロゴ
ウェブサイトの上部バーには横長ロゴが表示されます。まだない場合は、ビジネス名が表示されます。構成 → 一般で、高さ 60 ピクセル以上の PNG、WebP、JPEG のいずれかをアップロードしてください。ウェブサイト作成 → デザインのロゴで、表示を確認できます。
明るい横長ロゴは任意で、透明な背景に白または明るい色の文字で描かれたロゴです。背景が写真や暗い色の場所に表示されます。ページのトップ写真の上、アクセントカラーの上部メニューやダークなウェブサイト(スマートフォンのメニューも含む)、そしてフッターです。
先に横長ロゴをアップロードしてください。明るいロゴは、ピクセル単位でまったく同じサイズにする必要があります。後で横長ロゴのサイズを変えるときは、先に明るいロゴを削除してください。
よくある質問
ショップ、バウチャー、メールでも使われるブランドカラーなので、構成 → 一般 → ブランドカラーの 1 か所で変更します。
いいえ。印刷されたり、メールアプリで読まれたりするため、明るいままです。ショップはウェブサイトに合わせて変わります。
管理者と、ユーザー → 管理で ウェブサイト作成 → デザインの権限を付与されたスタッフです。スタッフのアクセス権をご覧ください。ブランドカラーとロゴの変更には、構成 → 一般の権限が必要です。