![見出し画像](https://assets.st-note.com/production/uploads/images/118686507/rectangle_large_type_2_ae60fdee9eae05de6c5e79ab0b880198.jpeg?width=1200)
【真似したくなる!参考サイトを集めてみた!】 音楽・バンド・レーベル編
今回は「音楽・バンド・レーベル編」ということで、5サイトほどデザインが良いと思ったサイトとまとめました。
個人用まとめサイトですが、参考にしていただければと思います。
●森山直太朗オフィシャルサイト
スクロールに合わせて、アーティストの顔周辺のイラストが変化する、遊び心のあるサイトです。
アーティストの顔は背景として固定され、イラストを始めNewsなどの情報はスクロースすると下から上に流れていきます。
イラストは季節ごとに変化します。
![](https://assets.st-note.com/img/1697085238727-ixzifArVDT.jpg?width=1200)
TYPE:ブランディングサイト
FONT:Sorts Mill Goudy,ヒラギノ明朝 Pro W3
COLOR:
![](https://assets.st-note.com/img/1697085272126-bwvEYhJh9o.png)
●KENJI ENDO
サイトのいたるところにアニメーションがついています。
マウスオーバーをすると文字の変化やイラストが現れ、細部にまでこだわりを感じます。
![](https://assets.st-note.com/img/1697085455213-o3fkYfbr5A.jpg?width=1200)
TYPE:ブランディングサイト
FONT:Lato,Trade Gothic W01
COLOR:
![](https://assets.st-note.com/img/1697085467994-LAk71zCQzh.png)
●緑黄色社会 Official Site
白い背景と画像に影をつけてレイアウトしたシンプルなデザインのサイトです。
TOPページのみ横スクロールで、キービジュアルはギャラリーで絵画を鑑賞しているような感覚になります。
![](https://assets.st-note.com/img/1697085695498-4aChcg1o1B.jpg?width=1200)
TYPE:ブランディングサイト
FONT:Cormorant Garamond,Noto Sans JP
COLOR:
![](https://assets.st-note.com/img/1697085735906-5wg6Cm7TpB.png)
●613web / sekai official site
サイトにアクセスした途端「Not Found」という文字が現れます。
こちらは動画になっていて、しばらくすると画面に変化がおきキービジュアルが現れます。
メニューの項目を選んだ時のアニメーションやフォントの選定など、サイトの世界観にマッチしたものになっています。
![](https://assets.st-note.com/img/1697085878394-UJ9nKHkSFr.jpg?width=1200)
TYPE:ブランディングサイト
FONT:x8y12px,DotGothic16,
COLOR:
![](https://assets.st-note.com/img/1697085904213-mA3olZMqYo.png)
●Kyoko Koizumi 40th Anniversary Project
POPな色使いとレイアウトが参考になるサイトです。
蛍光色を上手く使用しています。
![](https://assets.st-note.com/img/1697086055171-om6bpk1vXw.jpg?width=1200)
TYPE:ブランディングサイト
FONT:Poppins,Hiragino Sans
COLOR:
![](https://assets.st-note.com/img/1697086089132-tP3zNSNdQZ.png?width=1200)
いかがでしたでしょうか?
機会があればぜひ参考にしてみてください。
少しでもお役に立てたら幸いです。
最後までご覧いただきありがとうございました!