こちらの作品は、歌い手として活動されている「ごっどふぁいぶ」さんに直接オファーをし、制作許可を頂けましたので、OfficialWebサイトを制作させていただきました。
URL
使用ツール
XD / HTML / CSS / jQuery / VisualStudioCode / Photoshop / Illustlator
制作時間
企画（5時間）・デザイン(15時間)・コーディング（30時間）・レスポンシブ（15時間）
担当
営業、企画、構成、レタッチ、素材収集
ワイヤーフレーム、デザインカンプ
キャッチコピー、ライティング
コーディング、jQuery実装、ターゲット・コンセプト・コンバージョン設定
サイトの目的
認知・新規ファンの獲得・ライブなどへの集客
ターゲット
歌い手やゲーム実況に興味があり、ハスキーボイスが好きな10代～20代の男女
コンセプト
・個人のオフィシャルサイト
・「ごっどふぁいぶ」の認知度を上げるために、インパクトのあるファーストビューにする
・新規ファンを獲得させるために、活動内容・活動状況・キャラクターや個性など、サイトを通して表現
・配信の集客や、Youtubeなどの興味・登録につながるようなコンテンツ
コンバージョン
・News
最新情報をユーザーに知らせる
・Live/Event
Liveの情報、チケットの入手
・Profile
認知度を上げる、知ってもらい距離を近く感じてもらいやすくする
・Movie
Youtubeに飛んでもらう（認知・登録者数の増加）
・discography
後々販売されたCDなどの購入（販促）
・goods
購入、情報収集、集客、販促など
デザインについて
大学生歌い手であり、唯一無二である神のイメージ像に合うようなデザインと、男性・女性の両方から親しんでもらえるデザインを意識しました。また、イメージカラーである紫と、冠の色からとった黄色をアクセントカラーとし、白と黒をメインカラーにしても、飽きがなく、よりカッコよさや世界観のアクセントとなるよう、デザインにあしらいました。背景や、書体を少しポップなデザインにすることで、シンプルすぎず、ターゲット層に合わせたデザインを意識しております。イベントページでは、販売中のチケットのみがクリックできるようになっており、販売中と完売の区別がつきやすいUIを意識しました。
コーディングについて
HTML・CSS・jQueryを使用して、コーディングしました。ファーストビューでは、jQueryを使用して、活動の背景がわかるような画像をスライダー式で流し、印象に残るアイキャッチで世界観を表現致しました。また、いつでもページのトップに戻れるように、ボタンを右下に固定で配置致しました。ヘッダー・ナビでは、スクロールした際にナビのみが固定され、各ページに飛びやく、かつ、シンプルでわかりやすいUIを意識してコーディングしております。