カテゴリー:ホームページ制作

「カートに入れておく機能」利用時のviewport指定について 

皆さんこんにちは、ワニエです。

2021年12月7日に実施されたシステムアップデートにて「カートに入れておく機能」が公開されました。この機能は今までに多くのショップ様からご要望頂いていた機能でしたので、サポートスタッフとしても皆さまにようやく機能を公開することができ嬉しい限りでございます。

さて、実際に「カートに入れておく機能」をご利用いただく際に、ショップページをPC用とスマホ用でページを分けてご構築されているショップ様におきましては、管理画面やご利用マニュアル等でご案内している設定の他にお願いしなくてはならない作業がございます。本記事ではその作業についてご案内します。

「カートに入れておく機能」とは?

e-shopsカートSで提供している「ゼロステップカート」や「3ステップカート」は、商品をカートに入れる時に必ず「カート画面」や「カートの中身画面」へと画面遷移する仕様です。そのため、複数商品をご購入される方によっては、その度にカート画面へと遷移しショップページへと戻る動作が必要であったため、なかには『使い勝手が良くないなぁ』と感じる方もいたかもしれません。

この「カートに入れておく機能」を使えば、商品をカートに入れた時にカート画面には遷移せずに商品がカートに入りますので、必要なタイミングまではカート画面に遷移しなくても良くなり、複数商品を購入する場合でもストレスなくお買い物を楽しんでいただくことが出来るようになります。

カートに入れておく機能

PC用、スマホ用でページを分けている場合は要注意

近年スマートフォンやタブレットの普及によってホームページのスマホ対応が当たり前となり、ネットショップのホームページをスマホ対応しているショップ様は多いかと思います。
ホームページのスマホ対応の方法は、大きく分けて「レスポンシブデザイン」「PC用、スマホ用などホームページを別に用意して振り分ける」方法がありますが、後者の「PC用、スマホ用などホームページを別に用意」して構築されているショップ様におきましては、「カートに入れておく機能」をご利用の際に商品をカートに入れた際に表示されるモーダル画面が正常に表示されない可能性がございます。

そのため、「カゴに入れる」ボタンを設置しているページ(HTML)の<head>~</head>タグ内にて、下記の記述を行っていただくことでどのデバイス(端末)でご操作された場合でも最適なモーダルが表示されるようになります。

▼「カートに入れておく機能」ご利用時のオススメのviewport指定

<meta name=”viewport” content=”width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1″>

なお、上記viewport指定を行っていただいてもモーダル画面が正常に表示されない場合には、ショップページ側のCSSが干渉してしまっている可能性があります。その場合には、e-shopsカートS管理画面>デザイン>拡張機能設定>利用設定にて「カートに入れておく機能」のCSSを編集できる設定をご用意しておりますので、必要に応じて調整してみてください。

以上、カートに入れておく機能の補足記事でした!

サーバアップグレードで検索順位が向上?!

e-shopsカートSでは、2019年4月に実施したメンテナンスにて、今までご提供しておりましたレンタルサーバを「HDD」から高速表示が可能な「SSD」にアップグレードをしました。
そこで、2019年10月31日までレンタルサーバお乗換えキャンペーンを実施しております!

本記事では、キャンペーンのご案内と共にサーバアップグレードのメリットなどについてご紹介いたします♪

「HDD」「SSD」とは?

これまでサーバーのストレージ(記憶装置)といえば、HDD(ハードディスク)を用いるのが一般的でしたが、近年ではSSD搭載のレンタルサーバが増えてきました。

「HDD」とは、Hard Disk Drive(ハードディスクドライブ)の略で、データやプログラムなどを電磁的に読み書きできる記憶装置です。
対して、「SSD」はSolid State Drive(ソリッドステートドライブ)の略で、HDDと同様の記憶装置です。半導体素子メモリを使ったドライブ(記憶媒体)のことを指します。大容量のデータを保管しておく媒体として長年HDDが使われてきましたが、近年、SSDの容量が大きくなってきたこともあり、急速に普及しつつあります。e-shopsカートSにおけるご提供サーバは全てSSDを採用しております。

ディスクタイプ コスト 速度 耐久性 エネルギー効率
HDD 安価 遅い 耐久性が低い 電力消費が多い
SSD 高価 早い 耐久性の向上 電力消費が少ない

ユーザーが待てるのは●秒まで?!

みなさんはネットショッピングや調べ物など、Webサイトやページを閲覧しているときに読み込みが遅くて途中で諦めてしまったり、利用するのを止めてしまったという経験はありますか?
Googleがディープラーニングを用いて算出した予測では、表示速度が1秒から3秒に落ちると、直帰率は32%上昇し、さらに1秒から5秒に落ちると、直帰率はなんと90%に上昇したそうです!
このことからWebサイトから離脱せず閲覧し続けてもらうには、ページの表示を2秒で完了させる必要があるということが分かります。

(引用元:Google/Find out how you stack up to new industry benchmarks for mobile page speed

スマートフォンからのアクセスが多くなった現在では、Googleも検索順位を決めるアルゴリズムの1つとしてページの表示速度をモバイル検索のランキング要素に導入しており、SEO的にも良いとされています。

(続きを読む…)

ショッピングカート「カゴに入れる」ボタンの設置方法

e-shopsカートSでは、『「カゴに入れる」ボタンを設置するだけで、ネットショップが完成』と、レンタルカートプランをご紹介しています。

ホームページを持っているがネットショップを新たに作るほど投資が出来ない場合や、沢山の情報を載せてオリジナリティのある商品ページを作り、そこに「カゴに入れる」ボタンを設置する場合などに、このプランは適しています。

今回の記事では、そのご利用手順をご紹介していきたいと思います。

e-shopsカートSのサポートへも、問合せが時々ありますので、改めて画像つきで紹介させていただきます。
既に活用されている方にとっては、当たり前の情報であると思いますが、e-shopsカートS管理画面をご覧になっていない方や、運営に不慣れな方のご参考となれば幸いです。

「カゴに入れる」ボタン貼付け手順

  1. 商品ページ作成する
  2. 管理画面で商品を登録する
  3. 商品ページにHTMLソースを貼り付ける
  4. 商品ページの確認を行う
  5. 商品ページを公開する

という流れで紹介していきます。

(続きを読む…)

ブラウザ上でHTML/CSSを変更して表示の確認ができる小技

ホームページ制作で表示の微調整や、表示がうまく行かない時の原因を調べる時に役に立つ小技をご紹介します。

今回紹介するのはブラウザ(Chrome)に標準でついている機能ですが、これを知っていると知っていないとでは圧倒的に作業効率が違います。
自身でページを制作しているショップ様には是非とも知っていただきたい内容です。

今回使うブラウザはChromeです。
下記リンクからダウンロードできます。
Chromeのダウンロード

私の作業環境
OS:Windows XP
ブラウザ:Chrome バージョン22

(続きを読む…)