Squarespaceを使用して最初のWebサイトを構築する方法

Squarespace 素晴らしいの一つです ウェブサイトビルダー。 It's ideal if you're using for your website without wanting to worry about the setup and maintenance hassles of CMSes like次のようなCMSのセットアップとメンテナンスの煩わしさを心配せずに、Webサイトに使用している場合に理想的です。 WordPress.

ゴージャスなウェブサイトをすばやく簡単にまとめることができることに驚くでしょう。 ドメイン名 およびSquarespaceサブスクリプション。

この初心者向けSquarespaceガイドでは、作成するために必要な正確な手順を見ていきます。 最初のウェブサイトを立ち上げる.

次のSquarespaceコンポーネントについて説明します。

1. デザイン（サイトの全体的なルックアンドフィールをカスタマイズする）
2. ページ（サイトにコンテンツを追加する）
3. 設定（SEOおよびその他のビジネス設定の微調整）

これらのコンポーネントを理解すると、プラットフォームを使用してあらゆる種類のWebサイトを構築できるようになります。

Squarespaceの使い方…始める前の準備

Squarespaceを使用してWebサイトを構築する前に、いくつかのことが必要になります。

1.ドメイン名

ウェブサイトの設定手順のXNUMXつとして、ドメイン名をSquarespaceアカウントにリンクします。

So, you will need a domain name.したがって、ドメイン名が必要になります。 If you haven't purchased a domain name yet, purchase one now.ドメイン名をまだ購入していない場合は、今すぐ購入してください。

Squarespaceからも購入できますが、お勧めしません。
ホスティングプロバイダー間のドメイン転送または ウェブサイトビルダー または、ドメインがに登録されている場合、CMSは常に簡単です。 サードパーティのドメインレジストラ.

NameCheap SquarespaceWebサイトのドメイン名を購入するにはチェックしてください。

注：ヘルプが必要な場合 ドメイン名の登録 あなたのウェブサイトのために、これら ドメイン名ジェネレータ 役立つかもしれません。

2.サイトのナビゲーション構造の大まかなアイデア 

Knowing your site's navigation structure (or its main menu items) before starting to build it makes the process faster.サイトの構築を開始する前に、サイトのナビゲーション構造（またはそのメインメニュー項目）を知っていると、プロセスが速くなります。 So take a paper and draw how your site menu will look like.だから、紙を取り、あなたのサイトメニューがどのように見えるかを描いてください。 This exercise will help in finalizing the different pages you'll be adding to your site.この演習は、サイトに追加するさまざまなページを完成させるのに役立ちます。

たとえば、次のページのいくつかをサイトに追加できます。

3.コピーとグラフィック

The last thing you'll need before you begin creating your site is content.あなたがあなたのサイトを作り始める前にあなたが必要とする最後のものはコンテンツです。 So write rough drafts of all the pages that you're going to add.したがって、追加するすべてのページのドラフトを作成します。

また、Squarespace の Web サイトを構築するために必要なすべての画像 (またはビデオ) を積み上げます。 必要な場合 ストック画像、そちらもアレンジ。 適切な画像を持つことで、 大きな影響を与える 変換について。

すべてのコンテンツとメディアを手元に置いておくと、かなり時間がかかります。

それでは、サイトの構築から始めましょう。

（Squarespaceトライアルに既にサインアップしている場合は、ガイドの最初の部分にジャンプしてください。）

最初のSquarespaceWebサイトを構築する方法

ステップ1：SquarespaceWebサイトにサインアップする

All Squarespace plans begin with a free trial.すべてのSquarespaceプランは、無料トライアルから始まります。 To sign up for a free trial, visit無料トライアルにサインアップするには、次のWebサイトにアクセスしてください。 Squarespace 'へのオプションを選択しますサイトを作成する':

次に、テンプレートを選択します。

この手順を簡単にするために、Squarespaceはテーマを次のカテゴリにグループ化します。

Squarespaceテーマのサンプル

Squarespaceのテーマで見つけることができるデザインの数は次のとおりです。 Click on the following thumbnails to have a clearer view.次のサムネイルをクリックすると、見やすくなります。

ウォークスルーSquarespaceサインアップ プロセス

このウォークスルーの目的のために、Squarespaceアカウントを使用してセットアップしました。

私はビジネスカテゴリに行き、テンプレート、モントークを選択しています。

テンプレートを選択すると、Squarespaceは短いサインアップフォームを表示します。

サインアップが完了すると、4ステップのSquarespaceサイトコンテンツのパーソナライズプロセスに移動します。

1.サイトの対象者の選択

2.このウェブサイトは何についてですか？

3.このサイトの目標は何ですか？

4.サイトに名前を付ける

サイトコンテンツのパーソナライズアンケートに回答すると、次の画面が表示されます。

As you can see in the screenshot, on the left, there's a panel with various design settings and preferences.スクリーンショットでわかるように、左側には、さまざまなデザイン設定と設定を備えたパネルがあります。 And on the right, there's a preview of my website.そして右側に、私のウェブサイトのプレビューがあります。

ステップ2：Squarespaceの使用（パート1）：デザインオプション

Squarespaceのデザイン設定には10個のアイテムがあります。

1. ロゴとタイトル
2. テンプレート
3. スタイルエディタ
4. チェックアウトページスタイルエディタ
5. 画面のロック
6. アナウンスバー
7. モバイル情報バー
8. Squarespaceバッジ
9. カスタムCSS
10. 高機能

これらの各要素を詳しく見ていきましょう。

1.ロゴとタイトル

We've already given our site a name, and so in this step, I'll add a tagline.すでにサイトに名前を付けているので、このステップではキャッチフレーズを追加します。 Let's set the tagline to 'キャッチフレーズを 'に設定しましょうSquarespace初心者向けのリソース.

ボタンをクリックすると、Squarespaceのロゴメーカーツールに移動します。

このロゴメーカーツールを使用すると、次のことができます。

• たくさんのロゴアイコンからお選びください
• テキストベースのロゴだけを作成する
• 画像のロゴを探す
• ロゴテキストのフォントと色を変更する
• 名刺やその他のブランド素材でロゴがどのように表示されるかをプレビューする

Overall, Squarespace's logo maker tool is pretty intuitive.全体として、Squarespaceのロゴメーカーツールは非常に直感的です。 It has its various design elements or icons on the panel on the left-hand side.左側のパネルにさまざまなデザイン要素またはアイコンがあります。

キーワードを検索したとき 「ウェブサイト」、私はたくさんの素晴らしいアイコンを手に入れました。 I chose the one you can see on your right and made an image logo.右の写真を選び、イメージロゴを作りました。

ロゴの高解像度バージョンをダウンロードしようとしましたが、エディターから、Squarespaceアカウントにサインアップしてダウンロードするように求められました。

But still, a low-resolution version can be downloaded at this point too.それでも、この時点で低解像度バージョンをダウンロードすることもできます。 That will do for now.今のところはそれで十分です。

Squarespaceの試用期間が終了し、プレミアムプランにアップグレードすると、問題なく高解像度バージョンをダウンロードできるようになります。 When you get the high-resolution file, you can upload it to your Squarespace site.高解像度のファイルを入手したら、Squarespaceサイトにアップロードできます。

The next two options under this design item are setting the favicon and the social sharing logo.このデザインアイテムの次のXNUMXつのオプションは、ファビコンとソーシャル共有ロゴの設定です。 If you have these, great.あなたがこれらを持っているなら、素晴らしい。 Otherwise, move on to the next setting.それ以外の場合は、次の設定に進みます。

これまでに行った変更を保存するには、「」をクリックします。保存する' パネル上部のボタン。

注：ウェブサイトにすばらしいファビコンを作成したい場合は、無料のリストをご覧ください。 ファビコンジェネレータ あなたは一見することができます。

2.テンプレート

世界 'テンプレート'セクションには、Squarespaceサイト内にダウンロードされたすべてのテンプレートが表示されます。

ご覧のとおり、現在、私のテンプレートリストにはテンプレートのみが含まれています モントーク これは、トライアルを設定するときにサインアップしたテンプレートだからです。

If you're happy with the template you've chosen, go to the next step.選択したテンプレートに満足している場合は、次の手順に進みます。 Or, you can download more templates.または、さらにテンプレートをダウンロードできます。

先端

• この時点では、テンプレートのダウンロードと切り替えに時間をかけないでください。役に立たないからです。
• さまざまなテンプレートがコンテンツをどのように表示しているかを理解できるのは、サイトをデザインしてコンテンツをアップロードした後です。
• デモの内容や画像ではあまり理解できません。

Webサイトが使用しているSquarespaceテンプレートを確認する方法

気に入ったSquarespaceテンプレートを見つけて、それがどのテーマを使用しているか疑問に思っている場合は、次の方法で確認できます。

1. ページを右クリック> [ソースの表示] / [ページソース]
2. 君は気づくよ  コードの上部近くにあり、SquarespaceのWebサイトであることを示しています
3. Ctrl + Fを押して、ページを検索します。 テンプレートID コードをコピーします

私が使用しているテンプレートMontaukは、テンプレートIDを持っています。 50521cf884aeb45fa5cfdb80. やってみて. 

テンプレートIDを見つけたら、 Squarespaceテンプレートファミリー Squarespaceの公式デモサイトに移動します。

3.スタイルエディター

世界 スタイルエディタ フォント、タイトルの色、ロゴの位置、フッターの内容など、テンプレートの設定をカスタマイズするために使用されます。

各テンプレートは、で異なるカスタマイズオプションを提供します スタイルエディタ.

ただし、Squarespaceテンプレートはすべて完璧に設計されているため、もちろんデザイナーでない限り、このセクションには近づかないことをお勧めします。

4.チェックアウトページスタイルエディタ

世界 チェックアウトページスタイルエディタ helps in customizing the settings of the checkout page.チェックアウトページの設定をカスタマイズするのに役立ちます。 This setting is mostly helpful to Squarespace sites that have stores or are store websites.この設定は、ストアがある、またはストアのWebサイトであるSquarespaceサイトに主に役立ちます。

5 ロック画面

Squarespaceでは、パスワードを使用してページをロックできます。 All such pages don't display the contents but show a lock screen.このようなページはすべてコンテンツを表示しませんが、ロック画面を表示します。

カスタマイズしない場合 画面のロック まったく、これがどのように見えるかです。

5。 お知らせバー

世界 アナウンスバー lets you add a sticky notification on the top of your site.サイトの上部にスティッキー通知を追加できます。 This is an excellent feature to draw your readers' attention to some of your important content.これは、重要なコンテンツのいくつかに読者の注意を引くための優れた機能です。

有効にしたら アナウンスバー、メッセージとユーザーがクリックする必要のあるリンクを追加できます。

上のスクリーンショットでわかるように、リンクを新しいウィンドウで開くことができます。

6.モバイル情報バー

名前が示すように、 モバイル情報バー モバイルユーザーの前に表示され、電子メール、電話番号、場所、および営業時間を表示するために使用できます。

Squarespaceはこの情報を 'ビジネス情報' セクション。これについては後で説明します。  

7.Squarespaceバッジ

Squarespaceは、Squarespaceを使用して構築されたすべてのWebサイトにブランド（バッジ）を追加します。

世界 Squarespaceバッジ 設定により、Squarespaceバッジを有効または無効にしたり、その位置を調整したり、表示設定を微調整したりできます。

8.カスタムCSS

フォント、色、その他のデフォルトのカスタマイズオプションを超えてテンプレートをカスタマイズする場合は、次の機能を利用する必要があります。 カスタムCSS.

追加することを忘れないでください カスタムCSS テンプレートのデザインを壊す可能性があります—お勧めしません。

9。 高度な

世界 高機能 オプションを使用すると、フォントを追加できます Typekitから SquarespaceのWebサイトに。 Theザ・ 高機能 設定には、高度なテンプレート設定もあります。

これで、Squarespaceサイトのデザイン部分は終わりです。

次に、Squarespaceページと、それらを使用して新しくデザインしたサイトにコンテンツをアップロードする方法について説明します。

ステップ3：Squarespaceの使用（パート2）：方法 'ページ'Squarespaceでの作業

テンプレートを選択してカスタマイズし、サイトのタイトルとロゴを追加したら、コンテンツの追加を開始します。

Squarespaceページでは、次のことができます。

• ページ（およびコンテンツ）をサイトに追加します（例：About、Contactなど）
• あなたのサイトにブログを追加する
• サイトにストアを追加する
• サイトのメインメニューを作成する

メインメニューから始めましょう。

初めてページ設定にアクセスすると、 'トップナビゲーション」 は、デモのメニュー項目を示しています。

今のところ、デモのページを忘れて、独自のページを追加してください。

Squarespaceは、サイトが通常必要とするページごとに、事前に作成されたテンプレートを提供しています。

たとえば、About、Features、Store、Contactなどのページの場合、サイトにロードするだけですぐに使用できるページレイアウトがすでに用意されています。

1.作成済みのテンプレートにページを追加する方法

事前に作成されたテンプレートにページを追加する方法を見てみましょう。

次のスクリーンショットでわかるように、サイトにページを追加するためにクリックできるXNUMXつの「+」記号があります。

最初のオプションをクリックすると、ページを追加するだけでなく、Webサイトのメインメニューにも追加します。

そして、XNUMX番目のオプションをクリックすると、ページを追加するだけです。

XNUMX番目のオプションでページの追加を開始することをお勧めします。 After you're done with creating the pages, delete all the demo pages, and drag all your freshly generated pages and drop them under theページの作成が完了したら、すべてのデモページを削除し、新しく生成したすべてのページをドラッグして、 トップナビゲーション.

「About」ページを追加しましょう。 アイテムをクリックしたら 'ページ'、左側のパネルに次のオプションが表示されます。

'をクリックしたら編集を開始します」、選択した自己紹介ページレイアウトがSquarespaceのページエディタに読み込まれます。 ページ要素を編集するには、ページの上部（ナビゲーションのすぐ下）にカーソルを合わせると、次のオプションパネルが開きます。

クリック '編集」.

この時点で、ページコンテンツの編集を開始するか、「」をクリックすることができます。+'ページの上部に署名して、デザイン要素を追加します。

サイトに要素を追加すると、単純なドラッグアンドドロップ機能でその位置を簡単に再配置できます。

注意：

デフォルトのレイアウトをカスタマイズし、スペーサー要素を含むさまざまな要素を追加すると、モバイルプレビューがおかしくなることがあります。さらに、さまざまな要素間の間隔が少しずれて見える場合があります。

（ただし、デフォルトのレイアウトは美しくレンダリングされます。）

他のページを追加することは、aboutページを追加することに似ています。

今のところ、サイトを超高速で稼働させたい場合は、デフォルトのレイアウトを使用するのが最善です。

このステップの最後に、サイトのすべてのページをメインメニューに移動する準備ができているはずです。

ただし、移動する前に、デモページを削除してください。

次に、新しく作成したページを 'にドラッグアンドドロップしますトップナビゲーション」.

ナビゲーションをクリーンアップしたら、次はページで作業します。

2. Squarespaceページにコンテンツを追加する方法：

コンテンツを追加するには（またはページのデザインをカスタマイズするには）、ページの名前をクリックするだけです。

クリックすると、ページエディタが読み込まれ、テンプレートのコンテンツを準備手順で作成したコンテンツに置き換えることができます。

3.いくつかの高レベルのページ設定を構成する方法

高レベルのページ設定は、ページの次のことに役立ちます。

ページに上位レベルの変更を加えたり、ページを削除したりするには、ページ名の横にある設定アイコンをクリックします。

また、ページをホームページとして設定するには、選択したページのこれらの設定を開いて、「」を選択する必要があります。ホームページとして設定」 オプションを選択します。

重要なSquarespaceページ：ブログ

Squarespaceでブログを単純なページとして追加することはできますが、いくつかの追加設定が必要になる場合があります。

投稿を追加するには、ブログメニュー項目オプションの「+」記号をクリックします。

投稿エディタは非常に直感的です。

下部に、投稿にカテゴリとタグを追加するための設定が表示されます。

世界 オプション 設定により：

• 注目の画像を投稿に追加する
• 投稿に作成者を割り当てます
• 抜粋を書く
• 投稿を注目の投稿としてマークする

うまくいけば、上記のセクションで、あなたのコンテンツやブログさえも備えた見栄えの良いウェブサイトができあがります。

Squarespaceの設定を見てみましょう。

ステップ4：Squarespaceの使用：設定の調査

Squarespaceの設定を使用するのは簡単です。 They are grouped into 3 categories:それらはXNUMXつのカテゴリに分類されます。

1. 全般
2. Website
3. コマース

これらのうち、 '一般」 カテゴリを使用すると、会社名、住所、納税者番号などのビジネス情報を追加できます。

そしてその 'コマース」 設定は、オンラインストアを運営したり、サイトにストアを追加したりする人に関連しています。

これらのカテゴリのうち、 'ウェブサイト」 カテゴリは私が話したいものです。

'ウェブサイト」 設定は次のとおりです。

• 基本情報 –この設定は、サイトの内容に関する抜粋を追加するのに役立ちます。 一部のテンプレートにはこの情報が表示されるため、入力する必要があります。
• ドメイン–  ドメインを購入したら、この設定に戻って、Squarespaceサイトでそのドメインを指定する必要があります。 サードパーティのドメイン統合 そよ風です。
• メール– Gmailのビジネスメールの統合はここで行うことができます。
• 接続されたアカウント– You can connect your social media accounts with your Squarespace website here.こちらからソーシャルメディアアカウントをSquarespaceWebサイトに接続できます。 The next time that you add social media profile icons anywhere on your Squarespace site, Squarespace will use information from this section and automagically link the icons to your profiles.次回Squarespaceサイトの任意の場所にソーシャルメディアプロファイルアイコンを追加すると、Squarespaceはこのセクションの情報を使用して、アイコンをプロファイルに自動的にリンクします。
• マーケティング - マーケティング設定オプション内には、SEO、ソーシャルメディア、およびGoogleアドワーズの設定があります。
  SEOの設定 Google Adwordsのマーケティング設定は、Squarespaceのビジネスプランまたはコマースプランを使用するサイト向けです。
• ブログ– ブログ設定は、ブログ投稿のURL形式を設定するのに役立ちます。
  デフォルトのフォーマットを変更しないでください-それはすでに読みやすいです。 ただし、必要に応じて、年、月、日付を削除できます。 これらの設定により、ブログをコメントサービスであるDisqusと統合することもできます。 このようにして、ユーザーはDisqusアカウントを介してコンテンツにコメントできるようになります。 （Disqusが必要ない場合は、デフォルトのコメントシステムもあります。）
  （AMPに最適化されたページは、モバイル訪問者にトーンダウンバージョンのWebページを表示するページです。これは、非常に高速なモバイルブラウジングエクスペリエンスを提供するのに役立ちます。）
• SSL – あなたはあなたのサイトの安全なバージョンと安全でないバージョンの間で選択することができます SSL設定。 Googleは安全でないウェブサイトよりも安全なウェブサイトを好むため、安全なバージョンを選択してください。
• 上級– The advanced settings allow you to import site content from other website builders or CMSes.詳細設定を使用すると、他のWebサイトビルダーまたはCMSからサイトコンテンツをインポートできます。 It also lets you export your site to WordPress.また、サイトをWordPressにエクスポートすることもできます。
  サイトのカスタム404ページを作成する場合は、詳細設定を使用して、デフォルトの404ページの代わりにカスタマイズした404ページを表示できます。
  You can also add your Google Analytics account number via these settings.これらの設定からGoogleAnalyticsアカウント番号を追加することもできます。 Doing so will automatically install the Google Analytics script to your site.そうすることで、GoogleAnalyticsスクリプトがサイトに自動的にインストールされます。

それでおしまい。

このガイドの指示に従っている場合は、これで最初の機能的な（完璧ではないにしても）SquarespaceWebサイトの準備ができているはずです。

SquarespaceWebサイトを立ち上げた後に最初に行うこと

新しいウェブサイトを立ち上げたら、最初のタスクはそれをグーグルでインデックスに登録することです。

インデックス作成プロセスを高速化するには、サイトマップをGoogle SearchConsoleに送信する必要があります。

SquarespaceのWebサイトのサイトマップは次の場所にあります。

http://www.yourdomain.com/sitemap.xml

したがって、WebサイトのサイトマップURLをコピーして、 検索コンソール.

Squarespace Webサイトの構築方法–まとめ

Squarespace Webサイトを作成し、それを完全に調整およびカスタマイズするのにXNUMX週間以上かかることはありません。 Squarespaceがあなたのウェブサイトを管理します。

このガイドで、最初のSquarespaceサイトの大まかなバージョンを10時間以内に構築できるようになることを願っています（ドメインの購入などの時間を考慮に入れて）。

注：代替プラットフォームをお探しの場合は、次のリストをご覧ください。 あなた自身のウェブサイトを構築するためのプラットフォーム.