WORKS

  • 「テトラサイクル」PC版Webサイトのイメージです。
  • 「テトラサイクル」PC版Webサイトの俯瞰イメージです。
  • 「テトラサイクル」スマートフォン版Webサイトのイメージです。
  • デザイン
  • HTML
  • CSS
  • jQuery
  • WordPress

私自身が所属しているバンド「テトラサイクル」のWebサイトのリニューアルに伴い、デザイン・コーディング・WordPress化を行いました。

バンドの楽曲の特長である、ポップさ・スピード感と、新アルバムのイメージカラーである紺・赤・黄を組み合わせ、スタイリッシュさと手作り感の同居するイメージに仕上げました。

制作時期
2021.5〜2021.7
制作期間
2ヶ月
制作ポイント
デザイン面では、バンドのイメージモチーフである三角形を使用し、リンクになっている箇所にあしらいました。また、随所にマーカーをイメージした手書き文字・線を使用し、スタイリッシュな手作り感を演出しました。 「DISC」ページにおいて、配信のあるアルバム・MVはリンクを貼り、すぐ聴いてもらえるように導線を考えました。
コーディング面では、詳細ページへの移動するリンクにマウスを重ねた時、三角形が回転するようにし、気持ちいいアニメーション作りを意識しました。また、PHPの条件分岐を使い、内容に応じて、表示内容やタグの色などが変わるようにしました。
キーワード
明るい、ポップ、スタイリッシュ、軽快さ、手書き感