Some Kinda Angel というイベントを開催させていただくことになった。イベントタイトルに#2と書いてあるのは2014年に前回が催されていたのを表していて、これで2回目となる。

こういったバンドのライブ的なイベント、基本的にはフライヤーと呼ばれる画像を1枚用意したら Twitter に貼って告知する or 印刷してライブハウスやリハーサルスタジオに置かせてもらう運用が一般的だと思うんですが、カジュアルな良さはあるものの、観に行く側の客視点だと「ライブハウスの名前でググってマップを開くフローが発生する」「フライヤーの視認性が低く、分かりにくい」「知り合いでもない人にいきなり DM で予約するのが敷居高めに感じる」といった面倒くささや課題感も発生していたのは否めず。
これは勘だけど、フライヤー文化全盛の時代に表面にメインビジュアル、裏面に概要を記して印刷されていた形式のうち、印象的な表面だけを抽出して SNS へ展開していった産物なのかもしれない。

解決手段としては適切に情報を記載したペライチのページでもあればだいぶ改善されそうだし、せっかく今回自分たちのバンド企画でイベントを組む機会に恵まれたため、ライブイベントに関する情報を集約したページを用意した。

(というより、普通こういったイベントを催すのであれば情報集約と必要な導線を配置したページを用意するのが2020年の当たり前品質で、それを Twitter に画像貼るだけで済ませたと錯覚しているバンド文化が歪な気もする)


構成

特設ページとして紹介してはいるが、0ベースで Web サイトを制作した訳ではない。具体的に書くと、プラットフォームには Notion を採用している。

これは一昨年ぐらいから人気になってる Web サービスで、古くは Evernote, 最近だと Scrapbox みたいな情報集約ツールとして使われている。作成したページをカレンダー表示で並べたり、 Trello のようなカンバン形式で見ることも可能で、使う人に応じた多様な用途に対応できる。
Scrapbox とは設計思想から全然異なるが、かつて Evernote を使っていた経験のある人なら特に違和感なく使えると思う(ちなみに Web Clipper 的な機能もあり)。自分はメモからリマインダー、タスク管理、あと Read it Later 的な用法までまとめて Notion に集約して使いまくってます。

無料プランでもフル機能使えるのだけれども、ブロック単位(1ブロックがおよそ1段落に相当する)での制限があるため有料プランに移行して使っている。とはいえ、今回紹介するようなライブの特設ページをいくつか作る程度なら無料プランの範囲内で充分そうな気がする。

Notion ではページごとに固有の URL があり、これを共有することで、作成したページを Web サイトとして外部に公開できる。今回作成したページは↓で、チケット予約(取り置き)に関しては別に用意した Google フォームへ遷移してもらう感じの構成。

今回心がけた点として、全て No Code で実現している。
普段デザイナーとして Web 関連の制作や開発の仕事をしているので、一応作ろうと思えば0から一通り特設ページをデザイン・コーディングして作り込むのは可能なのだけど、早めに告知しておきたいといったスケジュール観点の都合と、あと No Code で作ることでゆくゆくは別のメンバーにも気軽に編集へ携わってもらえるような運用を想定している。

Notion の編集画面こんな感じです
Notion の編集画面こんな感じです

初めての試みだったこともあり、今回は一通り自分が作業した形だけど、本来は企画や渉外的な役目を担うメンバーを中心に複数人で確認しつつざっくりと作っていくフローが良さそう。Notion の詳細な使い方や個別の機能紹介、活用例に関してはググれば紹介・説明コンテンツが無限に見つかる。


デザイン

ビジュアル的なページの作り込みは、アーティスティックな凝った表現には制約があるものの、ライブの特設ページに求められるようなごく基本的なものには Notion が提供する UI コンポーネントの範囲内で充分に対応できる。例として、今回出演バンドを並べた部分のような2カラムのレイアウトは、横並びにしたいブロックをドラッグ & ドロップで横に持ってくるだけでOK。
Notion ではページ内のブロックごとに URL が付与されているので、飛ばしたいリンク先のブロックの URL をコピペすることでページ内リンクも実現できる。また、外部のサイト URL を貼る場合には、ペースト時に展開される項目の中から「Create Bookmark」を選択することで少しリッチな見た目でリンクを生成できる。

Create Bookmark で良い感じにリンクを貼る様子
Create Bookmark で良い感じにリンクを貼る様子

No Code とはいえ、メインビジュアル作成は Illustrator などデザインツールで作成した。メインビジュアルの勘所として、PC サイズのような横長の環境で表示した際には横いっぱいに引き伸ばして表示されるため、閲覧の大半を占めるモバイル端末で最適化される感じに作りつつ、横長でも最低限問題ない感じに見えるような要素のレイアウトにすると綺麗に仕上がる。もちろん、PC サイズを考慮しないのであればモバイルのみに最適化すれば良い。

今回はこんな感じで作ってます
今回はこんな感じで作った。下は Google フォーム用

メインビジュアルは、画像単体で SNS へ貼る運用を前提にした従来のフライヤーと異なり、イベントに関する詳細な情報は Web ページ側で確認してもらえば良いので、SNS で露出した時の体裁のみ考慮して作った。今更感あるけども一応書いておくと、Twitter でツイートに貼った URL が展開された時の表示(Twitter Card)は Card Validator で確認できます。
ちなみに Google フォームのメインビジュアルも同時に作成していて、こちらはだいぶ横長の比率で表示されるので良しなに調整している。

今回 Notion で外部公開するページを作成してみた所感としては、🐈の写真があれば全て正義になるような気がしている。


こんな感じで簡素なページがあるだけでも、閲覧者の離脱を防ぎ、より気軽に来場してもらいやすくなるのではないでしょうか。あと今なら、こういったイベント単位での Web 展開に取り組んでいるバンド自体がまだ決して多くはない気がする。ので、ちょっぴり注目も集められるかもしれない。

ただ、ライブに関する情報を集約した特設ページを用意する目的としては、ページ自体でより多く集客するというよりも、情報伝達のロスを最小限にする・マイナス要因を減らしてその分ライブ自体に集中して楽しんでもらえるようにする方が本筋であるように考えている。なので、作成の際にはなるべく情報を明瞭に記載し、自分でツッコミを入れつつ確認するぐらいのスタンスが望ましい。

一点、今後の懸案事項としては SEO が挙げられる。Notion はページの共有設定で検索エンジンのクロール許可を切り替えできるのだが、ONの状態でも適切にクロールされてないっぽく、結果として Google の検索でヒットしない状況が続いてしまう。
もっと大規模なイベントになってくるとかなり致命的な事象なんだけど、そういった規模感ならゼロイチでサイト作るだろうし、そもそも今回の動機として序文で触れたように「Twitter にフライヤー画像貼り付けただけの告知」を置き換えるのが目的なのでオーガニックの流入は考慮していない(というか、期待できない。同じくらいの活動規模のインディーズバンドなら分かると思うけど、コンバージョンするのは大抵 SNS で告知見たり DM 経由で予約した人なので)。

この記事を読む前に「そう言われても、Kensei Ogata Band とは違ってライブの回数自体がもっと多いし、いちいちページとか用意できなさそう」などと思われたバンドマンの方におかれましても、初めにテンプレートもとい枠組みだけ用意してしまえば使いまわしでいけるので、ぜひ試してみてください。
Notion 自体は Google アカウントで利用できるので障壁や面倒なステップも少なくて楽。ライブの後にセットリストを追記するのも良さそう。

Notion テンプレートを複製利用する様子
今回用意したページは右上のここからテンプレートとして流用してもらうことも可能です