HARU's Works

架空の男性アイドルユニットの公式サイト

架空の男性アイドルユニットの公式サイト アイキャッチ画像

友人から制作のお題をもらって作ったサイトです。
元々カフェや落ち着いた雰囲気のお店など、シンプルさや誠実さが求められるデザインを得意としていますが、
自分がエンターテイメント関係の業界にアピールする場合などを考えて制作に挑戦してみました。
華やかで楽しさのあるアイドルグループのイメージなので、20〜30代中心の若い女性ファン(ユーザー)が中心と想定して、
モバイルファースト・レスポンシブデザインで作成しています。
公式サイトが必要とされるのはどんな場合かを考え、掲載内容はメンバーの基本情報や、
イベント・ライブへの申し込み方法、発表した楽曲情報などがわかりやすく確認できるような設計にし、
ファンが素早く情報をキャッチアップできるように各種SNSのリンクを用意しました。
ファンが求めている情報にアクセスしやすいように、シンプルなデザインをベースに
リンクやボタンに目を惹くカラーを取り入れたり、ボタンにドロップシャドウとアニメーションを付けました。
また、ファンクラブや問い合わせなどの入力フォームは入力内容を最小限に、
入力する情報に迷いが少なくなるようなレイアウトを心がけました。
読み込むファイル数を抑えるため、ハンバーガー&ドロワーメニューはHTMLとCSSのみの実装方法を調べて初めて実装しました。

作成: 2018年12月

デモを見る

https://harusworks.com/web/wgr/index.html

PC・スマホ表示のスクリーンショットイメージ

スマートフォン版トップページ・メニューのプレビュー画像

トップページ・メニューのスマートフォン版(プレビュー画面)

スマートフォン版ディスコグラフィーのプレビュー画像

ディスコグラフィー スマートフォン版

スマートフォン版ファンクラブ申し込みページのプレビュー画像

ファンクラブ申し込みページ スマートフォン版

PC版トップページのプレビュー画像

トップページ PC版

PC版ディスコグラフィーのプレビュー画像

ディスコグラフィー PC版

PC版ファンクラブ申し込みページのプレビュー画像

ファンクラブ申し込みページ PC版

ブログへ ページトップへ