色、フォント、レイアウトを設定する

サイトのデザインタブで、ストアの色、書体、文字サイズ、角の丸みを一度設定すると、すべてのページに同時に反映されます。

サイトのデザインには、ストア全体をひとつのブランドらしく見せるための設定があります。色、書体、文字サイズ、角の丸みです。それぞれ一度設定すれば、すべてのページに反映されます。それでも、個々のブロックでこれらの設定を上書きすることもできます。

サイトのデザインを開く

エディタを開きます。エディタの概要をご覧ください。
右側の設定パネルでサイトのデザインタブをクリックします。
見出しをクリックして開きます。アイデンティティ、色、タイポグラフィ、レイアウトのいずれかです。

変更はすぐにページに表示され、自動的に保存されます。公開中のストアは、公開したときに変わります。

色

色を開くと、すべてのページの土台になっている7色が表示されます。

サイトのデザインの「Colors」グループ。「Accent」「Text on accent」「Page background」「Surface」「Text」「Secondary text」「Borders」の色と、すべての色の組み合わせが読みやすいというメッセージ

アクセント：ストアのメインの色です。ボタンやリンクに使われます。
アクセント上の文字：ボタンのラベルなど、アクセントの色の上に表示される文字の色です。
ページの背景：ページの背後の色です。
サーフェス：商品カードやフォームの枠など、カードやパネルの色です。
文字：見出しなど、主要なテキストの色です。
補助的な文字：段落、説明、注意書きなどに使われる、控えめな色です。
罫線：細い線や枠線の色です。

色を選ぶ

色のボックスをクリックします。
開いたピッカーで、次のいずれかを行います。
- 大きな四角形の中をクリックまたはドラッグして、色の明るさと鮮やかさを調整し、その下のバーをドラッグして色合いそのものを変えます。
- ボックスに、#2B2622のようなカラーコードを入力または貼り付けます。
- すでに使っている色を再利用するにはテーマの色の下のスウォッチを、最近選んだ色を使うには最近使った色の下のスウォッチをクリックします。
ピッカーの外側をクリックするか、Escを押して、閉じます。

文字が読みやすいか確認する

7色の下で、Paylyは各文字色が背景色の上で読みやすいかを確認します。問題がなければ、どの色の組み合わせも読みやすくなっていますと表示されます。薄すぎる組み合わせがある場合は、その組み合わせが一覧に表示され、コントラスト比と必要な値が示され、文字色を自動で調整する修正ボタンが表示されます。

コントラストの警告。「Secondary text on the page」と「Secondary text on cards」が、それぞれの比率と「Fix」ボタンとともに一覧になっている

コントラストの低い組み合わせを選んでもPaylyが止めることはありませんが、明るい背景に薄いグレーの文字は読みにくく、特に日差しの下のスマートフォンでは見づらくなります。

タイポグラフィ

タイポグラフィを開いて、フォントと文字サイズを選びます。

「Typography」グループ。「Body typeface」「Base font size」「Body line height」「Heading typeface」「Heading size」「Heading weight」「Heading letter spacing」がある

本文の書体：段落、メニュー、ボタンのフォントです。
基準の文字サイズ：通常のテキストのサイズです。
本文の行間：行と行の間隔です。数値が大きいほど、ゆとりが生まれます。
見出しの書体：見出しのフォントです。サイトの書体を使うを選ぶと、見出しにも本文のフォントが使われます。
見出しのサイズ：すべての見出しを、パーセンテージで大きくしたり小さくしたりします。
見出しの太さ：見出しの太さです。
見出しの字間：見出しの文字と文字の間隔を、詰めたり広げたりします。

書体を選ぶ

本文の書体または見出しの書体のボックスをクリックします。
一覧をスクロールします。一覧では、それぞれの名前がそのフォントで表示されます。上部のおすすめグループには、ほとんどのストアに合うフォントが入っています。
名前でフォントを探すには、書体を検索…に入力します。
使いたいフォントをクリックします。

一覧には、Googleフォントのライブラリ全体が含まれています。使用したフォントは、公開時にストアに組み込まれます。一覧にないフォントは、検索ボックスにGoogleフォントでの正確な名前を入力し、そのまま使うから選んでください。

レイアウト

レイアウトを開くと、2つの設定があります。

角の丸みは、ボタン、カード、画像の角をどれだけ丸くするかを決めます。0にすると角が鋭くなり、右にスライドするほど柔らかくなります。ブロック自身の角の丸みが自動になっているブロックは、この設定に従います。
文字の方向は、ほとんどの言語では左から右です。右から左にすると、アラビア語、ヘブライ語、ペルシア語、ウルドゥー語向けに、レイアウト全体が反転します。

アイデンティティ

アイデンティティを開くと、ブラウザのタブに表示される小さな画像であるブラウザのアイコンを設定できます。約16ピクセルで表示されるため、ロゴ全体ではなく、シンプルなマークを使ってください。画像をアップロードまたはアップロード済みから選ぶをクリックします。手順は画像を追加してメディアライブラリを使うをご覧ください。空のままにすると、ロゴが使われます。

ロゴの設定はここにはありません。ロゴは、表示される場所であるヘッダーにあります。ヘッダーとフッターをカスタマイズするをご覧ください。

1つのブロックだけを変更する

すべてのテキストブロック、見出し、ボタンで、サイトの書体、サイズ、色を上書きできます。ブロックを選択して、タイポグラフィまたは外観グループを開いてください。テキスト、見出し、ボタンを編集するをご覧ください。

ヒント: まったく違う雰囲気にしたい場合は、用意されているデザインのいずれかから、やり直すこともできます。別のサイトデザインに切り替えるをご覧ください。