×レビュー
DJ・配信イベントなどを開催する際、告知サイトを作成するのはかなりの労力が必要になるため、比較的小規模なイベントの場合はフライヤーの画像を作ってSNSに投稿して済ませるケースも多いもの。そんな小規模なイベント主催者でも簡単にイベント告知サイトを作れる無料テンプレートが「Kitekure」です。Googleスプレッドシートを使ってコードを1行も書かずに告知サイトが作れるとのことで、どんなテンプレートになっているのか実際に試してみました。Kitekure - DJ・配信イベントの告知サイトを一瞬で作れるテンプレートhttps://kitekure.sanographix.net/DJ・配信イベントの告知サイトを簡単に作れる無料テンプレート「Kitekure」を作った - SANOGRAPHIX Bloghttps://text.sanographix.net/entry/kitekureKitekureで作成したデモサイトが以下。イベント名や開催場所、開催日時、概要、参加メンバーなどがスッキリと1つのページにまとまった告知サイトとなっています。SMTP++ Volume.99 | 2022/01/12 OPEN 20:00 CLOSE 24:00 (JST)https://kitekure-sample.netlify.app/
Kitekureを利用するには、公式サイトにアクセスして「FREE DOWNLOAD」をクリック。
すると、TwitterまたはFacebookでKitekureをシェアする選択肢が表示されました。いずれかのSNSでシェアするか、あるいは「Or skip for now(今はスキップ)」を選択して……
「GET STARTED」をクリック。
すると、ソフトウェアをダウンロードするのではなく、ブラウザで「Kitekure Docs Home」という名称のページが新しいタブで開きました。
画面右側には、実際にKitekureで作ったイベント告知サイトの画像が表示されており、実際にどのようなウェブサイトを作れるのかがわかります。
ページを下にスクロールすると、デモ画像の下に「Step-by-step guides(ステップ・バイ・ステップ ガイド)」がありました。図を見ると、まずは手元PCでスプレッドシートのCSVファイルや素材となる動画・画像をテンプレートに落とし込み、サーバー上で公開するというざっくりした仕組みが把握できます。
その下には、「Configシートの準備」「サイトのカスタマイズ」「サイトを組み立てる」「画像・動画を用意する」「サイトのセットアップとプレビュー」「サイトの公開」「サイトの告知……の前にすべきこと」「サイトの更新」の順に、Kitekureで告知サイトを作成・公開する方法が章立てて説明されています。まずは「Configシートの準備」をクリック。
Kitekureではサイトで告知する内容からデザインまで、全てをGoogleスプレッドシートを使って編集していき、Kitekureで使う設定用スプレッドシートのことをConfigシートと呼んでいます。画面中央にあるURLをクリックし……
開いたスプレッドシート画面の右上にある「テンプレートを使用」をクリック。
すると、自身のGoogleドライブにConfigシートがコピーされました。あとはこのシートに告知したい内容を記述していきます。
ConfigシートはA列がオプションの名前であり、各オプションの名前は変更してはいけません。各オプションの行に「Value1」～「Value5」があり、この中に設定内容を記述していく仕組みです。ここで「Configシートの準備」は終了なので、次の章である「サイトのカスタマイズ」を開きます。
スプレッドシートの左端(A列)にはオプション名が、右端(H列)にはオプションの意味とそれぞれの項目に何を記入したらいいのかが説明されています。あとはスプレッドシートの説明や「サイトのカスタマイズ」に記された補足などを頼りに、それぞれの項目に記入していけばOKです。
なお、画面下部にある「[Sample] - config」を開くと、Kitekureのデモサイトの設定を見ることが可能。それぞれのセルにはただ文章や数字を入力するだけでOKで、文字のサイズなどを考慮する必要もありません。
イベント名や開催日時、開催場所などを記入し……
Googleマップ埋め込みやウェブサイト全体のテーマ、アイコン画像、TwitterなどのSNSで共有した際のキャッチ画像も設定できます。
ヘッダーには画像だけでなく動画を埋め込むことも可能。
出演者情報なども記入すれば完了です。
スプレッドシートへの記入が終わったら、記入した内容をウェブサイトとして反映できるHTML形式にします。まずは「ステップ・バイ・ステップ ガイド」のページで「サイトを組み立てる」をクリックして……
URLをクリックしてHTMLのテンプレートをダウンロード。
ダウンロードしたzipファイルを解凍すると、「_src」フォルダと「index.html」「preview.html」の2ファイルが入っています。
続いて、先ほど作成したスプレッドシートを開いて「ファイル」「ダウンロード」「カンマ区切りの値(.csv、現在のシート)」をクリックして、CSVファイルをダウンロードします。
ダウンロードしたファイルの名前を「config.csv」に変更し、解凍したテンプレートの「index.html」と同じフォルダ階層に移動します。
ここで「サイトを組み立てる」のページは終了なので、次の「画像・動画を用意する」をクリック。
告知サイトに埋め込みたい画像や動画を用意し、ファイル名をスプレッドシートに記入した名称と一致させて、「index.html」と同じフォルダ階層に移動します。
次は「サイトのセットアップとプレビュー」をクリック。
Kitekureでは無料で使えるホスティングサービスのNetlifyの使用を推奨していますが、好みで他のサーバーを使用することも可能です。
Netflyのアカウントを持っていなければ、公開したウェブサイトは24時間で消えてしまうため、サイトを永続的に公開したい場合はNetflyのアカウント作成が必要です。アカウントを作成するにはNetflyの公式ページへアクセスし、「Get started for free」をクリック。
GitHubやメールアドレスなどを使ってアカウントを作成します。
アカウントページの下部にある「Site」の枠内に、「_src」フォルダと「index.html」「preview.html」、画像などが入った「kitekure」フォルダをまとめてドラッグ＆ドロップします。
これで、Netflyを使用して独自のウェブサイトを作成することができましたが、このままだとURLがNetflyに割り当てられたランダムなものになってしまいます。URLを変更したい場合は「Site settings」をクリックし……
「Change site name」をクリック。
これで、告知サイトのURLを設定することができます。ウェブサイトのURLは後から変更できないため、自分の好きなURLを使いたい場合は最初に設定する必要があります。
設定したURLをクリックすると……
「Set up Kitekure」と記されたページが開くので、「SET UP」をクリック。
すると、作成した告知サイトのプレビューを見ることができます。もしプレビューを見て問題があればスプレッドシートや画像を修正して、前述の手順通りに「Kitekure」フォルダに反映し直して、再度Netflyで新たなウェブサイトを公開する必要があります。
1行もコードを書いていないのに、かなり本格的な告知サイトに仕上がっています。
これで「ステップ・バイ・ステップ ガイド」の「サイトのセットアップとプレビュー」の章が終わるので、「サイトの公開」をクリック。
現時点のプレビューサイトはアクセスの都度CSVファイルを解析しているため、表示速度が遅くなっているとのこと。そこで、プレビューサイト下部のパネルにある「Download」をクリックして本番用「index.html」ファイルをダウンロードし……
「Kitekure」フォルダにある「index.html」ファイルを本番用の「index.html」ファイルに置き換えます。
そしてNetflyのアカウントから「Deploys」を開き、「Need to update your site? Drag and drop your site output folder here」と書かれた枠の中に、「index.html」ファイルを本番用に置き換えた「Kitekure」フォルダをドラッグ＆ドロップします。
これで告知サイトが本番用に更新されました。余分なパネルが消えていることを確認したら、SNSなどでURLを告知すれば大勢の人の目を引きつけることができます。もし告知サイトの内容に修正があれば、スプレッドシートの内容を変えて「config.csv」を更新し、「index.html」ファイルを本番用に置き換えた時と同様に「Deploys」からアップロードすればOKです。
Kitekureを開発したのは、イラストレーターのポートフォリオ公開用サイトを作れる「Illustfolio」や同人音楽の告知サイトを作れる無料テンプレート「Tokusetsu」を作成してきた佐野章核さん。佐野さん自身も「SMTP++」というイベントを主催しており、新型コロナウイルス感染症(COVID-19)のパンデミックで開催延期を余儀なくされているとのこと。そこで、まずは配信イベントの告知などでも使用でき、ゆくゆくはリアルイベントの開催告知サイトに使えるテンプレートとして、Kitekureを開発したとのことです。
この記事のタイトルとURLをコピーする・関連記事無料でスマホからウェブサイトを作れるアプリ「Airsite」を使ってみた - GIGAZINE無料で複数のテンプレートから簡単にウェブサイトを作成できる「Carrd」を使ってみた - GIGAZINE無料でウェブサイトやブログに使える写真を検索可能な28サービスまとめ - GIGAZINE無料でユーザー登録不要＆アドレスを入力するだけで自動消去機能付きのウェブサイトを作成できる「sdnotes.com」 - GIGAZINE無料でクールな印象を与えるブログ・SNS・ウェブサイトっぽいデザインの壁紙を作成できる「Cool Backgrounds」 - GIGAZINE無料でウェブデザインの背景と文字の色を微調整しながら確認できるアプリ「Kontrast」 - GIGAZINE
・関連コンテンツ
- Tweet
in レビュー, ネットサービス, Posted by log1h_ik
You can read the machine translated English article here.
