市川 雄大

次世代の画像フォーマット「WebP」でサイト表示速度の改善に取り組もう

次世代の画像フォーマット「WebP」でサイト表示速度の改善に取り組もう

by 市川 雄大

サイトの表示速度は直帰率、コンバージョン率等に大きく影響します。

webサイトの閲覧に3秒以上かかる場合、モバイルユーザーの53%はサイトから離脱する

とGoogleは発表しています。

表示速度を遅くする大きな原因としてページで使われてる画像容量が大きい・枚数が多すぎることで読込が遅くなってしまうことは容易にご理解いただけると思います。

特にECサイトの場合、メインビジュアルに加えてバナーや商品一覧の画像など、どうしても画像が多いページになってしまいがちです。よって表示速度を改善するためには「いかに画像容量を減らすか」がポイントとなります。

PageSpeed Insights(ページスピードインサイト)を使ってサイトのパフォーマンスを計測すると、表示速度の改善施策として「改善できる項目」「短縮できる時間」(※1)として次の内容を確認することができます。

昨年刷新されたPageSpeed Insightsでは表示速度を改善するために「次世代フォーマットでの画像の配信」(※2)を推奨するようになりました。

今回は次世代フォーマットの一つであり、画像コンテンツ容量削減に役立つ「WebP(ウェッピー)」について紹介します。

Read More

ECサイトで商品レビューを掲載する効果とは?

ECサイトで商品レビューを掲載する効果とは?

by 市川 雄大

ネットショッピングする時に「商品レビュー」が
私たちの購買行動に大きな影響を及ぼすという効果は周知の事実です。

これまで商品を購入した人の使用感や満足度などについてのレビュー読み、
それを信頼することで、ユーザーはある程度の確信をもって購入できるようになります。

ネットショッピングにおいては、実に97%のユーザーが購入する前にレビューを参考にし、
そのうち26%が全ての購入でレビューを参考にしていると言われています。
さらに89%のユーザーが購入を決定するのにレビューを不可欠な要素と考えています。(※1)

※1 The Power of Reviews, 2018

今回は、なぜECサイトにおいて商品レビューの掲載が必要なのか、商品レビューを表示することでどのような効果を得られるのかについて整理していきたいと思います。

Read More

【レスポンシブ対応】高機能なスライダーが作成できる「slick」

【レスポンシブ対応】高機能なスライダーが作成できる「slick」

今回はslickというスライダー実装のためのjQueryプラグインをご紹介します。

Read More

HTML5で動画を再生する方法

HTML5で動画を再生する方法

MP4形式の動画をHTMLに埋め込んで再生しよう

サポート部の市川です。
先月の記事ではYoutube動画の埋め込み方法をご紹介しましたが、
今回はスマートフォンで投影したり、動画編集ソフトを使って作成したmp4動画をページに埋め込んで再生するための方法を紹介します。

実際の商品の動きや音などを確かめる際に、動画は大変有効です。
ECサイトなどでは購入につながる可能性も高くなるので、覚えておくと大変便利です。
Read More

Youtube動画の埋め込み方法

Youtube動画の埋め込み方法

Youtube動画の埋め込み

サポート部の市川です。
通販サイトでは動画を活用することで、ユーザーの購買意欲を高めることができます。
実店舗で商品を見たり触れたりすることができない代わりに、動画を見ることでユーザーは商品を擬似体験することができ使用感・イメージを高めることができるからです。
今回はYoutubeにアップロードした動画をサイトで活用できるようサイトへの動画埋込方法についてご紹介します。とても簡単なので積極的にご活用ください。

Read More

スマホ用サイトから電話発信できるようにする方法

スマホ用サイトから電話発信できるようにする方法

スマホ用サイトから電話発信できるようにする方法

昨今ECサイトのスマホ対応化が急速にすすむ中、閲覧ついでに気になった商品について、あるいは配送や決済方法について電話問い合わせをしたいというお客様がいらっしゃいます。今回はそういったニーズに備えて、タップで即時に電話ができる「電話発信用リンク」を設置する方法をご紹介します。
Read More

テキスト入力・メニュー選択どちらもできるdatalist要素を使ったフォームの作り方

テキスト入力・メニュー選択どちらもできるdatalist要素を使ったフォームの作り方

datalist要素を使ったフォームの作り方

今回はHTML5に新しく加わったdatalist要素を使ったフォームの作り方を紹介します。datalist要素とはinput要素にサジェスト機能を追加する要素です。

フォームを作成するとなると<input type=”text”>や<select>を使うことが多いですが、datalist要素を使うことで、これら両方の入力形式を一つのフォームで併せて実現することができます。

Read More

【表示速度改善】画像を圧縮してECサイトの読込を速くする

【表示速度改善】画像を圧縮してECサイトの読込を速くする

画像圧縮で読込速度改善

昨今のWebサイトではUX(ユーザーエクスペリエンス)や離脱率低減やのためにページ表示速度が重要視されています。サイト表示速度が遅いと顧客満足度は大幅に低下し、離脱してコンバージョンの機会が失われてしまいます。

よってサイトの表示速度のいかに速くするか対策することは、デザインやコンテンツの充実化に優先して取り組まなければならないと言っても過言ではありません。
Read More

【jQuery】開閉可能なアコーディオンパネルを作ってみよう

【jQuery】開閉可能なアコーディオンパネルを作ってみよう

開閉可能なアコーディオンパネル

タイトルをクリックすることで本文が表示されたり閉じたりを切り替えることのパネルをJqueryを使って作成することができます。様々なサイトで定番として利用されることが多いですが、画面領域が限られたスマートフォン上で複数のコンテンツを効率よく表示させたいといった場合にこそ威力を発揮する実装となります。

扱うコード量も比較的少なく簡単に実装できるので是非とも使っていただければなと思います。

Read More

jQueryUIを使って便利で見栄えのよいUIを作ってみよう

jQueryUIを使って便利で見栄えのよいUIを作ってみよう

jQueryUIを使ってみよう

こんにちは、サポート部の市川です。リオデジャネイロパラリンピックの盛り上がりが地球の裏側の日本までやってきて、競技中継を見ていると毎日寝不足になりがちです。

さて今回はjQueryUIとはjQueryが用意している便利な機能を使うためのライブラリの一種(プラグイン)です。名前の通りユーザーインターフェースに関わる機能を提供します。

Read More