画像をクリックでPENGUIN!を開く

これは実在するバンドの公式Webサイトを作る際に、デザイン案として作ったものです。
(検索避けの為にメタ情報やテキスト上でのバンド名を、元々のものから「PENGUIN!」に変えてあります。)
HTML/CSSで作ったサイトをWordPressテーマ化する」という課題の中で作りました。

バンドについて

まずは、このバンドについての説明をします。以下、バンド名を仮名称として、”PENGUIN!”と呼びます。
“PENGUIN!”は、ジャンル分けをするとマスロック
インストゥルメンタルバンド(楽器のみで、ボーカルがいないバンドのこと)です。

ep2 jacket

(2作目のEPジャケット。私が描きました。)

サイト制作の目的

“PENGUIN!”についての情報はTwitterで発信されていますが、欲しい情報をすぐに探しあてることが困難な状況です。
このままでは新しいファンがついても、より深く知ってもらえるか疑問です。
そこで、「情報をまとめ、整理すること」「新規ファンに、もっと深く知ってもらうこと」。
この2つを目的とし、公式サイトを作ることにしました。

サイト作成におけるコンセプト

  • かわいすぎないポップ
  • 黄色を大々的に使う
  • 音楽を聴いてもらえる工夫をする
  • 日本人にも、外国人にも見てもらえるサイト

ターゲット

  • 設定したペルソナ:
    男性。21歳大学生。ロックな音楽が好き。邦楽、洋楽どちらも好む。
    音楽サブスクリプションサービスを利用し、流行りの音楽の他にも自分に合う音楽を探している。
    通学で電車を使う。Youtubeをよく利用する。

どんな時にこのWebサイトを見るのか

  • お客さんが”PENGUIN!”のライブを見たとき。
  • 対バン相手が”PENGUIN!”を知るために見る。

こだわった点

「曲を聴いてほしい」「バンド名を覚えてほしい」この2つの思いをとにかく前面に打ち出しました。

PENGUIN!は知名度があるバンドではないので、「曲を聴いてほしい」という思いは、ファーストビューにアルバムが1つ全部聞ける動画を埋め込み大きく配置した点に表れています。
(動画の作成者は公式アカウントでなく私ですが、バンドメンバーから許可は得た上で作り、埋め込んであります。)

スクロールするとすぐバンド名が現れます。モニターによっては、スクロールしなくてもファーストビュー下部に表示されます。

改善すべき点

  • スマホビュー
    スマホでの閲覧が多いことを想定して制作しましたが、「HTML/CSSで作ったサイトをWordPressテーマ化する」という作業そのものが難航し、メディアクエリまで手を回せませんでした。そこで、WP touchというスマホビュー用のプラグインで調整しました。プラグインに頼らず、メディアクエリで対応できるようにするのが今後の課題です。

Categories:

Tags:

Comments are closed

カテゴリー
アーカイブ
Translate »