カラーミーショップのカスタマイズ

ご依頼を受けてカラーミーショップのカスタマイズに勤しんでいました。

カラーミーショップのカスタマイズ

カラーミーショップはテンプレート(無料/有料)を自分で用意してショップ作成をするわけですが、 テンプレートというものは万人向けに作るため、見た目のデザインはシンプルになりがち&色々な用途に対応するため様々な機能を実装させます。

今回のご依頼は主にSEOの改善を望まれたものでしたが、SEOなんて単純に解決できるものではなく検索エンジンによるサイトの総合評価としか言いようがないので、どのように対応したかを書き残しておくことにします。

リッチリザルトの対応

検索結果に商品価格や在庫状況なども併記してくれるリッチリザルト。

直接的なSEO効果は否定されていますが、検索結果で目を引くことからクリック率は上昇するのではと考えています。

Googleがリッチリザルトテストツールを公開しているので、リッチリザルトに対応できているかは直ぐに確認できます。自店がリッチリザルト対応かどうか分からない方は一度お確かめ下さい。 →リッチリザルトテスト

カラーミーのテンプレートエンジンは、困ったことに「円」とか「(税込)」とかも含めた値が変数{$price}で出力されているためそのままリッチリザルトに使うことができません。

ほかにも色々加工が必要な変数があるのですが、頑張ってリッチリザルト対応の書式に変更します。

速度表示の改善

テンプレートのカスタマイズではheadタグの中身までは編集できないので、使われていないcssやjsを削除することはできません。らくうるカートならheadの中まで触れるのですが。なので出来る範囲のことをやります。

画像の最適化

カラーミーの公式発表で「10月上旬に画像の最適化を行い表示速度をアップする」と言っていました(https://shop-pro.jp/news/2010-image-optimisation/)が、まだ実施されていないようですので、まずは画像のサイズダウン。jpegoptimとoptipngで一括処理します。

Linuxユーザーなのでmacやwindowsでも同じコマンドなのかは分かりませんが、多分同じでしょう。

$ cd (画像フォルダ) 
$ find . -name "*.jpg" -exec jpegoptim {} + 
$ find . -name "*.png" -exec optipng {} + 

findの後ろの「.」は現在のフォルダを意味しています。今回ファイル名で検索→処理していますが、ファイルタイプで検索する(もしくは両方)方法もあります。最後を+ではなくバックスラッシュにする書き方もありますが、この場合だと結果は同じです(個別に処理するか一括処理するかが変わります)。

Lazyload

Googleは画像の遅延読み込みにIntersection Observer推奨ですが、今回のところはお馴染みのLazyload.js。ファーストビューで出てこない画像全てに設定します。

欲を言えばトップページのスライドにも使いたかったのですが、それをするとお客様が自由に管理画面からスライド差し替えできなくなってしまうので断念。

深すぎる階層をなくす

小さいコンポーネントをたくさん作ってテンプレートを組み立てるのは楽ですし私もよくやるんですが、「深すぎるDOM階層は計算に時間がかかる!」とGoogleさんに怒られます。今後のご依頼主様の編集作業が楽になることも考えて、できるだけすっきりとした構造に作り変えました。

モバイルフレンドリー

もはや常識レベルで、サイト作るならスマホ対応です。今回、モバイル対応は元々できていたので特に手を施す必要はありませんでした。

コンテンツの量と歴史

いずれも問題ないレベルだったので、今後も商品登録や編集を続けていってくださればと願います。

結局どうなった

表示速度に関しては、予想していたよりも改善できたので本当にホッとしました。これぐらいしか直ぐに目に見える成果ってないですし。

肝心なのは、今回の措置で本当にアクセスが増えて売上が増えるのかということなのですが、こればかりは何ヶ月かあとにショップ様に確認してみないと分かりませんのでしばらくモヤモヤします。折をみて聞いてみたいところです。

ご依頼お待ちしています

ネットショップのテンプレートカスタマイズ等、ご依頼お受けしています。

サイトURLを仰っていただければ、当店で実施可能なカスタム内容とお見積り金額をお伝え致します。