ちょっと前から友達とビジネスで使えるWebサービスを軸にした企画を実行していて、
ホームページ制作100本ノックを実施しています。
色々な業種のホームページデザインを作ってそれをコーディングしていくという鬼企画なのですが、やってみるとやっぱり楽しい。
できあがってデザインが増えていくと、充実感も沸いてくる。
色々なカッコいい、カワイイ、イケてるページなどを見ていく中で、
あれ？最近の傾向だけど、ホームページを読み込んだ時に（または読み込み中の画面で）、素敵なアニメーションを流しているページが増えているぞ・・・
と感じました。
書籍で言うところの、表紙。
スポーツで言うところの、ウォームアップ。
映画や音楽で言うところの、イントロ。
女の子で言うところの、朝の身支度。
そう、このスタートアニメーションって、結構効率的なんですよね。
これまでホームページの制作では、イントロ部分なんて考えてこなかったけど、これからの時代、重要な要素になるかもしれないので、少し自分なりに調べておきたいと思います。
イントロがイケてるWebサイト達
色々と調べている中で見かけたWebサイトをリストアップしておきます。
holon
https://holon-inc.jp/
デザイン会社のホームページです。
シンプルな者ロゴがカッコよくキラっとするのが特徴的で、このさりげないちょっとしたイントロが結構ページデザインがイケてる感が出ていていいですね。
symme
https://symme.net/
鍼灸施術・美容鍼という、ハリ施術を行っている店舗案内系のホームページです。
ロゴ画像を効果的に表示アニメーションさせて、1秒にも満たないdurationがとても効果的ですね。
GIG Inc
https://giginc.co.jp/
Webデザインやコンサルを提供している会社のホームページです。
ページデザインがさり気なく出来上がっていくシンプルアニメーションがとてもカッコいいですね。
CLOUD DENTAL CLINIC
https://cloud-dental-clinic.com/
歯医者さんのホームページです。
アニメキャラが印象的なページですが、きっと子供ウケを狙ってのデザインなのでしょう。（違ってたらすみません）
ロゴの効果アニメのイントロが特徴的で、その後ページ全体にアニメーションが依存している連携がとても素敵です。
森の図書館
https://morinotosyoshitsu.com/
ロゴをさり気なく強調できるイントロがシンプルイズベストですね。
この手法は、ソースコードでテンプレートを作っておけば、汎用性高そうです。
Speak Buddy
https://www.speakbuddy.com/
AIを使った言語学習というおもしろいサービス提供をしている会社です。
カワイイキャラがドアに入っていくイントロアニメは、なんだか映画の導入の様な印象でワクワクしますよね。
MEJINAVI2024
https://www2.mejiro.ac.jp/univ/mejinavi2024/
目白大学の2024年度Webサイトです。
ファーストビューのイントロアニメがとても効果的ですね。
デザインと合っているテイストがとても参考になるんですよね。
四條畷学園
https://next100.shijonawate-gakuen.ac.jp/
100周年記念ページみたいですね。
100の0をモチーフにしたロゴマークがイントロで生成されて、ページをスクロールすると、それが移り変わっていくのがとても楽しいです。
イントロのもたらす効果検討
たくさんのWebサイトで、イントロアニメが効果的に使われているのを見ると、画像などのローディングにかかる時間を利用して効果的に見せているような気がします。
一昔前は、Loading...という、読み込みアニメーションが主流で、うちのブログでも未だに過去に書いた、記事で、Loadingサンプルをたくさん掲載しているページがアクセスがトップクラスです。
[素材] 著作権フリーの「Loading」Gifアニメーション画像 40個
そして、今どきのイントロアニメは、Loadingを意識させない見た目にするというのも、デザインポイントかもしれませんね。
そして、より効果的なのは、会社やサイトのロゴを強調できるというメリットは実際に色々なサイトをみるとよく分かりますね。
一体、何のホームページなのかよく分からないページというのは、たくさんあり、aboutページに行って、文章を読んで初めて理解できるWebサイトはイントロなどを活用するといいかもしれませんね。
とにかく、これからのWebサイト制作は、イントロアニメは必須なのではないかと、自分の思考を一枚脱ぎ捨てた感覚でした。
SEOってどうなの？
ホームページにとって、どうしても切り離せないのがSEOです。
せっかく見た目も印象も効果的なイントロアニメを導入しても、SEOがポイントダウンしてしまうようでは、あまり意味がありません。
ということで、SpeedInsightを使って、上記のURLを検証してみました。（勝手にやってすみません）
※全てモバイルの計測値を参照しています。
エラーメッセージ
「第三者コードによってメインスレッドが ***ミリ秒間ブロックされました」
このメッセージがほとんどのサイトで見られました。
どうやら、読み込み遅延しているようにSEOでは判断されてしまうようですね。
LCPという、Largest Contentful Paint（最大読み込み時間）が落第点になってしまうという欠点があるようです。
どのサイトもパフォーマンスが低い点になり、イントロアニメは、評価点数が下がってしまう傾向があるようにも思えます。
※もっと他のサイトも検証してみる必要もありますね。
でも、ユーザー視点でみると、とても効果的なイントロアニメは、やり方次第でSEOも改善するのではないかと考えています。
技術的思考
実際にこうしたイントロアニメってどうやってホームページに導入すればいいのかを、エンジニア視点で考えてみました。
まず基本的には、intro.cssとintro.jsを付け加えるだけでできる状態にすることで、簡単に取り付け取り外しができるようにすると、本来のホームページとは別管理での実装ができるので便利でしょう。
html部分への記述は次の通りです。
index.html
<head>...
<link rel="stylesheet" href="intro.css"/>
<script src="intro.js"></script>
</head>
<body data-style="intro">...
</body>
赤字の部分を追記するだけです。
※追記部分の記載しているので、全文ではありません。
intro.js
class Intro{
constructor(){
if(!this.check_status()){return}
this.set_bg()
this.set_logo()
this.set_event()
}
bg_name = "intro_bg"
get bg_elm(){
return document.getElementById(this.bg_name)
}
check_status(){
return document.body.getAttribute("data-status") === "intro" ? true : false
}
del_status(){
document.body.removeAttribute("data-status")
}
set_bg(){
const div = document.createElement("div")
div.id = this.bg_name
document.body.appendChild(div)
}
del_bg(){
const bg = this.bg_elm
if(!bg){return}
bg.parentNode.removeChild(bg)
}
set_logo(){
const img = new Image()
img.src = "img/logo.svg"
img.className = "logo"
const bg = this.bg_elm
bg.appendChild(img)
}
set_event(){
this.bg_elm.addEventListener("animationend" , this.finish.bind(this))
}
finish(){
this.del_status()
this.del_bg()
}
}
switch(document.readyState){
case "complete":
case "interactive":
new Intro()
break
default:
window.addEventsListener("DOMContent+oaded",(()=>new Intro()))
}
intro用のBGエレメントを作成して、アニメーションが終了したらF.O.させるようにしています。
もうちょっと改良は必要かもしれませんが、こなれてくると、Javascriptは汎用的なモジュールが作れそうです。
intro.css
body[data-status="intro"]{
overflow-y:hidden;
}
body[data-status="intro"] #intro_bg{
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
background-color:rgba(0,0,0, 1.0);
z-index:100;
/* overscroll-behavior-y: contain;
overflow-y: scroll; */
animation-name: anim-bg;
animation-duration:5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-timing-function:ease-in-out;
}
body[data-status="intro"] header .logo{
opacity:0;
animation-name: anim-logo;
animation-duration:5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-timing-function:ease-in-out;
}
body[data-status="intro"] #intro_bg .logo{
position:absolute;
z-index:200;
top:50%;
left:50%;
width:200px;
height:200px;
transform:translate(-50%,-50%);
object-fit:cover;
padding:0;
animation-name: anim-intro;
animation-duration:5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-timing-function:ease-in-out;
}
@keyframes anim-intro{
/* 拡大 */
0%{
width:0px;
height:0px;
top:50%;
left:50%;
}
/* 移動 */
20%{
width:200px;
height:200px;
top:50%;
left:50%;
}
40%{
width:150px;
height:150px;
top:50%;
left:50%;
}
45%{
width:150px;
height:150px;
top:50%;
left:50%;
}
/* F.O. */
80%{
width:80px;
height:80px;
top:50px;
left:90px;
opacity:1.0;
}
100%{
width:80px;
height:80px;
top:50px;
left:90px;
opacity:0.0;
}
}
@keyframes anim-bg{
80%{
opacity:1.0;
}
100%{
opacity:0.0;
}
}
@keyframes anim-logo{
80%{
opacity:0.0;
}
100%{
opacity:1.0;
}
}
上記は、直近で使ったものをそのまま貼り付けていますので、サイトごとのclassやアニメ内容に合わせて書き換えてください。
そして、このcssでアニメーション効果を実行する書き方ですね。
基本エレメントの@keyframesアニメーションが終了するのをjavascriptでイベント監視するので、大枠アニメを書くというのを意識するとやりやすいと思います。
あとは、アニメのタイムテーブルなどをちゃんと設計するのも重要ですね。
コンテなどを書くのも悪くないでしょう。
あとがき
ホームページのイントロ・アニメーションについて独自の調査をしてみました。
色々なサイトを見ていて楽しい感じがあったので、やはり導入することでのユーザー効果は高いのではないかという実感です。
おそらく現時点では、ホームページのイントロアニメまで導入対応してくれる制作会社って、少ない印象なので、100本ノックしていく流れで、自己のやり方を確立していきたいと思います。
より良い方法やツールなどを作った時は、またブログで発表しますね。
お楽しみに！
0 件のコメント:
コメントを投稿