家具の個性を見せるために、ECサイトを黒やグレーでまとめたい。参考にしたサイトの雰囲気は好きだけれど、自社の商品写真でも同じように伝わるのかは分からない。そんなときは、色だけを先に決めず、代表商品の写真と画面を一組で試してみましょう。
商品の形や質感を伝える写真と、商品名や選び方を案内する画面は、同じページの中で働きます。東大阪市の株式会社LabLabの公開制作事例を手掛かりに、家具を主役にしながら、買い物に必要な案内も残すための相談方法を考えます。
黒やグレーにする前に、何を主役にするか決める
「モノトーンにしたい」と考えた理由を、商品から言葉にしてみます。金属の存在感を見せたい、木の表情を感じてほしい、すっきりした形を邪魔したくない。何を見てほしいかが分かると、写真と周囲の色をどう合わせるかを相談しやすくなります。
参考サイトに使われている家具と、自社の商品では、色も形も写真の背景も違います。黒い背景を採用したことだけで同じ印象になるとは限りません。たとえば黒い脚の椅子なら、背景の中で輪郭が分かるか、座面の素材へ目が向くかを、実際に使う写真で見ます。
一方、商品を選ぶ人は雰囲気だけを見ているわけではありません。どの商品で、何を選べて、次にどこを押すかも必要です。商品を目立たせることと、案内を消すことを同じ判断にせず、写真と画面それぞれの役割を残します。
東大阪市のLabLabでは、家具の個性から画面を考えた
株式会社LabLabの制作事例では、自社の販売経路に力を入れるため、ECサイトを制作したいという相談が公開されています。扱うのは、シンプルで力強い印象を持つインダストリアル家具です。商材に合うデザインと、写真を使った見せ方を考えるところから制作しました。
装飾を抑え、家具の写真を中心に据えたことが、公開事例に記されている制作上の選択です。画面自体の表現が強くなりすぎず、家具の個性へ目が向くことを目指しました。レイアウトには少し独自の見せ方を加え、シンプルさの中で商品とサイトの印象がつながるようにしています。
配色に黒と濃いグレーを使ったのも、家具の形や雰囲気を写真の中で際立たせるためです。色だけを単独で選んだのではなく、装飾、配置、写真との関係を一緒に整えています。
自社で参考にするときも、同じ色を指定する前に、「この商品の、どの特徴を見せたいか」を決めてみましょう。公開事例の制作意図を手掛かりに、自社の写真と商品構成へ合う見せ方を考えます。
商品の写真とサイトの背景を、一組で見てみる
最初の試作には、代表商品を一つ選びます。すべての商品写真がそろっていなくても、今回見せたい家具の特徴が分かるものから始められます。撮影前なら、現在の写真と商品そのものを見ながら、どんな場面が必要かを相談する方法もあります。
全体の写真では形や印象、近くからの写真では素材の表情、置いた場面の写真では周囲との関係、といった役割を考えます。そのうえで、サイトの背景や余白の中で、見せたい部分が分かるかを見ます。写真を小さく並べた場合と、大きく置いた場合でも、受ける印象は変わります。
画面の装飾にも目を向けましょう。写真の周囲に大きな飾りや文字を置いたとき、まず目に入るのは家具か、それとも画面の模様か。好きな印象になったかに加え、主役にしたいものへ目が向くかを言葉にします。
試すのは、明るい色と暗い色のどちらが正しいかを決めるためではありません。自社の写真で伝えたい特徴と、その画面で買い物をする人の見方が合うかを確かめるためです。
静かなデザインでも、商品を選ぶ案内は残す
商品写真を大きく見せ、画面をすっきりまとめる場合も、商品名、価格、選べる内容、次の操作がどこにあるかを確認します。文字を控えめにした結果、商品名を探し直す必要があったり、選択欄を見落としたりするなら、その部分もデザインの相談対象です。
色や張り地などを選ぶ商品なら、何が選択されているかを、写真と選択欄の両方で見ます。見た目を整えることに加え、選択中の内容を読み返せるかを試作で確かめます。選び方の説明を増やす必要があるかも、商品を初めて見る人の立場で考えましょう。
パソコンの大きな画面で写真を確認した後は、スマートフォンでも、商品を見て選ぶところまで進んでみます。写真の印象を保ちながら、商品名や選択内容を見つけられるかを見ます。実際の注文や決済をしなくても、相談時には公開画面や試作から気になるところを伝えられます。
写真が伝える内容の正確さや、寸法などの商品説明を詳しく整理したい場合は、家具の商品ページで写真の次に見せたい情報も参考になります。今回のデザイン確認では、それらの案内を写真や背景の中で読める形にすることへ目を向けます。
参考サイトと自社の商品を並べ、一画面の試作を相談する
参考サイトがあれば、「黒が好き」だけでなく、写真の大きさ、余白、装飾、商品を選ぶ場所のどこに魅力を感じたかを添えます。そのうえで、自社の写真を当てはめた試作を見たいと伝えましょう。
| 試すもの | 用意・共有する内容 | 一画面で見ること |
|---|---|---|
| 代表商品と写真 | 見せたい家具と、形・素材・雰囲気が分かる写真 | 伝えたい特徴へ目が向くか |
| 背景と装飾 | 参考にした色、余白、装飾と、好きな理由 | 商品と周囲の表現の強さが合うか |
| 文字の案内 | 商品名、価格、選べる内容の表示 | 写真の近くで必要な内容を読めるか |
| 選ぶ操作 | 選択欄と、次に進む場所 | 選択中の内容と次の操作が分かるか |
方向性が決まったら、ほかの商品へ広げる前に、写真の傾向が異なる商品でも同じ見せ方が使えるかを確認します。濃い商品と明るい商品、大きさや形の違う商品で調整が必要なら、その範囲も制作会社へ相談できます。
商品の魅力から、ECの見せ方を相談する
写真や色の指定が完成していなくても、「この家具を主役にしたい」という意図から相談できます。参考サイトと代表商品が分かれば、今回何を試したいかを伝えやすくなります。
家具の形や質感を見せる、落ち着いたECサイトにしたいと考えています。モノトーンの参考サイトはありますが、自社の写真と背景、文字をどう合わせるかは決まっていません。代表商品を使い、商品を選ぶところまで一画面で試す相談はできますか。
東大阪市で家具のECサイトを検討している方は、東大阪市のホームページ制作・ECの相談から、扱う商品と見せたい特徴、今ある写真や参考サイトをお知らせください。みやあじよが、商品をどう伝え、どう選んでもらうかを伺い、写真・原稿・画面の制作範囲を一緒に整理します。
