さまざまなサイト エレメントがモバイル訪問者にとってどのように見えるかについて説明します。

Squarespaceサイトは、訪問者がコンピューターやタブレット、スマートフォンなど、どの端末を選択してもサイトに移動できるように設計されています。

このガイドでは、特定のサイト エレメントがモバイルでどのように表示されるかを説明し、モバイル用スタイルを変更するためのヒントを紹介します。

動画を見る

サイトをモバイル対応にする

すべてのSquarespaceサイトは、小さなブラウザーで端末の形式に合わせて調整されます。これはレスポンシブ デザインで行われ、サイトを表示するブラウザー ウィンドウのサイズに基づいてコンテンツが自動的にサイズ変更されます。一般的に、モバイルではコンテンツは縦にスタックされます。つまり、訪問者はスクロールしてすべてのコンテンツを表示できるため、ピンチ、ズーム、スクロールを何度も行う必要がなくなります。

サイトがSquarespaceバージョン7.0である場合、テンプレートには、サイトがモバイル端末で表示されていることを検出したときにアクティブになる、追加の組み込みモバイル用スタイルが含まれている場合があります。詳細については、以下の「バージョン7.0モバイル用スタイル」セクションを参照してください。

バージョン7.1では、サイトはモバイル ビューに自動的に適応しますが、創造エディター セクションやヘッダーなどの一部のエリアにはモバイル固有のオプションがあります。

モバイル向けSEO

Googleでは、モバイルに最適化されたサイトが優先されます。Squarespaceサイトの独自のモバイル用スタイルは、検索エンジンに適していて、モバイル検索ですぐに見つかります。詳細については、「SquarespaceのSEO向けの機能」を参照してください。

デザインをモバイル用に最適化すること以外にも、サイトをモバイル フレンドリーにするためにできることがあります。たとえば、ポートフォリオやインデックス ページのコンテンツを制限する、ブログの抜粋を使用する、画像サイズを縮小する、ページ内の画像数を最小限に抑えるなどです。詳細については、「サイトをモバイル フレンドリーに保つためのヒント」を参照してください。

モバイル上でサイトを確認する

モバイルでサイトがどのように動作するかを知る最善の方法は、自分でテストすることです。組み込みの端末別プレビューを使用し、モバイル端末でテストすることをお勧めします。

端末別プレビュー

端末別プレビュー ツールは、サイトのさまざまなモバイル ビューを表示します。これは、編集中にコンピューターからサイトのレスポンシブ デザインをテストする場合に適した方法です。詳しい手順については、「端末別プレビュー」をご覧ください。創造エディターを使用するエリアでは、端末別プレビューを使用してモバイル レイアウトをコンピューター レイアウトとは別に編集できます。

端末を使用する

ウィンドウ サイズはデバイスによって異なり、一部のモバイル機能は実際のモバイル端末での表示が端末別プレビューと異なるため、可能であれば任意のデバイスでサイトを表示してみることをお勧めします。

モバイル端末からサイトにアクセスするには、モバイル ブラウザーのナビゲーション バーにサイトのURLを入力します。

ヒント: 試用中にモバイル訪問者としてサイトをプレビューするには、所有者ログインを使用するかわりに、サイト全体のパスワードを追加します。

オーディオと動画

オーディオ ファイルと動画は、各デバイスまたはブラウザーの機能に応じて開かれ、再生されます。iOSを含む一部の端末では、オーディオ ファイルは端末のメディア プレーヤーで開きます。

ページ上の動画は、サポートされているすべてのモバイル向けブラウザーでで再生されます。カスタム サムネイルを画像オーバーレイとして追加した場合は、2回タップして動画を再生します。次のセクションでは、モバイルでの動画バナーの仕組みについて説明します。

ブロック

ブロックを利用すると、セクション、ページ、およびブログ投稿などのその他の編集可能なエリアにコンテンツを追加できます。モバイルでブロックがどのように表示されるかは、サイトのバージョンとブロックが追加された場所によって異なります。

創造エディターを使用するバージョン7.1サイトのエリアでは、コンピューター レイアウトとは別にモバイル レイアウトを配置します。

バージョン7.0のサイトと、クラシック エディターを使用しているバージョン7.1のサイトでは、Squarespaceのレスポンシブ デザインがモバイル端末上で自動的にブロックを縦にスタックします。詳細を確認し、仕組みについての動画を視聴するには、「クラシック エディターを使用する場合のモバイルでのブロックのスタック」をご覧ください。

• 単一列 - モバイル端末では全幅ブロックが縦にスタックし、ページのコンピューター レイアウトが維持されます。
• 複数列 - モバイル端末では、2番目、3番目、およびそれ以降の列が1列目の下に移動し、横ではなく縦方向に積み重ねられます。
• フローティング ブロックは、モバイルではテキスト ブロックの上に表示されます。

スペース調整ブロックは、バージョン7.0の一部のテンプレートを除き、モバイルでは自動的に非表示になります。

ドメイン

サイトの組み込みドメインとカスタム ドメインは、パソコンとモバイルの両方で機能します。モバイルURLを別途用意する必要はありません。

モバイルでのサードパーティー ドメインの接続で問題が発生した場合は、そのドメインがサイトに正しくリンクされていることを確認してください。

ファビコンまたはブラウザーのアイコン

ファビコン (ブラウザー アイコン) の表示は、お使いのモバイル ブラウザーによって異なります。場合によっては、ファビコンがまったく表示されないこともあります。

ギャラリー

モバイルでギャラリーがどのように表示されるかは、サイトのバージョンとギャラリーの形式によって異なります。

ヒント: 大きな画像ファイルがある場合、または画像が多すぎる場合は、モバイルでサイトの読み込みが遅くなることがあります。詳細については、「サイトをモバイル フレンドリーに保つためのヒント」を参照してください。

ギャラリー ブロック

創造エディターの場合、ギャラリー ブロックはモバイルでもコンピューターでも同じように表示されますが、そのサイズと配置の変更も可能です。クラシック エディターの場合、ギャラリー ブロックがモバイルでどのように表示されるかは、レイアウトによって異なります。

• Grid - 幅2列のグリッドとして表示します。
• Slideshow - スライドショーのままとなります
• Carousel - カルーセルとして表示されますが、一度に表示される画像は1枚のみです。
• Stack - スタックしたままとなります

通常、画像のキャプションはモバイルでもコンピュータと同じように表示されます。スライドショー ギャラリー ブロックの場合、キャプションは幅が480ピクセル未満のブラウザーでは表示されません。

詳しくは、「ギャラリー ブロック」をご覧ください。

ヘッダー エレメント

モバイルでは、お知らせバー、ナビゲーション メニュー、サイトのタイトルとロゴが移動する場合があります。

お知らせバー

お知らせバーは、モバイルのページの上部に表示されます。

これらのバージョン7.0テンプレート ファミリーでは、お知らせバーはヘッダー オーバーレイの下とページ コンテンツの上に表示されます。

• Brine
• York

ナビゲーション メニュー

ナビゲーション メニューがどのように表示されるかは、サイトのバージョンによって異なります。

詳しくは、「ナビゲーションのスタイル設定」をご覧ください。

サイトのタイトルとロゴ

サイトのタイトルやロゴの表示形式は、サイトのバージョンによって異なります。

画像

モバイル端末の幅の狭さに対応するため、モバイルでは一部の画像や画像機能が変更されます。

バナーとセクションの背景画像

モバイル端末では、バナーとセクションの背景画像が常にトリミングされます。バナー画像や動画は幅が広く横向きであるのに対し、モバイル端末の画面は幅が狭く縦向きになるため、トリミングが発生します。

画像をアップロードする前に、バナー画像の書式設定のヒントとレスポンシブ デザイン画像のベスト プラクティスに従ってください。モバイル端末でサイトを表示する際には、次の点に注意してください。

• トリミングの量は、バナーの高さとブラウザーの幅によって異なります。
• バナーの高さの設定は、必ずしもモバイルに適用されるとは限りません。
• 接続速度が遅い場合、またはブラウザーで動画バナーが許可されていない場合、動画バナーはモバイルに読み込まれません。動画を読み込めないときにモバイル用代替画像が表示されるように設定します。
• サイト全体のバナーでは、iOSを含む一部のモバイル端末で [位置を固定する] 設定が表示されません。詳細については、「バージョン7.0でサイト全体の背景画像を追加する」を参照してください。

バナー画像のトリミングの影響を最小限に抑えるには、「トリミングに関する問題のトラブルシューティング」を参照してください。

画像キャプション

サイトが使用するキャプションの種類は、サイトのバージョンによって異なります。

InstagramとFlickrのブロック

InstagramやFlickr などのソーシャル アカウントの画像を表示するブロックでは、幅が2列のグリッドに画像が表示されます。

ライトボックス

一般に、モバイル端末はライトボックス効果をサポートしていますが、いくつかの制限があります。

• ピンチによるズームはサポートされていません。
• 画像にカーソルを合わせるとキャプションが表示される場合は、ライトボックスの右下に白い点が表示されます。この点をタップすると、キャプションが表示されます。
• バージョン7.0では、Wexleyギャラリー ページでライトボックスが無効になります。

ページ エレメント

サイトをモバイル フレンドリーにするための、モバイルでのホバー効果とパディング。

ホバー効果

スマートフォン、タブレット、タッチスクリーン ラップトップなどのタッチスクリーン端末は、ホバーをサポートしていません。サイト上でホバー効果のあるエレメントの場合、タップすると効果が表示されることがあります。以下に例をあげます。

• ドロップダウン メニューはタップすると表示されます。
• 商品アイテム名と価格は画像の下に表示されます。
• 画像キャプションは、デバイスの種類とブラウザーの幅に応じて、常に表示される場合、タップしたときに表示される場合、またはまったく表示されない場合があります。
• ポートフォリオのサブページのタイトルとアイキャッチ画像はまったく表示されない場合があります。

パディング

Squarespaceサイトには多くの場合モバイル パディングが組み込まれていて、小さいブラウザーやレスポンシブ デザイン向けにサイトを最適化するのに役立ちます。そのため、コンピューター上のサイトに影響するスペースやパディングを微調整しても、モバイルでの表示に必ずしも影響するとは限りません。

プロモーション ポップアップ

サイトでプロモーション ポップアップを使用している場合は、モバイルでも有効にしておくことができます。すべてのモバイル ポップアップは、既定では標準の半ページ スタイルになります。これにより、検索結果でサイトをランク付けするためのGoogleのルールに対応できます。

[スタイル] パネルを使用してモバイルのデザインをカスタマイズするか、[表示とタイミング] パネルでモバイルのポップアップを無効にします。

ストア ページとコマース

顧客は、コンピューターの場合とほとんど同じように、モバイル端末でもサイトで買い物をすることができます。サイトの他の部分と同様に、Squarespaceストアは、小さな画面でもモバイルで操作しやすいように適応しています。商品は縦にスタックします。個別の商品詳細ページでは、商品画像は説明、価格、[カートに追加] ボタンの上にスタックして表示されます。

他のスタイルはサイトのバージョンによって異なります。

テキストとフォント

フォントは通常、モバイルでも同じスタイルになりますが、見出しなどの大きなフォントは、ブラウザーの幅に合わせて縮小されることがあります。モバイルでテキストが重なる場合は、フォントの行の高さを変更してください。

サイトの本文またはフッターのテキストに追加された電話番号は、Safariモバイル ブラウザーにリンクとして表示されます。

一部のバージョン7.0テンプレートではスケーリング フォントが使用されているため、タイトル、見出し、その他の重要なテキストの最大サイズと最小サイズを手動で設定できます。

バージョン7.0のモバイル用スタイル

以下の機能はバージョン7.0サイト固有の機能です。

• カバー ページ - カバー ページはレイアウトに基づいてモバイル環境に適応します。
• ページ固有のヘッダーとフッター - ページ ヘッダーまたはフッターをサポートするテンプレートの場合、コンテンツはモバイルで表示されます。
• パララックス スクロール - パララックス スクロールは特定のテンプレートで使用できる特殊効果で、背景画像の動きが前景のコンテンツよりも遅くなります。Brineファミリーの場合、モバイルで利用できます。
• サイドバー - サイドバーはモバイルではページの下部に表示されます。Ishimotoテンプレートでは、サイドバーはモバイル デバイスに表示されません。
• サイト全体の背景画像 - サイト全体の背景画像はモバイルでサポートされています。背景画像を表示するには、コンテンツ エリアを透明にすることが必要となる場合があります。

テンプレート固有のスタイル

特定のテンプレートのモバイル オプションの詳細については、テンプレート ガイドを参照してください。

モバイル固有のオプションがあるすべてのテンプレートのリストについては、「高度なモバイル用スタイルを参照してください。

モバイル用スタイルを無効にする

Squarespaceテンプレートのほとんどは、モバイル端末向けに最適化された独自のデザインがあり、訪問者がどのデバイスからでもサイトを表示および移動できるようになっています。一部のテンプレートには、必要に応じてこの機能を無効にするオプションもありますが、モバイル用スタイルは有効にしておくことをお勧めします。

以下の点に留意してください。

• モバイル用スタイルを無効にすると、サイトはモバイル端末でもコンピューターと同じように表示されます。サイト コンテンツを1つの縦の列にスタックする代わりに、ブロックやその他のコンテンツはコンピューターのブラウザーと同じレイアウトで表示されます。
• モバイル用スタイルを無効にすると、SEOに影響する可能性があります。2015年4月、Googleはモバイル端末検索でサイトをランキングする際に「モバイル フレンドリー」を判断基準に追加しました。Squarespaceサイトは、モバイル用スタイルが有効になっている場合に限りGoogleの要件に準拠します。
• モバイル用スタイルを無効にすると、モバイル ナビゲーションが無効になります。
• カバー ページのモバイル用スタイルは無効にできません。

モバイル用スタイルを無効にする方法は次のとおりです。

1. [デザイン] パネルを開き、[テンプレート設定] をクリックします。
2. [モバイル用スタイルを無効にする] をオンにします。
3. [保存] をクリックします。

テンプレートがモバイル用スタイルの無効化をサポートしていない場合、このオプションは表示されません。モバイル用スタイルは、次のテンプレート ファミリーでは無効にできません。

• Brine
• Farro
• Galapagos
• Skye
• Supply
• Tremont
• York

よくある質問

Squarespaceはモバイルまたはコンピューターのスタイルをいつ表示するかをどのように決定しますか？

モバイル端末でサイトにアクセスすると、Squarespaceはモバイル オペレーティング システムを自動的に検出します。これにより、モバイル用スタイルを表示する信号が送信されます。ただし、サイトがバージョン7.0でモバイル用スタイルが無効である場合を除きます。

サイトをモバイルで編集できますか？

iOSまたはAndroid用のSquarespaceアプリを使用して、モバイルでサイトを編集できます。

Squarespaceサイトの一部のエレメントはモバイル ブラウザーからログインしてモバイル端末で管理できますが、一部の機能はコンピューターでのみ利用できます。

モバイル用スタイルとレスポンシブ デザインの違いは何ですか？

バージョン7.0のモバイル用スタイルとレスポンシブ デザインは異なりますが、関連する概念です。

• モバイル用スタイルはバージョン7.0テンプレートに固有の機能です。これらのスタイルは、モバイル特有のナビゲーションや、コンテンツ背景の読み込み制限など、モバイル端末での処理が複雑なデザイン要素にのみ影響します。モバイル用スタイルを無効にしてコンピューターに近いバージョンのサイトを表示すると、これらの要素は無効になります。
• レスポンシブ デザインとは、サイトとそのコンテンツ エレメントを、訪問者のブラウザー ウィンドウに合わせてサイズ変更する機能を指します。7.0のモバイル用スタイルが無効になっていても、すべてのSquarespaceサイトでレスポンシブ デザインが維持されます。つまり、Webサイト全体は引き続き小さなデバイスに合うようにサイズ調整されます。ただし、モバイル用スタイルが無効になっている場合、コンテンツに対してナビゲーションを容易にするための再配置はされません。バージョン7.1ではモバイル用スタイルを無効にできないため、コンテンツは必ず再配置およびサイズ変更されます。詳細については、「レスポンシブ デザイン」を参照してください。

カスタムCSSを追加してサイトのモバイル レイアウトを変更できますか？

はい。ただし、カスタム コードの変更は当社サポートの範囲外です。つまり、セットアップやトラブルシューティングに関し、当社はこれ以上のサポートを提供することができません。さらに、コードベースのソリューションに関しては、その機能性やSquarespaceとの完全な互換性は保証できません。これには、Squarespaceのレスポンシブ デザインにおける当該ソリューションの機能性 (特にモバイル端末上での外観) や、すべてのテンプレートでソリューションが機能するかどうかが含まれます。カスタム コードは、当社プラットフォームの今後の更新時に、表示に関する問題を引き起こす可能性もあります。当社はこれ以上サポートを提供できかねますが、次のように、お客様が問題解決のために参照できるリソースが多数あります。

• カスタム コードを追加するためのベスト プラクティスについて学びましょう。
• 「サードパーティーのカスタマイズに関する基本ガイド」をお読みください。
• 当社の顧客および開発者用コミュニティであるSquarespace Forumをご覧ください。
• Squarespace Expertに依頼して、ご自分のサイト用にカスタム コードを作成してもらいましょう。Squarespace Marketplaceを通じて利用できる専門家サービスの詳細をご覧ください。