ミスiD2018を始め各所で活躍／評価されているSSWのナビさんの公式サイトを作りました。
Contents
いきさつ
ミスiD2018セミファイナリスト発表前に吉田豪さんがナビさんのカバー動画をRTしていて、それをたまたま聴いてTwitterをフォロー。それからたまにライブやイベントに行くようになりました。
現場はファンとの距離が近いのもあって、ファンがそれぞれの得意分野（カメラとか文章とか）で活発に情報発信しています。その様子にあてられて、同じようになにか自分でも力になれないかなと思って今回の話を持ちかけたところ、快諾して貰えました。
自分はもともと前に出るようなタイプではないし認知されること自体にも苦手意識があったんだけど、よろこんで貰えてよかったです。
・お知らせ・
めちゃめちゃすてきな公式サイトができました！！
? https://t.co/LQfhKy0Jqc ?
（ナビチャンドットコム）写真はすべてアガツマちゃん（ @___iamagtm ）撮影のものを使用させていただきました！
マジカッケー！なのでチェックよろしくお願いします?
— ナビ navi (@sunday__yellow) 2018年10月2日
サイトについて
今回のサイトを作るにあたって考えたこと／実践したことをつらつら書きます。
メディア戦略
「そもそもサイトは必要なのか」という話がありますが、必要だと思います。SNSでは情報発信を簡単にできる反面、まとまった実績として見せることができません。
また、過去すべての期間を辿れるわけでもなく、辿ったところで当時の文脈が欠けてしまうなど問題も多いです。
これについては多くの人が言及していて、特に週末音楽家のCHEEBOWさんのツイートは話題になりました。
アイドルグループは、Twitterアカウントだけでなく、Webサイトも用意したほうがいい。情報が流れていくTwitterだけに頼ってはダメ。どんなグループなのかどんな活動をしてきたのか知りたいときに情報が集約されてないのは機会損失だ。
— [email protected]✩週末音楽家✩ (@cheebow) 2018年2月25日
更新めんどくさい問題への対応
とはいえ、サイトは更新がめんどくさいです。WixやStrikinglyなど便利なサービスが出てきていますが、ログインしないといけないし、告知はSNSで書いたことをまた書くことになります。そして更新したところで「いいね」は貰えません。強い気持ちがないとモチベーションは保てません。
なので今回はTwitterのモーメント機能を活用することにしました。更新頻度の高いコンテンツ(NEWS、COVER)はすべて埋め込みモーメントです。ナビさんがツイ廃（失礼）なのもあって、更新の負荷を下げることが出来たかな～と思います。
モーメントは他人のツイートもまとめることができるので、“ファンの人が動画を取って自分のアカウントで公開した”カバー動画にも対応できるのが良いです。
何をストックするのか
肝心の「何をストックするか」についてですが、活動に関するものはすべてで良いと思います。
出演するイベントが増えると「あのイベントに比べてこのイベントは載せる程でもない」「このイベントは納得いかなかった」みたいな話も出てくるし、当人の自己肯定感が低いとなおさらでしょう。でも、「全然そんなことないですよ」って言い聞かせて全部載せましょう。そもそも“活動してきた”ということが一番尊いことです。
Googleカレンダーが出演予定でギチギチに詰まっている、みたいな状況であればそれでも大丈夫だと思いますが、できれば個別に活動経歴の一覧としてまとめたほうが良いと思います。Googleカレンダーは見通しが悪いし、検索するのに不便なので。
写真
写真が一番重要だといっても過言ではないので、ちゃんと撮影した写真を使います。今回はｱｶﾞﾂﾏさん（ミスiD2019ファイナリスト）が撮影したものを使わせて頂いています。
写真をトップに貼り付けて表示させるときがサイトを作っていて一番楽しい瞬間なのですが、いい写真だったので本当に幸せでした。ナビさんも自分も一枚を選ぶことが出来なかったので、アクセス毎にトップ画像を変えています。4パターンあるので良かったら更新してみてください。
ナビさんに負けず劣らずｱｶﾞﾂﾏさんもすごく魅力的な人です。リンクを下に貼っておくので良かったら是非。今はミスiD2019の受賞者発表待ちという、本人もなかなかしんどい期間だと思うので一緒に応援しましょう。
ｱｶﾞﾂﾏ｜note
@___iamagtm • Instagram写真と動画
技術的な話
技術的な話をします。オタクなので……
Twitter埋め込みウィジェット
公式のオプションでスタイル／デザインのカスタマイズが出来ますが、もっと自由にやりたいのでJavaScriptでiframeにCSSを無理やり喰わせます。
Googleカレンダー
こっちも公式で提示されている方法だとイマイチなので無理やり弄ります。当ブログで過去に紹介しているので参照してください。
カレンダーウィジェットをそのまま埋め込んで、スマホでみたときにカレンダーの横幅がサイトの表示領域を超えているサイトがたまにあります。GoogleカレンダーはPCだとカレンダー表示、スマホだとリスト表示、みたいな器用なことが出来ません。気を利かせるなら、その辺りの制御もこちら側でするべきでしょう。
WordPressを使うのであれば「Simple Calendar」というプラグインが同様のことをやってくれるみたいです。
正直、スマホからのアクセスが圧倒的に多いのでリスト表示だけでも良い気もしますが……
お問い合わせ
お問い合わせフォームは事故ると大惨事になる上に、ナビさんだけが内容を見れる状態にしたかったのでGoogleフォームにしました。
Googleフォームを公開設定にしてもらってサイト側のformのactionとinputのnameを合わせれば、サイトに入力された内容をそのままGoogleフォームに送れるのでデザインが崩れません。
おまけ
heavenly days / 新垣結衣#ナビのカバー pic.twitter.com/PkZ4uv5FiO
— ナビ navi (@sunday__yellow) 2017年6月7日
好きになるきっかけになったカバー動画。#ナビのカバーのモーメントに追加されていないから本人が気に入ってるかは知らないけど、自分はすごく好き。