ECに携わるようになってから、楽天市場とYahoo!ショッピング、Amazonに苦戦する日々を送っています。いろんなサイトや記事を参考にさせてもらっているのですが、あんまり難しいことをしないで簡単にグリッドレイアウトできないかなと思いプレーンなコードをとりあえず書いてみました。いろんな方がいろんなコードを公開してくれているのですが、シンプルなものってあんまりないのかなあと思ったので少しでも需要があるかなと思いました。ご自由にお使いください。
使い方
YAhoo!ショッピングでのストア構築を想定してCSSをインラインで書いています。
Yahoo!ショッピング ストアデザイン > ヘッダー・看板 > フリースペース
とかで使ってもらえるかなと思います。
これをコピペするとこんな感じになります。含まれている画像はランダム表示されます。
幅はデフォルト設定の950pxにしていますが、最近のPC事情なんんかを考慮すると1000px以上の方がいいのかなと思います。サイトの幅を変更している・これからする際は、
- 最初の行のwidth: 948px;を修正
- 途中複数あるwidth: 316px;を3で割った整数に変更
- height: 200px;をwidthと同じ数値にすると正方形になってInstagramっぽくなります
- 見出しバーの色を変えたい場合は、hotpinkのところを変更してもらえると変わります。色をlightlbueとか英語で入れると結構あります
- 見出しバーは消したい場合は、２行目のh2タグををごっそり消してください
以上で対応できます。各画像のサイズは 3 : 2 を推奨します。
とにかくシンプルです
シンプルですが、僕は思いページが好きじゃなくてWebページには軽さを求めます。デザインはシンプルですが、画像を作り込めばコントラストにもなって目線もキャッチしやすいかなと思います。簡単なコードなので、Yahoo!ショッピングのトリプルを契約せずにストアデザインを構築されている方はぜひ参考にして見てください。
簡単にできるSEO対策
タグの中にあるalt=””は画像検索などの際にSEO対策になるので、ぜひ記入することをおすすめします。記入する内容は、「〇〇の画像」などではなくて、「画像が表示されなくても代替え文章だけで画像の内容がわかるもの」がいいです。
「立ち上がりまで数秒！電源入れてすぐ使えて髪に優しいスチームアイロン！」
みたいな感じがベターと思われます。もし扱っている商品がライバルの多い商品だとgoogleなどでキーワード検索されるより、画像検索の方が見てもらえる可能性が上がることがあります。画像などのメディア検索はこれからますます重要度が上がってくると思いますので、ぜひ工夫してアクセス数UPに繋げてください。
終わりに
最近ECの管理運営に携わるようになって、わからないことだらけで苦労することが増えてきたので、調べたことや感じたことなんかをここで共有していきたいと思います。僕もいろんな方の記事を読ませていただいて本当に助かっているので、僕の記事がまた誰かの助けになれたら幸いです。
コピペ記事
