ホームページ・ECサイトのFV＆商品画像デザイン｜【デザイン制作実績】餃子商店つむぎ様

餃子商店つむぎ様のホームページとオンラインショップで使用する、ファーストビュー（FV）・商品画像を制作しました。

今回の制作で大切にしたのは、ページを開いた瞬間に「おいしそう！」「食べてみたい！」と感じてもらえること。

以前のオンラインショップでは、調理前の餃子の写真が使用されており、商品の魅力が十分に伝わりにくい状態でした。そこで、焼き上がった餃子の写真を大きく使用し、手作り餃子のおいしさが視覚的に伝わるデザインへ一新しました。

ホームページとオンラインショップ、それぞれの役割に合わせながら、商品の魅力を伝え、購入を検討してもらいやすい見せ方を意識しています。

制作概要

項目	内容
店舗名	餃子商店つむぎ様
業種	食品販売・オンラインショップ
ホームページURL	https://tumugi.biz/
オンラインショップURL	https://gyozaya-tumugi.shop/
制作内容	ホームページFV・オンラインショップFV・商品画像デザイン
デザイン	ネイビーを基調に、オレンジやゴールドを取り入れたデザイン
制作時に意識したこと	食欲をそそる写真の見せ方・ブランドの魅力・スマートフォンでの視認性・購入を検討しやすい商品訴求

デザイン・制作のポイント

01｜食欲をそそる、オンラインショップのファーストビュー

オンラインショップのファーストビューには、こんがりと焼き上がった餃子の写真を画面いっぱいに使用しました。焼き色や皮の質感が伝わる写真を大きく見せることで、ショップを訪れた瞬間に商品の魅力が伝わるようにしています。

また、「工房で一つひとつ丁寧につくる、手作り餃子をご自宅へお届け。」というキャッチコピーを配置。手作りへのこだわりと、自宅で楽しめる商品であることがひと目でわかるようにしました。

ネイビーを基調に、オレンジやゴールドをアクセントとして取り入れ、餃子の焼き色が引き立つデザインに仕上げています。

02｜ホームページのFVは、食卓で楽しむイメージを大切に

ホームページのファーストビューでは、箸で持ち上げた餃子の断面が見える写真を大きく使用しました。中の具材や皮の質感まで伝わる写真を選び、実際に食べる瞬間をイメージしてもらえるようにしています。

キャッチコピーは「あなたの食卓に、もう一つの台所。」その下に「忙しい日も、手作りの美味しさを食卓へ。」というメッセージを添えました。

オンラインショップでは商品の魅力と購入意欲を重視し、ホームページではブランドの想いや、日々の食卓に寄り添う商品であることを伝える。

それぞれの役割に合わせて、写真とメッセージの見せ方を変えています。

03｜調理前の写真から、食欲をそそる商品画像へ

以前の商品画像には、調理前の餃子の写真が使用されていました。しかし、オンラインショップでは実際に商品を手に取ることができないため、写真から「どんな料理を楽しめるのか」を想像してもらうことが大切です。

そこで今回は、焼き上がった餃子の写真を中心とした商品画像へ変更しました。お皿に盛り付けられた餃子のおいしそうな見た目を伝えることで、購入後の食卓をイメージしやすいデザインにしています。

04｜スマートフォンでもわかりやすい商品画像

オンラインショップの商品画像は、スマートフォンでの見やすさも意識しました。商品一覧やランキング表示では、一つひとつの画像が小さく表示されることもあります。

そのため、餃子の写真をできるだけ大きく配置し、商品名や特徴もひと目でわかるように整理しました。小さな画面でも商品の違いや魅力が伝わり、気になる商品を選びやすいデザインを目指しています。