【リニューアル】ヨーロッパ専門高級セレクトショップYOKI

【ヨーロッパ専門高級セレクトショップYOKI】
https://yokiselect.com/

 

 

1.WEBページを開いたときの速度の改善

【トップ画像】

表示速度が遅いとユーザーが離れてしまう

WEB制作において、重要事項のひとつである【表示速度】。

Googleは、
サイトの表示速度とユーザー直帰率の関係性について、下記のように公表しています。

※直帰率とは、ユーザーがサイトに訪問してから離れるまでの割合のこと

表示速度が1秒から3秒まで遅くなると、直帰率は32%増加する
表示速度が1秒から5秒まで遅くなると、直帰率は90%増加する
表示速度が1秒から6秒まで遅くなると、直帰率は106%増加する
表示速度が1秒から10秒まで遅くなると、直帰率は123%増加する
表示に3秒以上かかるモバイルページからは53%のユーザーが離脱している

参考：Find out how you stack up to new industry benchmarks for mobile page speed

 

表示速度とUXの改善に成功

改善前、ECサイトということで、wooccomerceのプラグインを使用と、商品数の増加、既存のテンプレートが古くなってきたことにより、表示速度がかなり遅くなっていました。

スピードテストをすると
モバイルは13点、PCは30点。
完全にレッドゾーンです。

そこで、根本から完全に設定を替えることを選択。
wordpressでさらにECだと、根本のテンプレートから変更となると、変更後に以前、表示されていたのもが表示されない、SEOの順位が落ちるなどリスクが伴うことがあります。

ですから、今回は、事前にバックアップとSEO対策の内部構造の詳細を綿密に確認してから、実行。

見事、成功しました。

スピードテストの結果は、
モバイル60点,PC83点まで改善。

 
ちなみに、MY DESIGNのサイトは、モバイル85点、PC96点！
これは、余計なものを一切はぶいて、必要な情報のみで基盤となるテンプレートもすべて制作しているため可能となっている数字です。
 

2.これまでのショップイメージを保つ

デザインイメージを変更しすぎてしまうと、既存のお客様が離れてしまう可能性があります。
サイト制作におけるリブランディングは、非常に影響を与えます。

今回は、既存で使用されていたサイトのトレードマークである大理石の背景をヘッダー部分に、コードを入力して手動でカスタマイズしています。
トップ画像を大画面で表示する事により、ダイナミックで高級感のある印象を与えます。

 

3.過去記事の反映

これまでに書き溜めたブログの記事もすべて無事、反映しました。
既存で使用されていたコードも確認しながら、なるべく表示にズレがないように、PHPやCSSといったコードを内部に追記しています。

 

4.テンプレートのカスタマイズ

【商品一覧に囲み枠を追加】

今回、新たに導入したテンプレートと言われる表示の土台。
かなりシンプル。
商品数が多いこのページには、一覧表示するとシンプルすぎて見づらい印象があります。

そこで、シンプルな囲み枠の追加と、余白や文字サイズの調整を独自のコードで編集しました。
 

5.サイドバーを増やしたい

商品数や種類が分かれるページの場合、サイドバーがあったほうがサイトを訪問するお客様に親切です。
実際に、UX(ユーザーエクスペリエンス)や回遊率の向上が期待できます。
ページからの離脱を予防する効果もあります。

だが、しかし！

font14pxblue新たに導入したテンプレートには、
商品およびブログの一覧ページのサイドバーが存在しない。

なんという致命的なもんだい！！

しかし、コードでバリバリに編集するので、問題なし。

サイドバーは、デザインや表面上のカスタマイズをしているCSSというコードだけでは、編集できません。
今回は、phpというコードで内部の骨格もカスタマイズしています。

デザインも整えて、これで、サイトを訪れたお客様にネットショッピングをお楽しみいただけるサイトが完成しました♪

【ショップ一覧にサイドバーを追加】

 
【ブログ一覧にサイドバーを追加】

 

ホームページもネットショップも、
お客様に喜ばれるサイト制作を叶えます。

WEB制作会社さんやフリーランスの方にサイト制作を依頼すると、デザインに特化しているところが多く、今回のようなカスタマイズは、結構、難易度高いです。

MY DESIGNでは、「他では、難しいって言われたよ」 といった
デザインや機能の調整も、お任せください♪

表示スピードやSEO対策はもちろん、ホームページに記載する本文のライティングもご一緒につくりあげていきます。