ホームページリニューアル記-前編「リニューアルの見てくれの部分に関しては超絶COOLであること」

アニメーションライブラリ Vanta.js ホームページ作ってます

Hey!! YO!!
ワッツアーーーーップ!! メーーーーン!!

ハイパーWEBクリエイターでラッパーの俺、ザッキザキのロックオン柳田の俺俺俺俺のWEB制作会社「ホームランオフィス」のコーポレートサイトをリニューアル中!

 

But・・・・・・・

 

「サイトの表示速度」

 

が超絶気になる事案発生ーーー!!

ピーポーピーポーPeopleですわ!!

 

WEBのことなんてどうでも良いZ!! って人でも90秒くらいで読める記事なんで読んでみ!へーーーってなるで〜〜。

あと前置き長いからところどころ茄子入れといたよー。見つけてねー。

 

Here we go!!

 

茄子

 

 

 

 

 

初動はめっさカッコいいアニメーションエフェクトを見つけたので実装したくなったんだ

ほら、俺ってばさー、超絶COOLじゃん?
だから企業カラー、イメージなんかも超絶COOLにしたいと思っちゃってさー。
え?それって事業主として短絡的じゃないかって?
後からついてくるもんやからええんちゃう?

ってことで、見つけた超絶COOLな背景アニメーションライブラリ「Vanta.js」!!
いやー、めっさカッコいいわ〜。見てみて〜〜

Vanta.js - 3D & WebGL Background Animations For Your Website
Gallery of customizable plug & play animated backgrounds using three.js

 

2018年にGitHubで公開されたっぽくて、国内で実装してるサイト見たことない。
ググってもQiitaでHI-ROKIさんという方の記事くらいしか出てこない。

リッチな背景アニメーションを描画できるライブラリ『Vanta.js』 - Qiita
国内ではまだ紹介している記事が無いようなので、メモも兼ねて紹介します。 ## DEMO <p class="codepen" data-height="392" data-theme-i...

 

こりゃ早いもん勝ちだー!と息巻き実装プランに盛り盛り盛り込みまくり🍆

どーせだったらWEBフォントも実装してCOOLさを神レベルまでヒウィゴーしたろってことで、Googleフォントも読み込ませた。

なので、リニューアルの見てくれの部分に関しては

超絶COOLであること🍆

を、テーマにやっちゃえロックオン。

 

 

アニメーションライブラリ「Vanta.js」乗っけました

俺ってば、20年くらいこの業界やっちゃっててさ、Flashなんかも通っちゃってるし、アニメーション実装したらクッソ重くなるってわかってるYO!?
知ってるよ。レンダリングの問題でしょ。

んだけどさー、jQueryやらHTML5やらCSS3なんか出てきてもう何年経ったYO?? 「Vanta.js」はクッソ最近のJSライブラリーなんだから処理速度上がってるっしょ?時代は「光」で「4G」だし、iPhoneっしょ?Androidもクッソ性能上がってるよ?スペックPCバリだYO!?

だけどさ、アニメーションライブラリ「Vanta.js」実装したら

 

速度「下がってんの」(KICK THE CAN CREWのあれ)

 

 

 

 

ガビーーーン

Yahoo!ジオシティーズで困った

 

 

 

 

リニューアル作業中の「Vanta.js」実装した現状ちょっと見てみ。

大阪のWEB制作会社 ホームランオフィス
ホームランオフィスは大阪市中央区のWEB制作を中心に企画やデザイン、WordPressなどのCMS構築を手がける制作会社です。

 

 

 

 

表示速度どれくらい下がってんのかって?教えて「PageSpeed Insights」

ちょっとちょっと!見てくれた?ホームランオフィスのリニューアル中のサイト!
「Vanta.js」実装した背景アニメーション、クッソCOOLっしょ?

 

ローカルだったらあんま感じなかった表示速度。
だけどサーバーにアップしたら「んんん!?!?!?」ってなったの。
1ページしかなくってウッス薄の内容なのに、めさトロい(関西弁で遅い)。

 

 

 

トロいことによる弊害は

  • 閲覧者は全然表示されないからサヨナラします
  • Googleはページ表示速度をSEO(検索エンジン最適化)の判断基準にしてる。トロいサイトはユーザーマインドに即してないのでサヨナラしますね

ってことで、デメリットしかない。

 

そしてホームランオフィスのコーポレートサイトには前提条件がある。
それは

  • デスクトップユーザー
  • モバイルユーザー

どちらにも対応しなくっちゃってこと。
アクセス数クッソ恥ずかしい数字だけど、ここ半年くらいの公開しなす🍆

 

Analytics

 

desktop 約58%
mobile 約40%

 

なので、どっちかに振ったサイトを作るんじゃなくて、どっちも考慮した設計にしなくっちゃいけなす🍆

  • desktopはWiFiや有線でインターネット高速接続
  • mobileは携帯の電波

速度を考慮しなくちゃいけなす🍆🍆

 

トロくなる要因として「Vanta.js」のアニメーション表示だけじゃなくって、WEBフォントもGoogleさんにリンクしてフォント持ってくるって行動なので、行って帰ってきてだから遅くなる要因として考えられる。

 

ってか、更新するようなことしてねーんだから、mobileからアクセスすんなよ、カーーーッペってオフィスにツバ吐いてやりましたわ。
あー、信じないでくださいね。ホームランオフィスのこと、どででも見てくれてる人はいるんだって「あざっーーーす!!」って感謝で北の方角向いて拝んだYO!!!!

 

そこで登場Googleが提供する速度の計測ツール「PageSpeed Insights」!!
表示速度教えて教えてー!

PageSpeed Insights

 

ロックオン柳田

 

↓↓ 「衝撃の速度評価発表!後編へ続く!」 ↓↓

ホームページリニューアル記-後編「かっちょいい背景アニメーションライブラリ『Vanta.js』とWEBフォントで表示速度を検証!」
Hey!! YO!! ワッツアーーーーップ!! メーーーーン!! ハイパーWEBクリエイター、ロックオン柳田が代表のWEB制作会社「ホームランオフィス」のコーポレートサイトリニューアル作業で起きている 「サイトの表示速度...
タイトルとURLをコピーしました