Square オンラインビジネスのサイトをデザイン・カスタマイズする
初めてウェブサイトを開いたときに目につく色、フォント、形の印象などコンテンツすべてが、お客様の反応に影響を及ぼします。Square オンラインビジネスでは各種ツールを用意していますので、視覚的に魅力があり、操作しやすく、ブランドイメージを意識したデザインしやすいウェブサイトを作成しましょう。
Square オンラインビジネスのサイト全体のデザインやスタイルをカスタマイズするには、Square オンラインビジネスのサイトの編集の [サイトデザイン] パネルを開きます。ここに、役立つ複数のデザインツールが用意されています。
注意：ウェブアクセシビリティとは、特に障害をもつ人など多くの人々がアクセスしやすいウェブサイトをデザインするという重要な要素です。詳細については、Square オンラインビジネスのサイトのウェブアクセシビリティをご覧ください。
Square オンラインビジネスの全ツールとエディタの機能を理解するには、Square オンラインビジネスのサイトエディタを操作するで詳しい方法をご覧ください。
ロゴ
Square オンラインビジネスのサイトで加盟店さまの事業、組織、アイディアなどの独自性を表現できるよう、サイトエディタでヘッダーとフッターにロゴを追加できます。詳細については、Square オンラインビジネスのサイトにロゴを追加するをご覧ください。
色
ビジネスブランドにふさわしい色がお決まりでしたら、同じ色を選択してSquareのウェブサイトにブランドイメージを反映することができます。ご希望の色を組み合わせて、加盟店さまにぴったりな外観とフィーリングを持つオンラインビジュアルを作成しましょう。詳細については、Square オンラインビジネスのサイトの色を選択するをご覧ください。
フォント
サイトエディタ内のフォントツールを利用すると、ウェブサイト用のフォントをかんたんに選べます。厳選された書体が揃っており、サイトのデザインとぴったり合うよう工夫されているので、どの画面のテキストでも読みやすいよう作られています。詳細については、Square オンラインビジネスのサイトのフォントを選択するをご覧ください。
形
Square オンラインビジネスのサイトのボタン、フォームの記入欄、画像といった各種エレメントの形を変更して、デザインを個性的にできます。以下の手順を行います。
Square オンラインビジネスのサイトの編集から、[サイトデザイン] を選択します。
[形] を選択して、各エレメントの形を選びます。オプションはエレメントにより異なりますが、[角型]、[丸型]、または [ピル型] などがあります。
オプションを1つ選択したら、すべてのエレメントがその形になります。たとえば、ボタンにピル型を選択するとすべてのボタンが同じ形になり、サイト全体の見た目の一貫性が保たれます。
サイトのエレメント
注意: 追加のサイトエレメントをカスタマイズするには、Square オンラインビジネスのサイトをアップグレードしてください。
特定のサイトエレメントに高度なデザイン操作を使用すると、サイトをさらにカスタマイズできます。以下のオプションが用意されています。
Square オンラインビジネスでは、商品の状態を表すバッジとして、「メイン」、「サブ（2番目）」、「サブ（3番目）」の3種類のバッジを利用することができます。また、ボタンのデザインや表示場所も自由にカスタマイズできます。さらに詳しくは、Square オンラインビジネスの商品ステータスバッジの利用方法をご覧ください。
以下のツールを利用して、「メイン」ボタンと「サブ（2番目）」ボタンのデザインをカスタマイズすることができます。
- 色：ご希望の色をボタン全体に反映させるか、ボタンの外枠だけに反映させるかを選択することができます。
- 形：ボタンの形を角型、丸型、ピル型のいずれかから選択できます。また [カスタム] を選択してボタンの角の丸みを調整することもできます。このオプションを利用することで、ボタンの角ばりや丸みをご希望に合わせて微調整することができます。
- 枠線：色と太さを選べます。ボタンを枠線なしで塗りつぶしたい場合は、枠線に同じ色を選択してください。
- テキスト：ボタンに表示するテキストのフォントとウエイト（太さ）を選べます。また、テキストのサイズを調整したり、斜体を選択したり、下線を引いたりもできます。
- ドロップシャドウ：ボタンに3D効果をつけるには、[ドロップシャドウ] をオンに切り替えます。選択した色の影をボタンの後ろに付けることができ、薄めの色にするとボタンが輝いているように見えます。追加オプションを使用して、影の位置、ぼかし、広がりを調整することも可能です。
- ホバー時の反応：カーソルをボタンに合わせたとき、ボタンがどのように見えるかを調整することができます。多くのサイトでは、ボタンにカーソルを合わせる（ホバー）と、ボタンが有効であることを知らせるためにボタンの色が変わり、クリックすると新しいページまたはサイトに移動することができます。注意：形オプションを除き、上記のオプションすべてでホバー時の反応を調整できます。
スペースとは、サイトの余白、テキスト、画像、その他エレメントの間の空白を指します。スケールを使用して、サイト幅とサイト余白の両方をカスタマイズできます。
デフォルト設定を用いると、ウェブサイトをあらゆる画面サイズ（モバイル、デスクトップなど）に合わせて適切に表示することができます。またページに追加したセクションの種類によっては、行、列、画像、テキストのスペースをカスタマイズすることも可能です。
スタイル
Square オンラインビジネスのサイトの色、フォント、形を別々に選択するのではなく、プリセットのスタイルを利用すると、サイトのデザインをすばやく設定しブランドイメージに近づけることができます。厳選されたデザインエレメントを活用してアイディアを膨らまし、訪問者を惹きつけるデザインを作成しましょう。またプリセットのスタイルを基に個々のエレメントをカスタマイズして、独自のテーマを作ることもできます。詳細については、Square オンラインビジネスのサイトのスタイルを選択するをご覧ください。
サイトのデザインをリセットする
Square オンラインビジネスのサイトの編集中に、完全に最初からやり直したい場合は、以下の手順を行います。
Square オンラインビジネスの概要ページから、[ウェブサイト] > [サイトの詳細設定] の順に選択します。
[デフォルトにリセット] を選択します。
これでウェブサイトは非公開となり、コンテンツの編集やアップロードの前の初期状態にリセットされます。なお、オンラインストアの商品に影響はありません。
注意：このオプションは、一旦使用すると元には戻せませんのでご注意ください。ウェブサイトを以前のバージョンまたは公開時の状態に戻す手段は、弊社ではご用意しておりません。
Square オンラインビジネスの管理について詳しくは、サイトの詳細設定をご覧ください。