デザイン全般
特有の名称や施策名
- 主キャン… その月の一番押したい施策
- 主キャン以外… 主キャン以外の施策
- よりどり… 対象商品を○点以上ご購入で○○％ＯＦＦの、キャンペーン施策名、または、その形式のキャンペーンの名称。
- ＹＰ…商品「よーぐるとぱっく 玉の輿」の省略名称
- 福箱…1，２月の施策のオトクなセットcp
- 創業祭…６月の施策の創業記念の特別なセットcp
- 休眠…しばらく購入にいたっていないユーザー向けの販促
制作の上で意識すること
盛田屋様のユーザーは年齢層が高めの為、極力分かり良く、見やすいページ、派手すぎない色使いを意識する。
また、最終的に２倍書き出しする事が主の為、画像のサイズや形式も意識する
（画像はpsd形式に変換済か、スマートオブジェクトは２倍にしても耐えられる画質か、など）
デザイン制作について
制作の流れについて
原稿 ＞ 見積もり ＞ 制作 ＞ 社内・社外校正 ＞ 修正 ＞ 校了データ反映 ＞ 薬事チェック反映 ＞ 画像書き出し ＞ コーダー連携 ＞ デザイン納品
原稿に沿って制作。DMの内容をweｂ用に見やすく、かつページが極力長すぎないように制作する。
長すぎるテキストの場合は、デザイナーが要約する場合も。
基本はDMの校了前のデータにて制作を開始。
後日内容や画像が変わることを想定した造りを意識する。
制作サイズ、仕様
施策は基本的には、pc/sp共通の画像コーディング。
750px幅での表示を想定の為、375pxで制作。2倍での書き出し設定をする。
ただし、CTAなど枠を付ける場合は、その分鑑みて制作、書き出しをする
サイズが上記外であったり、テキストにする箇所はディレクター、コーディング担当に別途お伝えする。
休眠の場合は、一部テキストはコーディングで対応する。
＜コーディング対応箇所＞
●カートボタン上、購入制限数「〈おひとり様●点まで〉
●注釈の文章
いずれもコーダーさんに連携の際はその旨お伝えする
制作フォントについて
- テキストは基本的に「游ゴシック」「游明朝」など可読性が高いものを選択
タイトルや見出しなどはDMのでデータを流用するか、似せたフォントにする - 金額のフォントは「DIN 2014」
- 通常の文章は「13px」、注釈は「10px」程度
記載の注意点
- 内容量（ 単位がミリリットルの場合は、必ず mL（mは小文字、Lは大文字）で表記
- 金額のフォントは「DIN 2014」
- 通常の文章は「13px」、注釈は「10px」程度
商品の画像
2025.1）足利さんがCCライブラリでストックしている画像を使用させてもらう。
CCアカウントのメールアドレスを足利さんにお伝えし、招待してもらい使用する。
CCライブラリから素材引用する際の注意点 ページ最下部に記載
過去施策から流用する場合は、一見わかりづらいリニューアル品もある為十分注意する
基本的にはDMの内容に合わせる
- ページの注釈最下部に下記を記載
※写真は撮影イメージです - 美白について掲載があれば下記も追記
※本ページにおける美白とは、メラニンの生成を抑え、しみ・そばかすを防ぐことを指します。 - いずれも先方薬事チェックに従う
注釈の位置
- 本文中にある「※」を受ける注釈かどうかに関わらず、基本は左端で統一
- 注釈文の短いものは右端に記載
- 注釈と注釈説明文はあまり離れないように、同セクション毎にまとめて掲載する
- 先方薬事チェックに従う
改行について
以下の要素が改行されてしまう場合は上の行に入れる。
- 注釈番号
- 句読点
- カッコ
- 文章の最後の一文字など
デザイン校正・修正について
社内校正とその修正
2025.1月施策現在）
社内の校正はFIgmaで作成。
Figmaは各自の下書（ドラフト）に保存して管理をする。
長い画像はプラグインを使用して配置する
例）Insert Big Image
書き出ししたカンプ画像はキノスラサーバーにUPして、sp実機で確認できるように別に用意する。
補足などはFigmaのコメント機能を使用。
ディレクターさんからの校正修正指示もコメントで入る為、修正をしたらスタンプで印をつける。
先方校正
先方はセキュリティ上、Figmaの確認できない環境の為、キノスラサーバーのデザインカンプのリンクのみを共有する。
先方は修正指示をPDFで作成される為、縦幅が長すぎない、セクションごとに区切ったものが望ましい。
1ページすべて載せたカンプ、それを分割したカンプを合わせて送るのも◎
デザイン納品
格納先
デザイン > 納品用 > cpyymm > ぺージ >（or バナー）
※cpyymm：2024年12月号ならcp2412
- カンプは不要
- zipにまとめなくてOK
- タスクの期日までに上記の下層にキャンペーンやタスク別のフォルダを作成
- psdならにassetsデータ、構築で使用した画像を格納
- CCライブラリの素材はすべて埋め込みをする（やり方は下記に記載
CCライブラリから素材引用する際の注意点
クラウドドキュメントとして読み込まれるため、Eドライブに格納して誰かに共有する際やクライアントに納品する際には下記を実行してから保存してください。
レイヤー > スマートオブジェクト > リンクされたすべてのアイテムの埋め込み
