Square オンラインビジネスの画像や背景をカスタマイズする
ウェブサイトの画像は、サイトに個性を与え、売上を伸ばし、オンラインで存在感をアピールするのに役立つ重要な要素です。Square オンラインビジネスのサイトエディタには大半のセクションに画像追加オプションがあり、以下のようなカスタマイズができます。
画像ギャラリーセクションでは、複数の画像をアップロードし、静止画ギャラリーやスライドショーなどから適切なレイアウトスタイルを選択できます。
Instagramフィードセクションでは、Instagramアカウントと連携し、ソーシャルネットワークの画像をオンラインで同期、表示できます。
おすすめ商品セクションでは、お客さまがすぐに注文、購入できるよう、人気の商品やカテゴリを表示できます。
一般のテキストセクションと画像セクションでは、複数のコンテンツフォームや、追加のカスタマイズオプションが利用可能です。
その他のほとんどのセクションに背景画像を追加できます。
ご注意：エディタで、商品とカテゴリの画像を直接Square オンラインビジネスに追加することもできます。
Square オンラインビジネスのサイトで背景以外の画像と背景画像を管理するためのヒントをご紹介します。
背景以外の画像と背景画像
サイトエディタで扱う画像は、以下の2つのタイプに大別できます。
背景以外の画像：追加コンテンツの一種で、テキストと一緒にサイトに表示されます。通常は右クリックでコピーしたり、新しいブラウザタブで開いたりできます。前景画像と考えることもできます。
背景画像：主要コンテンツではなく、背景以外の画像やテキストの背景（後ろ）に表示されます。サイトのデザインまたはスタイルの一部と考えることができ、右クリックでコピーしたり、新しいブラウザタブで開いたりはできません。
サイトに画像オプション付きセクションを追加する
サイトに画像を追加するには、まずSquare オンラインビジネスのサイトの編集を開き、画像を追加するページを選ぶか、ページを新規作成するします。次に、[+] > [セクション] の順に選択してセクションメニューを開きます。
整理カテゴリのほとんどのセクションに、背景以外の画像が1つ含まれます。セクションを選び、ページでどのように見えるかを確認します。他のセクションを追加し、背景画像を編集することもできます。任意の画像を選んで [追加] を選択し、ページに追加します。
セクションに画像を追加する
セクションに画像を追加する手順は以下の通りです。
背景以外の画像：編集パネル内の画像オプションで、[画像を追加] を選択します。
背景画像：編集パネル内で [カスタマイズ] > [背景] の順に進み、ドロップダウンメニューから [画像] を選んで、[画像を追加] を選択します。
どちらの場合でもアセットマネージャーのポップアップウィンドウが開くので、画像を選択またはアップロードします。
ご注意：プレミアム写真のオプションを利用するには、Square オンラインビジネスサブスクリプションのアップグレードが必要です。
「アセットマネージャー」ポップアップウィンドウで画像を追加するには、いくつかの方法があります。
- [マイ画像] を選択して、Squareアカウント内のウェブサイト全体から、アップロード済みのすべての一般画像を表示します。複数のサイトをお持ちの場合は、[サイト] ドロップダウンメニューを使用してサイトを切り替えます。
- [マイロゴ] を選択して、Squareアカウント内のウェブサイト全体から、アップロード済みのすべてのロゴ画像を表示します。複数のサイトをお持ちの場合は、[サイト] ドロップダウンメニューを使用してサイトを切り替えます。
- [プレミアム写真] を選択すると、1億点を超えるプレミアム品質の写真に無料でアクセスできます。ご利用には、プランのアップグレードが必要になります。
- [Instagram] を選択すると、お使いのInstagramアカウントに接続して、サイト上でプロフィール写真を利用できます。
新しい画像をアップロードするには、画像管理ウィンドウで [自分の画像] または [自分のロゴ] にアクセスし、お使いの端末からファイルのリンクを選択します。アップロード可能な画像の形式は以下のとおりです。
- JPG
- PNG
- GIF
Square オンラインビジネスで作成したサイトでの画像の利用については、以下のガイドラインをご覧ください。
背景以外の画像：
- サイト内のページに背景以外の画像を追加するときには、長辺が1,000ピクセル以下のJPEGファイルを使用するのが最適です。
- 画像を高画質に保ちたい場合は、フォトグラファー向けの写真ホスティングサイト（Flickr.comなど）を利用してサイトへ埋め込むことをお勧めします。弊社では、何百万もの加盟店やユーザーからの何百万もの画像をホストする必要があるため、未圧縮で大型の高解像度画像に対応するようにはプログラムを設計していません。画質を下げたくない場合は、他社の画像ホスティングの利用をご検討ください。
背景画像：
- サイトデザインの一部として表示される画像（ヘッダー、バナー、背景画像など）については、2,000x1,000ピクセル以上のものを使用することをお勧めします。この条件を満たす画像を使用すると、どの画面サイズでも全幅で十分見栄えがします。
セクショングループを編集する
セクションの一部（グループと呼ばれる）をコピーできるレイアウトもあり、ページに別のセクションを追加しなくてもコンテンツや画像を追加することができます。編集パネルの [グループ] に、現在のセクションに含まれるグループのリストが表示されます。
新しい画像とテキストのグループ（デフォルトのテキストが使用されます）を挿入するには、[グループを追加] を選択します。既存のグループをコピーするには、[•••] > [複製] を選択します。新規作成または複製したグループが編集パネルのリストに追加されます。グループをドラッグしてリスト内の別の場所にドラッグすると、ページ上のグループの順序を変更できます。
背景以外の画像を編集する
Square オンラインビジネスのサイトで使用する背景以外の画像を編集するには、次の手順を行います。
- Square オンラインビジネスのサイトエディタから、編集する画像があるページにアクセスします。
- 画像のあるセクションを選択して、画像自体を選択すると編集パネル内に画像オプションが表示されます。
- [編集] を選択して、必要に応じて各要素を調整します。調整した内容を画像に適用したくない場合は、[元に戻す] を選択します。
- 編集を [保存] したらサイトを [公開] して、変更点が反映されていることを確認します。
注意：選択中のレイアウトの種類により、表示される画像編集オプションの数は異なります。
別の画像をアップロードするには、編集パネルの [置き換える] を選択します。また画像を削除したい場合は、ゴミ箱のアイコンを選択します。元の状態に戻したい場合は、矢印をクリックすると、1つ前の状態に戻ります。
編集パネルで画像にリンクを追加したり代替テキスト追加したりすることで、SEO対策ができるほか、ウェブサイトアクセシビリティの改善にもつながります。詳しくは、サイトにリンクを追加する、ウェブサイトのページを最適化（SEO）するをご覧ください。
注意：「ウェブアクセシビリティ」とは、身体に障がいを持つ方など、さまざまな利用者を考慮して、どなたにとっても使用しやすいサイトを構築することです。画像アクセシビリティの向上についてさらに詳しくは、Square オンラインビジネスで作成したサイトのウェブアクセシビリティをご覧ください。
オンラインで公開する画像を許可なく使用されることのないよう、完全に保護するのは難しいのが現状です。ただし不正利用の防止対策として、Square オンラインビジネスのサイトでパスワードによるページ保護機能を使用することで、対象ページのコンテンツの表示を制限することができます。
また一部のブラウザで、かんたんに画像をコピー・保存できないようにするため、ページ上での右クリックを無効にすることもできます。この操作で完全に保護されるわけではありませんが、ある程度のコピー行為を抑えるのに役立ちます。右クリックを無効にするには、次の手順を行います。
- Square オンラインビジネスの概要ページから、[設定] > [追跡ツール] の順に選択します。
- [新規コードを追加] を選択します。
- ポップアップウィンドウ内の対応するフィールドに、コードの名前とコード自体を入力します。コードの例は、以下をご参照ください。
- フッターにコードを配置するには、[body末尾] を選択します。
- [保存] を選択します。
- Square オンラインビジネスのサイトエディタからサイトを [公開] して、変更がライブになっているか確認します。
コードの例： <body oncontextmenu=”return false;”>
こちらでご紹介した方法のほかにも、デジタル画像を扱うビジネス（例：写真家）では、ウォーターマークやデジタルスタンプを画像に追加する「グラフィックプログラム」が利用されています。これは、画像の不正利用を直接的に防ぐものではありませんが、ウォーターマークにより画像が二次編集に適さない状態になっているため、間接的な不正利用対策として役立ちます。
背景画像を編集する
背景画像の明暗を調整して、Square オンラインビジネスのセクションの読みやすさを改善できます。明るい画像は、デフォルトの暗いテキストの色に対してより明るくでき、暗い画像は、デフォルトの明るいテキストの色に対してより暗くできます。Square オンラインビジネスのサイトのセクションの読みやすさを調整するには、以下の手順を行います。
- Square オンラインビジネスのサイトエディタから、調整する背景画像があるページにアクセスします。
- 画像のあるセクションを選択して、編集パネルから [カスタマイズ] > [背景] の順にアクセスします。
- [編集] を選択し、スライダーを動かして画像の読みやすさを調整します。
- 編集を [保存] したらサイトを [公開] して、変更点が反映されていることを確認します。
必要に応じて、背景画像にズームしたり傾き調整したりもできます。
別の画像をアップロードするには、編集パネル内で [「…」] > [置き換え] の順に選択します。また画像を削除したい場合は、ゴミ箱のアイコンを選択します。元の状態に戻したい場合は、「元に戻す」矢印を使用すると、1つ前の状態に戻ります。
Square オンラインビジネスのセクションの背景画像を色に変更するには、以下の手順を行います。
- Square オンラインビジネスのサイトエディタから、調整する背景画像があるページにアクセスします。
- 画像のあるセクションを選択して、編集パネルから [カスタマイズ] > [背景] の順にアクセスします。
- ドロップダウンメニューから [選択済みの色] を選択して、あなたが選択したサイト色に変更します。または [カスタム色] を選択して、別の色に変更します。
詳細については、Square オンラインビジネスでウェブサイトの色を選択するをご覧ください。
背景ビデオを編集する
ご注意：ビデオを背景として使用するには、Square オンラインビジネスのサブスクリプションのアップグレードが必要です。
背景には高画質のGIFのほか独自のビデオもアップロードでき、コンテンツに躍動感が生まれます。まず、ウェブページのメインバナーセクションを選択し、編集パネルで背景オプションとして [ビデオ] を選択します。ビデオファイルは、ここからいつでも変更、削除できます。また、ビデオの開始時間、終了時間、再生速度を調整することも可能です。
ご注意：ビデオファイルの最大サイズは20GBです。
また、YouTubeなどのビデオホストや独自のファイルを利用すれば、背景以外のビデオにサウンドやその他の機能を付けてサイトに追加できます。詳しくは、ウェブサイト上の動画をご覧ください。
モバイルサイトの画像オプション
モバイル用ウェブサイトとパソコン用ウェブサイトを別々に編集することはできませんが、画像オプションはモバイル用ウェブサイト専用のものが用意されています。これを使用し、端末の画面サイズに合わせて画像を表示できます。これには以下のオプションがあります。
Square オンラインビジネスで作成したモバイルサイトで、セクションの背景画像のフォーカス（焦点）を調整することができます。これにより、その画像のオブジェクトに注目を集めることができます。操作は次の手順を行います。
- Square オンラインビジネスのサイトエディタから、モバイルサイト用に背景画像を設定したいページにアクセスします。
- 画像のあるセクションを選択して、編集パネルから [カスタマイズ] > [背景] の順に選択します。
- 引き続き、[…] > [画像の主題を設定] の順に選択します。
- 背景画像の中心オブジェクトに、カーソル（点）を合わせます。これでモバイル版サイトでも常に、画像のオブジェクトが中心で表示されるようになります。
- 完了したら [保存] を選択します。モバイルビューに切り替えると、この変更が行われたモバイルサイトを確認できます。必要に応じて、デスクトップビューで再調整を行います。
- サイトを [公開] して、変更がライブになっているか確認します。
トラブルシューティング
Square オンラインビジネスに複数の画像を同じファイル名でアップロードした場合、実際のウェブサイトで画像が思ったように表示されないことがあります。たとえば、画像が別のページに突然表示される、画像の場所が入れ替わる、画像がまったく表示されないなどの問題が生じる可能性があります。このような事態を避けるため、各画像に固有の名前を付けてからサイトエディタにアップロードしてください。
すでにこの問題が生じている場合は、以下の手順でトラブルシューティングを試みます。
Square オンラインビジネスのサイトの編集で、正しく表示されない画像をすべて削除します。
パソコンまたは端末で、すべての画像に固有のファイル名を付けます。
サイトエディタで、画像をウェブサイトに再アップロードします。
[公開] をクリックして、変更点がサイトに反映されているかを確認します。