Square オンラインビジネスのサイトをデザイン・カスタマイズする
お客さまがサイトに初めて訪れたとき、色やフォント、エレメントの形など、サイト上にあるコンテンツすべてがお客さまの印象を左右します。Square オンラインビジネスには、魅力的なサイトを作成できるツールが揃っています。操作しやすく、ブランドイメージを意識したデザインが可能です。
Square オンラインビジネスで作成したサイトのデザインやスタイルをカスタマイズするには、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 オンラインビジネスの管理について詳しくは、サイトの詳細設定をご覧ください。