【Webサイト】LIVE『杪夏』特設サイト
- 作業フェーズ
- 要件定義 / デザイン / コーディング / テスト / 公開
- 制作期間
- 2022年7月〜9月（要件定義・デザイン8h / コーディング10h）
- LIVE『杪夏』特設ページ
- ここをクリックしてください
- 使用ツール
- Figma / VSCode Editor
- ターゲット
- ライブに行く予定の人 / ライブに行った人
- クライアントの要望
-
- ・フライヤーがあるので、それと同じような雰囲気にしてほしい。
- ・出演者のMVやライブのプレイリストを載せたい。
- ・ライブ当日に撮影した演奏動画を載せたい。
- アウトプットによる解決策
-
- ・フライヤーの雰囲気を壊さないように、色を合わせるのはもちろんのこと、背景の質感やフォントの雰囲気を合わせた。
- ・主にTwitterでライブの宣伝をするのでスマホファーストでデザインを行った。
- ・埋め込んだMVを見てアーティストに興味を持った人が、さらに配信サービスで楽曲を聴いたり、SNS等でアーティストとの接点を作れるように配信サービスへ遷移できるリンクやSNSのリンクを貼っている。
- ・ライブ動画は再生時に途切れないけどそれなりの画質を保てるサイズに調整した。
- こだわり
-
- ・フライヤーがちょっと懐かしさのある雰囲気だったので、画面が表示されるときに下からフェードインしてくるようなアニメーションをつけて柔らかい感じにした。
- ・背景の質感は主張が強すぎないような程度に抑えた。
- ・コンテンツやアーティストごとの区切り目をあからさまに区切ると雰囲気を壊してしまうので、コンテンツの区切りは淡く明るめの青い線、アーティストごとの区切り目は背景よりは淡く明るいピンクの線を引いている。
- ・アイスの青が良いアクセントカラーになっているので、見出しのアンダーラインとボタンのシャドウに使っている。
- ・ボタンは少し立体的に見えるようシャドウをつけ、ホバー時に凹むようにしている。
▼スマートフォン版
