見出し画像

リニューアルしたSHIBUYA SLOW STREAM、Notionを使ってWebサイトを制作したワケ

Camp Inc. Notes

こんにちは。アシスタントディレクターの須藤です！ コロナでの外出自粛に加え、ここ最近どんよりとしたお天気が続いていますが、今日はちょっぴりハッピーな気分になれるイベントの提案です。

この度、Campが企画・運営する渋谷ストリームの屋外イベント「SHIBUYA SLOW STREAM（渋谷スロウストリーム）」が、装いも新たにリニューアル。クラウドメモアプリ「Notion」で構築されたWebサイトもオープンしました！

「SHIBUYA SLOW STREAM」とは、渋谷ストリームから並木橋まで続く渋谷リバーストリートに、毎回趣向を凝らしたマーケットやワークショップ、アクティビティなどが集う、「スロウな渋谷」を楽しむ屋外イベント。

このnoteでは、「渋谷を流れるスロウなひととき　みんなでつくる“いつものトクベツ”」をテーマに行われたリニューアルの概要と、Twitterでも話題となったNotionを用いた新しいWebサイトについて、制作の裏側を交えながらご紹介していきます。

そして最後に、いよいよ今週末開催にせまった、リニューアル後初となる新・SHIBUYA SLOW STREAMの最新情報をお届けします。

「スローテンポな渋谷」も楽しんでほしい

渋谷といえば、最新トレンドが行き交うアップテンポな部分がピックアップされがちですが、すこし南に下るとゆったりした時間の流れるエリアも。渋谷駅新南口すぐの渋谷リバーストリートは、渋谷の農家を中心に結成されたNPO「アーバンファーマーズクラブ」が運営する畑や、ひと息ついてくつろげるベンチも多くある場所です。

「SHIBUYA SLOW STREAM」は、そんな「スロウな渋谷」を知ってもらい、この街をじっくり楽しんでほしいという想いから誕生しました。生まれ変わった渋谷川やこの“ちょっとトクベツ”な催しを、この街で働く人や近隣で暮らす方々に親しんでもらうこと。そしていつしか、その風景が暮らしのなかで新たな風物詩となっていくことを目指しています。

なお、新ビジュアルには、渋谷川沿いの人や水のおだやかな流れと木漏れ日といった雰囲気、またジェンダーや国籍といった違いに関わらず、どんな人も歓迎する姿勢を、STOMACHACHE.さんがイラストで表現し、野田久美子さんによってデザインしていただきました。

画像3

「みんなでつくる」イベント&ローカルメディア

今回のリニューアルに際しオープンしたWebサイトは、ただのイベントサイトではありません！ イベント情報やさまざまな催しのレポートはもちろん、渋谷川周辺のスポット紹介、渋谷を楽しむローカルパーソンや出店者さん、関わるメンバーのインタビューなど、日ごろこの場所を利用する人や地元の方々が、気持ちも足もとめたくなるようなトピックを紹介する、いわば「みんなでつくる」「スロウな渋谷」のイベント&ローカルメディアを目指しています。

そのために、本サイトはクラウドメモアプリ「Notion」と、Notionで作成したページからWebサイトがつくれるサービス「Anotion」を用いて構築し、従来のCMSサイト以上に、どなたでもかんたんに編集や投稿ができる仕様にしました。

ただ、わたくし新人ディレクター須藤の不慣れな進行、しかもまだ世に出て間もないサービスを使ってのサイト制作は、一筋縄ではいきませんでした。たとえば、「フォントのサイズを指定できない」「TOPページに記事へのリンクを直接設定できない」など、進んでいくうちに従来のCMSをつかったサイト制作では出会わない制限が、だんだんと浮き彫りに……。

正直終盤は泣きそうになりながら進行していましたが、Anotionの担当者さんがdiscordで驚くほど気さくに直接やりとり＆即時ご対応してくださり、なんとかかたちにすることができました。

そこで今回は、これからNotionでサイトをつくられる方、そして僕のような新人Dの方々の参考になればと、Notionのサイト制作でつまづいたポイントと解決策をお伝えできればと思います。

▼Notion サイト制作TIPS

■フォントサイズが変更できない
今回のサイト制作で最初にぶつかった壁が、フォントのサイズ指定でした。現状、Anotionではデザインに合わせ、サイトの各箇所それぞれに細かくでフォントサイズを指定することができません。ですので、解決策としてNotion上で「テキスト」や「見出し1」といった機能ごとにサイズを設定し、それらを使い分ける方法をとりました。実は本サイトも、3種類の文字サイズしかつかっておらず、ボールドや色を駆使しながら対応しています。

■記事のリンクをトップに指定できない
さらにむずかしかったのは、Anotionを使ったサイトでは、Notionのギャラリーやリストで作った記事へのリンクをトップページに直接貼ることができないという点。今回のサイトは、最新のイベント情報を指定してトップページに表示する必要があったのですが、仕様上、個別の記事へのリンクをトップページに持ってくることができませんでした。そのため、JavaScriptで記事へのリンクが別途で自動生成されるようにすることで、トップからの直接リンクを実現しています。また従来のCMSでは当たり前の機能となっている、DBから任意のコンテンツや画像を引っ張ってくるということもできないため、現状では逐一Notionに画像をアップロードしたり手動でコンテンツを作っていく必要があります。メディア機能を持ったサイトを制作される際はご注意を……。

■descriptionが設定できない
ほかにも、descriptionは、Notionのページの冒頭に記述されている200文字が自動的に登録される仕様だったりするので、ここもCSSをいじって、一部テキストを非表示にしつつ、別途descriptionを直接設定しています。

意外なところでできないことがあったりと、さまざまな制限を乗り越えながらの今回のプロジェクト。そうした数々の苦労を乗り越えてまで、あくまでNotionにこだわった背景には、「みんなでつくる」というSHIBUYA SLOW STREAM がもっともたいせつにしている想いがありました。

「渋谷を流れるスロウなひととき　みんなでつくる“いつものトクベツ”」というコンセプトの中核にもなっているこの言葉は、さまざまな立場のメンバーが、それぞれ思いの丈をぶつけ合うことで完成しました（このやりとりもなかなかでしたが、それはまた別の機会に……笑）。

今回のWebサイトにも、コンセプトと同様、最後まで新人Dを見捨てず、喧々諤々しながら制作してくれたデザイナーさんやエンジニアさんをはじめ、メンバー全員の気持ちや意見が反映されています。「みんなでつくる」地域の催しものとして、Notionでどなたでもかんたんに参加できる設計をすることで、今後メンバーだけでなく、地元の方や渋谷で遊び、働く方の想いまでもがこのサイトに映し出されていくことを期待しています。

挿入用

最後になってしまい恐縮ながら、このサイトをリリースした直後、Webサイト公開のお知らせツイートをしたところ、引用RTいただいた投稿への反応も含めると、なんと1000を超える「いいね！」をいただきました！ 多くの方がコメントもくださり、予想を超える反響に私たち自身驚いています。本当にありがとうございました……！

お礼かたがた重ねて恐縮なのですが、サイトに興味を持っていただいた方、こんなご時世ですが、ぜひ一度イベントに足をお運びいただけたら幸いです。イベントのおみやげとして、すてきなプレゼントがゲットできる企画もありますし、きっと「これまでのイベント」「これまでの渋谷」とは違う“ちょっとトクベツ”な空気、感じてもらえるんじゃないかと思いますので。


【7/10〜11開催！】「うごく」を通して渋谷の街をもっと楽しく

リニューアル後の新「SHIBUYA SLOW STREAM」第一弾は、「うごく」をテーマに開催します。

画像1

コロナの影響で移動のしにくいこのごろですが、「身近な範囲で動く」「心を動かす」など、小さな「うごく」は、どのような状況でもできることです。そこで今回は、移動式の図書館や新しいモビリティツールの体験など、この街を味わうためのヒントを渋谷を楽しむローカルパーソンに向けて提案。

これまでマーケットメインで開催していたイベントに、参加型・体験型のアクティビティも加わり、さらに地域に根ざした活動を行っていくことで、「場」でくつろぐ時間や「場」そのものを楽しみ、周辺環境にも目を向ける機会となることを目指しています。

また会場には、「“うごく”を体験して、おみやげをGETしよう！」と題し、「ミニチャリレース」に参加、または「LUUP」を試乗体験をすると、すてきなプレゼントがGETできる企画も！

川縁を流れるスロウなひとときのなかで、さまざまな「うごく」を体験してみませんか？　みなさんのお越しを心よりお待ちしております。

ノベルティ情報など、イベントの詳細はこちら：
https://slow-stream.jp/d833db94f3f54ad1b2a679691b0c42be

■イベント概要
名称：SHIBUYA SLOW STREAM #3 「うごく」
日時：2021年7月10日（土）〜11日（日）12:00〜19:00
開催場所：渋谷ストリーム前　稲荷橋広場、金王橋広場、渋谷リバーストリート
公式Webサイト：https://slow-stream.jp
協賛：TORQUE SPICE & HERB, TABLE & COURT、Sora Japanity
主催：渋谷ストリーム
協力：熊井晃史
企画・運営：Camp Inc.

■“うごく”を体験して、おみやげをGETしよう！
「ミニチャリレース」または「LUUP」試乗会にご参加いただくと、オリジナルミニサコッシュ、「TORQUE TABLE」10%OFFクーポン、「Sora Japanity」グリーンティーバッグ、「どこ渋」300円OFFクーポンをプレゼントします。（※1日先着100名、お一人1点まで、なくなり次第終了）

【プレゼント詳細】
○ オリジナルミニサコッシュ（ロゴ入り）
その場でデザイン2種・カラー5色からお好きな内容を選び、シルクスクリーン体験ができます
○ 「TORQUE TABLE」10%OFFクーポン
渋谷ストリーム4Fにある「TORQUE TABLE」で提示するとお会計時に10%OFFになるクーポンチケット
○「Sora Japanity」グリーンティーバッグ
コロナ禍で活躍する人々を応援するプロジェクト「We are one. お茶で安らぎをまわそう。」より、日本茶ブランド「Sora Japanity」の香味深いシングルオリジンの日本茶ティーバッグ一煎分
○「どこ渋」300円OFFクーポン
渋谷ストリームとヒカリエの一部飲食店で提示するとそれぞれお会計時に300円OFFになる2種のクーポンチケット
※7/10-11のみ使用可能
【参加方法】
（1）「ミニチャリレース」（会場：渋谷ストリーム前 金王橋広場）、または「LUUP」（会場：渋谷リバーストリートC区画）のブースで試乗体験をする
（2）ブース内にあるQRコードにアクセスし、「SURUTOCO」ブース（会場：渋谷リバーストリートC区画）へ向かう
（3）「SURUTOCO」ブースでノベルティをゲット（ミニサコッシュのシルクスクリーン体験は同ブースで実施しています）

■出店者一覧
【体験】
● ミニチャリレース（まめサイクル（ミニ自転車））https://yuhei-matsumoto.theblog.me
● LUUP（小型電動アシスト自転車、電動キックボード）https://luup.sc/
● SURUTOCO（シルクスクリーン）https://www.surutoco.jam-p.com/
● EV-LAND株式会社（電気自動車）http://www.ev-land.jp/
【展示・ショップ】
● MOTOCOｘHAGISO~旅する朝食~（キャンピングカー、食料品販売）https://motoco.life/・https://hagiso.jp/
● PARADISEBOOKS（移動式図書館）https://paradisebooks.jp/
● 原ちゃり電ちゃり（電動バイク）https://www.genchari53.com/
● Carstay（キャンピングカー）https://carstay.jp/ja

■アクセス
〒150-0002　東京都渋谷区渋谷三丁目21番3号　https://goo.gl/maps/Th4qqkYppRbJTQME9
東急東横線・田園都市線、東京メトロ半蔵門線・副都心線「渋谷駅」C2出口直結

画像4


この記事が気に入ったらサポートをしてみませんか？