SANOGRAPHIX Blog

京都を拠点に活動する佐野章核 (sanographix) の個人ブログ。日記、webデザイン、読書、写真など。

3ヶ月前「イベント開催くん」だったメモが無料テンプレート「Kitekure」になるまで

f:id:sngrpx:20211018022155j:plain

先週のはじめ、DJ・オーガナイザーのためのイベント告知サイトテンプレート「Kitekure」を公開した。

自粛続きでイベントが恋しいムードが漂っていたからか、ありがたいことに「使ってみたい」など沢山のポジティブな反応を観測することができた。また、早くもKitekureでサイトを作ってみたという方まで現れた。もちろん、本当のフィードバックは実際に色々な人が使ったあとでわかってくるものなので、単に前評判がよかったからといって浮かれるべきではない。が、イベントに携わる/これから開催したい皆さんが、まずはこうしてKitekureを受け容れてくださったことに、心から感謝を申し上げたい。

そこで本記事では、Kitekureを使ってみたい方、使おうか決めかねている方へ、追加の情報を提供したいと思う。プロダクトの概要については前回の記事に書いたので、何も知らないという方は前回記事から読むことをおすすめします。ここでは、もう少し時系列順に、どのような経緯でテンプレートを作ったのか書いていく。

前回の記事:

text.sanographix.net

イベント開催くん(仮)

f:id:sngrpx:20211017115013j:plain

この画像は、今から3ヶ月前に書いていたメモである#kitekure は後で追記した)

8年前から、Tokusetsuという同人音楽告知テンプレートを作っている。Tokusetsuは、当初の予想を超える多様な方に使っていただけた。なかには、個人的に普段から楽曲を好きで聴いている方々も、クレジットで見つけることができた(挙げるとキリがないので割愛するが、大勢いらっしゃいます)。素晴らしい才能を持つトラックメイカー/レーベルの皆様の作品告知に活用していただけたことに対し、この上なく光栄に感じている。

いずれの方も面識がないのでおこがましいかもしれないが、こうした出来事に対して、何かしらの形で感謝を表したいと思った。そこで浮かんだのが、Tokusetsuの利用状況調査だった。利用状況を観測するなかで、ネットレーベル・同人音楽サークルが、リリースパーティーを開催している様子を見てきた。あるいは、Tokusetsu自体を改変して、イベント告知に使っている例も少なからずあった。「もっとイベント告知に最適化されたサイトを作れるようにできないか」と考えたことが、開発のきっかけだった。

Tumblrの限界とスプシ

どのように実現するか検討したとき、まず浮かんだのが、Tumblrテーマを使うことだった。Tokusetsuでもこの方法を採った。CMS(テキストや画像の管理)やホスティング(サイトをインターネットに公開する)をTumblrに肩代わりさせることで、開発量が少なくてすむ。

しかしこの方法には弱点もある。それは、「Tumblrアプリをインストールしているスマホ」でサイトを閲覧したとき、強制的にアプリが開いてしまうという点。Tumblrアプリはテーマに対応していないため、アプリに飛ばされた閲覧者は全くページの内容を見ることができない。

f:id:sngrpx:20211018001340j:plain
Tumblrアプリをインストールした端末でサイトを開いた挙動。アプリに遷移して、ページの内容を見ることができない

この現象に対してテーマ作者側にできることはなく、またTumblrがプラットフォームとして意図した使い方ではないため、解決は当面できないだろうと思っている。代替手段を探して、Googleスプレッドシートに辿り着いた。

GoogleスプレッドシートをCMS的に使う

GoogleスプレッドシートをCMS的に使うやりかたは、ノーコードブームの文脈で以前から類似のサービスがあるので、Kitekureが特別新しいことをしているわけではない。強いて違う点を挙げるなら、KitekureではGoogleスプレッドシートと直接連携するのではなく、スプレッドシートで書き出したCSVファイルを読み取っているだけという点だ。実装は至って素朴で、何もすごくない。CSVさえ用意できればいいので、やろうと思えばExcelを使ってもいい(ひな型がないので0から作る必要があるが)。リアルタイムのサイト更新ができない弱点があるものの、告知サイトには必要性は薄いだろう。

検証用プロトタイプ

この動画は、実現可能性を確かめるために作ったプロトタイプ。思惑通り、スプレッドシートで入力した情報をサイトに表示することができたので、大筋この方法で進めることにした。

このときはCSVパーサーを自作していたので、文中でダブルクオート(")が使えない等のほほえましい品質だったが、のちに既存のライブラリに差し替えたことで出力が安定した。

イベントやってる場合じゃない夏

8月、基礎的な部分が出来てきたので、テーマカラーの切り替え機能や、カウントダウンのタイムゾーン対応*1などの機能追加に着手していた。

ところがこの頃、世間では新規感染者数がピークを迎えていた。感染対策が不十分なフェスがニュースになる等、とてもじゃないが音楽イベントが開催できる雰囲気ではなかった。実際、Kitekureが想定している規模のイベントでも、開催中止・延期の告知がじゃんじゃん見つかり、今は時期が悪いことは明らかだった。

いつまでこの状態なのか先の見えなさと、ひと夏遊びにも行けず毎日景色が変わらない退屈さもあって、モチベーションがかなり低下していた。進捗もいまひとつで、ゲームをするかプラモを作って気を紛らせていた。

f:id:sngrpx:20210831233203j:plain

"来てくれ"

もうひとつ悩んでいたのがプロダクトの名前だった。

f:id:sngrpx:20211018224611j:plain
なんで「サクサク告知くん」2回書いたんですかねぇ……

とりあえず「kokuchi」という名前で呼んでいたが、いざ名前を決めようとすると良い案がなかなか浮かばない。上記ブレストメモを見るとスカした名前が並んでいるが、なんか自分らしくないと思っていた。カッコつけるのをやめようと決意した瞬間にスッと出てきたのが「Kitekure」だった。

Kitekure とは、僕が主催する「SMTP++」の告知で、決まり文句的に「少しでいいから来てくれ!!」と言っていたことに由来する。個人開発にふさわしいバカっぽいニュアンスが気に入った。

それに、告知サイトを作るオーガナイザーの願いは「来てくれ」以外になにがあるというのか。オンラインだろうがVRだろうが、それは変わらない。また、同名のプロダクトが他に存在しないため、検索結果にも優しいことも決め手となった。

アルファ版のフィードバックを受ける

9月、ひとまず完成しているところまでのアルファ版を複数の人に送り、フィードバックを得ることにした。このタイミングで依頼した理由は2つある。第一に、これまで勘頼りで作ってきたものが、ユーザーの課題にフィットしているのか確かめる目的。第二に、モチベーション低くダラダラ続けていて感情が無になっており、これはマズいと思ったから。

話を聞ける人を見つけるのには苦労したが、それでも何名かに連絡をとることができた。具体的には、アルファ版の試用を依頼したり、デモを見せたり、世間のイベントの様子をヒアリングした。このプロセスを通して、実に多くの知見を得ることができた。ブラッシュアップも進んだ。

喜んでサイトを作りたがる人はいない

紹介サイト

ブラッシュアップと並行して、紹介サイトにも着手した*2

kitekure.sanographix.net

まず前提として意識したことは、「喜んでイベント告知サイトを作りたがる人はいない*3」ことだ。それは、ローカル音楽イベントの告知はフライヤーか出欠確認サイトといったケースがほとんどであり、Webサイトの形態がほぼ観測できないことが証明している。

作る習慣のないものを作ってほしいと提案することになるので、「誰でも高速にサイトを完成させられること」「永久に無料であること」を正確に伝える必要があった。前者は、簡単な動画を置くことで、どうやってサイトを作るのかイメージしやすくした。後者は、「永久に無料」の部分を不自然なほど大きくし、エフェクトもかけた。ここは id:amagitakayosi さんのREACT-VFXを使っており、目を引くグリッチエフェクトをとても簡単に実装できた。おすすめ!

ワードのチョイスもこれまでのプロジェクトと少し変えた。当初いつもどおり「です・ます調」で作文していたが、途中から「である調」に切り替えた。また、所々にあえて直訳風のワードを加えている。これらはエナジードリンクの宣伝文を参考にした。パーティーのそわそわする空気感を出したかった為なのだが、みなさんはどう連想しただろうか。

Step-by-step guides

f:id:sngrpx:20211018005329j:plain

いくらヤンチャなプロダクト紹介をしたところで、使い方がわからなければ意味がない。そこで、「Step-by-step guides」と題したチュートリアルを用意した。これを読んでいけば、サイトの作成から公開、更新まで一通りの作業ができるようになっている*4

行かなくても許されそう

f:id:sngrpx:20211018010008p:plain

f:id:sngrpx:20211018005631j:plain
右にいくほど新しい

あわせてロゴを作った。

もともと「来てくれ」のネーミングが気に入っていた。発音するとキレとスピードがあるのに、威圧的ではなくフレンドリーさがある。行かなくても許されそうな感じがするのも良い。このニュアンスを伝えたくて、漢字+平仮名で表現しようと思った*5

ところが実際に漢字+平仮名だけで作ってみると、かなり必死に懇願してる人っぽく見えて違和感があった。日本語圏でないと読めないのも微妙いと思ったので、ローマ字の周囲に装飾のように配置する現在のバージョンにした。


以上が、おおむね時系列に沿ったKitekureの制作経緯である。

Kitekureはまだ出来たばかりであり、いまの状態が未来永劫完璧だとは思っていない。不具合もきっとある。だからこそ、実際に使ってみてどうだったか、あなたの需要にマッチしたのか、というフィードバックが重要だと考えている。チュートリアルの最後にフィードバックフォームを用意したので、ぜひ答えていただければと思う。

最後に、Kitekureを作った一番の理由を書き忘れていた。それは、あなたと同じように、自分もイベントが好きだということだ。

別にイベントならなんでも好きだとか、ましてパリピ感ある人間だとかでは決してなく、むしろ大勢で集まる行事はすぐ帰るタイプである。しかし、そんな自分にも居心地の良いイベントはある。そういう、好みにバチッとはまったイベントの幸福感は魔法のような中毒性があり、うまく言葉で表現しようにもしきれない。

このままパンデミックがつつがなく収束するとは誰も思っていないので、かつての楽しさを取り戻すには、まだもう少しおあずけを食らうかもしれない。だが、形態がどうあれ楽しいイベントは楽しい。そして、そうした空間をつくりあげようと努力する行為も、また美しいと思う。

あなたのイベントが素敵なものになれば幸いです。

*1:この機能は F1 のレース日程表を見ていて思いついた

*2:紹介サイトの技術的にはGatsby + Firebase Hosting

*3:誰に言われなくてもWebサイトを作れる人は、Kitekureの主対象ユーザーとは考えていない

*4:完全に余談だが、チュートリアル置き場として使ったGitBookで大規模リニューアルがあり、Kitekureのリリースと重なってヒヤヒヤした

*5:イメージとしてはタンヤオAA