
jQuery Lightboxでページの読み込みを早くしよう!
Wrodpressを使った画像系SEO対策記事2連続ですが、ご容赦くださいませ。
前回Tinypngのプラグインを使用した画像軽量化によるものでしたが、今回はちょっと変化球です。
そもそもWordpressに画像をアップロードすると4種類のサイズ作ってくれる
Original
サムネイル - 150x150
中 - 300x300
大サイズ - 1024x1024
この4種類が作成されます。設定によってはもっと沢山作成されます。
そして、通常はブログ記事内にその画像を貼り付けるわけですが、恐らく皆さまこういう基準で貼り付ける画像のサイズを選択されていると思います。
文字が沢山ある→文字が読める程度のサイズの画像
文字は含まれていないが大切な画像→大きめの画像
文字が含まれていないし雰囲気のためだけの画像→小さめの画像
共通して言えるのは、最も小さい画像ではなく、それが画像であるという効果が発揮できる程度のサイズである、という点。
しかし、実際にはブログのデザインを壊さない程度のサイズでは、文字は小さすぎる事が多いと思います。
かといって、クリックで画像に飛ぶようなリンクを作ってしまうと、ページが遷移してしまってユーザビリティが下がってしまう…。
そこで、jQuery Lightboxというプラグインを導入しましょう。
jQuery Lightbox
このプラグインを導入すると、自動的に画像へのリンクをLightBox形式に変更してくれます。
LightBoxがどんな形式かと言うと、画像が拡大して表示されて、他の場所をタップすると元のページの元の場所に戻る、というアレ。
これがあれば、掲載する画像はかなり小さいサイズ…サムネイルくらい小さいサイズに変更することが出来ます。
ユーザーは見たい画像だけ拡大して見れば良いので、ユーザビリティも下がりませんし、画像が小さくなった分だけページを読み込む速度が向上して、ユーザビリティはむしろアップしているかもしれません。文字も充分な大きさで見えるでしょうし。
jQuery Lightboxの設定
これが少しクセがあります。
このようにチェックしましょう。
特に、「スクリーンのサイズに合わせて画像を縮小」にチェックを入れる事が大切です。
入れておかないと、スマホで見た時に画面サイズより圧倒的に大きな画像が表示されて何もわからない!となってしまいます。
それと、画像をアップロードする時に、リンク先を「メディアファイル」にする事を忘れないでください。
これを忘れてしまうと画像をクリックしても拡大されません!
まとめ
ちょっと昔に流行ったな〜という感じのLightBoxですが、やはりユーザビリティには大きく貢献してくれます。
まだご使用でない方は是非どうぞ!
関連記事
-
画像素材やベクター素材、どうやって管理してますか?タグ付けしてすぐ検索出来るLingoが便利過ぎてヤバい
こんばんは、僕です。 皆さま、画像素材やsvg素材はどのように管理されていますで ...
-
あれ?もう容量がいっぱい?何にそんなにSSDやHDDを使ってるんだ…!?GrandPerspectiveで可視化しよう!
こんにちは、MacBookAir略してMBAをメインに使っている僕です。 最近の ...
-
Sketchを使っているデザイナ・ディレクタの皆さま必見!Sketch Mausreの本当のチカラ
[この記事はWEBデザイナもしくはWEBプロデューサ向けの記事になります。] [ ...
-
WordPress環境をローカルで、超簡単に構築!Docker for mac
こんにちは、今回はWordpressを使って業務をしている方、もしくは趣味でpl ...
-
最近良く聞くCDNって何…?XSERVEの「mod_pagespeed」とどちらが効果的?
こんにちは、rebuild.fmに癒やしを求める日々の僕です。 ところで、CDN ...