音楽イベントの特設サイトをデザインするとき、トップページの最上部・最も目立つファーストビュー部分をどうデザインするか悩みますよね。

この記事では、筆者が過去に制作したサイトを例にしてレイアウトや表現のパターンを紹介します。

静止画

最もシンプルなのは、静止画のまま掲載する方法です。フライヤーのビジュアルを踏襲しながらレイアウトを組みましょう。

余白があるとゆったりとした印象に、逆に全面サイズにすると没入感が生まれます。イベントによって使い分けましょう。

複数画像

複数の画像を並べて掲載したり、スライドショーなどアニメーションを利用して掲載する方法もあります。

上記の『タビノエ -きこえる音、うかぶ風景- vol.2』は、ゲストハウスで旅をテーマとして映像演出のあるライブイベントでした。フライヤービジュアルは「具体的な場所は分からないけど、どこか旅で出会いそうな風景」の写真です。

フライヤーは1枚の画像を大きく掲載し、絵葉書のように印刷しました。特設サイトでは写真部分をスライドショーとして複数の画像を掲載し、よりいっそう旅の印象を強く表現しています。

動画

動きをつける方法として、動画を活用する方法もあります。webmの動画はファイルサイズが比較的小さいため、videoタグで埋め込むことで、サイト閲覧者の読み込み速度に影響を与えずに印象に残るループ動画を掲載することができます。

『Music For The Story II』では、生活の風景を想像させるためにカーテンが揺れる短い映像をループ再生しています。編集の工夫にはなりますが、ループの時に違和感がないように、動画の後半は、前半部分の逆再生映像になっています。

動画も背景に全面で敷くことで没入感を演出できます。『ひかりの感触』の特設サイトでは、YouTubeに限定公開でアップロードした動画をiframeで埋め込みループ再生しています。

アニメーション

アニメーションそのものを印象づける方法もあります。『Pluto Sparkle vol.2』の特設サイトでは、演芸場という賑やかな印象を持つライブイベントとして、フライヤーデザインにもある紙吹雪をCSSで降らせました。

『ヒビノイロ -ゆらめく光影、とけこむ音-』の特設サイトでは、背景の白い「窓」の色が、スクロールによって夕方から夜へと色が変化するようなjavascriptを実装しました。

特設サイトを制作しよう！

他にもイベント企画に関する記事を書いています。少しでも参考なれば幸いです！