BiNDupの隠れた機能！動画や写真が多くてもサイトの軽量化が可能な理由

飲食店や旅館など、“特別な体験”がカギとなるホームページでは、写真や動画による視覚的なアプローチが結果を左右するので、おいしそう・行ってみたいと思わせるためのコンテンツはふんだんに使用して、魅力をアピールしたいもの。

ところが、プロでもなかなか難しいのが、画像の量と表示スピードのバランスです。
写真や動画を多用しすぎた結果、サイトの表示スピードが遅くなって、モバイルフレンドリーではないという烙印を押されてしまった…なんて苦い経験した人もいるのではないでしょうか？

そこで今回は、魅力的な画像をサイトでたくさん使いながらも、快適な閲覧を実現している旅館「石山離宮 五足のくつ」のサイトを例に、その理由をWebデザイナーが解説します。
実は、新しいBiNDupのサーバーにサイトを公開していることも、その理由のひとつでした。

▼雲仙天草にある離れの宿「石山離宮 五足のくつ」さん。

動画や写真を多用しても、サイトの軽量化は可能！

新しい圧縮機能で表示スピードUP

ページTOPに設置された天草の街と旅館の雰囲気を体感できる動画に始まり、サイトのさまざまな場所で使われている美しい画像の数々。動画も画像もふんだんに使われていますが、軽量化や最適化に配慮した作りで閲覧が快適。写真とテキストのバランスも美しく、見応えのあるサイトです。ゴーストヘッダーやサイドエリア、ウィジェットなどを目的に合わせて有効活用し、PCとスマホで内容を切り替えることで、わかりやすい導線も確保しています。

サイトの魅力を伝えるメッセージ性の高い動画の数々

新・BiNDupのここで設定

制作者自ら画像の軽量化や最適化に配慮したとのことですが、写真や動画を多用しすぎると表示に時間がかかり、SEOの評価が下がってしまうというジレンマは、BiNDupでは環境設定の「このサイトの画像を一括最適化」で画像を軽量化することで対応できます。（ボタンを押したタイミングで圧縮処理が走ります）
※「全般」にある「画像の最適化」をオンにすると、操作のたびに圧縮がかかるのでBiNDupの動作が重くなるのでご注意を。

また、BiNDupでは画像圧縮の最新技術である「gzip」に対応。
条件としては、「BiNDのサーバーを使っていてサイトを常時SSL化してあること」。それだけで自動でgzip転送になり、表示スピードの最適化が可能です。

ポップアップで読ませたい記事へ自然と誘導！

こちらのサイトは、BiNDupの新機能「ウィジェット」を使って、周知させたい情報をポップアップでしっかりアピールしているのも特長です。

ウィジェットは、ページの四隅と左右の中央にページの上に重なるようにフロート表示＆固定できるので、今回の「ミシュランに掲載」のようなサイトの評価アップにつながる情報の表示に最適です。

ウィジェットは通常ページと同様に、バナーやフォームなども表示できるので、アイデア次第でさまざまな活用が可能です。

ボタンはわかりやすいデザインに

リンクパーツの色設定を再確認

さすがプロのお仕事なだけに、ストレスなく表示できるページの軽さやスマホ表示の作り込みなど、オススメしたいポイントばかりですが、リンクボタンのテキストが背景色と同化している箇所がありました。あえて行っている場合以外は、コンバージョンとなる予約への導線はカーソルを合わせなくてもボタンとわかる仕様にしたほうがベター。色設定を見直してみましょう。

新・BiNDupのここで設定

リンクボタンの文字色は、設定パネルのデザインをクリックして、リンクボタン編集画面で変更できます。文字色はボーダーの色と同じなどに揃えるのがおすすめです。

最適化で通信環境に左右されないサイト作り

いかがでしょうか？
ページが表示されるまでの時間は離脱率に大きくかかわります。せっかく作ったページが見てもらえないことにならないように、画像の軽量化と最適化は必ず行っておきましょう。BiNDupに新搭載されたgzipなどの圧縮技術も、快適に閲覧できるサイト作りをサポートします。

今回紹介したサイトを参考に、BiNDupを使ってぜひコンテンツの軽量化と注目させたい内容へ視線を誘導する導線作りにチャレンジしてみてくださいね。

BiNDupについて詳しくみる