見出し画像

推しの５周年記念サイトをつくった話

あおぞらかなた

はじめに

今回、フレン・E・ルスタリオさんのデビュー５周年を記念して、サイトを作りました。この記事は私の感想と、サイトを作ってみたいと思っている方のための備忘録です。
長いので必要なところだけ読んでください。

作ったサイトはこちらです。


今回の企画の動機

「推しがいつでも見返すことができて、見たときに元気になれるものをつくりたい」と「ファンアートとか創作物は作れないけど推しのために何かしたい、という人の思いを届けたい」という２つが動機です。
今回の企画に限らず、いつもこの動機で企画をしています。
４周年記念、2024年の誕生日、にじ甲応援動画と今まで３回メッセージを集める企画をしてきましたが、今回は記念すべき５年目ということもあり新しいことに挑戦してみようと、記念サイトを作ることにしました。

懸念点

サイトをつくるうえでの懸念点は
・本当にサイトを完成させられるのか
・メッセージや創作物が集まるのか
・サイト制作を手伝ってくれる人がいるのか
の３点でした。

感想

一言で言うと、今回は結構大変でした。
毎回企画は締め切りに追われて大変ではあるんですけど。
来年も記念サイトをやるかと言われたらもうやらないと思います。
誰かが誘ってくれたら参加するかもしれないけど、サイト企画の主催はもういいかなと思ってます。
(主に自分の技術不足とプレッシャーの大きさのため)

今回の企画を通して、いろいろな声をいただきました。
サイトを褒めてくださる声も、あまり好意的ではない声も。
ただ、
「参加できてよかった」
「推しに届けてくれてありがとう」
その声だけで報われます。
参加していただきありがとうございました。

そして、フレン本人にも届き、喜んでもらえました。

やってよかった。

反省点

〇当初の目的は果たせた

「推しがいつでも見返すことができて、元気になれるものをつくりたい」というのがこの記念サイト企画を立ち上げた目的です。
また、「誰でも平等に愛を届けられる企画にしたい」というのも、私が企画するときに毎回思っていることです。
学生とか社会人とか関係なく、絵が描けるとか描けないとか関係なく
お祝いできたらいいよねという気持ちでやっております。
どちらも達成できたのではないかなと思います。

〇多くの方に協力してもらえた

サイトの構築にあたって、上記の目的のために金銭のやりとりを発生させずに行う必要がありました。快く引き受けてくださった絵師さん、そしてデザイナーの皆さんには本当に感謝しております。

〇ぱぺの写真がたくさん集まった

「絵が描けない人でもメッセージ以外で参加できるようにしたい」
という思いでぱぺの思い出写真を集めることにしました。
どれくらい集まるかな～と少し不安もありましたが、あちこちに連れて行ってもらえて嬉しそうなぱぺの写真が30枚以上届いて、ほっこりするページができました。フォロワーさんからも好評で嬉しい。

〇メッセージもたくさん集まった

メッセージは100名が目標でした。
しかしなかなか思うようには集まらなくて、当日の１週間前で40名程度でした。そこから企画アカウントでフレンさんの名前を出してツイートしたり、サイト内のイラストをチラ見せしたりして宣伝しました。
一応本人のXアカウントをブロックしておりましたが、「エゴサにかかるようにツイートするのはどうなの？」という意見はごもっともです。
ブロック機能を返して。
最終的に、当日に届いた分も合わせて111名分になりました。目標達成。

▲予定変更が多かった

今回は初めての記念サイト企画ということもあり、スケジュール感がわからずに手探りで進めることになりました。
他ライバーさんの記念サイト企画を参考にスケジュールを組んだつもりでしたが、そもそも「絵師さんに声をかけてサーバーに招待している企画」と、「フォームからの参加待ちの企画(当企画)」とではスケジュール感が違いますね。
結局直前まではメッセージも創作物も集まらないので、どれだけギリギリまで締め切りを伸ばせるかが勝負かと思います。
サイト公開の前日に仕事などがある場合はバタバタしますね。

▲拡散力不足

今回は企画用のXアカウントをつくって告知をしたこともあり、認知力不足もあったのかなと思ったり。
サーバーを立てて招待するとか、絵師さんにこちらから声をかけるとかしたらよかったのか…？という反省です。
あと最終的には人望ですかね。
もう少し親衛隊さんとの距離を詰めたいというか、関わりやすい人間になりたいなと思いました。
毎回宣伝ツイートにいいねやRPをしてくださった皆さん、本当にありがとうございました。ウキウキで見てました。

▲自信がなくて日和った

実はサイト内で使用するイラストをお願いしたい絵師さんは他にもたくさんいました。しかし、自分にサイト制作の経験がなかったため本当に完成するのか、どんなサイトになるのかがわからずに不安であまり多くの方に声をかけられませんでした。
これは無事公開できたから言えることではありますが、もっと多くの方にこちら側から声をかけても良かったかなと思います。

▲作業を一人で抱えすぎ

wixの仕様上、複数人で編集できなかったことにも関係しますが、サイトの構築・設定はすべて１人で行いました。(素材制作を除く)
・Xでの企画の宣伝(宣伝用画像や要項制作)
・絵師さんとの連絡
・各ページの制作やCMSの設定
・年表ページ用の配信の選別
・フォームの作成
・フォームに集まったデータをCMSに反映
(・自分の提出動画の制作)
(・自分の提出イラストの制作)
など結構忙しかったので、分担できるのであれば複数人で協力する方がいいです絶対に。
ちなみに動画とイラストは参加者が少なかった場合のかさ増しのために個人的に作りました。１件でも多い方がサイトの見栄えがいいかなと思って。これが余計忙しくなった原因ではありますね。

？　参加者数が読めない

企画をやるときやフォームで何かを募集をするときはいつもそうですが、開始時点でどれくらいの規模感になるかが全然読めません。
数人かもしれないし、100人を超えるかもしれないし。
しかも、締め切り当日になって十人以上増えることもあります。
(今回は15人増えました)
ある程度人数が決まらないと各ページのレイアウトも考えられないと思うので、そこがサイト企画の難点かなと思います。

技術・企画のお話

これ以降は技術的な話と主催目線での話になるので、私の感想を覗きに来た方はここまでで大丈夫です。お読みいただきありがとうございました。
興味がある方だけこの先も読んでいただければと思います。

サイトの制作過程

サイトをつくると決める(８月下旬)

思い立った時のツイートが見つけられなかったのですが、企画用のXアカウントは８月中にをつくっていました。

ホームページビルダーの検討(９月)

無料でホームページを作れるサイトを検索して、Studioが最上位に出てきたのでよく調べずに制作開始。

しかし、絵師さんに連絡したり、サイト制作を数ページ分進めたところで無料プランだと閲覧数制限があるらしいことが発覚。他のHP作成サービスを探すことにしました。閲覧数制限あるならもっと目立つところに書いておいてほしい。
ちなみに月1000円くらいで閲覧できる数を増やせた気がします。
※本企画では公開後ずっと見れるようにしたかったので固定費がかかるのは却下。

STUDIOが使えないということで代替サービスを探しました。
フォロワーさんが携わっていた企画で、浮奇くんのサイトがwixによってつくられていたのでwixを使ってみることに。

wixの問題点としては「複数人での共同編集ができない」ことです。
STUDIOの方は確か複数人で編集できたはず。
wixが提供する「wix studio」は共同編集できるっぽい？
wixでも課金してアップグレードすれば複数人で編集できるっぽい？
このあたりはよくわからないので、詳しいことはご自身で調べてみてください。

配色を決める

STUDIOで作っていた時に使っていたテンプレートの配色をそのまま持ってきました。赤・濃ベージュ・淡ベージュ・黒の４色分。
サイト内の要素はすべてこの４色で構成しました。
wixの中にある結婚式場のテンプレートを使って、色を変えながら作っていきました。

サイトの構造を決める

載せたいものやどんなページが必要かを検討。
他ライバーさんのサイトも参考にしながら考えました。
・メッセージ
これは安定。
・ファンアート
これも安定。ただし絵師さんも数週間前に書き上げる人はそうそういないので、締め切りを当日の直前にしないと集まらないかも。
・動画
これはきっと少ないだろうなと思ってましたが、自分がイメージソングを作る予定だったので、0になることはないということで採用。
・その他の制作物
これがいちばん未知数でした。何が届くのか。いくつ届くのか。
・ぱぺっととの写真
自分が絵が描けなくてサムネやイメソンに逃げている人間なので、「絵は描けないけど何かしたい…！」という気持ちは痛いほどわかります。なので、絵が描けなくても参加できるものとしてぱぺとのお出かけ写真を募集することにしました。
・クレジット
参加した方の一覧です。
自分の立ち位置ってなんだ？と思って「Direction」とかにした気がします。何が正解だったんだろう。

絵師さん＆デザイナーさんの募集(９月)

googleフォームにて協力者を募集して絵師さん６名、デザイナーさん２名が連絡をくださいました。
絵師さんにはサイト内でアイコンとして使用するイラストをお願いし、デザイナーさんたちには記念サイトのロゴやサイト内で使用する見出しなどの素材を作成していただきました。

絵師さんに依頼(９月)

こちらはフォームでの募集とは別で、個人的に好きな絵師さんたちに「こういう企画をしていてどうしてもサイト用にイラストを描いていただきたいです」と私から声をかけました。
３名に連絡して３名とも引き受けてくださいました。
快く引き受けてくださった絵師の皆様には本当に感謝しかありません。

創作物の募集(10月～)

要項を作成し、告知ツイートをしました。
募集項目はイラスト・動画・その他の創作物・ぱぺの写真の４つ。
動画とその他の創作物を集めるのが難しいですね…
私は自分で動画を作る予定だったので「動画」の項目を入れましたが、あやうく一人ぼっちになるところでした。その他と合体してもいいかも。
事前に切り抜き師さんなどに根回ししておくのもアリかと思います。

メッセージの募集(12月～)

当日の２か月前からメッセージを募集し始めました。
年表のページにのせる配信とコメントも欲しかったので、メッセージと合わせて答えてもらいました。

提出締切

当初の予定では創作物が当日の３週間前、メッセージが２週間前くらいにしておりましたが、そんな前にイラストを描き上げる人はいません。笑
ということで提出してもらったものをサイトに組み込む作業時間も考慮して当日の２日前に変更しました。
公開後はタグをつけてツイートして、当日届いた分もちょくちょく更新しました。

WIXの使い方について

一応書いてみましたが、自分でいじってみて分からなかったら都度調べるの方が早いです。笑

メニュー

エディタ画面左側にメニューがあります。
上から
要素の追加
ページ選択
サイトデザイン
CMS
レイヤー
あたりが使うところです。

要素の追加

  • ボックス
    ボックスを追加すると、そのボックスの中にさらに要素を追加してまとめることができます。1つずつ動かさなくていいので便利。

  • テキスト
    文字を表示させるときは基本的にこれです。
    ただし、テキストにはリンクをつけることができません。
    他のページへリンクしたい場合は「ボタン」を追加すると良いです。
    (追記)リンクをつけれるテキストもありました。よくわからないです。

  • ボタン
    他のページへのリンクを作成するときに使います。
    「もっと見る」のように文字を入れられます。

  • 画像
    解像度の指定あり。
    まとめたページがなく、検索でも出ないから調べにくい。
    ↓メインビジュアルのサイズはこれを参考にしました
    サイトパフォーマンス：メディアを最適化する | サポートセンター | Wix.com
    画像は2560×1440ピクセル以上って書いてありますが、これ以上小さいと劣化して見えるかと言われるとそうでもない。(わからない)
    絵師さんに依頼するときは気を付けておいた方が良いかと思います。
    アップロードしてからフォルダ分けや名前の変更なども可能で便利。
    ※画像のファイル名は誰が見ても大丈夫なようにしておきましょう。
    googleフォームで写真を集めたところ、本名っぽいファイル名になっていることがありました…
    あと位置情報を含む画像が送られてきていることもあったので注意！

  • 動画
    YouTubeなどの動画を表示させるときに使います。
    自動再生やループ再生なども設定可能。

  • リピーター
    同じものを複数並べて表示させたいときに便利。メッセージカードとか。
    リピーターを追加して使うより、後述する「CMS」と繋がった状態で操作することが多くなると思います。

ページの追加

ページは「静的ページ」と「動的ページ」の２種類に分かれます。

  1. 静的ページ
    トップページやクレジットページのように、要素を並べて手動で作るページです。
    他の記念サイトを真似しながら作っていくのがおすすめ。
    ある程度レイアウトが決まっているならテンプレートを使わずに白紙のページの状態から配置していくのもありです。

    ページは「セクション」というものに分かれます。
    スクロールしていって、内容が変わったらセクションを追加、というように作るといいと思います。

  2. 動的ページ
    スプレッドシートのデータから作るページを「動的ページ」といいます。
    このページは、繋がっているスプレッドシートの内容を編集するとページの内容も自動的に更新されます。
    これはよくわからないうちは逆にテンプレートを使わない方がおすすめです。テンプレートだとリンクがごちゃごちゃになっていたり、いらない情報がたくさん入っていたりするので設定に手こずることになります(なりました)。
    詳しくは後述します。

動的ページ(CMS)の使い方

動的ページを追加する場合は先にコレクション(スプレッドシートのような表)を作成します。
「コレクションを追加」から新規コレクションを作成して、表に表示させたい項目の列を作っていきます。
・名前
・SNSリンク
・日付
・画像
など、ページの内容にあわせて表を作成します。
※勝手に並び順が変わってしまうことがあるので、日付や番号の列を作って管理しておくことをおすすめします。
サイトには表示されません。

コレクションができたら再度左のメニューから
「ページ」「動的ページの追加」と進みます。
ここで必ずlistビューを選んでください。
ちなみに
listビュー→データを一覧で表示
itemビュー→１つのデータにつき１ページずつ作成
です。

コレクションで作った列のデータがリピーターとして表示されていると思います。各要素をドラッグしてお好みの配置にしてください。
１人分のデータが１つのコンテナ(枠)に収まってます。このコンテナのサイズを調整することで、１行(横)に並ぶデータ数を変えることができます。

CMSアイコンをクリックするとエディターの右側にCMSの設定タブが開きます。
このタブから、作成したコレクション内のどの列のデータに繋ぐかなどの設定をすることが可能です。
コレクションに入力したはずののデータが全員分表示されない場合は「読み込み数」の上限を超えている可能性があります。
「読み込み数」の項目を多めに変更してみてください。

SNSでの表示設定

ページ一覧を開き、各ページの「…」から設定を開くと、SNSで共有したときに表示される画像を設定することが可能です。
サイトのメインビジュアルなどがあれば設定しておきましょう。
また、各ページのURLも編集可能ですので確認しておきましょう。

知っておくときっと役立つ情報

メインビジュアルの表示

画像の表示について、
メインビジュアルを横幅いっぱいに引き延ばす場合、「セクションの背景」として設定するとモニターのサイズによって勝手に上下がトリミングされるようです。(どうにかする方法があるかもしれませんが見つけられず)
例えばウルトラワイドモニターで表示したら、セクションの縦幅は変わらずにモニター横幅に合わせることになるので横長の形にトリミングされてしまいます。
対策としては、セクション背景ではなく画像として配置することで、勝手にトリミングされるのを防げます。画像として配置した場合はトリミングされることはありませんが、左右いっぱいまで引き延ばすことも難しいです。多少は左右に余白ができてしまうと思います。

両サイドの余白はなに？

ＰＣビューのエディターには左右に「端末によっては表示されないかも」という、点線で表示されているエリアがあります。
これは、エディタをプレビュー画面にしてブラウザのウィンドウの横幅を変えてみてください。すると、あるところまではサイト全体が縮んでいき、ある所から両サイドが欠けていくと思います。このとき欠けずに残るのが点線の間ということになるようです。
イラストなど欠けさせたくないものは点線の内側に表示しましょう。

ページ内での移動【アンカー機能】

スクロールが長くなるページはアンカー機能が便利です。
アンカー機能というのは、ページ内リンクです。
スクロールだと長くなってしまう場合などに使えて、ページ内のどこに飛ぶかを設定できます。
アンカーメニューというパーツを右か左に固定しておくといつでも飛べて便利です。
(セクションに分かれているページはアンカーを追加しなくてもできます。年表ページなど、１つのパーツが長くなってしまう場合はアンカーって感じ。)

ページ内で画像やメニューの固定

固定したい画像やメニューを右クリックして固定を選ぶとできます。
固定する位置は左右それぞれ上中下のいずれかで、端からの距離や上下の位置も調整できます。
(スマホ表示だと固定機能は使えないので注意！)

データの管理【CMS機能】

ＣＭＳに苦戦する。
listページとitemページがあってよくわからなくなったので書いておきます。
ファンアートを並べて表示するページをつくる
動的ページの作成→listビュー
ファンアート１枚につき１ページをつくる
動的ページ→itemビュー
(listビューを作成すると自動でitemビューもできるのかも)
itemビューは使用しなかったので詳しくはわかりません。

スマホビューの設定

基本的にPCで組んだ素材・レイアウトが引き継がれます。
PCビューで表示しているものを、スマホビューで非表示に設定すると「PCでは表示されるけどスマホでは表示されない」という設定が可能。
スマホビューの設定中に素材を追加すると、スマホビューでのみ表示されるようになります。
当サイトのメインビジュアルはこの機能を使って差し替えています。

サイト公開してもCMSの要素が表示されない

コレクションを開くと「サンドボックス」と「ライブボックス」という２つのタブがありますが、サンドボックスは編集用の表です。
なので、サンドボックスに入力した情報はエディターでは表示されますが、公開したサイトには表示されないようです。
サンドボックスに入力した後、右上にある「同期」を押すとライブボックスタブの表に反映されます。
エディタ上での見た目は変わりませんが、これでサイト公開後も表示されるようになるはずです。
(追記)バグでサンドボックスからの同期ができなくなることがありました。この時はライブボックスを直接いじってもサイトに反映されず…。次の日になったら同期できるようになっていましたが結局原因不明。

リピーターでテキストの配置が崩れる

メッセージはリピーターを使ってＣＭＳに紐づけると便利です。
ただし、wix側ではリピーター内にテキストを入れることを想定していないようで、書式が崩れる場合があります。
PCビューでの対策
テキストボックス内の文字の行数によって崩れるので、テキストボックスの大きさをいちばん行数が多いものに合わせると崩れるのを防ぐことができます。(PCビューのみ)
スマホビューでの対策
スマホビューではなぜかテキストボックス自体がなくなってしまい、文字サイズしか編集することができません。
そのため、可能であればそもそもテキストが重ならないように配置するのがベストです。
テキストをボックス入れたりレイヤーの重ね順をいじったりといろいろ試しましたが直らず。
結局メッセージは画像として表示することにしました。(脳筋)

エディタが開けない場合

サイト制作中、３回ほどwixのエディタが重すぎて開けないことがありました。ちなみにもともとだいぶ重いエディタではあります。動作もモッサリ。
開けなくなったときは、edgeで開けないときはchromeで開いてみると開けることがありました(逆もあり)。どちらかというとchromeの方が安定していた印象です。他のブラウザはわかりません。

CMSが同期できない場合

サンドボックスからライブボックスに同期するとき、新しいデータはライブボックスに追加されるのですが、ライブボックスに一度追加されたものが同期によって削除されることはないようです。
なので、サンドボックスを編集してデータを削除した場合は一度同期してからライブボックスを開き、残っている不要なデータを削除しましょう。

最後に

記念サイト構築備忘録は以上です。

まったくプログラミングの知識がない素人でも多くの方の助けを借りながら記念サイトを作ることができたぞ！ということで、今後推しのホームページを作りたいと考えている方の参考になれば幸いです。

皆さんの愛が推しに届くことを願っています。


いいなと思ったら応援しよう！