14.LIVEWIRE サイトレビュー

LIVEWIRE - 新しい音楽体験を、いま、ここで。

スマートに楽しむオンラインライブハウス
オンラインライブハウス、LIVEWIRE。
オンライン上でライブを紹介しているライブ動画配信サービスです。前回に続いてオンラインイベント系のサイト。
私も音楽が好きなので、オンラインのライブハウスとかあったらいいのにな〜と思っていたら最近見つけて驚きました!!
カッコいいサイトなだけではなく、使いやすい便利なサイトだと感じました。

目的
・オンラインライブのチケットを購入してもらう
・オンラインライブを開催しているアーティストを知ってもらう

ターゲット
・音楽好きな人
・オンラインライブに興味がある人
・20〜30代

印象
かっこいい、スマート、アナログ感

特徴

余白
縦140pxほど。平均より少し狭め。

配色
#E0E1E1　 ベースカラー　灰色
#E0E1E1　 メインカラー　オレンジ
#E0E1E1　アクセントカラー　黄色
#111111　 フッター　薄い黒
#111111　 文字色　 黒

メインカラーもベースカラーも原色に近いので、パキッとしたイメージがあります。アナログっぽい印象はこの配色が原因かなと思っています。友達にこのサイトを見せたら昔の音楽番組みたいな感じと言われました。背景灰色×彩度高い色はノスタルジーな配色なのかも。

フォント
"Hiragino Kaku Gothic ProN"　日本語
"Helvetica Neue"　英語
PC:64px(h2)18px(本文大)16px(ヘッダー)14px(本文小)
SP:32px(h2)16px(本文大)14px(本文小)
letter-spancing:1px

font-family
2020年に最適なfont-familyの書き方の記事に出てくる記載と同じ記述で指定されていました。どんな環境でも支えるフォントたちなので、まずはこちらのコードをもとにコードの記載をすることもありかもしれません。

font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;

font-size
h2は余白も少ないので、大きめに見えますが、実際は少し小さめです。本文のフォントは大きめ。

letter-spancing
letter-spancingをpxで指定しているのは珍しいと思いますが、なぜなのか理由はわかりませんでした。本文全て1px、タイトルは0で行間を詰めて変化を出しています。

メインビジュアル

メインビジュアルでは、近日Live予定のアーティストの写真が並べられています。どんなライブがあるのかすぐに見ることができるのでリピーターとしては便利だと感じました。このサイトはリピーターが多いサイトだと思うので、メインビジュアルをアー写や動画で見せるよりも、ライブ情報を載せているのではないかと思います。
真ん中の写真以外は小さく、マスクがかかるため、焦点がわかり易いところも真似したいです。説明文が左下に出ていて、更新がしやすそうなデザインだと思います。
ヘッダーは左側。これはCD盤の帯を表しているのだと思っていて、とてもユニークなアイデア。音楽好きにとって楽しくなるデザイン。
ヘッダーnavはホバーするとぐるっと一周まわります。メインビジュアルの横に回転する動きと合わせています。

直線

このサイトは丸みがほとんどなく、全て直線で表されています。そのためスタイリッシュでシャープな印象が強いのではないでしょうか。
また▶︎▶︎▶︎▶︎のような三角形が多用されていて、ローディングアニメーションでも使用されています。第二のアイコン的な役割で印象に残ります。

真似したいポイント

・コンテンツ
左ヘッダー→メインビジュアル(ライブ予定アーティスト)→NEWS→ライブ動画→ライブスケジュール→LIVEWIREについて→視聴方法→フッター

・メインビジュアルが写真や動画ではなくライブ情報。コンテンツもライブ情報を優先して載せている。
サイトの情緒性を目立たせるのではなく、アーティストの情報をわかりやすく見せることに徹底している。

・情報を色々見せたい時は、メインビジュアルでコンテンツを横スクロールして見せる

・動作を合わせると統一感がでる。メインビジュアルが左右に動くならnavも左右に動くものにする。Newsも左右に動くものにする。fade-inを左から右に現れるものにするなど。
→時間の経過を視覚化している。

・スライドを入れる場合はクリックでも移動できるようにする。

・要素の余白をスライド後になくしたい場合はtranslateで調節する。
→画面を広く利用できる。

・pathプロパティで図形が描ける。(MDN解説)
fill()メゾットでサブパスを塗り潰せる。

・下層ページでスケジュールを見せる場合、日時を強調して見せる。

・基本的には直線でおしゃれなイメージを作り出している。使い方を説明するコンテンツでは、使いやすそうと親しみを持ってもらうため、角を丸めている。

感想

今回はライブ動画を配信するLIVEWIREのレビューを行いました。
スタイリッシュで個性的な印象でしたが、情報を分かりやすく配置しているサイトだなと感じました。
私は音楽が好きなので、いつもよりさらに楽しくレビュさせていただきました＾＾
ライブダイジェスト動画でKID FRESINOとTempalay観たら幸せすぎたので、ぜひ観てみてください〜。