通販のページ管理者なら「そこそこ」使おうXd

ちょっと使えるだけで、大分ラクになるはず
「画像とテキストを組み合わせて商品ページを作るECモール」向け
具体的にどうやって「そこそこ」使うのか
ピクセルのズレを考えなくていい
画像劣化・色ボケが残念なところ

ちょっと使えるだけで、大分ラクになるはず

普段から商品画像の加工にPhotoshopや、バナーなどの制作でIllustratorも使ってます。それでも通販の商品ページ担当者は、Xdをそこそこ使えたほうがラクになると思うのです。
自社管理での、通販の商品ページ担当者というのは「ブラウザにAdobeにOfficeにエディタに、複数モールの一元管理システムなど、色んなものを立ち上げている事が多い（自分がそう）」ため、少しでも軽さをとった作業ができないかと行き着いた結論です。それとも普通はもっと分業化しているんだろうか？

「画像とテキストを組み合わせて商品ページを作るECモール」向け

もともとページの「プロトタイプ」を作るためのXd。もちろん本来の目的でも使っているのですが、メインの作業が「ECモールの商品ページを管理する」だけなのに、なぜXdを推すのか？

楽天（楽天RMS）や、ギフトモールなどを管理している方だったら、ものすごく共感いただけると思うのですが、例えば

楽天RMS：
html上でのimgタグ設置が、20個まで。
20枚以上の画像を入れたかったら、それらをまとめた縦長の画像を用意する必要があるし、その途中でテキストで説明したかったら、そのテキストも含めて画像にする必要あり（2021年5月現在）。

ギフトモール：
商品ページの構成が「上部には画像だけ、下部にはテキストだけ」と分かれている。
「『画像のすぐ下にテキスト』というのを繰り返す」というコンテンツを作りたかったら、そのテキストも含めて画像にする必要あり（2021年5月現在）。

今日では「商品画像に文字を重ねない、白抜きがいいよー」というAmazonスタイルが主流になりつつありますが、それでもコンテンツの一部としては「説明付き画像を、モールに合わせて作らざるをえない」のがという作業は、まだまだあるわけです。

具体的にどうやって「そこそこ」使うのか

作業手順としては

各ECモールの「コンテンツ最大width（ざっくり横幅）」を確認
各ECモールで掲載できる「imgタグの最大height（画像の上限height決めているところがあるようです）」を確認
「コンテンツ最大width」でアートボードを作り、そこに画像とテキスト流し込んでコンテンツを作成
「imgタグの最大height、もしくはキリのいいとこ」までコンテンツを作ったら、新しいアートボードを作って続きを作成
書き出し>すべてのアートボード　で書き出し形式（PNG,SVG,PDF,JPG）を各モールに合わせて書き出す

とまあ、あとは各ECモールに書き出し画像を貼り付けるだけです。一回データ作ったら、スマホ版、PC版と文字の大きさ・アートボードのサイズを変えて調整して同じように書き出してます。
これ、ひねりもなにもなく、本来のプロトタイプを作るかっこいい機能もほどんど使ってません。使いこなしているとは言い難いレベルです。ほんと「そこそこ」です。

「そんな説明画像つくるのなんて、フォトショなりイラレで、同じことしてスライスなりWeb書き出しすればいいだろ。」というご意見ごもっとも。
ただ、その高機能性からどうしてもPhotoshopやIllustratorでは重たくなってしまいます。
実際、自社EC管理の担当って、使うべきツールが多かったり、作業範囲が広くなりがち~~単なるブラック職種~~なのではと考えてます。推したい最大の理由は、やはり「作業の軽さ」なのです。
画像を相当枚数貼り付けても、重さを感じにくく大変助かってます。

ピクセルのズレを考えなくていい

これ、懐かしのFireworksでバリバリコンテンツ作ってた同世代さん（よっ、お互いもういい年だな。体には気をつけような。）なら、なおのこと余計共感いただけると思いますが「ピクセルずれ」が発生しにくいんです。
画像やオブジェクトを意図的にコンマ以下で設定するなんて事をしなければ、書き出したときに1pxの線がボケるというアレが発生しない！
ガイドも自動的に表示され、画像の位置を勝手に合わせてくれるので配置が楽。よけいな設定を考えずにコンテンツを作ることに没頭できるというのは、ありがたいことです。