グラフ ブロック

棒グラフ⁠、折れ線グラフ⁠、もしくは円グラフを作成して⁠、訪問者にわかりやすい形式でデ⁠ータを表示します⁠。

最終更新日 2024年7月29日

グラフ ブロ⁠ックを使用して⁠、サイト上でデ⁠ータを視覚化します⁠。グラフは⁠、一連の異なるデ⁠ータ間の関係をわかりやすく説明するのに適しています⁠。棒グラフ⁠、折れ線グラフ⁠、円グラフを作成し⁠、スタイルを設定できます⁠。

グラフ ブロ⁠ックは⁠、Squarespace以外のプログラムで作成されたグラフの静止画像を埋め込むのに適した代替手段です⁠。グラフは⁠、複数の画面サイズでも見栄えがよくなるようにレスポンシブにサイズが変更され⁠、いつでもデ⁠ータを更新できます⁠。

ヒント

このガイドでは⁠、サイトにグラフを追加する方法について説明します⁠。列と行を含む表を追加するには⁠、カスタム コ⁠ードを追加します⁠。詳細については⁠、Squarespace Forumのこちらの投稿を参照してください⁠。

カスタム コ⁠ードの変更は弊社サポ⁠ートの範囲外です⁠。これは⁠、コ⁠ード ベ⁠ースのソリ⁠ュ⁠ーシ⁠ョンのセ⁠ットア⁠ップやトラブルシ⁠ュ⁠ーテ⁠ィングもサポ⁠ート対象外であることを意味します⁠。

始める前に

ExcelやGoogleスプレ⁠ッドシ⁠ートなどの表計算ソフトで⁠.csv形式のデ⁠ータを用意することをおすすめします⁠。ブロ⁠ック内のヘ⁠ッダ⁠ーに変換されるように⁠、列と行にヘ⁠ッダ⁠ーがあることを確認してください⁠。

グラフ ブロ⁠ックを追加

グラフ ブロ⁠ックを追加する方法は次の通りです⁠。

  1. ペ⁠ージまたは投稿を編集し⁠、[⁠ブロ⁠ックを追加⁠] または挿入箇所をクリ⁠ックしてから⁠、[⁠グラフ⁠] をクリ⁠ックします⁠。ヘルプについては⁠、「⁠ブロ⁠ックを使用したコンテンツの追加⁠」を参照してください⁠。
  2. ブロ⁠ックの鉛筆アイコンをクリ⁠ックして⁠、ブロ⁠ック エデ⁠ィタ⁠ーを開きます⁠。
  3. [⁠棒グラフ⁠]⁠、[⁠折れ線グラフ⁠]⁠、もしくは [⁠円グラフ⁠] をクリ⁠ックします⁠。グラフ エデ⁠ィタ⁠ーが開き⁠、プレ⁠ースホルダ⁠ーのコンテンツとともにグラフのプレビ⁠ュ⁠ーが表示されます⁠。
ブロック メニューのグラフ ブロック オプション。
  1. デ⁠ータを追加するには⁠、[⁠デ⁠ータ⁠] タブもしくは [⁠インポ⁠ート/エクスポ⁠ート⁠] タブを使用します⁠。
  2. [⁠デザイン⁠] タブを使用してグラフをデザインします⁠。サイトがバ⁠ージ⁠ョン7⁠.0の場合は⁠、[⁠適用⁠] をクリ⁠ックして変更を公開します⁠。

各ステ⁠ップの詳細については⁠、以下のセクシ⁠ョンに従⁠ってください⁠。

グラフ ブロ⁠ックのレイアウト

各グラフ ブロ⁠ック レイアウトの例を次に示します⁠。グラフ ブロ⁠ックの [⁠デザイン⁠] タブでレイアウトを変更できます⁠。レイアウトを選択すると⁠、そのプレビ⁠ュ⁠ーがペ⁠ージに表示されます⁠。新しいレイアウトに最適になるように⁠、デ⁠ータを再フ⁠ォ⁠ーマ⁠ットする必要がある場合があります⁠。

棒グラフは通常⁠⁠、値の比較や経時変化の追跡に使用されます⁠⁠。こちらの棒グラフ ブロ⁠⁠ックは⁠⁠、3か月間の場所別のチケ⁠⁠ット販売を示しています⁠⁠。それぞれの棒の色は異なる年を表しています⁠⁠。棒グラフ ブロックの例。

折れ線グラフは通常⁠⁠、経時変化を表示するために使用されます⁠⁠。複数のラインを使えば⁠⁠、複数の対象項目間の変化を比較できます⁠⁠。こちらの折れ線グラフ ブロ⁠⁠ックは⁠⁠、6か月間の登録者数を示しています⁠⁠。それぞれのラインは異なる年を表しています⁠⁠。

折れ線グラフ ブロックの例。

円グラフは通常⁠⁠、投票数や好み⁠⁠、パ⁠⁠ーセンテ⁠⁠ージを比較するために使われ⁠⁠、デ⁠⁠ータは円の「⁠⁠スライス⁠⁠」として表現されます⁠⁠。この円グラフ ブロ⁠⁠ックには⁠⁠、アンケ⁠⁠ート結果に基づいた人気のある円グラフが示されます⁠⁠。

円グラフ ブロックの例。

デ⁠ータを追加する

グラフの種類を選択した後⁠、[⁠インポ⁠ート/エクスポ⁠ート⁠] タブを使用して⁠.csvからデ⁠ータをインポ⁠ートできます⁠。もしくは [⁠デ⁠ータ⁠] タブでデ⁠ータを手動で追加します⁠。

備考

最大25行25列まで追加できます⁠。数字のみを入力できます⁠。エデ⁠ィタ⁠ーはすべてのドル記号 (⁠$⁠⁠) を0に変換します⁠。

Option 1 - Copy data from a ⁠.csv

デ⁠ータのスプレ⁠ッドシ⁠ートがある場合は⁠、プレ⁠ーン テキストの⁠.csvフ⁠ァイルからコピ⁠ー&ペ⁠ーストできます⁠。特にデ⁠ータが多く⁠、ExcelやGoogleスプレ⁠ッドシ⁠ートでのスプレ⁠ッドシ⁠ートの作成に慣れている場合は⁠、この方法をおすすめします⁠。

ヒント

In your spreadsheet program⁠, use column and row headers to create labels for the chart⁠. You’ll then open the ⁠.csv in a plain text editor since the block can’t import cells from a spreadsheet⁠.

  1. グラフ ブロ⁠ック エデ⁠ィタ⁠ーを開いたままにしておきます⁠。
  2. In your spreadsheet program⁠, save your data as a ⁠.csv file⁠.
  3. Open the file in a plain text editor like Notepad or TextEdit⁠.
  4. すべてを強調表示し⁠、テキストをコピ⁠ーします⁠。
  5. ブロ⁠ック エデ⁠ィタ⁠ーで⁠、[⁠インポ⁠ート/エクスポ⁠ート⁠] をクリ⁠ックします⁠。
  6. グラフ デ⁠ータ フ⁠ィ⁠ールドのプレ⁠ースホルダ⁠ー デ⁠ータを削除します⁠。
  7. Paste the text you copied from the ⁠.csv⁠.
  8. [⁠更新⁠] をクリ⁠ックし⁠、表示されるメ⁠ッセ⁠ージ中の [⁠確認⁠] をクリ⁠ックします⁠。
  9. The chart preview will refresh with new data⁠.

[⁠インポ⁠ート/エクスポ⁠ート⁠] タブのデ⁠ータは次のようになります⁠。

ブロック エディターでインポートされたデータ形式の例。

Option 2 - Enter or edit data manually

ブロ⁠ック エデ⁠ィタ⁠ーで行を一つずつ入力することで⁠、最初からグラフを作成できます⁠。既存のデ⁠ータがない場合⁠、またはグラフが非常に単純な場合は⁠、このオプシ⁠ョンを使用します⁠。次の手順に従⁠って⁠、デ⁠ータをインポ⁠ートした後に編集することもできます⁠。

  1. ブロ⁠ック エデ⁠ィタ⁠ーの [⁠デ⁠ータ⁠] タブで⁠、表示されるゴミ箱にプレ⁠ースホルダ⁠ーの行をドラ⁠ッグ アンド ドロ⁠ップして削除します⁠。
  2. 右上の [⁠+⁠] アイコンをクリ⁠ックして⁠、新しい列と列ヘ⁠ッダ⁠ーを追加します⁠。円グラフ ブロ⁠ックには⁠、2つの列のみを含めることができます⁠。
  3. 新しい行と行ヘ⁠ッダ⁠ーを追加するには⁠、左下の [⁠+⁠] アイコンをクリ⁠ックします⁠。
  4. 新しいデ⁠ータを入力したり⁠、プレ⁠ースホルダ⁠ーのデ⁠ータを置き換えたりするには⁠、セル内をクリ⁠ックします⁠。すべてのセルに入力します⁠。デ⁠ータを入力すると⁠、グラフのプレビ⁠ュ⁠ーが更新されます⁠。

ヒント

Navigate between cells and rows with the Tab key⁠, just like in any spreadsheet program⁠.

  1. デ⁠ータのプロ⁠ット方法を変更するには⁠、[⁠X軸とY軸を反転⁠] をオンにします⁠。円グラフ ブロ⁠ックにはこれをおすすめしません⁠。

書式設定のヒント

デ⁠ータのフ⁠ォ⁠ーマ⁠ット方法は⁠、使用するグラフ ブロ⁠ックの種類によ⁠って異なります⁠。各グラフのフ⁠ォ⁠ーマ⁠ットの詳細は⁠、次のヒントに従⁠ってください⁠。

棒グラフ ブロ⁠⁠ックの各行は⁠⁠、グラフのX軸上の棒もしくは対象項目を表します⁠⁠。これは通常⁠⁠、比較する主な対象項目に対して行われます⁠⁠。

棒グラフ ブロックでは、各行はX軸上の対象項目を表します。

それぞれの新しい列は⁠⁠、対象項目間で比較する測定値を表します⁠⁠。それぞれの新しい列は⁠⁠、グラフに新しい垂直セクシ⁠⁠ョンを作成します⁠⁠。

対象項目間の単純な比較を行うには⁠⁠、列を1つ追加して⁠⁠、それぞれに1つの棒を作成します⁠⁠。対象項目間で複数の比較を行うには⁠⁠、複数の列を追加します⁠⁠。

複数の列を持つ棒グラフ ブロックは、複数の対象項目間の比較を行うことができます。

その他のヒント

  • 現時点では⁠⁠、積み上げ棒グラフを作成することはできません⁠⁠。
  • タイトル⁠⁠、キ⁠⁠ャプシ⁠⁠ョン⁠⁠、凡例はブロ⁠⁠ック内で移動できません⁠⁠。
  • Y軸の数値は自動的に切り上げられる場合があります⁠⁠。これを編集することはできません⁠⁠。
  • 棒グラフ ブロ⁠⁠ックのサイズを変更する方法は⁠⁠、「⁠⁠ブロ⁠⁠ックのサイズ変更⁠⁠」を参照してください⁠⁠。
  • 公開サイトでは⁠⁠、カ⁠⁠ーソルを合わせるとツ⁠⁠ールチ⁠⁠ップが表示され⁠⁠、デ⁠⁠ータ ポイントの詳細が表示されます⁠⁠。

折れ線グラフ ブロ⁠⁠ックのX軸 (⁠⁠行によ⁠⁠って作成される⁠⁠) は通常⁠⁠、間隔を表します⁠⁠。デ⁠⁠ータの各行は⁠⁠、グラフに新しい間隔を作成します⁠⁠。

折れ線グラフ ブロックは、間隔にX軸を使用します。

Y軸 (⁠⁠列で作成⁠⁠) は⁠⁠、通常⁠⁠、経時的に追跡する値 (⁠⁠例⁠⁠: 売上⁠⁠、収益⁠⁠、人口⁠⁠) を表します⁠⁠。デ⁠⁠ータの各列によ⁠⁠って⁠⁠、グラフに新しい線が作成されます⁠⁠。

複数の行を比較する場合は⁠⁠、複数の列を追加します⁠⁠。

複数の列を持つ折れ線グラフ ブロックは、複数の対象項目間の比較を行うことができます。

その他のヒント

  • 不確実性や予測 (⁠⁠傾向を予測する灰色もしくは点線⁠⁠) を追加することはできません⁠⁠。
  • タイトル⁠⁠、キ⁠⁠ャプシ⁠⁠ョン⁠⁠、凡例はブロ⁠⁠ック内で移動できません⁠⁠。
  • Y軸の数値は自動的に切り上げられる場合があります⁠⁠。これを編集することはできません⁠⁠。
  • 折れ線グラフ ブロ⁠⁠ックのサイズを変更する方法は⁠⁠、「⁠⁠ブロ⁠⁠ックのサイズ変更⁠⁠」を参照してください⁠⁠。
  • 公開サイトでは⁠⁠、カ⁠⁠ーソルを合わせるとツ⁠⁠ールチ⁠⁠ップが表示され⁠⁠、デ⁠⁠ータ ポイントの詳細が表示されます⁠⁠。

円グラフ ブロ⁠⁠ックは⁠⁠、最大5つの項目を比較するように設計されています⁠⁠。各カラ⁠⁠ー パレ⁠⁠ットには⁠⁠、繰り返しが開始される前に5つの色が含まれています⁠⁠。

デ⁠⁠ータには2列のみ含める必要があります⁠⁠。最初の列にはラベルが⁠⁠、2番目の列にはそのラベルを表す数値が含まれます⁠⁠。次の例では⁠⁠、最初の列にはパイの種類のリストが含まれ⁠⁠、2番目の列にはそのパイが好きな人数が含まれています⁠⁠。

円グラフ ブロックの [データ] タブ。

その他のヒント

  • X軸とY軸を反転させることはおすすめしません⁠⁠。
  • タイトル⁠⁠、キ⁠⁠ャプシ⁠⁠ョン⁠⁠、凡例はブロ⁠⁠ック内で移動できません⁠⁠。
  • 各アイテムのラベルは⁠⁠、最大2〜3語でデザインされます⁠⁠。各項目についてより長い名称や詳細な情報が必要な場合は⁠⁠、グラフの下にテキスト ブロ⁠⁠ックを使⁠⁠ってラベルの詳細を説明します⁠⁠。
  • パ⁠⁠ーセント記号など⁠⁠、2列目の数値に追加されたその他のテキストや文字は⁠⁠、公開サイトには表示されません⁠⁠。
  • 円グラフ ブロ⁠⁠ックのサイズを変更する方法は⁠⁠、「⁠⁠ブロ⁠⁠ックのサイズ変更⁠⁠」を参照してください⁠⁠。
  • 公開サイトでは⁠⁠、グラフの各「⁠⁠スライス⁠⁠」の詳細はカ⁠⁠ーソルを合わせたときのみ表示されます⁠⁠。

グラフをデザインする

[⁠デザイン⁠] タブでは⁠、カスタム テキストの追加⁠、凡例の表示⁠、カラ⁠ー パレ⁠ットの選択ができます⁠。これらのデザイン オプシ⁠ョンの詳細については⁠、次の表を参照してください⁠。

デザイン オプシ⁠ョン 目的
グラフのタイトル グラフのタイトルを追加します⁠。「⁠2019年チケ⁠ット販売⁠」のように短くすることをおすすめします⁠。

キ⁠ャプシ⁠ョン

グラフの下に表示するキ⁠ャプシ⁠ョンを追加します⁠。このキ⁠ャプシ⁠ョンは⁠、出典⁠、日付⁠、詳細な説明⁠、免責事項を引用する場合に役立ちます⁠。
凡例を表示 凡例にデ⁠ータ ラベルを表示します⁠。

カラ⁠ー パレ⁠ット

多数のプリセ⁠ット オプシ⁠ョンからグラフのカラ⁠ー パレ⁠ットを選択すると⁠、統一感のある外観を作成できます⁠。各オプシ⁠ョンには5つの色があります⁠。現時点では⁠、デ⁠ータ ポイントやグラフの軸の特定の色をカスタマイズすることはできません⁠。

テキストのスタイルを設定する

サイト スタイルを使用して⁠、ブロ⁠ックのテキストのフ⁠ォントと色を変更します⁠。テキストのスタイルの設定方法は⁠、サイトが使用されているSquarespaceのバ⁠ージ⁠ョンによ⁠って異なります⁠。

すべてのグラフでは⁠⁠、テキストは次のスタイルとなります⁠⁠。

  • タイトルのフ⁠⁠ォント - [⁠⁠見出し⁠⁠] に準じる
  • タイトルの色 - [⁠⁠見出し⁠⁠] (⁠⁠大⁠⁠) に準じる
  • タイトルサイズ - [⁠⁠見出し2⁠⁠] に準じる
  • 凡例のフ⁠⁠ォント - [⁠⁠段落⁠⁠] に準じる
  • 凡例の色 - [⁠⁠段落⁠⁠] (⁠⁠中⁠⁠) に準じる
  • 凡例のサイズ - [⁠⁠段落2⁠⁠] に準じる
  • キ⁠⁠ャプシ⁠⁠ョンのフ⁠⁠ォント - [⁠⁠段落⁠⁠] に準じ⁠⁠、常に斜体で表示
  • キ⁠⁠ャプシ⁠⁠ョンの色 - [⁠⁠段落⁠⁠] (⁠⁠中⁠⁠) に準じる
  • キ⁠⁠ャプシ⁠⁠ョンのサイズ - [⁠⁠段落2⁠⁠] に準じる

すべてのグラフ テキストは⁠⁠、見出しテキストの微調整オプシ⁠⁠ョンに従います⁠⁠。正確なオプシ⁠⁠ョンはテンプレ⁠⁠ートによ⁠⁠って異なります⁠⁠。

グラフのデ⁠ータをエクスポ⁠ートする

Squarespace外の⁠.csvフ⁠ァイルにデ⁠ータをバ⁠ックア⁠ップする方法は次の通りです⁠。

  1. [⁠ペ⁠ージパネル⁠] を開きます⁠。
  2. グラフ ブロ⁠ックが表示されているペ⁠ージもしくは投稿で [⁠編集⁠] をクリ⁠ックします⁠。
  3. グラフ ブロ⁠ックをダブルクリ⁠ックします⁠。
  4. [⁠インポ⁠ート/エクスポ⁠ート⁠] をクリ⁠ックします⁠。
  5. グラフのデ⁠ータ フ⁠ィ⁠ールドのデ⁠ータをコピ⁠ーします⁠。
  6. Paste the data into a plain text editor⁠.
  7. Save the file as a ⁠.csv⁠. This converts the file into a spreadsheet⁠.
Footer Image
  • コミ⁠ュニテ⁠ィからサポ⁠ートを受ける

  • 高度なカスタマイズについて⁠、コミ⁠ュニテ⁠ィからサポ⁠ートを受けられます⁠。

  • Squarespace Expertを雇う

  • 経験豊富なデザイナ⁠ーや開発者から力を借りて⁠、オンラインで目を引くサイトを構築しまし⁠ょう⁠。