見出し画像

サイトレビュー#2　ポップなデザイン（ビーフェス）

みきき

こんにちは、弟子のみききです！今回はサイトレビューに挑戦したいと思います！

私はポップなデザインが好きです。

もともと楽しいことが好きだったり、お笑いも好きだったり、あと
カラフルなものに惹かれてきたからかなー、と振り返ってみると思います。

小学校の美術で初めて描いたまとまった絵は、持っている絵の具を全種類出して
描いた熱帯林の世界だったし、好きな画家はクリムトやゴッホ、好きな芸術傾向、ポップアート！（でもそれ以上にシュルレアリスムも好き。ちょっと変。またnoteに書きたい。）

謎に前置き長くなりましたが、そんな私なので、分析を通じてポップデザインの引き出しをを増やしていきたいと思います。

今回はビームスの音楽フェスのサイト分析にします！

引用元→https://www.beams.co.jp/special/befes/2022/

（個人的にビームスのサイトいつもみてしまいます。）

↓全体のスクショ（わかれば流してください！）

パッと見て、まず楽しそうだし見やすい、ポップで美しいサイトです！

楽しそう、でありつつ、スッキリしていて見やすい、ってすごいな、と率直に思いました。なぜなら、「楽しそう」という印象をつくるのに、色を増やして、要素を色々置く、というのが割と自分でもやりがちだなと思ったのです。

なぜ、楽しそう　かつ　美しい　のか？
これから分析していきます！


前提：サイト概要

分析の前に、前提の確認です。


  • サイトの目的　2022.2.7開催のフェスチケット購入をクリック　情報のシェア

  • ターゲット　ビームスが好きで音楽好きな人　メイン：20−40代　流行への感度の高い人、カルチャー分野の好きな人、その日、コンサートにいく気のある人、行けそうな人。

  • サイトへの経路　公式サイトのトップバナーからのリンク　公式twitter、出場者のツイートをリツイート

  • サイトからの経路　チケットぴあの購入ページへ


まとめると、リンクをたどってきた人が、サイトを見て、全国５都市で2022.2.7に開催されるフェスのチケットを購入してもらうというのが目的のサイトです。

まずFVで、心をつかまれる

サイトに訪れてまず二秒、読者をとどまらせるために、何がなされているか。ですが、このサイトでは開くと最初に、手書きペンが走っているようなアニメーション。私たちは、音楽が大好きだよね、というメッセージや共感を呼ぶお手紙みたいな一枚が現れます。

まずこれ読んだだけで、うんうん！音楽、大好きだ！！という共感を得たくなります。特にこのご時世。音楽にもう一度触れたい、、。

つづくFVは、音楽のビートに合わせて動くイラスト。

FVのポイントは、

  • 開催日時が入ったPOPなイラスト（ブラックフチのラインイラスト）

  • ビームスの音楽フェス、と一眼でわかる

ラジオ放送中！っぽいscroll contentsのテキストも、POPな印象と楽しさを作っています。

という流れで、まずはFVから、このサイトの楽しそうな世界に入り込んでいきます。ここから、サイト全体の分析に入っていきます！

何が楽しそう、という印象を作っているか

先程のFVとも重なる部分がありますが、サイト全体の印象がなぜ楽しそう、なのか。

その理由は以下にあるのかな、と思います。


  • 配色　ブルーとオレンジのバイカラー＋ブラック

  • イラストとアーティスト写真

  • フォントと多用されている「‼︎」

  • 動き


１、配色

メイン配色は、ビームスのオレンジと、補色である水色。
配色について、意外だなと感じたのは、全てが上記の配色に従っているわけでなく、各アーティスト写真や地図のイラスト、下層ページに登場する各開催地のアイコンや写真はさまざまな色が含まれているという点です。

アーティスト写真は特にそれぞれテイストが異なったりします。それでも写真のサイズを揃えて、（正方形でのトリミングで、ジャケット感あふれる！）規則的な反復で配置することで、雑多になることなく綺麗に見せられるんだなと感じました。

２、イラストとアーティスト写真

特にイラストは、ポップで性別を選ばない親しみやすさがあり印象的です。人物描写が特徴的なジュン・オソンさんの作品。

３、フォント

  • 日本語：平成角ゴシックstd、ヒラギノ角ゴシックProN、ヒラギノサンズ

  • 欧文：　h3　DIN condensed
    　　　　アクセント　LoRes 12

見出しのDINがカッコよく、アクセントの8ビット風な書体LoResが効いています！DIN・LoRes・平成角ゴシックアドビフォントにありますが、typesquareなのかな？

あとこの数字の組み方。カッコイイ。他のデザインでも見る気がします！真似しよう。


４、アニメーション

FVのイラストがビートを踏んでいるように動くのが最も印象的で、その後もポイントで左右に写真やテキストがループで流れるアニメーションが使われ、見ているものを飽きさせません。

また本文をカーソル選択すると背景色が黄色になったり、
アイコンをホバーするとくるっとまわったり、
左右に流れるループアニメーションをホバーすると加速したり、、、他にも細かい動きがすごいです、、、！！
さりげないけど実装と考えると動きがすごい。

以上、主に４つの要素で、楽しさやワクワク感が演出されていると感じました！

なぜ、美しく、見やすいのか

続いては、なぜスッキリと美しく、見やすいかです。
それは、

  • 余白、白の面積

  • カラムレイアウト、整列

の２点にあると思います。

１、余白

規則的にとられた余白と、適度な白の面積によって、スッキリ感が出ています。

特に、イラストの周り。
イラスト自体はわいわいした感じの、にぎやかな印象を持つものですが、ひとつのかたまりとして認識しやすい形に仕上げられています。

そのためイラストのまわりに十分な余白を持つことで、イラスト自体はにぎやかな印象でも、スッキリと見えるようになっています。

見出しと本文はほとんどを左揃えにして、文字をブロックのように捉えられます。
そのブロックが、整列して配置されているので、綺麗に見えます。

２、カラムレイアウトと整列

カラムレイアウトが使われていますが、
２カラム、３カラム、全体を横断するイメージ、をリズム良く使い分けて、飽きることない流れになっていて、かつ均整が取れている感じがするのは、全体の多くの部分がwidth87.5%、左右の余白が12.5%取れているという点にあるかと思いました。（下図を参照）

改めてブロックとしてとらえなおす・整列を確認する↓

ということで、楽しさと見やすさの両立が美しいビーフェスのサイトでした！！

特に、あしらいを足すことではない楽しさの出し方、整列とサイトの流れの中でのリズムの出し方は勉強になりました。コーディング上もposition:absoluteを多用しなくて良いのもきっと利点。

サイトを分析しながら、フェスアイテムなどもすごくかわいくて、3Dの開催地アイコンにキュンときている私です！また音楽ではっちゃけたいですね。

ピアノでJ-POPを弾くのが好きですが最近できていなかったので、noteを書きながらまた再開しようと思った今日このごろ。

またデザインレビュー増やしていきます！

ここまでお読みいただきありがとうございました〜！

いいなと思ったら応援しよう！