Squarespaceチュートリアル:Squarespaceの使い方は? 初心者のためのステップバイステップガイド

公開: 2021-05-12

ウェブサイトの作成に役立つSquarespaceチュートリアルをお探しですか?

それは素晴らしい選択です。 Squarespaceが大好きです。 eコマースストアであろうとバンドのウェブサイトであろうと、今何を構築したいかは関係ありません。重要なのは、Squarespaceの使い方を知ったら、実質的に何でもウェブサイトを作成する方法を知っているということです。

反対に、Squarespaceは奇妙なカーブボールをあなたの方向に投げることができます。 非常に多くの異なるオプションがあるため、Squarespaceの使用方法を学ぶと少し混乱する可能性があります。 このステップバイステップガイドでは、Squarespaceを最大限に活用してWebサイトをより高速にオンライン化する方法を紹介します。

目次:

  • Squarespaceエクスペリエンスをパーソナライズする
  • あなたのウェブサイトのためにSquarespaceデザインを選ぶ方法
  • Squarespaceにサインアップする
  • Squarespaceダッシュボードとエディターを理解する
  • Webサイトのコンテンツを編集する
  • デザインを変更する
  • eコマースストアの追加
  • モバイルでサイトをプレビューする
  • サイトの公開と価格設定
このステップバイステップの#Squarespace#tutorial️を使用して、新しい#websiteを今日オンラインで入手してください
クリックしてツイート

Squarespaceチュートリアル:Squarespaceを使用してWebサイトを構築する方法

とりあえず、SquarespaceのWebサイトにアクセスして、2つの[はじめに]ボタンのいずれかをクリックしてみましょう。

Squarespaceの使用方法を学ぶ準備ができたら、[はじめに]をクリックします

Squarespaceエクスペリエンスをパーソナライズする

あなたが始めたら、あなたはあなたのビジネスとウェブサイトについてのいくつかの質問に答えるオプションがあります。 いつでもスキップできますが、回答はSquarespaceがニーズと目的に一致するWebサイトのテーマを見つけるのに役立ちます。

たとえば、食べ物のブログを作成したい場合、Squarespaceはブログと食べ物に最適なWeb​​サイトのテーマを表示します。 あなたはあなた自身のトピックを入力することができますが、それを広くしてください。 たとえば、不動産最初の住宅購入者に販売するよりも良い結果を生み出します。

SquarespaceチュートリアルでのWebサイトトピックの設定

選択に満足したら、[次へ]をクリックして次に進みます。

メンバーシップサイトの作成やeコマースサイトの作成など、特定の目的がある場合は、目標メニューからそれらを選択します。

ただし、「ある日」に追求する予定の目標は選択しないでください。 今日から始めるきっかけとなったものを選んでください。 これらは、Squarespaceが後で見るデザインをどのようにランク付けするかを決定します。

たとえば、不動産がトピックであるが、商品やサービスの販売を最重要目標として選択した場合、単一の不動産テーマが表示される前に、多くのeコマーステーマが表示されます。

トップゴールのSquarespaceオプションは、どのテーマを表示するかを決定する上で大きな役割を果たします

目標を処理したら、最後の質問に取り組みましょう。 アイデアを模索している場合でも、Webサイトを転送している場合でも、ベストアンサーをクリックしてから[完了]をクリックして、Squarespaceチュートリアルのエキサイティングな部分であるテンプレートの選択に進みます。

Squarespaceは、既存のWebサイトをSquarespaceに移動している人を見つけるのに役立つ質問をします

あなたのウェブサイトのためにSquarespaceデザインを選ぶ方法

デザインが表示されると、おそらくわずかなざわめきに気付くでしょう。 心配しないでください、それは完全に正常です。 Squarespaceは素晴らしいテンプレートデザインで有名です。 ただし、Squarespaceを最大限に活用するには、次の点に注意してください。

  • 最適なテンプレートが最初に表示されます。
  • それらの下に、Webサイトの開始点として適したテンプレートがいくつかあります。
  • 最後に、最も人気のあるデザインが見つかります。
Squarespaceテンプレートは、Webサイトの目標にどの程度一致しているかに応じて編成されています。

いくつかのテンプレートをプレビューしても何も表示されない場合は、110以上のテンプレートの完全なリストを検索するか、Webサイトの種類とトピックのリストを使用して結果をフィルタリングします。

ただし、デモの内容に基づいてテーマを除外しないでください。 Squarespaceをプロのように使用する方法を学ぶ秘訣は、好きな色、フォント、レイアウトのデザインを探すことです。

Squarespaceを使用すると、「正しい」機能を備えたテーマの配色をオーバーホールするよりも、「間違った」機能を備えたテーマを選択して追加する方が簡単です。

テーマをよく見て、好きなものをプレビューしてください。 お気に入りを見つけたら、それをクリックしてSquarespaceアカウントを使い始めます。

Squarespaceにサインアップする

この時点で、Squarespaceアカウントにサインインまたは作成する必要があります。 1つのSquarespaceアカウントを複数の14日間の試用に使用できるため、以前にSquarespaceを使用したことがある場合は、新しいアカウントを作成しないでください。

Squarespaceのサインアップオプション

サインアップしたら、Webサイトに名前を付けます。 後で変更できるので、プレースホルダーを入力して、準備ができたら更新してください。 ただし、今すぐ完璧な名前が必要な場合は、商号ジェネレーターがそれを見つけるのに役立ちます。

Squarespaceでサイト名を設定する

サインアップして名前を追加すると、Webサイトのダッシュボードに到達する前に、プラットフォーム独自のSquarespaceチュートリアルを楽しむことができます。

Squarespaceダッシュボードとエディターを理解する

Squarespaceアカウントの管理と、Webサイト全体の管理は、ダッシュボードまたはビジュアルエディターを介して処理されます。

ダッシュボードは、パスワードの変更やドメインの移管などに使用されます。

Squarespaceダッシュボードオプション

いくつかのWebサイトを実行している場合は、ダッシュボードからそれらを切り替えることができます。 Webサイトの1つを表示するには、[ Webサイト]ボタンをクリックして、Webサイト管理ツールの完全なスイート(ビジュアルエディターを含む)を開きます。

Squarespaceのウェブサイト管理は喜びです。 他のウェブサイト構築プラットフォームにはSEOのようなもののための複数の競合するツールがありますが、Squarespaceは別の方法で物事を行います。 支払いが必要なツールのリストはスキップできます。 代わりに、成功するために必要なすべてが1ページにあります。

画面の左側にWebサイト管理ツールがあります。 右側には、Webサイトのプレビューが表示されます。

SquarespaceメニューオプションからすべてのWebサイト管理を処理できます
  • ページを使用して、Webサイトのコンテンツを変更します。
  • サイトスタイル、追加のCSS、エラーページなどのデザインの側面を変更します。
  • 商品、配送、請求などのコマース機能を管理します。
  • トラフィックレポート、コンバージョン、SEOパフォーマンスを使って分析を掘り下げます。
  • ポップアップや電子メールキャンペーンなど、複数のマーケティングオプションを開始します。
  • 顧客にセルフスケジューリングオプションを許可します。
  • さらに、はるかに。

Webサイトのコンテンツを編集する

ビジュアルエディターを開くたびに、Squarespaceサイトが最初から完全に見えることに感銘を受けました。 私たちが持っているものを見てみましょう:

  • 重要なページにリンクする機能メニュー。
  • 注目を集めるボタンとバランスの取れたプロフェッショナルなレイアウト。
  • よくマッチしたフォントとプロの配色。

見栄えが良いだけでなく、運が良ければ、選択したテンプレートがトピックに一致し、起動前に必要になるのは簡単な編集だけです。

ページがメニューの一番上にあるので、ページの編集を始めましょう。

ご覧のとおり、Webサイトのすべてのページがここに一覧表示されます。 ページ設定を編集するには、名前をロールオーバーして小さな歯車のアイコンを見つけてクリックします。

ページ設定メニューを開く

ページ設定では、サイトのIDと外観を微調整できます。 最も重要なことは、私たちにとって、一般的な設定がページタイトルとURLスラッグを制御することです。

ページ設定は、Squarespaceページを複製する方法を知りたい場合に便利です。 [ページ設定]→[一般]に移動し、下にスクロールして[ページの複製]リンクを見つけます。 それをクリックするだけで、Squarespaceページを複製できます。

一般的なページ設定をカバーするSquarespaceチュートリアル

ここにいる間に、ソーシャル画像をソーシャルメディアプラットフォームで共有したいものに更新することを検討してください(ソーシャル画像に移動し、お気に入りの画像をボックスにドラッグアンドドロップするだけです)。

Squarespaceを使用してソーシャルイメージを設定する方法

サイトのIDを設定したら、Squarespaceチュートリアルの次のステップであるページコンテンツに進みます。

[編集]ボタンをクリックすると、ページの編集オプションが開きます。

ページ編集オプションへのアクセス

サイトヘッダーの編集

ページのさまざまな部分をロールオーバーすると、さまざまな編集オプションが表示されます。 サイトヘッダーの先頭から始めてみませんか? 表示されたら編集ボタンをクリックします。

Squarespaceチュートリアルのヘッダーオプションへのアクセス

ここには、次のデスクトップおよびモバイル編集オプションがあります。

  • サイトのタイトルとロゴ。
  • ソーシャルリンクやボタンなどのさまざまな要素。
  • 色と透明度。
  • ヘッダーの位置。
グローバルヘッダー編集オプション

サイト名の追加を待っていた場合は、設定したソーシャルメディアプロファイルを追加しながら、今すぐ追加できます。 重要な識別要素が整ったら、モバイルオプションを掘り下げてみましょう。

モバイルメニューまたはデスクトップメニューで行った変更は、それらのデバイスでのみ表示されます。 モバイルの場合、ヘッダーのレイアウトとメニューオプションを変更できます。

モバイルヘッダーオプション

デスクトップの場合、レイアウトだけでなく、要素の外観やヘッダー自体のサイズも変更できます。 Squarespaceは要素の間隔をかなりうまく調整するので、おそらくパディングと間隔をそのままにしておくことができます。

デスクトップヘッダーオプション

何を変更するかに関係なく、各変更はプレビューウィンドウにすぐに表示されます。 たとえば、サイトタイトルの変更はリアルタイムで行われます。

ヘッダーの色とフォントを変更するためのSquarespaceチュートリアル。

ページコンテンツの編集

テキストを変更したり画像を更新したりする準備ができたら、任意のページから編集モードに入ります。 テキストのブロック、ボタン、写真など、ほとんどのコンテンツ領域を編集できます。

たとえば、文と見出しを編集するには、テキストをクリックしてテキストエディタを開きます。 ここでは、リストやリンク、太字のテキストなどを追加できます。 新しいテキストを入力して、書式を追加するだけです。

Squarespaceテキストエディタの検索

️重要な点の1つは、Squarespaceには自動保存機能がないことです。 一般に、 [完了][変更の保存]をクリックせずにページから移動するのは困難です。 ただし、接続が失われたり、ウィンドウが閉じたりすると、問題が発生する可能性があります。

セクションレイアウトの編集

セクションの背景とレイアウトを変更するには、任意のセクションをロールオーバーして、編集オプションを含む小さなメニューを見つけます。

Squarespace編集コントロールを使用してセクションの外観を変更する方法。
  • 鉛筆を使用すると、セクションの外観を制御できます。 これには、セクションサイズ、背景、色が含まれます。
  • 2つのページをクリックすると、セクション内のすべてが複製されます。 レイアウト、画像、テキストをコピーします。 複製されたセクションは、既存のセクションのすぐ下に表示されます。
  • 2つの矢印は、セクションをページの上下に移動します。
  • ゴミ箱はセクション全体を削除する可能性があります。

たとえば、背景画像を変更するには、鉛筆をクリックします および背景。 [置換]をクリックして、好きな背景画像をアップロードします。 YouTubeまたはVimeoのリンクがある場合は、ビデオの背景設定を[ビデオ]の下にあります。

画像とビデオの背景にSquarespaceを使用する方法

セクションの追加

すべてのカーソルローリングを実行しているので、両端にセクションを追加する青い境界線に気付いたかもしれません。 それらのいずれかをクリックすると、すべてのSquarespaceセクションを含む新しいセクションポップアップボックスが開きます。

Squarespaceページで[セクションの追加]オプションを見つける

最も一般的で人気のあるセクションが上部に表示されるので、リスト全体をスクロールして、次のようなあいまいなセクションを表示します。

  • 予定
  • 寄付
  • 製品
  • カレンダー
  • チャート
  • ロゴの壁
  • 音楽
  • などなど
Squarespaceの予定セクションのセクションレイアウトをスクロールする

各セクションには複数のレイアウトがあり、クリックしてセクションをページに追加する前にスクロールできます。

レイアウトが異なるだけでなく、使用する要素に応じてオプションも異なります。 たとえば、ロケーションセクションには、スクロールなどの要素用のシンプルなオン/オフスライダーを備えた複数のマップデザインがあります。

ページの追加

ページを追加する方法を示さずに、Squarespaceのチュートリアルを完了することはできません。 [ページ]メニューから新しいページを作成し、既存のページを削除できます。

メインメニューの各ページは、メインナビゲーションヘッダーの下にあります。

リンクされていないページまたはメンバーシップエリアは、メインセクションの下にあります。

ページを追加するには、ページを表示する場所に応じて「+」ボタンをクリックします。

ページの追加

最初からページを作成するか、次のような事前に設計されたSquarespaceレイアウトを使用できます。

  • お返事お願いします
  • サービス
  • チーム
  • ギャラリー
  • ポートフォリオ
  • ブログ
  • もっと

たとえば、ブログページを追加する場合は、好きなレイアウトを選択してメインメニューに追加できます。 ご覧のとおり、メニューは新しいページで自動的に更新されます。

最初の投稿を書く準備ができたら、ブログページをクリックしてアーカイブを開きます。 アーカイブが開いたら、 「+」ボタンをクリックして新しい投稿を開始します。

ブログ投稿の作成

デザインを変更する

Squarespaceチュートリアルでは、サイトに視覚的なアイデンティティを与えるパーソナルタッチを追加するのに役立つデザインツールに移ります。 色、サイズ、フォントの変更を開始する準備ができたら、[デザイン]リンクをクリックして探索を開始します。

Squarespaceのデザインタブを見つける

クリックすると、以下を編集できるようになります。

  • フォント、色、アニメーションなどのサイトスタイル。
  • ブラウザアイコン
  • 画面をロックする
  • チェックアウトページ
  • 404ページ
  • ソーシャル共有ロゴ
  • カスタムCSS

これらすべてのタブを試してみる必要がありますが、サイトのスタイルがWebサイトに最も影響を与えます。 リンクをクリックしてメインメニューを開きます。

あなたはサイトスタイルがあなたのウェブサイトのための重要な視覚的要素のすべてをカバーしているのを見ることができます。 デザインオプションが必要なときはいつでも、絵筆アイコンをクリックしてメニューを開きます。

サイトスタイルの選択

オプションを選択すると、Squarespaceは自動的にスタイル変更をページ全体に適用します。 個々の要素や変更をすぐに確認する必要はありません。 たとえば、カラーパレットを変更すると、すべてのセクションが新しい色で更新されます。

Squarespaceは自動的に配色を変更します

eコマースストアの追加

ノート; このステップはオプションです。 すべてのユーザーがSquarespaceでeコマースストアを立ち上げたいとは限りません。 そうは言っても、それがあなたの目標であれば、Squarespaceは完全にタスクを処理することができます!

Squarespaceは最も人気のあるeコマースプラットフォームではありませんが、Webサイトをオンラインストアに拡張するのに十分なコマース機能を備えています。

実際のところ、まだオンラインで何を売るかわからなくても構いません。 Squarespaceはあなたにあなたの選択肢を探求する機会を与えてくれます。

実際、ストアページに200個の商品を追加できます。 あなたがあなたのウェブサイトから収入を生み出したいなら、SquarespaceCommerceは確かな選択肢です。

開始する準備ができたら、[コマース]タブをクリックします。

Squarespaceコマースから始める

ストアのセットアッププロセスは、Squarespaceの4ステップのeコマースウィザードで処理できます。 [スタート]をクリックしてから、[販売する製品を追加]をクリックします。

Squarespaceコマースウィザードを使用してストアを構築する

この時点で、Squarespaceはストアのレイアウトを選択するように求めます。 少なくとも2つのオプションが必要です。 お好みのオプションをクリックしてください。

Squarespaceストアレイアウトの選択

ストアには、レイアウトにいくつかのデモ製品が含まれている必要があります。 製品に合わせて編集することも、 「+」ボタンをクリックして新製品を追加することもできます。

Squarespaceコマースで商品を追加するためのさまざまな方法

設定の異なる4つの主要な製品タイプから選択できます。

  • 物理的
  • デジタル
  • サービス
  • ギフトカード
Squarespaceのギフトカードオプション
デジタル製品の作成

製品タイプごとに、製品表示の各側面に対して異なるフィールドがあります。 商品ページから、複数の画像の追加、価格の設定、在庫の管理をすべて行うことができます。

製品の外観が完成したら、下にスクロールして、ボタンや配送オプションなどのカスタマイズされたオプションを見つけます。

[完了]→[保存]をクリックして、製品をストアに追加します。

Squarespaceストアに支払い方法を追加する

このSquarespaceチュートリアルでは、支払いゲートウェイを統合します。 ストアのセットアップメニューに[有料の方法を追加]オプションがあります。

お支払い方法の追加

Squarespaceを使用すると、Stripe、PayPal、およびSquare(米国内)を統合できます。 ご希望のゲートウェイをクリックして、ゲートウェイをサイトにリンクします。

配送要件の設定

[商品の発送方法を選択]ボタンをクリックします。

このオプションを使用して、配送料を決定します。 画像に示されているように、定額料金、重量ベースの送料から選択するか、単に運送業者に価格を計算させることができます。

Squarespaceの配送料

オプションを選択すると、費用と地域の制限とともに配送オプションに表示されます。

有効な配送オプション

モバイルプレビュー

Webサイトの外観に満足したら、エディターの右上隅にある電話のアイコンをクリックします。

モバイルプレビュー画面へのアクセス

これにより、すべてがサイトのモバイルプレビューに移行します。

モバイルプレビューを開く

モバイルプレビューをスクロールして、すべてがどのように見えるかに満足していることを確認します。 見た目が素晴らしいので、Squarespaceチュートリアルの最後のステップ、つまりWebサイトを公開して世界中に公開しましょう。

サイトの公開と価格設定

これで、他の人とWebサイトを共有する準備が整いました。 プランをアップグレードしてサイトを公開しましょう。

[設定]リンクをクリックして、公開オプションを見つけます。

設定を開く

設定オプションが開いたら、関心のあるのはサイトの可用性です。

サイトの可用性を確認してください

サイトの可用性をクリックして、アップグレードして公開するオプションを開きます。

アップグレードボタンをクリックします

Squarespaceにはさまざまなプランがありますが、一般的に、価格の高いプランにはより優れたeコマースオプションがあります。

Squarespaceの価格表

あなたに最適なプランを選んでお祝いしましょう。 このSquarespaceチュートリアルは終了しました。 できたね! あなたのウェブサイトが公開されました!

トップへ戻る

結論

このチュートリアルからわかるように、私はSquarespaceが大好きです。 初心者向けの最高のウェブサイトビルダーの1つであるだけでなく、Squarespaceを使用して(すばやく)何でも構築できます。

初心者向けのこのステップバイステップガイドで#Squarespaceの使用方法を学ぶ️
クリックしてツイート

ここでは多くのことをカバーしました。 要約すると、私たちは次のことを学びました。

  • Squarespaceエクスペリエンスをパーソナライズする
  • あなたのウェブサイトのためにSquarespaceデザインを選ぶ方法
  • Squarespaceにサインアップする
  • Squarespaceダッシュボードとエディターを理解する
  • Webサイトのコンテンツを編集する
  • デザインを変更する
  • eコマースストアの追加
  • モバイルでサイトをプレビューする
  • サイトの公開と価格設定

Squarespaceをウェブサイト構築ツールとしてどう思いますか? Squarespaceの体験を楽しんでいますか? 以下のコメントであなたの考えを自由に共有してください。

無料ガイド

スピードアップするための5つの重要なヒント
あなたのWordPressサイト

読み込み時間を50〜80%短縮します
簡単なヒントに従うだけです。

無料ガイドをダウンロード