SpreadSite Docs
SpreadSite 説明書
サイト作成、スプレッドシート連携、セクションの並び替え、公開後の更新、画像、独自ドメイン、アカウント管理まで、実際の操作に必要な内容をまとめています。
1. SpreadSiteってなに？
SpreadSiteは、Googleスプレッドシートを使ってホームページを作成・管理できるノーコードツールです。
ノーコードとは
ノーコードとは、専門的なプログラミングやWeb制作の知識がなくても使えるという意味です。SpreadSiteでは、ホームページに表示したい文章、画像リンク、ボタンの文言などをスプレッドシートに入力し、その内容をサイトに反映します。
初心者でも使いやすい理由
デザインはテンプレートから選べるため、ゼロからレイアウトを作る必要はありません。まずはサンプルデータを入れて全体像を確認し、必要な文章や画像だけ差し替えていくと進めやすいです。
基本の流れ
基本は、ダッシュボードでサイトを作成し、Googleスプレッドシートで内容を編集し、SpreadSiteアドオンから内容を反映する、という流れです。公開後の更新も同じ流れで行います。
操作に使う端末
サイトの閲覧やダッシュボード確認はスマホでもできますが、Googleスプレッドシートのアドオン操作はPCブラウザで行うのがおすすめです。iPadやスマホのスプレッドシートアプリでは、アドオンメニューを利用できない場合があります。
2. SpreadSiteでできること
SpreadSiteを使うと、スプレッドシートを編集する感覚でホームページを作成・更新できます。
スプレッドシートで内容を管理
ホームページの文章、リンク、画像URL、SEO設定などをGoogleスプレッドシートで管理できます。CMSの管理画面に慣れていない方でも、表を編集する感覚で更新できます。
デザイン知識不要
各セクションにはテンプレートが用意されています。構成シートでテンプレートを選ぶことで、ナビゲーション、ヘッダー、メイン、カード、ボトム、フッターなどの見た目を切り替えられます。
セクションの表示順を変更
構成シートの行を上下に移動することで、トップ、メイン、カード、アクセス、ボトム、問い合わせフォームの表示順を変更できます。ナビゲーション、ヘッダー、フッターはサイト全体の構造を保つため固定位置に表示されます。
手動反映と自動反映
スプレッドシートの内容は、SpreadSiteアドオンからサイトへ反映します。手動で反映することも、自動反映を設定して編集後に反映されるようにすることもできます。反映には数秒かかる場合があります。
スマホ対応
SpreadSiteのテンプレートは、PCとスマホの両方で見やすいように調整されています。長い文章や画像を入れる場合は、スマホでも読みやすい長さか確認するのがおすすめです。
画像も使える
画像URLをスプレッドシートに貼り付けることで、サイト内に画像を表示できます。Proプランでは、SpreadSite上に画像をアップロードして、そのURLをスプレッドシートに貼り付けることもできます。アップロード時は画像をWebPに最適化し、HEIC画像も変換して扱えます。
独自ドメインにも対応
通常は サイト名.spread-site.com で公開されます。Proプランでは独自ドメインの設定も利用できます。DNS設定の反映には時間がかかる場合があります。
SEO・OGP
設定シートからSEOタイトル、SEO説明、アイコンを設定できます。SNSで共有されたときのOGP画像にも設定内容が使われます。
3. 初期設定の手順
最初の公開までの詳しい手順です。ダッシュボード内の初期設定ガイドや動画もあわせて確認してください。
サインアップ・ログイン
まずSpreadSiteにログインします。ログイン後、ダッシュボードからサイトを作成できます。無料で始められるため、最初はFreeプランで試すこともできます。
サイト名を決める
サイト名は、あなたのサイトURLの一部になります。例えば example というサイト名なら、example.spread-site.com で公開されます。サイト名は3文字以上20文字以下で、小文字英数字とハイフンが使えます。先頭と末尾にハイフンは使えません。
ダッシュボードでサイトを作成する
ダッシュボードの新規作成画面からサイト名を入力してサイトを作成します。作成後、サイト詳細画面でサイトURL、サイト名、アクセストークン、初期設定ガイドを確認できます。
SpreadSiteアドオンをインストールする
Google Workspace MarketplaceからSpreadSiteアドオンをインストールします。インストール後、Googleスプレッドシートの 拡張機能 メニューからSpreadSiteを開けるようになります。
新しいスプレッドシートを作成する
Googleスプレッドシートで新しいファイルを作成します。既存のシートを使うこともできますが、最初は新しいスプレッドシートで始めると分かりやすいです。
テンプレートを初期化する
スプレッドシートを開き、拡張機能 > SpreadSite からテンプレート初期化を実行します。業種や用途に近いサンプルを選ぶと、どこを編集すればよいか理解しやすくなります。テンプレート初期化はシート内容をサンプル状態に作り直す操作なので、既に入力済みの内容がある場合は上書きに注意してください。
認証シートにサイト名とアクセストークンを入力する
テンプレート初期化後、認証シートにダッシュボードで確認できるサイト名とアクセストークンを入力します。サイト名はB1、アクセストークンはB2に入力します。アクセストークンはあなたのサイトを更新するための重要な情報なので、他人に共有しないでください。
内容をサイトに反映する
スプレッドシートの上部メニューから 拡張機能 > SpreadSite > 全てのシート内容を反映 を実行します。完了後、サイトURLにアクセスして内容が表示されるか確認してください。
自動反映を設定する
必要に応じて 拡張機能 > SpreadSite > 自動反映を設定 を実行します。これにより、スプレッドシートを編集した後に自動でサイトへ反映されるようになります。大きく編集している途中は、自動反映を解除してから作業することもできます。
サイトを確認する
ダッシュボードや構成シートに表示されるサイトURLを開いて、表示を確認します。反映直後に変わらない場合は、数秒待ってからブラウザを再読み込みしてください。
4. ダッシュボードの操作
ダッシュボードでは、サイト作成、サイト詳細確認、共有、画像管理、プラン管理を行えます。
サイト一覧を確認する
ダッシュボードでは、作成済みサイトの一覧、公開URL、SEOタイトル、SEO説明を確認できます。サイトカードをクリックすると、そのサイトの詳細画面に移動します。
新しいサイトを作成する
新しいサイトを作成する場合は、ダッシュボードの新しいサイトを作成からサイト名を入力します。作成できるサイト数はプランによって異なり、Freeは1サイト、Proは3サイトまでです。Ultraプランは提供内容が決まり次第、料金ページなどで案内します。
サイト詳細画面
サイト詳細画面では、サイトURL、サイト名、アクセストークン、初期設定ガイド、使い方動画、画像ページへのリンクを確認できます。最初の設定では、この画面のサイト名とアクセストークンを認証シートにコピーします。
アクセストークンの再発行
アクセストークンは、スプレッドシートからサイトを更新するための認証情報です。必要に応じてサイト詳細画面から再発行できます。再発行すると古いトークンでは反映できなくなるため、認証シートのアクセストークンも新しいものに更新してください。
5. スプレッドシートの操作
SpreadSiteのサイト内容は、複数のシートで管理されます。ここでは主なシートの役割を説明します。
構成シート
構成シートでは、サイトに表示するセクションと、各セクションで使うテンプレートを選びます。非表示を選ぶと、そのセクションは表示されません。各セクションのプレビューやリンク用IDも確認できるため、ページ内リンクを設定したい場合にも使います。ナビゲーションはtemplate1からtemplate3、Crystal、Auroraなどから選べます。その他の主要セクションはtemplate1からtemplate5、Crystal、Auroraなどから選べます。
構成シートで表示順を入れ替える
トップ、メイン、カード、アクセス、ボトム、問い合わせフォームは、構成シートの行を上下に移動するとサイト上の表示順も変わります。行を移動した後は、全てのシート内容を反映してください。ナビゲーション、ヘッダー、フッターは位置固定のため、構成シート上で行を移動してもサイト上の表示位置は変わりません。
移動できる行と固定行の見分け方
構成シートでは、移動できるセクションと固定されるセクションが分かるように背景色とセルのメモが設定されます。動かせる行は、行を上下に移動することで表示順を変更できます。固定行は、サイトの基本構造に関わるため表示位置が固定されます。
デザインシート
デザインシートでは、サイト全体のフォント、ベースカラー、メインカラー、アクセントカラーを設定します。フォントはSans Serif、しっぽり明朝、Klee One、Noto Sans JP、M PLUS 1p、Roboto、Orbitronなどから選べます。色はセルの背景色から反映されます。カラーコードを直接セルに書くだけでは反映されない場合があるため、セルの背景色設定から指定してください。
ヘッダー・トップ・ボトム・フッター系シート
ヘッダーではタイトル、サブタイトル、ヘッダー画像リンク、ボタン文言とリンクを設定します。トップとボトムではタイトル、説明、画像リンク、ボタン文言とリンクを設定します。フッターではフッターテキスト、フッターリンク、Twitter（X）、Instagram、Facebookのリンクを設定します。テンプレートによって使われる項目が異なるため、表示されない項目は空白のままで問題ありません。
メイン・カード系シート
メインやカードのシートでは、セクション見出し、リード文、複数の項目を管理できます。商品、サービス、メニュー、実績、ブログ風の一覧などに使えます。メイン項目はタイトル、サブタイトル、説明、画像リンクを入力します。カード項目はそれに加えてリンクを入力できます。新しい項目を増やす場合は、新しい行に内容を入力します。反映時には行順が表示順になります。
アクセス・お問い合わせ系シート
アクセス情報を表示するテンプレートでは、住所、郵便番号、最寄駅や車でのアクセス、電話番号、メールアドレスなどを設定します。GoogleMapは住所をもとに表示されます。Proプランでは問い合わせフォーム機能も利用でき、構成シートで問い合わせフォームの表示・非表示や表示位置を調整できます。
設定シート
設定シートでは、SEOタイトル、SEO説明、アイコン、独自ドメインを設定します。SEOタイトルとSEO説明は検索結果やSNS共有時の表示に関わります。アイコンはファビコンやOGP画像にも使われます。
認証シート
認証シートには、サイト名とアクセストークンを入力します。ここが正しく設定されていないと、スプレッドシートの内容をサイトに反映できません。トークンを再発行した場合は、このシートのアクセストークンも更新してください。
6. SpreadSiteアドオンの使い方
Googleスプレッドシートの 拡張機能 > SpreadSite から使える機能です。
全てのシート内容を反映
スプレッドシートに入力した内容をサイトへ反映します。自動反映を設定していない場合や、表示が変わらない場合は、まずこの操作を実行してください。実行後、反映まで数秒かかることがあります。
自動反映を設定
スプレッドシートの編集内容が自動でサイトへ反映されるようにします。公開後に少しずつ文章を調整する場合は便利です。
自動反映を解除
自動反映を止めたい場合に使います。大きな編集をしている途中や、まだ公開したくない内容を作っているときは、自動反映を解除してから作業すると安心です。
テンプレート初期化
スプレッドシートにサンプルデータと必要なシートを作成します。最初に実行することで、どの列に何を入力すればよいか分かりやすくなります。既に入力済みの内容がある場合は、上書きに注意してください。
シートの修復・アップデート
既存のスプレッドシート形式を最新状態に整える操作です。廃止された設定項目を削除し、それ以外の入力内容と構成シートの行順を残したまま、ヘッダー、入力規則、メモ、プレビュー式などを更新します。
独自ドメイン設定
Proプラン以上では、設定シートの独自ドメイン欄にドメインを入力し、アドオンの独自ドメイン設定を実行します。表示されたDNSレコードをドメイン管理サービス側に設定してください。反映には時間がかかる場合があります。独自ドメインを外す場合は、アドオンの削除メニューがある場合はそこから解除します。
ヘルプ
操作方法が分からない場合は、アドオン内のヘルプ、ダッシュボードの使い方ガイド、またはこのドキュメントを確認してください。
7. 画像の使い方
サイトに画像を表示する場合は、画像URLをスプレッドシートに入力します。
画像URLを入力する
各シートの画像リンク欄に、表示したい画像のURLを入力します。外部画像URLを使う場合は、ブラウザで直接開ける公開URLを指定してください。
SpreadSiteに画像をアップロードする
Proプランでは、メニュー > 画像 から画像をアップロードできます。アップロード後に表示される画像リンクをコピーし、スプレッドシートの画像リンク欄に貼り付けるとサイトに表示できます。画像ページでは、アップロード済み画像のURLコピーと削除もできます。
プランごとの画像上限
FreeプランではSpreadSite上の画像アップロード機能は使えません。Proプランでは画像アップロードを利用できます。外部に公開されている画像URLを使う場合は、プランに関係なく画像リンク欄へ入力できます。アップロード上限は画像ページや料金ページの案内を確認してください。
画像の変換・最適化
画像アップロード時には、通常の画像をWebP形式に変換して最適化します。HEIC/HEIF画像はJPEGへ変換したうえでWebP化します。SVGは形式を維持しますが、スクリプト・外部参照・未対応の要素を含むものは安全性のためアップロードできません。サーバーでも画像の実データを検証します。アップロードするファイルは4MiB、SVGは512KiB、総画素数は4,000万画素までです。
画像が表示されないとき
画像URLが間違っている、アクセス制限がある、画像ではなくWebページのURLを貼っている、といった場合は表示されません。画像だけが直接開けるURLか確認してください。
8. 公開・確認・更新
スプレッドシートの内容を反映したら、実際のサイトを確認しましょう。
サイトURLを確認する
ダッシュボードのサイト詳細画面で、公開URLを確認できます。通常は サイト名.spread-site.com の形式です。Proプラン以上で独自ドメインを設定した場合は、そのドメインでも表示できます。
公開後に確認すること
PCとスマホの両方で表示を確認してください。見出しが長すぎないか、画像が表示されているか、ボタンのリンク先が正しいか、SEOタイトルや説明文が設定されているかを確認すると安心です。
公開後に更新する
公開後も、スプレッドシートを編集して反映すればサイトを更新できます。手動反映を使う場合は、編集後に 全てのシート内容を反映 を実行してください。
公開後にセクション順を変える
公開後でも、構成シートで対象セクションの行を移動して反映すれば、サイト上の表示順を変更できます。対象はトップ、メイン、カード、アクセス、ボトム、問い合わせフォームです。ナビゲーション、ヘッダー、フッターは固定位置のままです。
独自ドメインを使う
Proプランでは独自ドメインの設定が利用できます。設定シートにドメインを入力し、アドオンから独自ドメイン設定を実行します。案内されたDNSレコードを設定した後、反映まで時間がかかる場合があります。ドメインは他のサイトで使用中のものは設定できません。
9. アカウント・支払い・退会
アカウント情報、ログイン設定、支払い管理、退会方法についてです。
アカウント情報を管理する
ヘッダーのメニューから アカウント を開くと、プロフィールやログイン設定を管理できます。ログイン方法や登録メールアドレスの確認もここから行います。
サインアウトする
アカウントページ上部のサインアウトボタンからサインアウトできます。共有端末を使った場合は、作業後にサインアウトしてください。
支払い・プランを管理する
メニューの Billing から支払い管理画面を開けます。有料プランの契約状況、支払い方法、請求関連の確認を行う場合に使います。
退会・アカウント削除
退会する場合は、アカウントページ内のプロフィール管理画面からアカウント削除を行ってください。有料プランを利用中の場合は、退会前にBillingでサブスクリプション状態を確認してください。削除方法が見つからない場合は contact@spread-site.com まで連絡してください。
削除前の注意
アカウントを削除すると、ダッシュボードやサイト管理にアクセスできなくなる可能性があります。必要な情報やスプレッドシートは事前に確認してください。
10. 料金プラン
利用目的に合わせてプランを選べます。最新の料金と提供内容は料金ページを確認してください。
Freeプラン
無料で使えるプランです。無料テンプレート、spread-site.comのサブドメイン、スプレッドシートからのサイト更新、1サイトまでの作成が利用できます。Freeプランでは、作成したサイトにSpreadSiteのクレジット表記が表示され、SpreadSite上の画像アップロード、問い合わせフォーム、独自ドメインは利用できません。
Proプラン
Proプランでは、画像アップロード、クレジット表記なし、お問い合わせフォーム機能、3サイトまでの作成、独自ドメイン設定が利用できます。より事業用に使いたい場合におすすめです。
Ultraプラン
Ultraプランは開発中です。提供内容が決まり次第、料金ページなどで案内します。
プラン変更・支払い管理
プランの確認や支払い管理は、ログイン後のメニューから Billing を開いて行います。料金ページからプラン選択を行うこともできます。
11. 困ったとき
サイトが表示されない、反映されない、認証エラーが出る場合の確認ポイントです。
アクセストークンを確認する
認証シートのサイト名とアクセストークンが正しいか確認してください。トークンを再発行した場合は、スプレッドシート側の認証シートにも新しいトークンを入力する必要があります。
シートの形式がおかしい
シートの列やメモ、入力規則、プレビュー表示がおかしい場合は、アドオンのシート修復・アップデートを実行してください。廃止された設定項目は削除されますが、その他の入力内容と構成シートの行順は維持されます。
内容が反映されない
まず 全てのシート内容を反映 を実行してください。反映には数秒かかることがあります。実行後すぐに変わらない場合は、少し待ってからブラウザを再読み込みしてください。
表示が崩れる・一部が表示されない
構成シートで選んでいるテンプレートと、各シートに入力している項目が合っているか確認してください。テンプレートによって使う項目が違うため、入力しても表示されない列がある場合があります。
セクションの並び替えが反映されない
構成シートで行を移動した後、全てのシート内容を反映してください。並び替えに対応しているのはトップ、メイン、カード、アクセス、ボトム、問い合わせフォームです。ナビゲーション、ヘッダー、フッターは固定位置のため、行を移動しても表示位置は変わりません。
画像が表示されない
画像URLが直接開けるか確認してください。Google Driveなどの共有URLは、そのままだと画像として表示できない場合があります。SpreadSiteの画像アップロード機能を使う場合は、アップロード後に発行された画像リンクを貼り付けてください。
独自ドメインが反映されない
独自ドメインはDNS設定の反映に時間がかかる場合があります。設定シートのドメイン名、アドオン実行結果、DNSレコードを確認してください。
サポート
操作に迷った場合は、ダッシュボードの使い方ガイドとこのドキュメントを確認してください。解決しない場合は contact@spread-site.com までお問い合わせください。
まずはダッシュボードのガイドを確認してください
サイトごとの初期設定ガイド、アクセストークン、サイトURLはダッシュボードから確認できます。