サイト コンテンツの作成、整理、スタイル設定を行い、ビジネス、ブランド、ストアをオンラインにします。

このガイドでは、Squarespaceの使用を始めたばかりのお客様に向けて、個人ブランド、小規模ビジネス、またはオンライン ストアのオンライン プレゼンスを高めるための基本的かつ重要な手順について説明します。

サイトを構築するときは、ページ構造を作成し、コンテンツを追加してから、サイト スタイルを設定します。Webサイトを家に例えるなら、サイトの構造は部屋の配置であり、コンテンツは部屋に並べられる家具であり、スタイルは、居心地を良くするための色やブランド、その他の装飾の組み合わせといえます。

ヒント: ガイドと動画チュートリアルの他に、2件の Squarespace 入門ウェビナーを提供しています。これらのセッションでは、Squarespace Blueprint AIを使用したテンプレートの構築、サイト、ドメイン、メール オプションの操作、サイト コンテンツの準備、ホームページの構築、色とフォントのスタイル設定について説明します。ウェビナーの所要時間は通常は1時間で、サインアップにSquarespaceサイトやアカウントは必要ありません。

動画を見る

サイトの構造を作成する

ナビゲーションにページを追加して、サイトの構造を作成します。[ページ] パネルにページを追加すると、そのタイトルがサイトのヘッダーにリンクとして表示されます。サイトのコンテンツを複数のページに分割することで、訪問者は重要な最新情報を見つけたり、購入したり、問い合せたりできるようになります。

ヒント: サイトにブログを追加したり、サイトで商品を販売したりする方法については、以下のセクションを参照してください。

ページを追加する

ナビゲーションにページを追加するには、次の手順に従ってください。

1. [ページ] パネルを開き、[メイン ナビゲーション] の横にある [+] をクリックします。
2. 追加するページのタイプを選択するか、事前に作成されたレイアウト ページの [ページ レイアウト] をクリックします。
3. ページ タイトルを入力し、Enterを押します。
4. このページを訪問者が最初に見るページにしたい場合は、ホームページとして設定します。

サイトの作成時には、いくつかのデモ ページが含まれます。お客様は、サイトの構造に合わせてデモ コンテンツを置き換えたり、ページを並べ替えたり、デモ ページを削除して新たにページを作成したりすることができます。

ヒント: メンバー サイトをセットアップすれば、メンバー専用ページにメンバー専用コンテンツを作成することができます。

サイトのヘッダーを編集する

サイトのヘッダーには、サイトのタイトルやロゴ、ソーシャル メディアにリンクするアイコン、コール トゥ アクション ボタン、ショッピング カート アイコンを含めることもできます。これらは、訪問者にとって重要な機能を強調するのに役立ちます。

サイトのヘッダーを編集するには、次の手順に従ってください。

1. サイトのプレビューで [編集] をクリックします。
2. サイトのヘッダーにカーソルを合わせ、[サイトのヘッダーを編集] をクリックします。

詳細については、「サイト ヘッダーを構築する」を参照してください。

ページにコンテンツを追加する

サイトの構造を作成したら、ページにコンテンツを追加します。ページは個々のセクションで構成されており、セクションに応じてブロックまたはコレクション アイテムを追加してコンテンツを作成します。

• ブロックとは、ドラッグ&ドロップでテキスト、画像、ボタン、その他の機能を追加する方法を指します。
• コレクション アイテムとは、ブログ投稿、商品、イベントなどのコンテンツのセットを指します。

ブロックにコンテンツを追加する

ブロックは、サイト上にコンテンツを表示するための主要な機能です。ページにブロックを追加するには、次の手順に従ってください。

1. [ページパネル] を開きます。
2. 左側のパネルで、編集するページをクリックします。
3. ページ プレビューの左上隅にある [編集] をクリックします。
4. ページが空白の場合は、[+] をクリックしてセクションを追加します。ページにすでにセクションがある場合は、この手順をスキップします。
5. [ブロックを追加] または挿入箇所をクリックし、追加するブロックを選択します。詳細については、「ブロックを使用してコンテンツを追加する」を参照してください。

さらにブロックを追加するには、このプロセスを繰り返します。コンテンツを配置するには、ブロックをクリックしてドラッグし、ページ内を移動します。[保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了] をクリックしてから [保存] をクリックしてエディターを閉じます。

ページにセクションを追加するには、セクションの上または下にある [+] をクリックします。どのタイプのページにも、ブロック セクション、ギャラリー セクション、および自動レイアウトを追加できます。あるセクションのレイアウトを再利用する場合は、それを保存して別のページに追加できます。詳細については、「ページのセクション」を参照してください。

コレクション ページにコンテンツを追加する

コレクションとは、ブログ ページのブログ投稿などの関連アイテムのセットを指します。すべてのコレクション ページは、ランディング ページと個々のコレクション アイテム ページからなる2層構造になっています。たとえば、ブログのランディング ページには、アイキャッチ画像や抜粋を含む投稿のリストが表示され、クリックすると投稿全体を開いて読むことができます。

注: コレクション ページのアイテムは削除できますが、コレクション ページのセクションを削除することはできず、この場合はページ全体を削除する必要があります。デモ コンテンツを使用する場合は、削除できないセクションがある可能性があるため、カスタマイズする前に、使用中のページ タイプを確認してください。柔軟性を最大限に高めるために、レイアウト ページを使用することをおすすめします。

具体的な手順については、以下のリンク先のガイドを参照してください。

• Squarespaceのアクセシビリティ リソース
• ブログに投稿を追加する
• オンライン ストアに商品を追加する
• コレクション ページのセクションを作成する
• 今後のイベントのリストを作成する
• ポートフォリオでさまざまなプロジェクトを紹介する

ブログ ページを追加する (オプション)

新しいコンテンツを定期的に公開する予定がある場合は、ブログ ページが最適です。訪問者と何かを共有する準備ができたら、いつでも新しいブログ投稿をブログ ページに追加できます。上記の手順に従って新しいブログ ページを追加し、投稿やその他のコンテンツを追加しましょう。

新しい投稿を追加する

ブログ投稿を追加するには、次の手順に従ってください。

1. [ページ] パネルで、ブログ ページをクリックします。
2. サイド パネルの右上隅にある [+] をクリックします。
3. ブログ投稿にタイトルとコンテンツを追加します。
4. [公開] にカーソルを合わせて [公開] をクリックすると、すぐに公開されます。

オーディエンスとつながる

ブログ ページには、訪問者がコンテンツを簡単に見つけて利用できるようにするための機能が多数組み込まれています。

• 訪問者が関連コンテンツをより簡単に見つけられるように、投稿を整理して、カテゴリーとタグを追加します。
• 訪問者がコンテンツとインタラクションできるように、コメントを有効にします。
• 訪問者に常に最新の情報を提供するには、ブログにメール購読を追加するか、ブログ投稿をメール キャンペーンに変換します。

ポッドキャストを立ち上げる

ブログ ページでは、音声ブロック付きのブログ投稿を使用してポッドキャストを立ち上げることもできます。ブログ ページは、AppleポッドキャストでRSSフィードを設定できるように設計されています。詳細については、「Squarespaceを使ったポッドキャスト配信の概要」を参照してください。

オンライン ストアを立ち上げる (オプション)

BusinessプランまたはCommerceプランをご利用の場合は、サイトを通じて商品やサービスを販売できます。ストアを立ち上げて運営するには、以下のチェックリストを使用してください。詳細な手順については、リンク先のガイドをご覧ください。

1. ストア ページに商品を追加する
2. 支払い処理業者に接続する
3. 配送オプションを設定する (有形商品を販売している場合)
4. 税率を設定する
5. サイトの精算をカスタマイズする

ヒント: 収入につながるサイトの構築に役立つさまざまなツールを提供しています。コンサルティングからコーヒー カップまであらゆるものを販売できます。最適なツールを見つける方法については、「サイトの収益化」を参照してください。

サイトのスタイルを編集する

サイトのスタイルを編集して、フォント、色、その他のデザイン エレメントを変更します。[デザイン] パネルで、コンテンツに対してサイト全体で変更を加えたり、特定のページ セクションのスタイルを変更したりすることもできます。

サイト全体のスタイルを編集する

ページの編集中にサイト全体のスタイルを変更するには、サイト スタイルを開き、以下をクリックします。

• フォント - フォント パックを選択し、さまざまなテキスト タイプのサイズを変更します。
• 色 - カラー パレットを選択し、カラー テーマを編集します。
• [アニメーション] - コンテンツにちょっとしたアニメーションを追加します。
• 間隔 - エレメント間のパディングまたはスペースを変更します。

サイトのボタンや画像ブロックのスタイルを設定することもできます。詳細については、「スタイルを変更する」を参照してください。

個々のセクションのスタイルを設定する

セクション スタイルを使用して個々のセクションのスタイルを設定し、レイアウト、表示、または背景の要素を変更することができます。セクション スタイルはグローバル スタイルを上書きします。

セクション スタイルを編集するには、次の手順に従ってください。

1. [ページ] パネルを開き、編集するページをクリックします。
2. ページ プレビューの左上隅にある [編集] をクリックします。
3. スタイルを設定するセクションにカーソルを合わせ、鉛筆アイコンをクリックします。
4. オプションはセクションによって異なります。変更を加えた後、[保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了] をクリックしてから [保存] をクリックしてエディターを閉じます。

詳細については、「スタイルを変更する」を参照してください。

スタイル ガイドを作成する (オプション)

サイトをデザインする際には、「リンクなし」セクションにスタイル ガイド ページを作成することを検討してください。このページは、サイトに適用するスタイル設定オプションの‌参照ポイントとして機能します。このページにより、以下を行うことができます。

• ブランドのデザイン エレメントを試し、確立する
• サイト構築プロセスの後半で修正を行うのにかかる時間を削減する
• サイトの作成者間の一貫性を向上させる

スタイル ガイドを作成するには、以下のデザイン エレメントのガイドラインを含めます。

• 色: 16進カラー コード、カラー パレット、およびテーマ
• タイポグラフィー: フォント、サイズ、スタイル、間隔
• ロゴ: 寸法、解像度、プラットフォームに適したバリエーション
• レイアウト: 余白とパディング
• 画像: 承認された写真ライブラリーとクレジット形式
• エディトリアル: 音声、語彙、文法

これらを以下のサイト エレメントに適用し、上記のスタイルの選択がサイトでどのように表示されるかをプレビューしてから、スタイル ガイドにも追加します。

• 見出し
• 段落テキスト
• ボタン
• 線
• リンク

以下は、スタイル ガイドに含めることができるいくつかのエレメントの例です。

サイトを公開する

このガイドを読んだ後、サイト公開チェックリストを見直して、サイトが訪問者や検索エンジンに対応できる準備ができているかどうかを確認することをおすすめします。

準備ができたら、サイトの下部にあるバナーの [サブスクリプション登録] ボタンをクリックして、サイトを有料サービスへアップグレードできます。プランの価格と機能の詳細については、「適切なSquarespaceプランを選択する」を参照してください。