【制作裏話】onStageのHP公開しました！／kikuta
はじめまして、おんすてメンバーのkikutaです☺
普段は理系大学院生として研究してます。
onStageでは上野夏祭りのデザインを作りました。
今回は、私が担当したonStageのHP制作の裏話についてお話しします。
制作したHPはこちら💻
HP制作の始まり 🌟
9月某日、あくびさんから、「onStageのHPを作りたいが興味ないか」というお話が。
「ぜひやりたいです」
ウェブサイト制作は自分の好きなことだったので、すぐに乗り気になりました。
要件が明確で、デザインの参考も揃っている。
このままサクサク進むだろうと、ワクワクしていました。
試作品
ひとまず、参考デザインに沿って作ってみることにしました。
最初に作ったデザインのトップページがこちらです。
このデザインを見て、どう感じましたか？
人によって感じ方はそれぞれだと思いますが、私は「なんか違う」と感じていました。
このデザインは、正直なところonStageらしさを十分に表現できていなかったと思います。
私は今回のHP制作で大きく2つの壁にぶつかりました。
第一の壁🚧
HP制作において、よく問題となるのが「印象に残るHPをどう作るか」。
実際にHPを作ってみると、物足りなさを感じて「印象に残りづらいHP」になってしまっていました。
良いデザインには、しばしばさりげない動きが入っています。
この時のサイトには動きがなかったのです。
では、どんな動きが必要なのか？
目を惹くデザインにするためには、何を加えればいいのか。
そんなことを考えているうちに、どうしても前に進めずにいました。
第二の壁🚧
さらに、HPの物足りなさだけでなく、ほかの問題がありました。
「onStageらしさのある画像って何だ？」
今回テーマである「onStage」らしさが全く入っていないように感じました。
トップにどんな画像を置けば、onStageの雰囲気を表現できるのか…。
参考デザインがあるとはいえ、トップに持ってくる画像次第でHPの雰囲気が大きく変わります。
最初にデザインを考えるとき、どんな内容を掲載するのか、どのように配置するのか、ということだけを考え、onStageらしさをあまり意識できていなかったんです。どういった画像があるのか、どんな画像が合うか、などということを考えられていませんでした。
壁を乗り越えられた出来事①🎊
どういう画像が合うか悩んでいたときに、あくびさんから
「コラージュにしてみたらどう？」
という提案をいただきました。
その提案を受け、私は「複数の写真を使うことでonStageの雰囲気が表現できるかもしれない」と感じました。
色々な画像がある中で、これらを全て盛り込んだコラージュが一番onStageらしいのではないか。onStageは多様な人々がいて、それぞれが主人公を目指すコミュニティだからです。
しかし、ノーコードに慣れていない私は、「コラージュなんてどうやってやるの？」という疑問が次に立ちはだかりました。
壁を乗り越えられた出来事②🎊
壁を乗り越えるきっかけは、1つのテンプレートとの出会いでした。
ある時ふと、「テンプレートにはどんなものがあるのだろう？」と思い立ち、様々なテンプレートを探し始めました。
この時は、具体的にonStageのHPについて考えていたわけではなく、単にどのようなテンプレートが存在し、種類がどれほど豊富かを知りたかったのです。
そんな中で、動きのあるデザインを組み込んだコラージュ風のテンプレートを見つけました。
この発見により、「これなら私の理想のHPに一歩近づけるかもしれない」という期待が生まれました。同時に、これまでのアイデアが一新される感覚もありました。
不安と期待が交錯しつつ、私は新たなアプローチを試してみることを決意しました。
写真を入れ、動きを加えると、全体の雰囲気が一気に良くなりました。
特に、画像の配置やアニメーションが相まって、訪れた人にとって心地よい体験を提供できるHPに仕上がりました。
初期デザインと比較すると、onStageらしさが表現されていると感じます。
そして、最後の作業会では、細かい部分を調整し、ついにonStageの半年記念となるHPが公開されました。公開したときは、大きな達成感に包まれました🎉
最後に
公開後も細かい更新を行っており、今後もさらに良いHPを目指して、新しい更新を企んでいます。ぜひ、定期的に覗いていただけたら嬉しいです！
おんすて(onStage)ってなに？
onStage(略して、おんすて)は「メンバー各自が自身の理想を言語化し、行動すること」を目的とした、2024年4月に主催あくびが立ち上げた、若者のキャリアに向き合うコミュニティです。詳細は別のnoteにまとめているので、ぜひご覧ください。