ウェブサイトの色、フォント、ロゴを変更する方法

ウェブサイトの上部メニューとフォントは、ウェブサイト作成 → デザインで選びます。色とロゴはビジネス全体で共通のもので、構成 → 一般で設定します。

上部メニューとフォントを選ぶ


  1. 1

    「ウェブサイト作成 → デザイン」を開く

    プレビューに選んだ内容がすぐに表示され、その下にウェブサイトの色が表示されます。

  2. 2

    上部メニューを選ぶ

    上部メニューで、テーマカラーか白(ダークなウェブサイトではページの色)を選びます。

  3. 3

    フォントを選ぶ

    フォントで、クラシック、エディトリアル、クリーンのいずれかを選びます。

  4. 4

    「保存」を押す

    保存は右上にあります。公開中のウェブサイトでは、変更がすぐに反映されます。

ウェブサイト作成 → デザインの「色」「上部メニュー」「プレビュー」

ブランドカラー


ウェブサイトの色は、ショップ、バウチャー、メールと同じく、ブランドカラーから決まります。ブランドカラーは構成 → 一般 → ブランドカラーで変更します。ウェブサイト作成 → デザインの色にはブランドカラーが表示され、変更する画面へのリンクもあります。

ブランドカラー色が付く場所
ライトまたはダークウェブサイトとショップを、明るいページに暗い文字にするか、暗いページに明るい文字にするか。バウチャーとメールは明るいままです。
アクセントカラーボタン、リンク、強調部分。ウェブサイトの色付きのセクション、暗い帯、フッターもこの色から作られます。
サブカラー(任意)ウェブサイトの小さなアクセントだけ:見出しの上の小さな文字、その下の線、アイコン。

色は、ページの背景に対して目立つ必要があります。目立たない色の場合は、目立つ最も近い色が欄に表示されます。おすすめの色から、目立つ色を選ぶこともできます。

上部メニュー


ページのトップ写真の上では、上部メニューは透明で、文字は白です。スクロールした後や、トップ写真のないページでは、選んだスタイルになります。

上部メニュースクロール後
テーマカラーアクセントカラーに白い文字
白(ダークなウェブサイトではページの色)ページと同じ色に、アクセントカラーのメニュー

スマートフォンでも、メニューは同じ色で開きます。

フォント


どの選択肢も、見出し用と本文用の 2 つのフォントの組み合わせです。クラシックは Playfair Display と Inter、エディトリアルは Fraunces と Source Sans 3 を使い、クリーンは見出しにも本文にも Manrope を使います。

3 種類のフォントの組み合わせ。それぞれビジネス名を見出しとして表示しています

ロゴ


ウェブサイトの上部バーには横長ロゴが表示されます。まだない場合は、ビジネス名が表示されます。構成 → 一般で、高さ 60 ピクセル以上の PNG、WebP、JPEG のいずれかをアップロードしてください。ウェブサイト作成 → デザインのロゴで、表示を確認できます。

上部バーに表示される横長ロゴと明るい横長ロゴ

明るい横長ロゴは任意で、透明な背景に白または明るい色の文字で描かれたロゴです。背景が写真や暗い色の場所に表示されます。ページのトップ写真の上、アクセントカラーの上部メニューやダークなウェブサイト(スマートフォンのメニューも含む)、そしてフッターです。

先に横長ロゴをアップロードしてください。明るいロゴは、ピクセル単位でまったく同じサイズにする必要があります。後で横長ロゴのサイズを変えるときは、先に明るいロゴを削除してください。

よくある質問


ショップ、バウチャー、メールでも使われるブランドカラーなので、構成 → 一般 → ブランドカラーの 1 か所で変更します。

いいえ。印刷されたり、メールアプリで読まれたりするため、明るいままです。ショップはウェブサイトに合わせて変わります。

管理者と、ユーザー → 管理で ウェブサイト作成 → デザインの権限を付与されたスタッフです。スタッフのアクセス権をご覧ください。ブランドカラーとロゴの変更には、構成 → 一般の権限が必要です。

このページは役に立ちましたか?