ブログなどでAmazonや楽天の商品リンクを載せるとき、多くのサイトでカード状になってますよね。最近メインサイトの方で、この商品リンクのデザインをちょっと悩んでます。
というわけで、まずは何か参考になるデザインはないか、ほかのサイトのデザインを集めてみました。
OREFOLDER
まずは私のメインサイトの現状。
![](https://foxism.jp/wp-content/uploads/2022/12/20221220-link-2.webp)
![](https://foxism.jp/wp-content/uploads/2022/12/20221220-link-3.webp)
あ、いやここから商品名の部分だけ青から黒に変えた。
FOXISM
このブログの現状。
![](https://foxism.jp/wp-content/uploads/2022/12/20221220-link-4.webp)
![](https://foxism.jp/wp-content/uploads/2022/12/20221220-link-5.webp)
ケータイWatch
https://k-tai.watch.impress.co.jp/
![](https://foxism.jp/wp-content/uploads/2023/01/20221220-link-6.webp)
![](https://foxism.jp/wp-content/uploads/2023/01/20221220-link-7.webp)
PC向けとスマホ向けで特に変わらず幅が狭まっただけのようです。
GIZMODO
![](https://foxism.jp/wp-content/uploads/2023/01/20221220-link-8.webp)
![](https://foxism.jp/wp-content/uploads/2023/01/20221220-link-9.webp)
GIZMODOは2つ見つかりました。どちらもスマホではそのまま縮まります。
ねとらぼ
![](https://foxism.jp/wp-content/uploads/2023/01/20221220-link-10-720x227.webp)
![](https://foxism.jp/wp-content/uploads/2023/01/20221220-link-11-720x343.webp)
通常?とセール時で少し変化します。セール時は製品の説明が入り、価格やオフ率が大きく表示されます。
KAI-YOU
![](https://foxism.jp/wp-content/uploads/2023/01/20221220-link-12.webp)
note
![](https://foxism.jp/wp-content/uploads/2023/01/20221220-link-13.webp)
![](https://foxism.jp/wp-content/uploads/2023/01/20221220-link-14.webp)
PC向けで画像が左にあるのが割と珍しいですね。スマホ向けになると縦並びになります。
Creator Clip
![](https://foxism.jp/wp-content/uploads/2023/01/20221220-link-15-720x166.webp)
![](https://foxism.jp/wp-content/uploads/2023/01/20221220-link-16.webp)
スマホ向けはボタンが下に移動します。
gori.me
![](https://foxism.jp/wp-content/uploads/2023/01/20221220-link-17-720x282.webp)
![](https://foxism.jp/wp-content/uploads/2023/01/20221220-link-18.webp)
スマホ向けになると縦並びになります。
携帯総合研究所
![](https://foxism.jp/wp-content/uploads/2023/01/20221220-link-19-720x257.webp)
![](https://foxism.jp/wp-content/uploads/2023/01/20221220-link-20-342x720.webp)
スマホ向けになると縦並びになって画像も大きくなり、商品説明も表示されるのでかなり縦長になります。だいたい一画面全部うまる。
でこにく
![](https://foxism.jp/wp-content/uploads/2023/01/20221220-link-21-720x225.webp)
![](https://foxism.jp/wp-content/uploads/2023/01/20221220-link-22.webp)
これはでこにくというよりも「ポチップ」というサービスを使っています。縦並びだけど画像はそれほど大きくならないで説明もないのでそこまで大きくなりません。
価格.comマガジン
![](https://foxism.jp/wp-content/uploads/2023/01/20230107-1-720x126.webp)
![](https://foxism.jp/wp-content/uploads/2023/01/20230107-2.webp)
どちらもかなり横長で縦が狭くなってます。商品画像がかなり小さめなんですね。
まとめ
まぁ、だいだい似てるっちゃあ似てるんですよね。スマホ向けになったときにそのまま縮まるのか縦並びになるのか、そういったところはよく検討したいところ。
さて、どうしますかね。