［盛田屋様］モーダル・商品名　制作について（改版）

2026/1/162026/1/19

モーダル・商品名パーツ画像とは

盛田屋様　キャンペーン施策において、「よりどり」「定期購入」ページ内にて使用する画像パーツを指す。
例として、よりどりcpでは下記掲載画像のような扱いをする。
①「詳細を見る」をクリック(or タップ)にて、POPUPが開き、簡易の商品情報が記載されたモーダル画像を見れる
②商品画像を指す、商品名（及び容量、販売名など）が記載された画像

モーダル画像

盛田屋様　キャンペーン施策においての、モーダルは、主に「よりどり」「定期購入」ページにて使用する。
いずれも、「商品詳細はこちら」でPOPUPが開く仕様。

構成内容

商品コピー
商品名
内容量（単位がミリリットルの場合は、必ず mL（mは小文字、Lは大文字）で表記
★マーク
こんな方におすすめ！
イメージ画像
注釈がある場合は、右下にテキストを右揃えで記載
【医薬部外品の場合】内容量の後に〈医薬部外品〉を追記
【医薬部外品の場合】★マークの後に、[販売名：NNN（名称）]を追加

また、先方から指示などあれば効能などを追加する場合もある

商品名パーツ画像

商品名は、主によりどりページにて使用する。

医薬部外品の例

構成内容

商品名
内容量（単位がミリリットルの場合は、必ず mL（mは小文字、Lは大文字）で表記
★マーク
【医薬部外品の場合】内容量の後に〈医薬部外品〉を追記
【医薬部外品の場合】★マークの後に、[販売名：NNN（名称）]を追加

モーダル画像の作成について

デザインデータ

先祖返りのトラブルがしばしば起こった為、2026年1月号キャンペーンよりFigmaへ移行。
https://www.figma.com/design/oTCL6PF4SV6cARAlqLemOu/TOF_all_modal_item-name?node-id=0-1&t=ZLb8inGfunbCCul7-1

サイズ

PC　横幅 1000px（ドロップシャドウ含む）
SP　横幅 930px（ドロップシャドウを含まない）
※縦幅はコンテンツに合わせて変動（オートレイアウトで制御）

オートレイアウトによる制御

モーダル画像のレイアウトはFigmaの機能のオートレイアウトによって制御しており、画像の高さを変更したり文字数を増やしたるすることで、モーダル画像の縦幅自動的に変更するようになっている。

また、新規でモーダル画像を作成する際は下記のパターンから近いものを複製して作成する。

パターン①　商品コピー上部 / 詳細と画像が並列

パターン②　商品コピー上部 / 詳細と画像が並列 / 医薬部外品項目

パターン③　商品コピーと画像が並列

パターン④　商品コピーと画像が並列 / 医薬部外品項目

パターン⑤　アイコン追加

パターン⑥　特殊レイアウト

レイヤー構造

オートレイアウトによって制御をしているため、基本的にレイヤーは崩さないようにする

modal_nnnnnn（PCサイズレイヤー）
└wrap_shadow（ドロップシャドウレイヤー）
　　└modal_nnnnnn_sp（SPサイズレイヤー）
　　　├商品コピー　※1 パターン③④の場合はtext（テキスト囲みレイヤー）レイヤーの中に入れる
　　　└container-wrap（下部コンテンツ囲みレイヤー）
　　　　├container（並列制御レイヤー）
　　　　│├text（テキスト囲みレイヤー）
　　　　││├name（商品名囲みレイヤー）
　　　　│││├商品名
　　　　│││├iyakubugai（医薬部外品アイコンレイヤー）
　　　　│││└starアイコン　※2 オートレイアウトを無視
　　　　││└recomend（こんな方におすすめ！レイヤー）
　　　　││　├title（タイトルレイヤー）
　　　　││　└list（全項目囲みレイヤー）
　　　　││　　└text（項目並列制御レイヤー）　※3 項目を増やす場合はこのレイヤーを複製する
　　　　││　　　├checkアイコン
　　　　││　　　└項目内容
　　　　│└img_wrap（イメージ画像囲みレイヤー）　※4 高さ指定する場合はこのレイヤーの最小高さを入力
　　　　│　└img（イメージ画像マスクレイヤー）
　　　　│　　└画像素材
　　　　├icon　※2 オートレイアウトを無視
　　　　└注釈

※1 パターン③④の場合はtext（テキスト囲みレイヤー）レイヤーの中に入れる

画像と並列になるレイアウトのため、テキストを囲むレイヤーの中に入れる

※2 オートレイアウトを無視

オートレイアウトの制御を無視して自由な位置に配置したいものは、『オートレイアウトを無視』を適用して配置する。
ただし、レイヤー構造は基本的に変更しないようにする。

※3 項目を増やす場合はこのレイヤーを複製する

checkアイコンと項目内容（テキストレイヤー）を並列にレイアウトしているレイヤーになるため、項目を増やしたい場合は個別にコピーするのではなく、textレイヤーを複製して入力する。

※4 高さ指定する場合はこのレイヤーの最小高さを入力

画像の高さはテキストの行数や項目数によって可変するようになっており、高さの最小値は400pxに設定している。
もし、左側のテキストより画像の高さを伸ばしたい場合は、最小高さに任意の画像の高さ＋10px（上部余白分）の数値を入力。

アートボードの順番

データを管理しやすくするために、下記の通りにアートボードを並べる

アートボード
→ 若い番号順で左上から8個ずつ整列
→ 間の番号の商品が追加になった場合は、追加分だけ右にずらす
レイヤー
→ 若い番号順で上から組む

書出し方

作成したモーダルを書き出す際、下記の手順に従い、追加・調整した画像のみを書き出す。

PC

レイヤーパネルから任意のモーダルを選択
エクスポートパネルで、『1x / JPEG』を設定して『○レイヤーをエクスポート』ボタンを押す
『E:\共有ドライブ\02.コンサル･制作事業\02.進行中案件\10.豆腐の盛田屋様\02.サイト構築\00.季刊誌\商品説明モーダル画像\都度更新date\モーダル画像\new_modal』へ書出しをする

SP

検索（Ctrl+F）に『_sp』と入力
レイヤーパネルから任意のモーダルを選択
エクスポートパネルで、『1x / JPEG』を設定して『○レイヤーをエクスポート』ボタンを押す
『E:\共有ドライブ\02.コンサル･制作事業\02.進行中案件\10.豆腐の盛田屋様\02.サイト構築\00.季刊誌\商品説明モーダル画像\都度更新date\モーダル画像\new_modal』へ書出しをする