Square オンラインビジネスの画像や背景をカスタマイズする
| Squareでウェブサイトを開設するために必要な設定をはじめましょう。はじめる > |
画像は、ウェブサイトの極めて重要な要素です。個性を発揮し、より多くの商品を販売し、全般的なオンライン体験を改善することができます。Square オンラインビジネスのサイトエディタでは、ほとんどのセクションに画像オプションがありますので、以下のような操作を行えます。
画像ギャラリーセクションを利用して複数の画像をアップロードして、静止画ギャラリーやスライドショーなど異なるレイアウトスタイルから選択する。
ソーシャル画像をオンラインで同期・表示できるよう、InstagramアカウントをInstagramフィードセクションに連携させる。
スピーディに注文/購入できるよう、おすすめ商品セクションを利用して人気上位の商品やカテゴリを紹介する。
一般のSMSセクションと画像セクションでは、複数の形式のコンテンツを追加でき、さらにカスタマイズするためのオプションも選択できます。
その他ほとんどのセクションで背景画像を追加できます。
注意：サイトエディタで直接、Square オンラインビジネスに商品とカテゴリ画像を追加することもできます。
Square オンラインビジネスのサイトで、背景以外の画像や背景画像を管理するためのヒントをご紹介します。
背景以外の画像と背景画像
サイトエディタでの画像への作業は、主に以下の2つのタイプに分けられます。
背景以外の画像：追加されるコンテンツの一部であり、テキストと一緒にサイトに表示されます。通常は右クリックやコピーが可能で、新しいブラウザタブで開くことができます。また、前景画像と考えることもできます。
背景画像：サイトに表示される主要コンテンツの一部ではありませんが、背景以外の画像やテキストの背景（後ろ）に表示されます。サイトのデザイン/スタイルの一部とみなされ、右クリックやコピーは不可、新しいブラウザタブで開くこともできません。
サイトに画像オプション付きセクションを追加する
画像をサイトに追加するには、まずSquare オンラインビジネスのサイトの編集を開き、画像の追加先であるページを新規作成するまたは選択します。次に [+追加] > [セクション] の順に選択して、[セクション] メニューを開きます。
[整理] カテゴリ内にあるセクションの大半には、背景以外の画像が備わっています。任意のセクションをクリックすると、ページ上でどう見えるかを確認できます。またその他のセクションを追加し、背景画像を編集することもできます。お好きなものが決まったら、[追加] をクリックしてページに追加します。
セクションに画像を追加する
セクションに画像を追加するには、以下の手順を行います。
背景以外の画像：編集パネル内の画像オプションで、[画像を追加] を選択します。
背景画像：編集パネル内で [カスタマイズ] > [背景] の順に進み、ドロップダウンメニューから [画像] を選び [画像を追加] を選択します。
どちらの場合でも [アセットマネージャー] ポップアップウィンドウが開きますので、画像を選択またはアップロードします。
注意：プレミアム写真オプションにアクセスするには、Square オンラインビジネスのサイトのアップグレードが必要です。
画像管理ウィンドウでは、いくつかの方法で画像を追加することができます。
- [マイ画像] を選択すると、Square アカウント上のすべてのウェブサイトにアップロードされた画像が一覧表示されます。複数のサイトをお持ちの場合は、「サイト」ドロップダウンメニューを使用して、対象のサイトに切り替えてください。
- [マイロゴ] を選択すると、Squareアカウント上のすべてのウェブサイトにアップロードされたロゴ画像が一覧表示されます。複数のサイトをお持ちの場合は、「サイト」ドロップダウンメニューを使用して、対象のサイトに切り替えてください。
- [プレミアム写真] を選択すると、1億点以上の最高品質で使用料無料の写真にアクセスできます（アップグレードが必要）。
- [Instagram] を選択すると、お使いのInstagramアカウントに接続して、サイト上でInstagramの画像を利用することができます。
新しい画像をアップロードするには、画像管理ウィンドウで [マイ画像] または [マイロゴ] にアクセスし、お持ちのコンピューターからアップロードしたいファイルのリンクを選択します。アップロード可能な画像の形式は以下のとおりです。
- JPG
- PNG
- GIF
Square オンラインビジネスで作成したサイトでの画像の利用については、以下の推奨事項をご覧ください。
背景以外の画像：
- サイト上のページに背景以外の画像を追加する際は、長辺が1000ピクセル以下のJPEGファイルを使用することをおすすめします。
- 高画質の画像をサイト上で表示させたい場合は、フォトグラファー向けの写真ホスティングサイト（Flickr.comなど）を利用して、そこから画像をサイトへと埋め込むことをおすすめします。Squareでは、数多くのサイトで使用される画像をすべてホストする必要があるため、圧縮されていない高解像度の画像に対応するよう設計されていません。画質の低下を防ぐためにも、他社の画像ホスティングサービスの利用をご検討ください。
背景画像：
- サイトデザインの一部として表示される画像（ヘッダー、バナー、背景画像など）については、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 オンラインビジネスで作成したモバイルサイトで、セクションの背景画像のフォーカス（焦点）を調整することができます。これにより、その画像のオブジェクトに注目を集めることができます。操作は次の手順を行います。
- Square オンラインビジネスのサイトエディタから、モバイルサイト用に背景画像を設定したいページにアクセスします。
- 画像のあるセクションを選択して、編集パネルから [カスタマイズ] > [背景] の順に選択します。
- 引き続き、[…] > [画像の主題を設定] の順に選択します。
- 背景画像の中心オブジェクトに、カーソル（点）を合わせます。これでモバイル版サイトでも常に、画像のオブジェクトが中心で表示されるようになります。
- 完了したら [保存] を選択します。モバイルビューに切り替えると、この変更が行われたモバイルサイトを確認できます。必要に応じて、デスクトップビューで再調整を行います。
- サイトを [公開] して、変更がライブになっているか確認します。
トラブルシューティング
Square オンラインビジネスのサイトにアップロードした複数の画像に同一のファイル名が付いていると、ライブのウェブサイト上で画像に望ましくない挙動が複数生じる場合があります。たとえば、画像が突然誤ったページに表示される、位置が入れ替わる、またはまったく表示されないといったことが起こり得ます。このため各画像をサイトエディタにアップロードする前に、必ず固有のファイル名を付けるよう徹底していただければ、今後はこのような挙動は生じなくなります。
現在このような問題がみられる場合は、以下の手順をでトラブルシューティングを行ってください。
Square オンラインビジネスのサイトの編集から、正しく表示されない画像をすべて消去します。
パソコンまたは端末で、すべての画像に固有のファイル名を付けて管理します。
サイトエディタで、画像をウェブサイトへと再アップロードします。
サイトを [公開] して、変更がライブになっているか確認します。