TREVOのホームページの改良点について

2020.01.06.

ホームページ制作

株式会社TREVOの月額制ホームページ制作サービス
PR

前回ブログでTREVOホームページのヘッダーとフッターのデザインを変更した記事を書きましたが、改良したのはデザインだけでなく制作方法も実験的ですが変更しています。

JavaScriptを減らす

依然のホームページはJavaScriptを結構を使用していました。
そのためJavaScripを読み込むのに時間がかかりホームページを表示スピードが落ちていました。
また、ホームページのチェックツールを使うとJavaScripのエラーが出たりして評価点数が下がっていたので出来る限りJavaScriptを使わずに制作する方針にしました。
JavaScriptを完全に無くすことはできませんが、減らすことはできると思いCSS(スタイルシート)で代替えできることをしました。

CSSでの改良点

変更点はこれまでメインメニューはPC、スマートフォン両方でJavaScriptで制御していました。
以下の今回以下の3点を変更しています。

プルダウンメニュー

マウスをリンクボタンを乗せた時に下にサブメニューが表示する仕組みですが、下に開くアニメーションを含めCSSで制御で制御しています。

バーガーメニュー

スマートフォン表示の時に右上に表示される三本線のバーガーメニューですが、いつもはJavaScripで制御していましたがCSSで制御するようにしました。

アコーディン

スマートフォン表示の時にサブメニューをクリックすると表示するようになる機能ですが、こちらもがCSSで制御しています。

まとめ


今まで改良した3点の制御を4つのJavaScriptで制御していましたがそれを、CSSで全てまかなうことによって表示スピードも速くなりチェックツールでの点数も上がりました。
評価が高いとSEOにも少しながら影響はあると思います。
まだまだ実験段階ですが、少しでもいい効果があれば今後制作するお客様のサイトにも取り入れたいと考えています。

関連の記事

no image
TOPページの制作実績を更新しました。

弊社のTOPページの右上に制作実績を掲載したいるのですが、これまであまり更新していませんでした。そんな中、先日お客様の所にお伺いした時に実績更新してませんねというお話が出て慌てて更新させて頂きました。 [...]

  • Avatar TREVOWP
新年のご挨拶

新年あけましておめでとうございます。 旧年中は格別のお引き立てを賜り厚く御礼申し上げます。[...]

  • Avatar TREVOWP
googleのchromeはいつの間にかバージョン26になっていました。

私が使っているgoogle chromeのバージョンがいつの間にか26になっていました。それにしても、バージョンが上がるのが早いですね。しかも自動アップデートなので、気が付けばいつの間にか20番台なんて事も [...]

  • Avatar TREVOWP
サイト ( ホームページ )を立ち上げる上で知っておきたい言葉

サイト( ホームページ )を立ち上げる上で、制作会社から色々と専門用語が出てきて訳が分からなくなったり、後から担当者がいっていた言葉を忘れて出てこなくなるなんて事はありませんか? ある程度、ウェブ用語の知識を身につけて制作を依頼するだけもで、この人はウェブやサイト( ホームページ )制作について詳し[...]

  • Avatar TREVOWP