Amazonなどの商品リンクのデザインを考える(色んなサイトの例を集めてみた)

当ページのリンクには広告が含まれています。

ブログなどでAmazonや楽天の商品リンクを載せるとき、多くのサイトでカード状になってますよね。最近メインサイトの方で、この商品リンクのデザインをちょっと悩んでます。

というわけで、まずは何か参考になるデザインはないか、ほかのサイトのデザインを集めてみました。

INDEX

OREFOLDER

https://www.orefolder.net/

まずは私のメインサイトの現状。

PC向け
スマホ向け

あ、いやここから商品名の部分だけ青から黒に変えた。

FOXISM

このブログの現状。

PC向け
スマホ向け

ケータイWatch

https://k-tai.watch.impress.co.jp/

PC向け
スマホ向け

PC向けとスマホ向けで特に変わらず幅が狭まっただけのようです。

GIZMODO

https://www.gizmodo.jp/

GIZMODOは2つ見つかりました。どちらもスマホではそのまま縮まります。

ねとらぼ

https://nlab.itmedia.co.jp/

通常
セール時

通常?とセール時で少し変化します。セール時は製品の説明が入り、価格やオフ率が大きく表示されます。

KAI-YOU

https://kai-you.net/

note

https://note.com/

PC向け
スマホ向け

PC向けで画像が左にあるのが割と珍しいですね。スマホ向けになると縦並びになります。

Creator Clip

https://creatorclip.info/

PC向け
スマホ向け

スマホ向けはボタンが下に移動します。

gori.me

https://gori.me/

PC向け
スマホ向け

スマホ向けになると縦並びになります。

携帯総合研究所

https://mobilelaby.com/

PC向け
スマホ向け

スマホ向けになると縦並びになって画像も大きくなり、商品説明も表示されるのでかなり縦長になります。だいたい一画面全部うまる。

でこにく

https://decoy284.net/

PC向け
スマホ向け

これはでこにくというよりも「ポチップ」というサービスを使っています。縦並びだけど画像はそれほど大きくならないで説明もないのでそこまで大きくなりません。

価格.comマガジン

https://kakakumag.com/

PC向け
スマホ向け

どちらもかなり横長で縦が狭くなってます。商品画像がかなり小さめなんですね。

まとめ

まぁ、だいだい似てるっちゃあ似てるんですよね。スマホ向けになったときにそのまま縮まるのか縦並びになるのか、そういったところはよく検討したいところ。

さて、どうしますかね。

シェアしてね!

この記事を書いた人

静岡県静岡市清水区在住のウェブサイト運営者。ネット上ではc-miya、orefolderなどの名前で活動しています。

ストレスに弱いので、できるだけ好きなことだけをして生きたいと思いながら生活しています。「楽しい」が優先順位の一番上に来るようにしたいですね。

INDEX