ROKD Official Site

rock band

ロックバンド「ROKD（ロッド）」
公式サイト

バンド最大の魅力であるパフォーマンスを再現した、ライブ集客のためのサイト

千葉・埼玉のライブハウスを中心に活動する「ROKD（ロッド）」は、アマチュアロックバンドです。

老舗のライブハウスからも一目置かれるその音楽は、卓上では作れないこだわりのロックサウンド。プロを経験したメンバーや、かつて本気でプロを目指したメンバーから成るバンドであるものの、ライブの集客に苦労しており、メンバーの人脈に頼らない方法を模索していました。

サイトには、メンバー自ら更新できるライブ情報のみならず、これまでの経歴や保有する愛機紹介など、音楽へのこだわりが詰まった彼らの魅力を伝えるコンテンツを設けることで、集客のみならず新規ファンを獲得するためのサイトとして機能するよう構築しています。

正統派ロックを想像させる「黒×赤」をベースに、ライブを想像させる世界観を演出

ターゲットである30〜40代の音楽ファンやライブハウスのブッキングマネージャーなど、音楽に精通している人が見ても彼らの音楽性が想像できるようなサイトデザインとしています。

見出しにネオン表現を採用したり、主要なボタンにライティングをイメージさせるグラデーションを用いるなど、ライブ写真が溶け込む世界観を再現。下層ページのヘッダータイトル背景で使う写真の選択にも気を配りました。

タイポグラフィは、力強くも洗練されたゴシック系のフォントと、彼らの言葉を切り出したような手書きフォントを組み合わせることで正統派ロックを表現。既存のロゴともバランスをとっています。

ライブ情報を更新できるようWordPress化

LIVEページに掲載しているライブ情報はメンバー自身で更新できるよう、固定ページにカスタムフィールドを用いてWordPress化。

トップページのメインビジュアル直下にある「ライブスケジュール」にはLIVEページから最新3件を抜粋表示するよう設定。

情報更新の際に、1つのフィールドのみ入力すれば済むようユーザー負担を考えて構築しています。

オンラインライブ時は外部決済サイトに遷移させるため、納品後にフリー欄をURLリンクとしても機能するよう改善しました。

ユーザビリティを追求し、同一ページで全メンバーの詳細情報が得られる設計に

ページの行き来によるユーザーの離脱を回避するため、メンバー一覧と個々の経歴を同一ページ内で取得できるようモーダルウインドウを採用。

ストレスなく全文が読めるよう、PC表示時はウィンドウ内でスクロール可能とし、タブレット/スマートフォン表示時は背景固定しつつウィンドウがスクロールできるようユーザビリティを徹底的に追求。

メンバー別に愛機を美しく魅せる

タブの切り替えにより、容易にメンバー別の愛機が閲覧できるようデザインしました。

PC/タブレット表示時とスマートフォン表示時ではタブの位置を切り替えています。

高さ・幅の異なる機材の配置方法や、楽器を美しく魅せるレタッチにもこだわりました。

チケット予約・ライブオファーのための問い合わせフォーム

ライブ情報を見たユーザーがそのままチケット予約できるよう、ライブ毎に設けた「チケット予約」ボタンから遷移する問い合わせフォーム。

チケット支払いはライブハウスで対面で行われるため決済機能を設けず、メンバーが参加者を把握・管理でき、かつライブオファー等の各種問い合わせにも対応できるフォームですべて完結する仕組みに。

ユーザビリティを意識し「入力→確認→送信完了」と段階を踏む設計としています。

Vision, Policy, View