Shopify Manual メイン写真の挿入
ここではShopify商品ページへの写真挿入の方法と必要条件を説明します。このページで紹介されいている方法は、下記画像の示す通り 「商品のメイン写真=ページ上部の買い物ボタンの横に出てくるメイン画像のみ」に適用されます。商品説明のエリアに写真を挿入する際の方法はここで紹介しているものとは全く異なりますのでご注意ください。
挿入する写真が満たしていなければならない条件
- 縦横比が1:1の「真四角」な画像であること
- 十分な画素数を持った高画質な画像であること(推奨サイズは1024ピクセル四方以上)
- メーカーが公開している公式写真または自社で撮影した写真、あるいは顧客が撮影し掲載許可を得た写真
- [ダメ!!]ネットで適当に拾ってきた写真(他の販売業者が撮影、加工したものを盗用するのは絶対不可!)
- [ダメ!!]商品単独で写っていないもの(用例写真などは原則使用不可!「え、写真ではロープもついてるじゃん」等の誤解を生みます)
- [ダメ!!]極端に解像度が低いなど低品質な画像(商品を手に取れない顧客にとって写真は印象のほぼ全てです。適当な写真厳禁!)
写真の挿入方法
メイン写真の挿入はドラッグ&ドロップで簡単に出来ます。ブラウザ上に写真をドラッグするので、デスクトップ上や任意のフォルダなど、ドラッグし易い場所にあらかじめ写真を用意しておきます。
Shopify管理画面の左側のメニューにあるProductsからAll Productsに入り、写真を挿入したい商品を検索します。ここではAxiomという商品を品名で検索していますが、SKU(品番)で検索したり、Vendor(メーカー)やTag(商品の分類を示す特定の文字列)でフィルタリングして探すなどのことも出来ます。検索結果から目的の商品を見つけたら、クリックして商品の詳細編集画面を開きます(次の画像参照)。
TitleとDescriptionは無視し、2番めのImagesボックスを使用します。事前に用意しておいた画像を上記のようにドラッグ&ドロップではめ込むだけ。サムネイルが表示されたら画像の挿入は終了です。写真はドロップした時点でサーバーに送られるため、写真挿入後にSaveなどをする必要はありません。逆に言うと、写真を削除した場合も取り消しは出来ませんので注意してください。上部の目のマーク(View)で今写真をはめた実際のページをプレビュー出来ます。挿入の済んだ画像はローカルに保存する必要はありません、Shopifyのサーバーを信頼する格好をとっています。
写真を複数枚挿入した場合には上記のように表示されます。この時、一番左にある大きめのサムネイルが、ページを開いた時に表示される画像です。他の画像はスライドで切り替えたら表示されるようになります。この時、画像の順番が非常に重要です。例示しているAxiomの場合は、正面画像が初めから出ている状態にしたいので、2番めの写真を一番左に持っていきたいです。ドラッグで簡単に写真の順番を変える事ができます。
写真挿入に関するQ&A
ここではこれまでに寄せられた写真挿入に関する質問や、過去に発生した問題をベースとしたケーススタディを掲載しています。操作方法自体は上記の通り非常に簡単ですが、下記のような実際の事例に基づく生の声を蓄積するのが最も効果的で、会社の財産になります。何かあれば是非追記してください。
Q:写真は何枚くらい嵌めるのが適切?
A:基本的に1枚で構いません。ここで挿入する商品画像は商品一覧や検索結果にサムネイル表示されたり、詳細ページを開いたりした時に一番最初にお客さんの目に飛び込むものです。即ち、いわば「看板」ではあります。しかし
「決してここの写真で商品を説明するわけではない、むしろしてはいけない」
ことを念頭に入れておいてください。目的買いのお客さん相手ならぶっちゃけ何やっても構いません。買う気ですから。そこまでの熱を持ってない人にインターホン越しに畳み掛けるような商品説明をしてもドアは決して開きません。ここで嵌めている写真は看板です、説明ではありません。
入れるとすれば服の前後ろや例のAxiomのようなメイン級の画像をメーカーが複数枚用意している場合のみです。
Q:1024px四方とかそんな大きなサイズの画像ないんだけど?
A:販売ページを公開し、とにかく販売開始に漕ぎつけるまでは低解像度の写真でも構いません。また、わざわざ撮影し加工するような手間をかけるにしても、そのコストを回収するのだけで時間がかかりそうな商品(価格がとても安いなど)の場合も間に合わせの画像で構わない、という判断が正しい場合はままあります。ですが、原則としてはひとまず間に合わせで販売を開始し、ちゃんとした画像を後から用意する、というのが正しい答えになります。実際のボーダーラインの目安としては、1024pxまでの写真を用意できないにしても、512pxを下回るようでは確定版の画像としては弱いです。
Q:商品が細長いし、真四角にこだわる必要あるの?
A:
あります。
メイン写真に真四角の画像以外を使用することは
絶対にしないで
ください。ボートフックやマストなど、細長い商品は確かにありますが、そのまま細長い画像を使用してしまうとページ上部の写真領域が横または縦に伸びてしまい、詳細説明やレビューの表示領域が遥か下の方に追いやられたり、写真右の買い物かごボタンその他が適切に表示されなくなったりします。また、前述の通りこれは随所でサムネイル(=もちろんそれらは真四角の領域)にも使用される画像です。真四角の領域に表示されることを想定していない画像の使用は絶対厳禁です。例えばボートフックなら、全体が写った写真を対角線上に斜めに入れるのが基本です。この際、右上がりか左上がりかも既存画像を参照して可能な限り統一してください。下はメイン写真を真四角に統一しなかった場合の例です。「最近見た商品」のところに出てくるサムネイルが見事に凸凹になっています。本来は赤枠で示したように真四角の写真が並ぶべき場所です。これはAmazonなどの大型モールサイトでも徹底的に言われることで、真四角の画像を入れるというのは全世界共通のページ作成における必須事項です。
Q:add image from URLってボタンが見えるけど、別サーバーから画像を読み込むこともできるってこと?
A:出来ません。Shopify側のサポート窓口に正にそう問い合わせましたが、技術的に不可能ではないがやめておけと一蹴されました。add image from URLで別のサーバーから画像を読み込んだ場合も、一度読み込んだ画像はShopifyのサーバーに送信され、以降はShopifyのサーバーからロードされるようになります。このように、経路を問わず挿入した写真は自動保存されますし、
削除した写真はサーバーからも削除されるため、一旦削除してしまうと再アップ(再挿入)するしかなくなります。
くれぐれも注意してください。