ゆるふわフラペチーノ

いっちゃんのブログです

トップ > #AxwellOPイベント 告知ページを作りました

#AxwellOPイベント 告知ページを作りました

はじめに

お久しぶりです．いっちゃんです． 今回，3月よりオープンするSound Bar Axwellさんにて3/2(金), 3/3(土)と開催されるオープンクラブイベントの告知ページをtwvtにて制作しました．3/2はアニソンRemixやクラブミュージック，3/3はアニソンやボカロなどが流れて，3/2には私もVJとして出演いたします！
「SoundBarAxwellオープンイベント」
（参加表明をよろしくお願いいたします）

今回は，告知ページの作成の依頼を受けてどのように告知ページ作ったのかをまとめたいと思います．

経緯

店長「プログラムかけるっけ？」
自分「かけるけども，その言い方はこわいな・・・」
店長「イベントページ作って」

厳密にはプログラムではないけど引き受けました． けどWebデザインに関してはど素人です．

twvt

今回告知ページに用いたのはtwinvite(通称twvt)と呼ばれるTwitterと連携した，告知ページを作るサービスです．このサービスははてブロの記事のようにイベント内容をコードで記述することができることに加え，twvtのサービス自体にbootstrapが使われているため，特別な作業を必要することがなくbootstrapの記述が可能です．

デザイン&コーディング

今回はオープンイベントということで多少の派手さと読みやすさを兼ね備えたデザインにしたいと思いました．

出演者の数はday1は17人と出演者紹介だけでかなりの量になるため，bootstrap定番のグリッドシステムを用いて画像を正方形に加工して2列の配置にして情報量が多くてもサイトが縦に長くならないようにしています．(ぶっちゃけ画像加工が一番時間かかりました)

また，せっかく用意していただいた元画像を使わないのはもったいないと思い（さらには某出演者の画像の文字が切れてしまったので），モーダルウィンドウを用いて加工前画像を表示するようにもしました．bootstrapに備わってるので比較的楽にかけました．

二つのイベントページがあるため，イベントページの行き来のしやすいボタン，そして，参加表明を行うためのボタンの表示をしました．

アニメーションは見たい情報にすぐアクセスできないことによるUXの低下の可能性があるため，出演者陣の画像をマウスオーバーすることでブラーをかけるという控えめなアニメーションのみ実装しました．CSSによる実装です．

配色はすでに作られているフライヤーを元に配色しました．

ページを作る際は特に工夫はなくエディタ上でコードを書いてtwvtにコピペして確認の繰り返し・・・という修行じみた行為をしていましたがもっと楽にできそう．あとたまにコピペミスってtwvtのデザインがサイト全体ぶっ壊れるということが多々ありました．えぐい．

以上のような感じで告知ページを作りました．

参考にした告知ページ

「Anime Conference Nagoya vol4」
こちらはdabitsさんによるイベントページです．通常の操作ではいじることのできないスマホ画面上での背景色などを(勝手に)参考にさせていただきました．この場を借りてお礼申し上げます．ありがとうございます．

「Izanagi Distribution Ver.3.0」
こちらは月花さんによるイベントページです．bootstrapによるイベントページの制作方法をまとめており参考になりました．ありがとうございます．

最後に

今回のオープンイベントは演者陣もそうとう気合が入ったものとなっております．音楽を楽しむクラブに行ったことない人にもお勧めできる内容です．

day1は18時から29時まで行っており，およそ11時間も2500円で楽しめます！！！(てか，11時間もVJ二人で回すのか・・・Drinkの差し入れお願いします・・・) twvtにて参加表明していただければ500円割り引きで，2000円で入場できますので是非，事前の参加表明をおすすめいたします！！私はVJいたしませんが，day2もアニソン好きには是非とも注目していただきたいです！

そして，最後になりますがSound Bar Axwellさんオープンおめでとうございます！

皆様の参加をお待ちしております！