UNKNOWNS official site

UNKNOWNSスクリーンショットPC
UNKNOWNSスクリーンショットSP01 UNKNOWNSスクリーンショットSP02 UNKNOWNSスクリーンショットSP03

分類 / 架空のインディーズバンドの公式サイト

担当 / 企画書制作・ロゴ・デザイン・コーディング

制作期間 / 二ヶ月

使用ツール / Adobe Photoshop・ Adobe Illustrator・ Adobe Dreamweaver

使用言語 / HTML5・CSS3・Javascript

制作ポイント / UNKNOWNSは曲の振り幅が広く一つの楽曲でイメージを持たせないというコンセプトのため、サイト自体のカラーをバンドのイメージカラーに連想させないよう様々な楽曲をイメージした背景画像で統一感を持たせないようにしました。fullPage.jsでパララックス効果を取り入れ、各曲のダイナミックさを演出しました。また、バンドの収益に繋がるliveページにサイト全体を見て目がいくよう赤を基調にしました。

ターゲットユーザーとして、新規ファンになってもらえる可能性が高いSNSや口コミからHPに訪れるバンド名を知っているがアーティストに対する活動を行なっていない層にしました。そのライトファンがHPに初めて訪れる理由として、唯一SNSなどで発信されてることが少ないprofile情報をアーティストから公式として発信される経歴やユーザー自身との共通点などを把握できるprofileに訪れることが多いと推測しました。ライトファンをより多く獲得するため、contactの前にprofileページを配置しprofileだけ閲覧した人にも、より多くUNKNOWNSの情報を知ってもらうためスムーススクロールを使いスムーススクロールしている間に他のページも気に留めてもらえるよう工夫しました。

サイトに再び訪れてもらうために、バンドの公式サイトで今まで見たことのないタイプの配置の仕方や色使いをし差別化を図り、バンドの世界観を守りインパクトのあるサイトにしました。

Visit Site