Help us understand the problem. What is going on with this article?

スプレッドシートからWebサイトを作成できる「sheet2site」の使い方

More than 1 year has passed since last update.

sheet2siteとは

sheet2siteはGoogleスプレッドシートからWebサイトを作成できるサービスです。無料版と有料版があります。有料にすると独自ドメインを利用できるとか、、、。

どんなWebサイトを作ることができるのか?

以下の画像のようなグリッドスタイルのサイトを作ることができます(公式サイトのテンプレートより)。

image.png

作り方

実際にWebサイトを一緒に作っていきましょう。

1. テンプレートのコピー

このリンクからテンプレートをコピーします。

2. 作りたい内容に書き換え

次にコピーしたテンプレートを編集していきます。
コピーしたスプレッドシートには、以下のようなシートから構成されています。

  • content
  • main-page
  • filters
  • Update / Help

content

contentにはWebサイトのグリッドの部分の情報を入力します(下図の赤枠部分)。

図1.png

入力できる情報は以下のような情報です。

  • タイトル(Title)
  • 簡易的な説明(Description)
  • ページリンク(Link)
  • グリッドの背景画像(Image)
  • 左上の小さなテキスト(Small text-1)
  • 右下の小さなテキスト(Small text-2)
  • フィルタ用(Filtering by this)

main-page

main-pageにはWebサイト全体の設定を行うことできます。

無料版で編集できるのは以下のような情報です。

  • タイトル(Title)
  • 簡易的な説明(Description)
  • 背景画像のリンク(Background image link)
  • facebookで表示する画像のリンク
  • グリッドの幅(Card-width)
  • グリッドの高さ(Card-height)

他にもいくつかあります。有料版でないと使用できないもの(Proと書いてある部分)や今後実装されるもの(soonとなっている部分)になどもあります。

filters

filtersにはフィルタの種類を登録できます(下図の赤枠の部分)。

図2.png

ここでフィルタを登録しておくと、contentで「Filtering by this」の列に書いたものでフィルタリングできます。

3. スプレッドシートのリンクの登録

公式サイトの下部にある「Make Your Website for Free」の「3. Paste it here」とある部分に編集したスプレッドシートのリンクを貼り付けます。あとで戻ってくるので、このページはまだ消してはいけません。

image.png

4. 公開設定

スプレッドシートの上部のタブから「ファイル」→「ウェブに公開...」→「公開」をクリックします。(公開の設定はデフォルトの「ドキュメント全体」と「ウェブページ」のままでOK)

image.png

5. Webサイトの生成

3でリンクを張ったページに戻って、下の方にある「Generate」ボタンを押します。すると、無事にWebサイトが生成されます。

image.png

上手くいかない場合は、以下のようなページに移動します。

image.png

ページ下部に「Get Help」が存在するので、わからないことがあったらここに書くと良いと思います。

image.png

最後に

今回はGoogleスプレッドシートからWebサイトが作れる「sheet2site」というサービスの使い方を紹介しました。見た目はかなりカッコイイんですが、自由度はそこまで高くありません。今後新しい機能も実装されていきそうですし、有料版だと若干自由度は高くなります。またドキュメントが全然ないというのは結構つらいです(今後の期待)。本当に簡単なWebサイトや自分用のリンクのまとめを作りたい時には非常に良さそうです。

参考文献

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした