【ページタイトル】

ブランドSHISEIDOは2020年12月にデザインガイドラインが一新され、
これまでのLP制作ルールが変更になりました。
テキスト類はほぼすべて画像ではなくテキストで構成します。

以下はブランドSHISEIDOガイドラインで定められた表現ですので利用してください。
なお、すべてこのフォントセットで構築されるということでもないそうなので、PSDの設定に従ってください。

■フォントセット

文字サイズによって、font-weightとline-heightの組み合わせを定めたものです。
htmlの文書構造とは関連付けはしていませんので、該当のサイズの設定をローカルのsassでインクルードして利用してください。

▼フォントサイズ42px

世界中で愛され、支持されている
SHISEIDO アルティミューン

@include fsXL();

▼フォントサイズ32px

アルティミューンは今お使いのスキンケアに
プラスオンする新しい美容液

@include fsL();

▼フォントサイズ24px bold

独自のレニュラテクノロジー＋*、
SAKURAブライトテクノロジーを搭載。
シミやそばかすを防ぎます。

@include fsMb();

▼フォントサイズ16px（平文サイズ）

アクティブ4MSKがメラニン生成の引き金となる
酵素チロシナーゼのはたらきを複数ステップでブロック。
メラニンの生成を抑え、シミ・そばかすを防ぎます。

@include fsDef();

■カート周りの情報セット

発売日、商品名、詳細情報、価格、カートボタンのセットです。

商品名は半角スペース区切りごとにspanで囲って変なところで改行されるのを防ぎます。

価格上、およびレフィル上のマージンはそれぞれのページに合わせて調整してください。

文書構造的に可能ならば、商品名にはpではなくh3をあててSEO対策を行います。

<div class="cmn_cv"> <p class="cmn_cv-flag">NEW 2月1日発売</p> <p class="cmn_cv-name"><span>SHISEIDO </span><span>ホワイトルーセント </span><br /><span>イルミネーティング </span><span>マイクロS </span><span>セラム</span></p> <p class="cmn_cv-detail">（医薬部外品） 美容液 30mL</p> <p class="cmn_cv-price"><em>12,650<span>円</span></em><span class="cmn_cv-taxin">（税込）</span><span class="cmn_cv-postage">送料無料</span></p> <div class="cmn_cv-cartbtn"> <div class="cmn_btn-disabled"><span>COMING SOON</span></div> </div> <p class="cmn_cv-price"><span class="cmn_cv-variation">レフィル</span><br /><em>12,650<span>円</span></em><span class="cmn_cv-taxin">（税込）</span><span class="cmn_cv-postage">送料無料</span></p> <div class="cmn_cv-cartbtn"> <div class="cmn_btn-disabled"><span>COMING SOON</span></div> </div> </div>

▼3カラムに入るとき

<div class="cmn_cv cmn_cv-small"> <p class="cmn_cv-flag">普通肌～オイリー肌、混合肌の方へ</p> <p class="cmn_cv-name"><span>SHISEIDO </span><br /><span>トリートメントソフナー </span></p> <p class="cmn_cv-detail">＜化粧水＞ 150mL</p> <p class="cmn_cv-price"><em>6,050<span>円</span></em><span class="cmn_cv-taxin">（税込）</span><span class="cmn_cv-postage">送料無料</span></p> <div data-shohincd="d111111111111" data-shohinkbn="1" class="zaiko cmn_cv-cartbtn"> <a href="/sw/products/SWFG070220.seam?actionMethod=/products%2FSWFG070220.xhtml%3AsWFG070220Action.addCartShohin&sweb_shohin_cd=d111111111111&online_shohin_ctlg_kbn=1&keyword_flg=1" class="zaikokbn1 cmn_btn-red cmn_btn-small hover" style="display: none;"><span>カートに入れる</span></a> <a href="/sw/products/SWFG070220.seam?actionMethod=/products%2FSWFG070220.xhtml%3AsWFG070220Action.addCartShohin&sweb_shohin_cd=d111111111111&online_shohin_ctlg_kbn=1&keyword_flg=1" class="zaikokbn2 cmn_btn-red cmn_btn-small hover" style="display: none;"><span>カートに入れる<span>（残りわずか）</span></span></a> <div class="zaikokbn0 cmn_btn-disabled cmn_btn-small" style="display: none;"><span>品切れ中</span></div> <div class="zaikokbn9 cmn_btn-disabled cmn_btn-small" style="display: none;"><span>完売</span></div> </div> <p class="cmn_cv-price"><span class="cmn_cv-variation">レフィル</span><br /><em>6,050<span>円</span></em><span class="cmn_cv-taxin">（税込）</span><span class="cmn_cv-postage">送料無料</span></p> <div data-shohincd="d111111111111" data-shohinkbn="1" class="zaiko cmn_cv-cartbtn"> <a href="/sw/products/SWFG070220.seam?actionMethod=/products%2FSWFG070220.xhtml%3AsWFG070220Action.addCartShohin&sweb_shohin_cd=d111111111111&online_shohin_ctlg_kbn=1&keyword_flg=1" class="zaikokbn1 cmn_btn-red cmn_btn-small hover" style="display: none;"><span>カートに入れる</span></a> <a href="/sw/products/SWFG070220.seam?actionMethod=/products%2FSWFG070220.xhtml%3AsWFG070220Action.addCartShohin&sweb_shohin_cd=d111111111111&online_shohin_ctlg_kbn=1&keyword_flg=1" class="zaikokbn2 cmn_btn-red cmn_btn-small hover" style="display: none;"><span>カートに入れる<span>（残りわずか）</span></span></a> <div class="zaikokbn0 cmn_btn-disabled cmn_btn-small" style="display: none;"><span>品切れ中</span></div> <div class="zaikokbn9 cmn_btn-disabled cmn_btn-small" style="display: none;"><span>完売</span></div> </div> </div>

■太字

font-family:"TazuganeGothicStdN-Book"を利用します。
sassでbold()をインクルードしてください。

@include bold();

■注記

注記が増えた場合に備えて、1つでもulで組みます。
ulのクラス設定は.cmn_notesです。

フォントサイズ、色は別で設定しています。sassでnote()をインクルードして利用してください。

• ※美白とは、メラニンの生成を抑え、シミ・そばかすを防ぐこと
• * 乾燥を防ぎ、なめらかな肌に導く、
  明日葉CGLコンプレックスβ（アシタバ葉／茎エキス、ナツメ果実エキス、カフェイン、グリセリン）配合テクノロジー

<ul class="cmn_notes"> <li>※美白とは、メラニンの生成を抑え、シミ・そばかすを防ぐこと</li> </ul>

■黒いボタン

規定のボタンです。inline-block、幅380pxが基準です。

ボタンラベル

ボタンラベル
二行のもの

<a href="" class="cmn_btn hover"><span>ボタンラベル</span></a>

.anchorLinkがつくことで、矢印が下向きになります。

下向きアンカーリンク

<a href="#" class="cmn_btn anchorLink hover"><span>下向きアンカーリンク</span></a>

.cmn_btn-largeがつくと幅が540pxになります。

横長ボタン

<a href="#" class="cmn_btn cmn_btn-large hover"><span>横長ボタン</span></a>

■赤いボタン

カートボタンなどに使います。基本は黒いボタンと同じ挙動です。

カートに入れる

<a href="" class="cmn_btn-red hover"><span>カートに入れる</span></a>

カートに入れる（残りわずか）

<a href="" class="cmn_btn-red hover"><span>カートに入れる<span>（残りわずか）</span></span></a>

幅の狭い方

カートに入れる（残りわずか）

<a href="" class="cmn_btn-red cmn_btn-small hover"><span>カートに入れる<span>（残りわずか）</span></span></a>

幅の広い方

カートに入れる（残りわずか）

<a href="" class="cmn_btn-red cmn_btn-large hover"><span>カートに入れる<span>（残りわずか）</span></span></a>

■グレーボタン（disabled）

品切れ、Comingsoonなどに使います。

<div class="cmn_btn-disabled"><span>品切れ中</span></div>

<div class="cmn_btn-disabled cmn_btn-small"><span>品切れ中</span></div>

<div class="cmn_btn-disabled cmn_btn-large"><span>品切れ中</span></div>

■テキストリンク

テキストリンク

<a href="" class="link_text">テキストリンク</a>

■アンカーテキストリンク

アンカーテキストリンク

<a href="#" class="link_anchor anchorLink">アンカーテキストリンク</a>