YKUCMR.COM

ネギャイベ2

クラブイベントの告知サイト

概要

知人が主催するクラブイベントの告知サイトです。
（Webサイトに掲載されているフライヤーは別の人が作成）

担当

  • 企画 / 構成
  • 情報設計
  • デザイン
  • マークアップ / アニメーション実装

制作背景

以前からTwitter上で親交のあった方から、クラブイベントを開催するので、告知サイトを作成して欲しいと依頼を受け、制作に至りました。

制作目的

  • 該当イベントの認知拡大＆来場者の増加を促す

情報設計

  • 既存のクラブイベントの告知サイトをリサーチしたところ、基本的に一つのページに情報をまとめている事例が多かった
  • 掲載情報を洗い出した際に、今回も既存サイト同様に上記の構成で問題ないと判断したので、シングルページを採用

デザイン

  • 全体で使用している青はWindowsのブルースクリーンを意識していて、このイベントのコンセプトにインターネットが存在しているので、それをギーク感が出るように表現した
  • 公開後に情報の追加 / 削除 / 編集が発生しそうだったので、情報変更の連絡をもらってから即座に作業が完了できるように、コンポーネント化や共通化を意識したデザインにした
  • あしらいも必要最低限に抑えることで、このサイトでユーザーが知りたい情報（日時 / 会場 / 出演者など）をストレスなく取得できるように心がけた

実装

  • 以前使用した際に実装しやすいと感じたNext.jsとTailwind CSSの組み合わせを採用
  • ギーク感やインターネット感を補完するためにも、テキストが画面にスクロールして入ってきた時に、シャッフルされるようなアニメーションを付与した
  • ホスティングサービスにはVercelの無料プランを使用しようと考えていたが、商用利用が不可とのことだったので、Netlifyの無料プランを使用（今回の内容が商用利用となるかはグレーゾーンだったが、念には念を入れた）
  • 過度なアニメーションやリッチなエフェクトを排除することで、軽量化できるように心がけた

案件から得たもの / 効果

  • Twitter上で主催者が情報を告知した際に、予想以上に反響があり、急遽前売り制度を導入するくらいには界隈で話題になった。それの一助に少しでもなっていたら嬉しい
  • このWebサイトに対して言及してくれていたツイートも何個かあり、今後の制作活動のモチベーションになった
デザインツール
Figma
技術スタック
TypeScript, Next.js, Tailwind CSS, Netlify

🏠 Back to Home

/

🌐 Visit Website