ミサカ｜EC×Webデザイン

フリーランスのEC×Webデザイナー｜ECクリエイティブパートナー｜EC業界20年超｜ネットショップのLP・バナー・商品画像・LPOなど、ECまわりの制作・改善が得意｜EC制作の気づきやデザイン改善のヒント、ときどき日常🌿｜note更新中✍️

[ミサカ｜EC×Webデザイン @misaka_ec]

商品画像シリーズの第2回を公開しました！
今回は「1枚目の商品画像には、何を入れる？」がテーマです。

商品情報・特長や魅力・販促情報の3つに分けて、商品画像に入れる情報の考え方をまとめました✍️
https://t.co/o5k2VrvTKc

[ミサカ｜EC×Webデザイン @misaka_ec]

これは、EC運営あるあるですね👀

売れ行きが良かったからと追加発注かけたら、前回と微妙に仕様が変わっていた……なんてことも。
特に、仕入れ先からそのまま倉庫に入庫するような運用だと、店舗側が実物を確認する機会もなく、変更に気づかないまま販売してしまう可能性もあります。

そして思わぬクレームにつながることも。

追加時の確認、大切ですね✍️

[jack@shopify運営 @jack_eclog]

再入荷は、同じ商品だからこそ確認したい。
僕なら前回分と並べて、色・寸法・パーツを見比べる。
仕入れ先の商品名が同じでも、細部が変わっているかもしれない。
前の写真と説明のまま売っていいか。
入荷時にそこまで見たい。

[ミサカ｜EC×Webデザイン @misaka_ec]

EC制作・運営について発信するnoteを、これまでのnoteとは別にはじめました🙌

楽天市場・Yahoo!ショッピング・AmazonなどのECモールの商品画像・商品ページ制作を中心に、LPや店舗デザインまわりのことも、実務での経験をもとに書いていく予定です。

今回は「ECで商品画像はなぜ大事？」という記事を公開しました✍️
https://t.co/sXo1o13VNw

[ミサカ｜EC×Webデザイン @misaka_ec]

先日少し書いた、AIについて最近感じていることをnoteにまとめました✍️

企業でのAI活用や、制作の仕事で感じている変化、これからデザイナーの仕事はどうなっていくのか…など。
私自身もまだどうしていくか、探り探りです。

AIが当たり前になってきた今、デザイナーの仕事はどう変わる？｜ミサカ｜EC×Webデザイン @misaka_ec https://t.co/VGnRW0or8U

[ミサカ｜EC×Webデザイン @misaka_ec]

Amazonは全くの別物。制作側の人間としても、かなり感じます。
（楽天やYahoo!は比較的近いのですが）

楽天は、商品画像だけでなく、説明文欄も使いながら、縦長の商品ページ全体で商品の魅力や情報をしっかり伝えていくスタイル。

Amazonは、枚数の少ない商品画像の中で伝える情報に優先順位をつけ、特に前半の数枚で商品の特徴や魅力が伝わるように作成。
説明文欄は箇条書きやテキストで補い、さらにA+などで肉付けしていく。

楽天の商品ページをそのままAmazonにも展開というのは、そもそも仕様が違って難しいですし、逆もなかなかやりにくい。
同じ商品でも、モールに合わせて「どう見せるか」を最適化することが大切だと思います✍️

もうすぐプライムデー。
今から見直せる商品名や商品画像、商品情報など、しっかり整えて挑みたいですね！

[米沢洋平＠プロテーナム代表_ECコンサル @proyonezawa]

楽天で売れている商品を、そのままAmazonに出して
「思ったより売れない」という相談をよく受けます。

商品は同じでも、売れる理由が違うからです。
よくズレる5か所を1枚にしました。

[ミサカ｜EC×Webデザイン @misaka_ec]

@ec_gyomu_kaizen たしかにそうですね。
人が商品ページを見ればなんとなく理解できる情報でも、AIでは正しく拾ってくれるとは限らないですし🤔

これからは、人に分かりやすく伝えることに加えて、AIにも正しく商品情報を理解してもらえるように整えておく、という視点も必要になってきそうですね！

[ミサカ｜EC×Webデザイン @misaka_ec]

ECモール内だけでなく、
最近はChatGPTなどのAIに相談して商品を探すこともできるようになりました🤖

例えば、「予算〇円で、こんな用途に使える商品がほしい」と相談すると、条件に合った商品を提案してくれます。
（私の探し方が悪いのか、今はまだ精度やチョイスがイマイチですが）

今までは、まず楽天市場やAmazon、Yahoo!ショッピングなどのECモールにアクセスして、そこで商品を検索することが一般的でした。
でも、これからはAIに相談して候補を絞ってから、商品ページを見に行くという流れも増えていくのかも🤔

そうなると、モール内で見つけてもらうための工夫だけでなく、モールの外にいるAIに商品を見つけてもらうことも重要になりそうですね。

商品の探し方だけでなく、買い物の入口そのものが変わっていきそう🤯

[ミサカ｜EC×Webデザイン @misaka_ec]

楽天やYahoo!ショッピングなど、各モールのAIエージェントとやり取りしながら商品を探せるようになってきました🔍

「こんな商品がほしい」と伝えると、条件に合った商品をいくつか候補として挙げてくれます。

これまでECモール内では、検索結果の中でどう見つけてもらうか、どう選んでもらうかが大事でした。
でもこれからは、それに加えて、AIが挙げる候補に入ることも大事になってきそう。

ECでの商品探しも、少しずつ変わっていきそうですね🤔

[ミサカ｜EC×Webデザイン @misaka_ec]

AIについて、最近感じていること✍️

これまで仕事で関わった企業さんの中には、
「AIを活用していこう」というくらいではなく、「AIを使ってやるのが前提」くらいの温度感になっているところもありました。

世間ではAIへの関心や使い方にもまだまだかなり差があって、そもそも使う・使わない、生成AIが…といった話もあります。

でも、企業では「使わないほうが遅れていく」くらいの感覚になってきているのかも🤔
（そして敏感な層からは「うわ、AIだ…」と思われてしまうことも）

制作でも、何か作りたいものがあったときに、
まず「デザイナーに依頼しよう」ではなく、「これをAIでやるにはどうする？」から考える。

もちろん、すべての企業がそうではないけれど、
企業側のAI活用って、思っていた以上に進んでいるんだなと感じます。

そりゃ…デザイナーの仕事も変わってきますよね🥺

[ミサカ｜EC×Webデザイン @misaka_ec]

【商品画像】その画像の内容、スマホで楽に読めますか？

商品画像を作っていると、ときどき「この情報、全部1枚に入れるの…？」というくらい、テキストや要素が多いことがあります🤔

商品についていろいろ説明しようとすると、
「これも入れて、あれも入れて…」と、気が付けば情報量が多くなってしまうのもわかります。

また、制作する側は、PCの大きな画面で拡大しながら作業することも多く、
その状態では問題なく見えていても、スマホで見ると文字が小さかったり、情報が詰まって見えたりすることも。

だから、情報をただ全部入れるのではなく、ユーザーが無理なく読める文字サイズで、情報を整理して見やすくレイアウトする。
それでも情報が多すぎる場合は、削れるものがないか確認する。
ここは制作者の腕の見せ所です💪

特にご年配の方が見ることの多い商材なら、文字は大きく、分かりやすく！

制作画面だけではなく、実際にスマホで表示した状態でも確認しておきたいところです👀

[ミサカ｜EC×Webデザイン @misaka_ec]

詳しくありがとうございます！
検品を含めても20分ほどというのはかなり早い…！😳
そういう仕組みづくりをされているからこそだと思いますが、その分、商材によっては細かく調整したり、しっかり作り込んだりする時間も取れそうでいいですね。

これはますます、AIをうまく活用できているかどうかで差がつきそうですね✨

[ミサカ｜EC×Webデザイン @misaka_ec]

まさにAIのEC商品登録チーム！

一気にAIに任せるのではなく、
商品画像、説明文の作成から商品登録まで、まるで実際のEC業務を人が分業するように、
AIでも制作工程を細かく分けて、それぞれに担当とルールを持たせているところ、興味深いです👀

ECデザイナーとしては、人が制作・登録する場合と比べて、
クオリティやスピードがどのくらい変わるのかも気になるところです。

[佐藤 英介 著書「Yahoo!ショッピング完全攻略ガイド」出版 @wakainkyo]

メーカー提供画像（白抜きのみ）とカタログから、AIで商品画像や説明文まで作り込んで楽天にAPI商品登録する仕組み、作成完了。
あとはYahoo!ショッピングとネクストエンジン登録まで作れば完成。
そして、こういう大規模な処理をするとき一番大事なのは「作業を分ける」こと。
一つのプロンプトでAIに指示してもグチャグチャになるので、担当（サブエージェント）を決めて担当ごとの作業やルールをMDファイルで作り込んでいく。
今回の商品登録では、メイン画像だけで以下のように複数のAI社員が担当している。
・全体テイストを決める係（メイン画像以外も含む）
・文字入れするキャッチを考える係
・素材を元に当店デザインに則りメイン画像に配置する係
・文字入れを配置する係
・レイアウト崩れやデザインルール検品係

ClaudeCodeを効果的に使うには、まずフォルダ分けやファイルの整理がしっかりしているのが大前提。
その上で、MDファイルを適切に作り込むことが命だと思う。全体ルールはどこに記載するか、このプロジェクト全体でのルールは何か、各担当の作業範囲とやっていはいけないことは何か、などしっかりMDファイルを作り込むことで、ミスや無駄な作業が減って効率的に運用できるようになる。
なお担当を増やす判断は、指示漏れやミスが発生しているなら担当を分ける、というジャッジが良いと思っている。

[ミサカ｜EC×Webデザイン @misaka_ec]

これ、EC担当者あるあるですね。
商品ページを作るときに意識したいところです✍️

自分たちにとっては当たり前すぎて、アピールが抜けてしまう。
自分たちの商品を理解しすぎていて、説明が抜けてしまう。

商品をよく知っているからこそ、
これは「アピールすべき部分」だということ自体に気づけていなかったり、
「説明しなくてもわかる」と思ってしまったり。

でも、商品ページを見るのは、その商品を今日初めて知った人かもしれません。
その人の目線で、もう一度ページを見てみる👀

その人にとって、わかりやすいですか？
商品の良さはちゃんと伝わっていますか？
迷わず選べますか？
安心して買えますか？

作り手側の「当たり前」を、一度疑ってみることも大切だと思います😊

そしてこれからは、AIも商品情報を見に来る。
人にもAIにも、伝えたい情報はしっかり入れておきたいですね。

[藤井玲｜髭男社長｜メーカーのEC事業部 @higedan_AT]

ECの商品ページで一番もったいないのは、「こんなのわかるだろう」という勝手な誤解です。

自分は専門家。だけどユーザーはそうじゃない。
B2B事業しかやってこなかった担当者が、陥りがちです。

しかもこれからはAIが情報を取りにきます。
そこに情報がなければ、何も受け取ってくれません。

わからなければ質問してくれると思っているあなた。
そんな優しさはAIにはありませんよ。

[ミサカ｜EC×Webデザイン @misaka_ec]

楽天やYahoo!ショッピングなど、各モールのAIエージェントとやり取りしながら商品を探せるようになってきました🔍

「こんな商品がほしい」と伝えると、条件に合った商品をいくつか候補として挙げてくれます。

これまでECモール内では、検索結果の中でどう見つけてもらうか、どう選んでもらうかが大事でした。
でもこれからは、それに加えて、AIが挙げる候補に入ることも大事になってきそう。

ECでの商品探しも、少しずつ変わっていきそうですね🤔

[ミサカ｜EC×Webデザイン @misaka_ec]

これ、すごくわかります。

「文字をちょっと直すだけ」「画像を1枚差し替えるだけ」なのに、なんでそんなに…と思われがちですが、実際にはその前後にも作業が発生します。

作業箇所の確認、元データの準備、バックアップ、修正、書き出し、表示確認、報告など…
作業自体は数分で終わっても、一連の作業として考えると、それなりに時間がかかるんですよね。そしてどれも省けない。

外部に依頼するというのはそういうこと😌

それを少し高く感じてしまうのならば、簡単な更新は社内で対応できるようにしておくのも手ですね☺️

[ゆきたに／サイトを育てるパートナー @web_yukitani]

「文字を1行直すだけで、5,500円...？」

見積もりを見た社長の、この気持ちはわかります。1行ですから。ただ、制作側では、こう見えています。

──作業の中身──

・作業前のバックアップを取る
・該当箇所を直す
・PCとスマホ、両方で表示を確認する
・他のページに影響が出ていないか見る
・完了報告を書く

1行の裏に、だいたい30分〜1時間。金額は文字数ではなく、手順についているんです。

で、ここからが本題なんですが...この手順、外の人間が"他社のサイト"を預かって触る以上、省けません。でも、社内の方が自分のサイトを触るなら話は別で、テキストの差し替えくらいならレクチャーを受けた方が5分でできたりします。

外注が悪いわけでも、内製が正義でもなくて。「どこまでを社内で触るか」の線を引いていないことが、都度依頼の請求書を積み上げています。

1行5,500円は、高いのではなく、線を引いていない値段なんです。

[ミサカ｜EC×Webデザイン @misaka_ec]

@textstyleya ああ、ありますね😅
提出したデザインをAIで色違いにしたり、コンテンツ部分を変更したりして、「こんな感じにしてほしい」と修正案が届くことがありました。しかもクライアントは良かれと思ってやっているという・・・

[ミサカ｜EC×Webデザイン @misaka_ec]

楽天GOLDのトップページ、なつかしい！
自由に作り込めた時代は、店舗ごとに個性もあり、デザイナーの腕の見せ所な部分もあり、見ていて（作っていて）楽しかったです。

現在のトップページ作成機能になって、あまり知識のない店舗さんでも編集しやすくなったのは良かったのかなと思います。
ただ、当時と比べると、どうしても少し無個性な感じにはなってしまっていますが…（楽天側としては、UIを統一してお客さんを迷わせない意図もあるのでしょうけど）

Amazonと違い、楽天市場は商品だけでなく、「このお店で買いたい」と思って買うお客さんも多い。
だからこそ、トップページにこだわっている店舗も多いのだと思います。
自分のお店ならではの魅力や世界観を伝える、ブランディングの場ですし。

もちろん、商品ページの充実や回遊導線も大切ですが、
店舗としての魅力をどう伝えていくかという視点も忘れたくないですね☺️

[ゴトウアツシ / 株式会社インクワイアリー代表 @atsushi_510]

楽天市場などのモール流入を見ると、ほぼ商品ページからの検索です。
だからこそ、なぜトップページにこだわるのか。その疑問は当然あります。ランディングページやサムネイル、商品情報の充実さにこだわった方が効率的に見えます。

ただ、数年前まではGOLDサーバーが主流で、トップページリニューアルの依頼は本当に多かった。
考えてみると、事業者さんたちはブランディングにこだわりたかんだと思いました。

Amazon1強では感じられない、なぜこのショップで買ってくれるのか。企業の歴史や配送、アピールポイントを伝えたい。
過去には、楽天市場のトップページを企業ホームページとして使う企業も多かった。それほど、トップページは重要なブランディングだったんです。

今後は、運用していく中で、LPやページ改善は必須にしながらも、トップページやオリジナルコンテンツでいかに差別化を図るか。
物が溢れる楽天EC時代だからこそ、その戦い方が問われているのかもしれません。

[ミサカ｜EC×Webデザイン @misaka_ec]

9月も残りわずか。来月はAmazonのプライム感謝祭もありますね！

ところで、AmazonのA+コンテンツ、設定はできていますか？☺️

A+は、商品の魅力をより伝えるためにも、ぜひ活用したいところ。
ただ、A+にはAmazonの審査があり、申請から承認までに時間がかかることもあります。
さらに、審査でNGになれば修正して再申請。また審査を待つことになります…

イベントやセールの直前になってから慌てて設定しても、間に合わない場合も。

スケジュールを組むときは、制作期間だけでなく、審査や修正にかかる時間も考慮して、余裕を持って準備しておきたいですね😊

[ミサカ｜EC×Webデザイン @misaka_ec]

@satochan33333 フォローありがとうございます。フォローさせていただきました☺️

[ミサカ｜EC×Webデザイン @misaka_ec]

名前の表記を「misaka」から「ミサカ」に変更しました。
発信内容はこれまでと変わらず、EC制作や運営、デザインの話を中心に、ときどき日常も。

引き続きよろしくお願いします☺️