デザイン解剖#01

Webデザイン勉強のため、サイトの解剖を始めました！

「かっこいい！」「かわいい！」「素敵！」「新しい！」など、そう感じた理由を紐解くために、自分なりにWebサイトを分析します。

ーーーーーー

第1段はこちら

OLD Jr. Official Site

アナのボーカルでコピーライターや作詞家としても活躍する大久保潤也さんによるソロプロジェクトの公式サイトを分解します！

テーマカラー：#5851CB
差し色：#FD572C,#777777

まず、ローディング画面でロゴがゆらゆらしているのが可愛い！水面のような動きで、Chillな雰囲気があります。

・周囲を72pxの枠で常に囲っている
・手前にピントのズレた葉を出すことで奥行き感を演出
・スクロールに合わせてイラストがフェードアウト/インするのが、仕掛け絵本のようで面白い！

・マウスオーバーで文字がビビットなオレンジ色に。
・写真も白黒→カラーになることで視線が引き付けられ、リンクを押したくなる
・リンク先はYouTubeで、CVを集めることを目的としていると思われる

・ベースカラー(#5851CB)が主な背景色として使われている中で、#777777を背景色にする部分が。切り替わることでリズムが生まれ、読みやすくなる。
・コンテンツ周囲のマージンが122pxと、広く取られていることで余裕のある印象になっている

・日本語フォントはNoto Sans JP 24px 細字にすることで抜け感がある
・英字フォントはAbril Fatfaceで12pxと小さめ。空間が詰まらないので余裕を感じる
・マージンは、分類が違うものは164px、同じ分類内では84pxと広めになっている

左側には常に固定バナーとしてshare(SNS)ボタンが掲載されている。マウスオーバーすると拡大される動きが可愛い。

右側には常に新曲リリースの宣伝文言が掲載されている。最近、この形態をよく見る気がするなぁ

所感

四方が枠で囲われているので、webという決まったフレームが可視化されており、加えて動きがあるので視覚的にも面白かった。

全体的にマージンが広めに取られていて余白が多いこと、地の紫色#5851CBが、眩しすぎもせず、落ち着きすぎてもおらず、楽曲の雰囲気を正に表しているサイトだなと思った。

ーーーーーー

こういう見方もあるかも！などあればコメントいただけると踊って喜びます。また、掲載に問題がある場合もコメントいただければ取り下げます。

3つ/週くらいのペースで解剖していけたら嬉しい...！