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

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

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

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向け
スマホ向け

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

まとめ

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

さて、どうしますかね。

ABOUT ME
著者近影
宮城島 俊太 (Shunta MIYAGISHIMA)

茨城県つくば市在住のウェブサイト運営者。ネット上ではc-miya、orefolderなどの名前で活動しています。

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

CATEGORY
RANKING