Webサイトは、デザインだけでなくアニメーションでも印象が変わります。 そんな「世界観のあるサイト」を実装するときに、最近わたしが取り入れている方法を少しご紹介します。
音楽と実装の出会い
忙しいときは複数の案件が交差して、気持ちの切り替えが大変です。
何か良い切り替え方はないのかな？と模索していたとき、Studioウェビナーでクックドゥードゥードゥーのおおはしさんが「北欧系のデザインをするときに北欧の音楽を聴いている」と仰っていたことを思い出しました。また、以前オオツチチヒロさんのタイポグラフィ講座で「デザインはリズムが大切」と学んだことも頭に残っていて、音楽で気分を切り替えながら実装するというアイデアにつながりました。
アニメーションと音楽って、一見別のものに思えるけれど、どちらも「時間の中でリズムをつくる」という共通点があります。Webのアニメーションも同じで、動き出すタイミングやスピードの強弱で心地よいリズムや余韻が生まれます。 だから実装中に音楽を聴いていると、自然とテンポやリズムを意識できて、アニメーションにもその感覚が反映される気がします。単なる”動き”を足すのではなく、サイト全体の世界観に馴染む表現に近づけるんじゃないかなと思っています。
いまは、実装前にデザインカンプを見て、デザイナーやディレクターからコンセプトを聞いてから「この世界観に合う音楽は？」と探すのがちょっとした儀式のようになっています。
車通勤の片道50分は、その日使う音楽を聴く時間。
業務中は実際に流すのではなく、頭の中で再生して気持ちを保ちます。
サイトと音楽、いくつかの実例
ここで、サイトからイメージした音楽を聴いて実装したWebサイトとテーマ音楽をご紹介いたします。（あくまで私の感覚なので、ちょっと違うのでは・・？などはご容赦ください。）
社会福祉法人檸檬会 採用サイト
法人採用ページは落ち着いた雰囲気 → ハンバートハンバートの「虎」や「アメリカの恋人」などの落ち着いた曲。
保育士採用ページは楽しく元気 → ハンバートハンバートの「チキチキバンバン」などアップテンポな曲。
激しすぎず優雅すぎない「ちょうどいい温度感」を探るときに音楽が助けになりました。
社会福祉法人檸檬会採用サイトはこちら
KENPAN
「高級感と優雅さ、自然の壮大さを感じさせたい」
そこで haruka nakamura の『少年の日』を選びました。
表示アニメーションでは「ボレロ」を聴いて壮大さをイメージ。
KENPANのWebサイトはこちら
あすかのサマバケ
明るくにぎやかな夏休み気分を表現したくて、中村佳穂さんの『AINOU』を選曲。
掛け声・手拍子などの人間感やアップテンポなワクワク感がサイトの雰囲気と合いました。冬の季節に実装していましたが、不思議と夏のワクワク感で手が動きました。
あすかのサマバケのWebサイトはこちら
案件ごとに世界観が変わるからこそ、音楽で気分を切り替えるのは思った以上に効果的でした。
何度も聴けば脳内再生できるので、いつでもどこでも実践できます。
気持ちの切り替えに悩んでいる方は、ぜひ一度お試しを。
それではまた！！