サイトをリニューアルしました！
2022年7月04日
haino
こんにちは。クリエーターの灰野です。あっという間に梅雨が明けたと思ったら、灼熱の真夏がいきなりやってきましたね。そんな暑い毎日ですが、皆さんいかがお過ごしでしょうか？
前回の弊社代表 江藤の投稿にもありました通り、株式会社アクセルは今年で25周年を迎えました。このような節目を迎えられたのも、これまで多くの方々に支えられてきたからに他なりません。そして、私個人としても今年7月に入社20年目という節目を迎え、この会社と共に、またお客様と共にこれまで歩んでくることができました。本当に感謝の気持ちで一杯です。
これからもお客様のニーズや課題と向き合い、お客様に満足していただけるよう自分の果たすべき役割を愚直に自己に問いつつ、どんなプロジェクトにおいても、GRIT（やり抜く）マインドを忘れずに、精進していきたいと考えています。
さて、このように会社にとっても、そして私個人にとっても、節目の年ということもあり、7年ぶりとはなりますが、弊社のウェブサイトをリニューアルすることにしました。
リニューアルのコンセプトについて
トップページにある「YOUR ACCERALATOR」というキャッチコピーは、これまでも弊社のウェブサイトや名刺などでも使用してきたものですが、これには「大切なクライアントのビジネスをさらに飛躍・加速させるために自分たちにできる精一杯のお手伝いをさせていただきたい」…そんな思いが込められています。アクセルはこれからも、その名に恥じぬよう皆様の「アクセラレーター」として、与えられたミッションをしっかりと果たしていきたいと考えています。
というわけで、今回のリニューアルでは、そんな弊社の想いをトップページのデザインと演出に込めてみました。
「これからもアクセル全開で加速すれば、きっと、空も飛べるはず。
雲を突き抜けたら、ほら、眩しい朝日が見えてくる。」
…こんな風に書くと、なんだか平成一桁年代に大ヒットしたスピッツの歌詞のようですが、割と真面目にこんなことをイメージしながらデザインしています。
演出やアニメーションの仕組みについて
トップページのヒーローヘッダー背景に使用した「空も飛べるはず」的な動画はmp4ですが、読み込みの負荷にならないよう、なるべくファイルサイズを抑えてエンコードしています。また、手前のAXELの文字はsvg画像ですが、cssを使ってマスクしています。
該当箇所のcssは、大雑把ですが以下のような感じになっています。
#hero-movie {
mask-image: url('mask_axel.svg');
mask-repeat: no-repeat;
mask-position: 50% 50%;
mask-size: 100vw;
-webkit-mask-image: url('mask_axel.svg');
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: 50% 50%;
-webkit-mask-size: 100vw;
-webkit-transition: all 1.0s ease-in-out 0s;
-moz-transition: all 1.0s ease-in-out 0s;
-ms-transition: all 1.0s ease-in-out 0s;
-o-transition: all 1.0s ease-in-out 0s;
transition: all 1.0s ease-in-out 0s;
}
#hero-movie.away {
mask-size: 50000vw;
-webkit-mask-size: 50000px;
}
次に、アニメーションのトリガーとなるJavaScriptについてですが、下記のような記述でスクロール値を取得し、特定のポジションまでスクロールしたら「.away」クラスを当てています。「.away」クラスで定義されたとんでもないサイズのマスクが、cssトランジション（アニメーション）しながら適用されることで、ロゴが飛び去りながらその隙間から動画全体が見えてくるようにしてあるのです。
const hero_movie = document.querySelector("#hero-movie");
const hero_height = document.querySelector("#hero-movie").clientHeight;
window.addEventListener("scroll", heroControl);
let scroll_y = 0;
function heroControl() {
scroll_y = window.scrollY;
if(scroll_y >= hero_height / 2) {
hero_movie.classList.add("away");
}
}
またパララックス的なアニメーションの部分ですが、FWAアワードなどでもお馴染みの「GSAP」というアニメーション・ライブラリを使用しています。既存サイトの改修のお仕事では、未だJQueryを使うこともありますが「新規サイトでは、まさかJQuery使わないよね？…」と、誰もいないはずの背後から声が聞こえてきそうなので、個人的には使わないことを決意しました（笑）
ちょうど20年前の7月、アクセルで仕事を始めた頃、FMラジオからRIP SLYMEの「楽園ベイベー」という曲が何度も何度も流れていたことを懐かしく思い出します。
今年の7月は、6月から続く猛暑で流石にバテそうですが、久しぶりに「楽園ベイベー」でも聴きながら、ノリノリでコードを書いて夏バテを吹き飛ばしていこうと思います。
これからもアクセルをよろしくお願いします！