Dabits

サーバサイドから運営まで何でもやるエンジニア系DJ

#アニカンナゴヤ vol4の告知サイトを制作しました。

レポート

02/18(日)12:00から栄JB'Sで開催されるアニソンクラブイベント「Anime Conference Nagoya vol4」の告知サイトを制作しました。 いつもはオーガナイザー兼DJとしても出演していましたが、暫くは仕事と家庭に注力するため告知サイト作成のみの参加です。

せっかくなので、今回の告知サイトを制作するにあたってのポイントを記載してみることにします。

前提となる自身のデザインスキル

  • 元々はWebデザイナではなくWebエンジニア
  • 前職でガラケーサイトで毛が生えたようなWebデザインとWebソシャゲ開発経験有り
    • 特にWebソシャゲはCSS3+JSを使った演出を制作
    • この頃からUI/UXについても勉強を始めていてワイヤーフレームはこだわるように
  • 現職ではユーザ向けページのWebデザインほとんどしてない
    • 社内ツールのUI/UXはこだわり抜いて制作

前回の告知サイトから変更したイメージ

  • Voca Nico★Nightコラボがあるので雰囲気をそれっぽく
  • サイトのテーマカラーをフライヤーのテーマカラーに近づける
    • フライヤー製作者は私ではなく別の人
  • 前回の告知サイトで実施したフライヤー回転が好評だったので、今回はもう少し+α動きを加える感じで
    • 但し閲覧の阻害になったり、うるさくなるような演出は入れない

実際に変更した所(&使った技術)

  • サイトで使う配色の一新
  • 動きの演出は大抵「CSS3 アニメーション」でググってサンプルを探す
    • ググる前にアニメーションのイメージを頭で固めておく
    • マッチする演出があればそれを適用
    • どうしてもCSS3で実現できないアニメーションがあればjQuery Pluginから探す
  • レイアウトの調整
    • アー写の丸抜きがウケ良さそうだったのでCSSで実現
    • 前回アー写は無加工だったが、今回は縦横比を揃えたかったので全て真四角に加工
      • リスト表示は見た目の統一性が大事ね
  • サイトのデータ管理はgit+gitlab.comで管理
    • データ引き渡し後もオーガナイザーで安易にテキストを修正できる

...とだいたいこんな感じで作りました。毎度明らかにTwinviteの使い方を逸脱していて管理画面がバグってしまうんですけどね← デザイナーでない方でも参考になりますよう。

さいごに

アニカンナゴヤは私ととむそん発案で考えた、初めての人でもめっちゃ行きやすいアニソンクラブイベントです！ IT系勉強会から取り入れた名札やLTとアニソンクラブイベントをmixしつつ、丁寧に案内してくれるスタッフも充実しているので一人でも行きやすいイベントになっています。 LTでワイワイガヤを入れたり、アニソンを聴きながらお酒を飲んだりと余暇を楽しげに過ごせますので、少しでも興味がありましたら是非告知サイトをチェックしてみてください！