Shopifyでのメインビジュアルの表示
見出し画像

Shopifyでのメインビジュアルの表示

カンナート|Kannart

はじめまして。カンナートの麦子です。
今回は私が得意な分野、デザインについてお話ししますね。

サイトに訪問した際、最初に目に入るものといえばメインビジュアルですね。ShopifyのテーマのほとんどがPC(パソコン)・ SP(スマートフォン)で同じファイルを使用する設定になっています。
SP(スマートフォン)の表示に合わせると、PC(パソコン)では左右がガラ空きに...
逆にPC(パソコン)に合わせると見せたい商品が大きすぎる...
なんてことはよくある話ですね。

そこで今回は、テーマ「Atlantic」を例にメインビジュアルの表示領域を考えてみたいと思います。

メインビジュアルの表示イメージ

まずは、メインビジュアルとして使用する画像を準備します。
今回は、以下の画像を例として使用したいと思います。

使用する元画像
例:使用する元画像(1600×800px/画角2:1)


各デバイスの表示イメージ

どのように表示されるかと言うと…
以下、PC(パソコン)での表示イメージとSP(スマートフォン)での表示イメージになります。

PCでの表示イメージ

PCでの表示イメージ
PC(パソコン)での表示イメージ

SPでの表示イメージ

SPでの表示イメージ
SP(スマートフォン)での表示イメージ

PC(パソコン)とSP(スマートフォン)では、表示される領域が違ってくることが分かります。

PC(パソコン)での可変イメージ

PC(パソコン)では画角2:1を保ちながら可変します。幅が縮まれば、同じ縮尺で高さも縮まります。

画像4
PC(パソコン)では画角をを保ちながら可変していきます

SP(スマートフォン)での可変イメージ

設定した高さ(500pix)に合わせて図版が縮小され、解像度によって左右がトリミングされます。

画像5
SP(スマートフォン)では表示領域がトリミングされています

まとめ

PC(パソコン)で表示されていても、SP(スマートフォン)では表示されず切り取られてしまいました。


と言うことは、、、

真ん中に
メイン商材が入っていることが重要!!


PC(パソコン)の幅のことを考慮し、真ん中にはメインの商材。左右の空きが気にならないように背景を入れた写真をセレクトすれば、どちらの表示でも完璧という訳です。

ショップの顔ともいえるメインビジュアル選びはとても重要です。
こちらを参考にしていただき、素敵な写真を設定しましょう!

みんなにも読んでほしいですか?

オススメした記事はフォロワーのタイムラインに表示されます!

ネットショップ出店パック「ECツクール」を新たに展開中! Shopifyサイトの制作なら500,000円(税込)から。まずはお気軽にご相談ください。

カンナート|Kannart
カンナートはWEB制作、事業開発、ECサイト運営を主にWEBに関わる要望にワンストップで対応している会社です。ネットショップ制作に関わるノウハウを提供する場としてnoteを公開しています。https://kannart.co.jp/