モーダル・商品名画像とは
盛田屋様 キャンペーン施策において、「よりどり」「定期購入」ページ内にて使用する画像パーツを指す。
例として、よりどりcpでは下記掲載画像のような扱いをする。
①「詳細を見る」をクリック(or タップ)にて、POPUPが開き、簡易の商品情報が記載されたモーダル画像を見れる
②商品画像を指す、商品名（及び容量、販売名など）が記載された画像
モーダル画像について
盛田屋様 キャンペーン施策においての、モーダルは、主に「よりどり」「定期購入」ページにて使用する。
いずれも、「商品詳細はこちら」でPOPUPが開く仕様。
画像サイズは、PC 幅1000px（ドロップシャドウ含む）で制作、縦幅は成り行き。
SPは、幅930px（ドロップシャドウを含まない）
PC・SPともにデザインが共通の為、psbも共通。
同じアートボード内で制作し、assets設定で書き出しファイルを分けている。
構成内容は下記の通り。
・商品コピー
・商品名
・内容量（ 単位がミリリットルの場合は、必ず mL（mは小文字、Lは大文字）で表記
・★マーク
・こんな方におすすめ！
・イメージ画像
・注釈がある場合は、右下にテキストを右揃えで記載
医薬部外品の場合、上記に下記を追記
・内容量の後に〈医薬部外品〉を追記
・★マークの後に、[販売名：NNN（名称）]を追加
また、先方から指示などあれば効能などを追加する場合もある
商品名について
商品名は、主によりどりページにて使用する。
画像サイズは、pc 幅230px、縦60px程度。
spはｐｃの２倍のサイズ。
モーダル同様、PC・SPともにデザインが共通の為、psbも共通。
同じアートボード内で制作し、assets設定で書き出しファイルを分けている。
構成内容は下記の通り。
・商品名
・内容量（ 単位がミリリットルの場合は、必ず mL（mは小文字、Lは大文字）で表記
・★マーク
医薬部外品の場合、上記にプラス下記を追記
・内容量の後に〈医薬部外品〉を追記
・★マークの後に、[販売名：NNN（名称）]を追加
管理方法
いずれも先祖返りのトラブルがしばしば起こった為、24年12月よりデータを一か所にまとめて運用を開始。
画像 ならびに psdは最新のもののみ格納し、更新していく
■ 管理一覧表
各画像の一覧表。変更などがあれば都度更新していく
📒TOF_モーダル管理表
https://docs.google.com/spreadsheets/d/19WKKpKahmYe1nuyEiDpf3vE6NwZAt0fwRAXlFmoQKnM/edit?gid=0#gid=0
A列にメモや補足を記載。
旧商品、終売商品、季節限定の商品、一時的に制作したモーダルの施策月なども記載。
※過去素材を流用する際は先祖返りにくれぐれも注意する
■ データ格納先
書き出し画像データ、psdともに最新のものをEドライブに格納
最新のもののみ格納し、更新していく。
📁格納先
E:\共有ドライブ\02.コンサル･制作事業\02.進行中案件\10.豆腐の盛田屋様\02.サイト構築\00.季刊誌\商品説明モーダル画像\都度更新date
\モーダル画像
\商品名パーツ
モーダル、商品名それぞれ、二つの階層で分ける
・最新の書き出し画像 をすべて入れたフォルダ
・最新のPSD（そのassetsフォルダ）
データの運用ルール
・「都度更新date」フォルダには、書き出し画像、psdとフォルダを分けて運用する
・いずれも最新のもののみ格納し、更新していく
■ 画像ファイル
モーダル画像・商品名パーツのファイル名称は基本的に
商品（発番コード）番号（X…商品番号）を入れることで、分かり良く、対象の検索をかけやすくする
いずれもモーダル管理表管理表のD-G列に吐き出された名称と同様にする
| 種類 | 書き出し名称 |
|---|---|
| モーダル画像 | modal_XXXXXX.jpg modal_XXXXXX_sp.jpg |
| 商品名パーツ | item_XXXXXX_pc.jpg item_XXXXXX_sp.jpg |
書き出された画像はコーダー連携前に、いずれも「new_modal」「new_itemname」のフォルダに格納する
商品番号について
商品番号、施策品番についは、施策月に共有されるコード表に則る
例） 📁25年3月施策の場合
E:\共有ドライブ\02.コンサル･制作事業\02.進行中案件\10.豆腐の盛田屋様\02.サイト構築\00.季刊誌\2503\07.商品画像･コード表
■ PSD
・新規の商品の制作、更新する場合は、別ファイルにて制作。
最終データのパーツのみを「都度更新」ファルダ内のデータに反映する。
・更新したpsdはファイル名の末に更新月を入れる
・先祖返り防止の為、旧assetsフォルダは「削除」
■ 例外
その月の施策によって、モーダル内に 「よりどり初登場」など一時的に入れることがある。
その際は、下記のように対応
例）24年11月施策の場合
・モーダル画像・商品名パーツのファイル名（X…商品番号）
「modal_XXXXXX_pc_2411」（pc/sp）
「item_XXXXXX_pc_2411」（pc/sp）
・psdの格納先は施策月の「ページ」に格納
・モーダル管理表管理表のA列に施策月を記載する画像
■ 共有
＜社内＞
・コーディング連携時に、施策に必要なaseetsを共有する。
＜社外＞
・新規で制作した場合は、月末に該当部分のＰＳＤのみを納品する
先祖返りのご指摘事例
①豆乳液 自然生活
g→mLに
②豆乳よーぐると泡クレンジング
80g→150mLに
③どろんとバーム
注釈 プロアテーゼ → プロテアーゼ
④金のまゆローション
イメージカット
⑤金のまゆエッセンス
イメージカット
⑥金のまゆクリーム
イメージカット
⑦豆花水 薬用しゃくなげ花酵母おまかせジェル
販売名のスぺース 全角
品番変更時のモーダル画像の名称変更ルール（エンジニア / デザイナー）
品番が変更されると、モーダル画像の名称を変更する必要がある。
通常進行通りだと、最初に気づくのはエンジニアになるが、
PSDのアセット名を変更する必要があるため、デザイナーさんに連携をする。
※エンジニアが任意のタイミングで最新画像のファイル名のみ変更してしまうと、
デザイナーがデータを更新した際に使用すべき画像が古い品番で書き出され、
コーディングのタイミングで先祖返りが発生してしまうため、PSDのアセット名称から変更する。
※★マーク有無の調整等で画像を更新することがままあるため、上記ルールを徹底する。
エンジニアの対応
新品番に変更された商品を見つけた際、
デザイナーさんにアセット名の変更を依頼する。
（画像が表示されなくなるため、気づくかと思います。）
↓連絡例
https://chat.google.com/room/AAAA1IkegI8/dAwvV2i1dAY/hIJF33MSzW8?cls=10
デザイナーの対応
エンジニアから上記連絡があった際、
連絡通り、PSDのアセット名を変更して、
エンジニアに報告する。
↓報告例
https://chat.google.com/room/AAAA1IkegI8/dAwvV2i1dAY/h0dluI_ts6g?cls=10
最後に
運用についてのルールなど、やり良い方法で都度更新・変更していく。
その際は、デザインチームならびに関連のメンバーに周知をする。
