実案件制作HP 「Fusion of Gambit」(立命館大学ダブルダッチサークル)


概要

立命館大学ダブルダッチサークル「Fusion of Gambit」の新入生宣伝用のホームページの作成

リンク

https://fusionofgambit.com

ターゲット

18~22歳の大学生

■使用ツール

項目ツール
企画、ワイヤーフレーム、デザインカンプfigma
撮影
写真加工、動画編集、ロゴ作成Illustrator / Photoshop / Premiere Pro / After Effects
コーディングHTML / CSS / JavaScript / Gsap

サイト目的

  1. サークルの認知とダブルダッチの面白さの認知
  2. 新入生の体験誘導、サークル加入
  3. 所属しているメンバーの帰属意識

■デザイン

デザインテーマ

  • ストリート
  • グルーヴ
  • コネクション

ダブルダッチがストリート、音楽、ファッションといったサブカル的要素を含んでいる。
サークルという集団から、楽しさ、仲間といった要素を入れる。

アウトプット

  • アニメーションを多用し、楽しく見えるように
  • 再度の高い色を使う、画像をせてっかーっぽくすることで、ストリート感を
  • 画像、動画をたくさん使うことでサークルの楽しそうさを
  • ほバーアニメーションはスケールをいじることタイトルのオーディオバーで、リズム感を表現

ユーザビリティ配慮

  • CTAボタンを各ページに設置
  • ページ遷移の部分を大胆に見せ、わかりやすく
  • ナビゲーション、CTAを2重に見せない
  • ホバーをわかりやすく

制作期間

項目期間
企画、ワイヤーフレーム、デザインカンプ1週間
撮影3日
写真加工、動画編集、ロゴ作成1週間
コーディング10日
レスポンシブル、微修正、ワードプレス導入進行中