テンプレートの仕組みと開発方法について紹介します。

通常、Squarespaceサイトの構築はテンプレートから始まります。受賞歴のあるデザイン チームによって構築されたSquarespaceテンプレートは、サイト デザインに関するアイデアを広げるための開始点です。デモ コンテンツをご自身のものに置き換えることで元のデザインの構造をそのまま維持することもできますし、サイトのデザインを完全に変更してゼロから始めることもできます。各デザインには、Squarespaceプラットフォーム専用の独自のコーディングと設計がなされています。

このガイドでは、Squarespaceテンプレートの仕組みと開発方法について紹介します。

バージョン7.1とバージョン7.0のテンプレートの違い

テンプレートの動作は、サイトのバージョンによって異なります。

バージョン7.1

最新バージョンのSquarespaceにおいて、「テンプレート」という言葉は新しいSquarespaceサイトの出発点として選択するデザインを指します。利用可能なテンプレートから選択することで、サイトのレイアウトとデザインに関するインスピレーションを得ることができます。Squarespace Blueprint AIを使用して独自のテンプレートを作成し、サイトの初期デザインを完全にカスタマイズすることもできます。

新しい機能やスタイルにアクセスするためにテンプレートを変更する必要はありません。バージョン7.1のすべてのサイトは同じテンプレート ファミリーに属しており、サイトの機能とスタイル オプションも同じです。そのため、バージョン7.1の新しいサイトを好きな方法でカスタマイズできます。テンプレートを切り替える方法については、「最初からやり直す」をご参照ください。

ヒント: Squarespace Collectionパートナーシップ シリーズで、サイトのアイデアを探しましょう。現在、ビジュアル アーティストのジェフ・クーンズとコラボレーションしており、一緒にReflectテンプレートを構築しました。他の刺激的なアーティストと、彼らが構築したテンプレートを見つけるには、「適切なテンプレートを選択する」をご参照ください。

バージョン7.0

以前のバージョンでは、各テンプレートに含まれるスタイル設定と特別な機能は固定されており変更ができないため、サイトのテンプレートの影響力は大きくなります。詳細については、テンプレートの比較表をご覧ください。

テンプレートのカスタマイズ

サイトのニーズに合ったテンプレートを選択したら、コンテンツを目立たせるためにカスタマイズできます。アクセシブルなサイトを作成するには、インクルーシブなデザインに関するヒントをご覧ください。

サイトをカスタマイズする方法は、サイトが使用しているSquarespaceのバージョンによって異なります。

ヒント: コーディングの知識をお持ちの場合は、より応用的な方法でサイトをカスタマイズできます。

テンプレートの開発

Squarespaceの開発者とデザイナーが協力し、美的観点と技術的観点のどちらにおいても優れたテンプレート デザインを作成しています。当社の開発者がテンプレートを作成するために使用する主なWeb言語は、HTML、CSS、JavaScript、JsonT、JSONです。

• HTMLは、ページ上でコンテンツが表示される位置など、デザインの構造的なエレメントを作成します。
• CSSは、色やフォントなど、デザインのスタイル オプションを決定します。LESS CSSプリプロセッサーを使用してプロセスを合理化し、テンプレート全体の連続性を確保します。
• JavaScriptは、ギャラリー、ImageLoader、その他のインタラクティブ機能など、デザインの中核となる機能を作成します。
• JSonTは、画像やテキストなどのサーバーからのデータをHTMLに変換する方法を指定する言語です。HTMLは、ページに表示される内容を決定します。
• JSONは、編集インターフェイスでサイトに追加した画像やテキストを表現するデータ形式です。これは、オンライン エディターとテンプレートのJsonTコードを繋ぎます。JSONは、JsonTにより形作られた生の粘土のようなものと考えることができます。サイトのJSONを見るには、サイトのページを開いてURLの末尾に「?format=json-pretty」を追加します。

新しいテンプレートと機能

新しいデザインのテストと最終確認が完了すると、利用可能なテンプレートに追加されます。

ブラウザーとユーザーの進化するニーズに合わせ、当社はテンプレートとSquarespaceプラットフォームを更新しています。これは、新しいトレンドに対応し、すべてのSquarespaceサイトを優れた効率で運用できるようにするためです。

Squarespaceユーザーは、これらの改善点を自動的に受け取ります。多くの場合、変更内容 (スタイル微調整オプションの名前をより直感的なものに変えるなど) は小さなものですが、新しいオプション (背景画像を「はめ込み」に設定したときに境界線の色を選択できるなど) が追加される場合もあります。

備考: Squarespace開発者プラットフォームを有効にしている開発者には、テンプレート固有の更新情報は届きません。

その他のヘルプ

テンプレートの詳細については、次のガイドをご覧ください。

• サイトのバージョンとテンプレートについて
• 適切なテンプレートを選択する
• テンプレートの切り替えとテンプレートの切り替えに関するよくある質問
• テンプレートの比較表
• 廃止されたテンプレートのチートシート
• バージョン7.0の場合、各テンプレート ファミリーごとの詳細ガイドがあります。

よくある質問

コンテンツの表示方法はページごとに制御できますか？

バージョン7.1では、ページの個々のセクションのスタイルを設定できます。

バージョン7.0の一部のテンプレートでは、ページごとのカスタマイズが可能です。たとえば、「Supply」ではストア ページとインデックス ページに異なる背景色を設定できます。ただし、色、フォント、ヘッダー サイズなどのサイトのエレメントに関するスタイルのルールは、基本的にはサイト全体で統一されています。

バージョン7.0からバージョン7.1への移行はできますか？

はい。更新ツールを使用して、サイトをバージョン7.0からバージョン7.1に移行できます。新しいバージョンに移行すると、完全にカスタマイズ可能なページ セクションなどの最新機能にアクセスできるようになります。サイトをバージョン7.1に更新する方法に関する詳細については、「Squarespaceバージョン7.0からバージョン7.1への移行」をご覧ください。

サイトのすべてのスタイル属性を完全に制御できないのはなぜですか？

Squarespaceのすべてのテンプレートは、当社のデザイン チームによって作成されています。当社のデザイナーが各テンプレートに対し作成するスタイル ルールをもとに、お客様はゼロから構築を始めたり高度なデザイン スキルを持ったりする必要なく、美しいWebサイトを作成することができます。また、最新のコーディング技術を採用し、最近のブラウザーやモバイル端末とサイトの互換性を確認しています。

サイトの一貫性を保ち、異なるエレメント間の競合を防ぐため、パラメーターが固定されたスタイル微調整オプションがテンプレートに事前に設定されています。上級ユーザーは、コード挿入、コード ブロック、 CSS編集、またはSquarespace開発者プラットフォームを使用してサイトのコードをさらに変更できます。

開発者が独自のテンプレートをデザインして販売できないのはなぜですか？

Squarespaceを特別なプラットフォームにしている要素の1つがテンプレート デザインです。Squarespaceプラットフォームに最適化され、卓越性の基準を満たしたデザインの構築に私たちは大きな誇りを持っています。そのため、当社のデザインを他のプラットフォームで利用できるようにはしておらず、サードパーティーのデザイナーがSquarespaceサイト向けのテンプレートを販売することもできません。

ただし、当社のSquarespace Marketplaceを通じて、お客様は専門家とつながることができます。Squarespace Expertは当社のプラットフォームに精通しているため、カスタマイズされたコーディング、設計、開発に関するサポートがカスタマー サポート外で必要な場合の手助けとなる可能性があります。