楽天市場のCSSを見直したらゴミ置き場だった

店舗のCSSメンテナンス出来てますか？

弊社は楽天市場出店＝創業から6年を迎えました。

メーカーの内部で別会社として楽天市場に出店するという恵まれた環境に入るものの売上実績は鳴かず飛ばずの状態。
『資金が少ない』『人手が無い』『Mallルールの激変』という悪の三拍子に苦しめられていると考え「人手だけは知力でカバーできるだろ」とEC業務システム化の検討を始めたわけです。

店舗の外装は4年前に大幅リニューアルをしたとはいえ、まだまだCSSの知識も乏しい状態。
楽天市場のCSSは4つのファイルをリンクさせていました。

そこで今回、回遊率を上げる店舗リニューアルをしようと思い立ち、プログラミングの知識もついたのでCSSも見直してしまおうと実行に至ったのでした。

そもそもウチの店舗デザインってコピペです。

デザインに自信のなかった私は出店当初フリーのテンプレートをダウンロードし店舗のベースとしてきました。
6年前にはすでに「<table width=”700px”>とか書くなよ～CSSでデザインしろよ～」と叫ばれていたものの、超初心者の私はコピーしたテンプレートCSSを使い思い通りにならない所は都度直接指示という荒業で形だけ何とか構築したのでした。

4年前の改装ではこれが仇となりデザインが大きく崩れ更新すると不具合が出るという状態に陥っていました。
そんな事情があったから今回のシステム『商品説明なんてテンプレートで書いちゃえアプリ』が生まれたわけです。

コピペCSSは魔の巣窟…矛盾だらけで困り果てる。

知識と技術を蓄え、いざCSSの魔窟へ。
作業は次の手順で行いました。

結論。すごく酷かった…

• 同じclass名でテーブル幅の指示640pxと500pxが存在
• 本来所品販売文にかかるはずのレイアウト調整が商品画像リストを操作しているかのようなサイズで記載されている

などなど、予定では半日でCSS見直し作業を終えるはずだったところ2日を要してしまいました。
皆さんもコピペCSSがある場合は見直しましょう。

折角なので、CSSの荒れは検索結果に影響する調査

こういった時は今後の優先順位を決める為にも検索結果への影響を調べます。

参考サイト①
参考サイト②
参考サイト③

楽天市場内での影響のほどは資料が無く全くわかりませんでした。

Google検索結果の場合、CSSの不適合は影響がありそうです。
Googleさんは検索したユーザに見やすい情報提供の評価を高くしようとしています。
基本的には指示されるべきもの(<p>や<h>など)がされているかを見ているわけですがCSS や JavaScriptもクロールされているとなれば無関係なわけがありません。

まとめ

CSSの見直しは最低でも年一回行いましょう。
そこでちょっと手直ししたいところがあれば、次回かのページ作りから楽になります。
少しづつでも前に進める事で効率は必ず上がります。