モーダル・商品名画像とは
盛田屋様 キャンペーン施策において、「よりどり」「定期購入」ページ内にて使用する画像パーツを指す。
例として、よりどり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に
③どろんとバーム
注釈 プロアテーゼ → プロテアーゼ
最後に
運用についてのルールなど、やり良い方法で都度更新・変更していく。
その際は、デザインチームならびに関連のメンバーに周知をする。
