[盛田屋様]キャンペーンバナーコーディング(スキンケアサイト)

2024/8/12025/3/24

ashikagamitsumi

更新頻度

月1回もしくは 2カ月に1回
※キャンペーンの更新頻度による

制作するバナーの種類と掲載場所

下記資料を参照してください。

https://www.figma.com/design/T9QBvNgNLzXeMrhJvQZqyB/TOF-Manual-Campaign?node-id=0-1&t=MG92IZ2Wgge4E67o-1

作業の流れ

テスト環境UP

①対応内容の確認

デザイナーから共有されたバナーとモックを確認する。

TOP・キャンペーン一覧のモックはFigmaで作成されたものが連携される。

▼実際のFigma
https://www.figma.com/design/23HtObL71m64GExbZ0ra61/TOF_202408_campaign?node-id=1-3&t=Xy1N1C2AUhYadkck-1

②画像をアップする

FTPクライアントでアップする。サーバー接続情報はidpass管理表を参照する。


▼ポップアップバナーアップ先
/R1205_TofuMoritaya_Test/common/img/top/popup_banner
▼TOP・キャンペーン一覧バナーアップ先
/R1205_TofuMoritaya_Test/common/img/top/campaign

＊本番環境はR1205_TofuMoritaya_Honban配下の同一ディレクトリ

③リピートプラスのパーツ管理から編集

作業の流れ

リピートプラス（以降RPと略）を開き、下記メニューから編集する。

RPのパスワードはidpass管理表を参照する。

CMS＞デザイン管理＞パーツ管理

編集する管理用パーツ名をクリックして、コンテンツ欄のhtmlを編集する
↓

コンテンツを編集したら、期間をクリックして設定

↓

※テスト環境においては、確認のために現在表示中のパーツのタイマー設定を適宜ずらしてOK。

※作業するタイミングによっては、ポップアップバナー（Parts_top_popup_banner_tofuday）は先方が表示確認中かもしれないので、気になるようであれば作業後にタイマー設定を編集した旨ディレクターに伝える。

※タイマー設定の終了日は、キャンペーン終了日翌日の0:00とする。キャンペーン終了日の23:59にすると、最後の1分間バナーが表示されないため。

↓

「更新」をクリック

管理用パーツの解説

更新するパーツと反映先の詳細は下記資料を参照。

▼資料：更新するパーツと反映先

https://www.figma.com/design/T9QBvNgNLzXeMrhJvQZqyB/TOF-Manual-Campaign?node-id=17-2

▼簡易一覧表

管理用パーツ名	概要	本番環境タイマー設定例 (8/1開始キャンペーン想定)
Parts_top_popup_banner	表示中のポップアップバナー（Parts_top_popup_banner_tofudayが表示されているときは非表示になるが、名称はそのままでＯＫ）	2024/7/1 0:00 ～ 2024/7/25 0:00
Parts_top_popup_banner_next	表示予約用のポップアップバナー	2024/8/1 0:00 ～ 2024/9/1 0:00
Parts_top_popup_banner_tofuday	先方が使用するポップアップバナー用のパーツ。キノスラでは編集しない。	2024/7/25 0:00 ～ 2024/8/1 0:00
Parts_top_campaign	表示中のTOPページ、キャンペーン一覧ページ、SPナビメニュー内	2024/7/1 0:00 ～ 2024/8/1 0:00
Parts_top_campaign_next	表示予約用のTOPページ、キャンペーン一覧ページ、SPナビメニュー内	2024/8/1 0:00 ～ 2024/9/1 0:00

▼定期便ページは下記テンプレートを手動編集
※タイマー設定不可


▼テスト環境
/R1205_TofuMoritaya_Test/Form/Common/Tof/TofProductListTeikiContents.ascx
▼本番環境
/R1205_TofuMoritaya_Honban/Form/Common/Tof/TofProductListTeikiContents.ascx

※作業開始前の注意事項※

作業開始前にテスト環境・本番環境で差異がないか確認する。
※ごくまれに先方が本番環境のみ更新している、ということがあるため。
差異がある場合、基本的にまず本番環境に内容をあわせる。

☑チェック内容

パーツ名とコンテンツがちぐはぐ、または全く異なるコンテンツが反映されていないか
パーツ名とコンテンツは同じだが、異なるテンプレートに反映されている

表示セクション	テンプレート（FTPで参照しエディタで内容確認）
ポップアップバナー	/R1205_TofuMoritaya_Honban/Form/Common/Tof Parts000TMPL_009.ascx
〃	/R1205_TofuMoritaya_Honban/Form/Common/Tof Parts000TMPL_030.ascx
TOPページ、キャンペーン一覧ページ、SPナビメニュー内	/R1205_TofuMoritaya_Honban/Form/Common/Tof Parts000TMPL_014.ascx
〃	/R1205_TofuMoritaya_Honban/Form/Common/Tof Parts000TMPL_008.ascx

正方形画像に対するテキスト

2024年3月以降、諸事情により姉妹ブランド商品に対し
「豆腐の盛田屋特別価格」の表記はNGとなったため、以降は
「豆腐の盛田屋会員価格」で統一する。

各パーツのhtmlの解説

■ポップアップバナー（Parts_top_popup_banner または Parts_top_popup_banner_next）

リンク先、画像URL、altを編集する
ログイン時・未ログイン時、同じリンク先・画像URLを設定します。


<!-- 公開期間：8/1 0:00 ～ 9/1 00:00 よりどり夏祭り -->
<div id="popup_banner">

  <% if (this.IsLoggedIn) { %>
    <!-- ログイン時のバナー -->
    <!-- w-320px(SP時の横幅サイズ指定) w-md-320px(PC時の横幅サイズ指定) -->
    <div class="w-320px w-md-320px"><!-- 非表示の場合は、style="display: none;"を追加 -->
      <a href="<%= Constants.PATH_ROOT %>ext/campaign/cp2408/" class="popup_banner-img__link">
        <img src="<%= Constants.PATH_ROOT %>common/img/top/popup_banner/cp2408_bnr_pc.jpg" alt="よりどり最大30％OFF｜全30アイテム｜ワクワクチョイス！よりどり夏祭り" class="w-100p pc" width="750" height="750">
        <img src="<%= Constants.PATH_ROOT %>common/img/top/popup_banner/cp2408_bnr_sp.jpg" alt="よりどり最大30％OFF｜全30アイテム｜ワクワクチョイス！よりどり夏祭り" class="w-100p sp" width="320" height="320">
      </a>
      <a class="btn_close popup_banner-close__btn "></a>
    </div>
  <% } else { %>
    <!-- 未ログイン時のバナー -->
    <!-- w-320px(SP時の横幅サイズ指定) w-md-320px(PC時の横幅サイズ指定) -->
    <div class="w-320px w-md-320px">
      <a href="<%= Constants.PATH_ROOT %>ext/campaign/cp2408/" class="popup_banner-img__link">
        <img src="<%= Constants.PATH_ROOT %>common/img/top/popup_banner/cp2408_bnr_pc.jpg" alt="よりどり最大30％OFF｜全30アイテム｜ワクワクチョイス！よりどり夏祭り" class="w-100p pc" width="750" height="750">
        <img src="<%= Constants.PATH_ROOT %>common/img/top/popup_banner/cp2408_bnr_sp.jpg" alt="よりどり最大30％OFF｜全30アイテム｜ワクワクチョイス！よりどり夏祭り" class="w-100p sp" width="320" height="320">
      </a>
      <a class="btn_close popup_banner-close__btn "></a>
    </div>
  <% } %>
  
</div>

■TOPページ・キャンペーン一覧・スマホナビ内
（Parts_top_campaign または Parts_top_campaign_next）

表示中パーツのhtmlをコピペして作業する（転用箇所も多いため）
リンク先、画像URL、altを編集する
バナー右上の「NEW」「限定」アイコンは更新漏れやすいので注意。モック通り設定する
正方形＋テキストバナーのテキストはFigmaからコピペする
SPサイドナビメニュー内のバナーは、PC用の横長の主キャンバナーを使用する
商品詳細ページに遷移するバナーは基本、遷移先ぺージの強化パーツ開始位置から表示させるため、
URLの最後に適宜パラメータの記述をする。


  <!-- 公開期間：8/1 0:00～9/1 00:00 -->
  
  <!-- ▽トップページ / 共通footer上部 / キャンペーンページ のキャンペーンエリア▽ -->
  <div class="inner-wrap bscstm side-nav__campaign-hide">
      <h2 class="section-title">CAMPAIGN
          <span class="section-title__sub">キャンペーン情報</span>
      </h2>
      <div class="campaign-contents__wrap">
          <div>
              <a href="<%= Constants.PATH_ROOT %>ext/campaign/cp2408/" class="campaign-contents">
                  <div>
                      <img src="<%= Constants.PATH_ROOT %>common/img/top/campaign/campaign_cp2408_pc.png" alt="よりどり最大30％OFF 全30アイテム ワクワクチョイス！よりどり夏祭り" class="pc w-100p" width="472" height="210" loading="lazy">
                      <img src="<%= Constants.PATH_ROOT %>common/img/top/campaign/campaign_cp2408_sp.png" alt="よりどり最大30％OFF 全30アイテム ワクワクチョイス！よりどり夏祭り" class="sp w-100p" width="662" height="340" loading="lazy">
                  </div>
                  <div class="campaign-contents__mark text-white" style="background-color: #f8b500;">NEW</div>
              </a>
          </div>
          <div>
              <a href="<%= Constants.PATH_ROOT %>Form/Product/ProductDetail.aspx?shop=0&pid=SG300740&cat=100300#ctl00_ContentPlaceHolder1_detailDescription3" class="campaign-contents">
                  <div class="campaign-contents__img-text__wrap">
                      <div class="campaign-contents__img-wrap">
                          <img src="<%= Constants.PATH_ROOT %>common/img/top/campaign/cp-lashserum.jpg" alt="まつ毛美容液 ラッシュセラム" class="w-100p" width="800" height="800" loading="lazy">
                      </div>
                      <div class="campaign-contents__text-wrap">
                          <p class="campaign-contents__text-sub">あなた史上最高のまつ毛へ</p>
                          <h3 class="campaign-contents__text-main">まつ毛美容液<br>ラッシュセラム</h3>
                          <p class="campaign-contents__text-name">【再入荷】<br>特別価格15％OFF</p>
                      </div>
                  </div>
                  <!--<div class="campaign-contents__mark text-white" style="background-color: #f8b500;">NEW</div>-->
              </a>
          </div>
  
          <!-- キャンペーン一覧ページのみ出力（TOPページと共通footer上部には出力させない）.campaign-contents__top_page-footer-hide を付与 -->
          <div class="campaign-contents__top_page-footer-hide">
              <a href="<%= Constants.PATH_ROOT %>food/" class="campaign-contents">
                  <div class="campaign-contents__img-text__wrap">
                      <div class="campaign-contents__img-wrap">
                          <img src="<%= Constants.PATH_ROOT %>common/img/top/campaign/cp-food.jpg" alt="豆腐の盛田屋 食品特設サイト" class="w-100p" width="800" height="800" loading="lazy">
                      </div>
                      <div class="campaign-contents__text-wrap">
                          <p class="campaign-contents__text-sub">豆腐の盛田屋</p>
                          <h3 class="campaign-contents__text-main">食品特設サイト</h3>
                      </div>
                  </div>
                  <!-- <div class="campaign-contents__mark text-white" style="background-color: #ec6e72;">お試し</div> -->
              </a>
          </div>
      </div>
      <div class="btn-brown__wrap">
          <a href="<%= Constants.PATH_ROOT %>ext/campaign/" class="btn-brown w-100p w-md-600px mx-auto ff-mincho fzp-18px fzp-md-22px">キャンペーン一覧</a>
      </div>
  </div>
  <!-- △トップページ / 共通footer上部 / キャンペーンページ のキャンペーンエリア△ -->
  
  <!-- ▽SPサイドナビメニュー内のキャンペーンエリア(CSSで表示)▽ -->
  <div class="side-nav__campaign-visible" style="display: none;">
      <dl class="headNavList headNavList__campaign topPage-none">
          <dt>キャンペーン</dt>
          <dd><p class="cplink"><a class="header-click-cp-month" href="<%= WebSanitizer.HtmlEncode(Constants.PATH_ROOT) %>ext/campaign/cp2408/"><img src="<%= Constants.PATH_ROOT %>common/img/top/campaign/campaign_cp2408_pc.png" alt="よりどり最大30％OFF 全30アイテム ワクワクチョイス！よりどり夏祭り" class="w-100p" width="472" height="210" loading="lazy"></a></p></dd>
          <!-- <dd><p class="cplink"><a class="header-click-cp-eco_project_ol" href="<%= WebSanitizer.HtmlEncode(Constants.PATH_ROOT) %>Form/Product/ProductList.aspx?pgi=eco_project_ol"><img src="<%= Constants.PATH_ROOT %>Contents/ImagesPkg/top/top_slide/camp_bnr02.png" alt="大創業祭" width="100%"></a></p></dd> -->
          <a href="<%= Constants.PATH_ROOT %>ext/campaign/" class="brown-btn">キャンペーン一覧</a>
      </dl>
  </div>
  <!-- △SPサイドナビメニュー内のキャンペーンエリア△ -->

■定期ページ（TofProductListTeikiContents.ascx）
※344行目あたり

定期便キャンペーンがある場合、更新する。
バナーのhtmlはParts_top_campaignから転用できる。
タイマーでの更新ができないため、通常更新日に手動更新する。


  <div id="campaign" class="mb-50px">
      <div class="inner-wrap">
          <div>
              <h2 id="section_camp" class="sectionTitle mb-20x mb-md-40px"><span class="ja">定期キャンペーン</span><span class="en">- Campaign -</span></h2>
              <div class="campaign-contents__wrap px-3px px-md-0px">
  
                  <div>
                      <a href="<%= Constants.PATH_ROOT %>ext/campaign/scruba/" class="campaign-contents">
                          <div class="campaign-contents__img-text__wrap">
                              <div class="campaign-contents__img-wrap">
                                  <img src="<%= Constants.PATH_ROOT %>common/img/top/campaign/cp_scrub.jpg" alt="やさしい使い心地のこんにゃく※スクラブ 豆乳ヨーグルトパック">
                                  <!-- <img src="<%= Constants.PATH_ROOT %>common/img/top/campaign/campaign03-pc.png" alt="やさしい使い心地のこんにゃく※スクラブ 豆乳ヨーグルトパック" class="pc">
                                  <img src="<%= Constants.PATH_ROOT %>common/img/top/campaign/campaign03-sp.png" alt="やさしい使い心地のこんにゃく※スクラブ 豆乳ヨーグルトパック" class="sp"> -->
                              </div>
                              <div class="campaign-contents__text-wrap">
                                  <p class="campaign-contents__text-sub">こんにゃく<sub class="kome">※</sub>由来<br class="sp">スクラブ配合</p>
                                  <h3 class="campaign-contents__text-main">玉の輿 やわらかスクラブ</h3>
                                  <p class="campaign-contents__text-name">定期初回 半額</p>
                                  <p class="campaign-contents__text-note">※マンナン</p>
                              </div>
                          </div>
                          <div class="campaign-contents__mark text-white" style="background-color: #ec6e72;">限定</div>
                      </a>
                  </div>
                  
              </div>
          </div>
      </div>
  </div>

ここまで設定したら、ディレクターに社内校正依頼。
※依頼時には、更新した対象パーツの名称も連携する。（Parts_top_popup_banner_next / Parts_top_campaign_next など）
社内校正・先方校正修正を行う。

本番環境UP

作業開始前に念のためバックアップをとっておく。管理画面から編集する前に、FTPで下記テンプレートをダウンロードする。

表示セクション	テンプレート（FTPで参照しエディタで内容確認）
ポップアップバナー	/R1205_TofuMoritaya_Honban/Form/Common/TofParts000TMPL_009.ascx
〃	/R1205_TofuMoritaya_Honban/Form/Common/TofParts000TMPL_030.ascx
TOPページ、キャンペーン一覧ページ、SPナビメニュー内	/R1205_TofuMoritaya_Honban/Form/Common/TofParts000TMPL_014.ascx
〃	/R1205_TofuMoritaya_Honban/Form/Common/TofParts000TMPL_008.ascx

本番環境にもバナーをアップする
テスト環境に設定した内容を本番環境にアップする。
タイマー設定は、実際の表示期間を設定する（テスト環境は表示確認のためタイマー設定を実際の開始日より早く設定しているので、テスト環境と同じ表示期間設定をしないように注意する）
作業完了後、ディレクターに報告する。
更新したパーツ名＆表示期間、バナーのアップ漏れがないか確認のため、本番環境の画像URLを共有する。


  本番環境にアップいたしました。
  --------------------------------------------
  ▼ポップアップバナー　8/1 0:00-9/1 0:00
  Parts_top_popup_banner_next
  ▼TOP・キャン一覧　8/1 0:00-9/1 0:00
  Parts_top_campaign
  --------------------------------------------

  【画像URL】
  ■ポップアップバナー
  https://www.tofu-moritaya.com/common/img/top/popup_banner/cp2408_bnr_pc.jpg
  https://www.tofu-moritaya.com/common/img/top/popup_banner/cp2408_bnr_sp.jpg

  ■TOP・キャン一覧
  よりどり夏祭り
  https://www.tofu-moritaya.com/common/img/top/campaign/campaign_cp2408_pc.png
  https://www.tofu-moritaya.com/common/img/top/campaign/campaign_cp2408_sp.png
  8月限定セット
  https://www.tofu-moritaya.com/common/img/top/campaign/campaign_cp2408set_pc.png
  https://www.tofu-moritaya.com/common/img/top/campaign/campaign_cp2408set_sp.png
  食品セット
  https://www.tofu-moritaya.com/common/img/top/campaign/campaign_cp2408food_pc.png
  https://www.tofu-moritaya.com/common/img/top/campaign/campaign_cp2408food_sp.png
  ラッシュセラム ※以前使用していたバナーを使用
  https://www.tofu-moritaya.com/common/img/top/campaign/cp-lashserum.jpg
  3me ※以前使用していたバナーを使用
  https://www.tofu-moritaya.com/common/img/top/campaign/cp-3me.jpg
  美容液オイル
  https://www.tofu-moritaya.com/common/img/top/campaign/cp-oiltsuki.jpg
  シートマスク
  https://www.tofu-moritaya.com/common/img/top/campaign/cp-saiseimask.jpg
  ミネラルファンデ
  https://www.tofu-moritaya.com/common/img/top/campaign/cp-oilfoundation.jpg
  スムースカバーベース
  https://www.tofu-moritaya.com/common/img/top/campaign/cp-base.jpg

その後、修正があれば修正。

▼定期便ページは下記テンプレートを上書き

タイマーでの更新ができないため、通常更新日に手動更新する。


▼本番環境
/R1205_TofuMoritaya_Honban/Form/Common/Tof/TofProductListTeikiContents.ascx

リリース後対応｜パーツ名称更新

問題なくリリースされていることを確認したのち、下記ルールに従い、管理用パーツ名の名称をRP＞パーツ管理から変更する。

通常、更新日～その翌営業日くらいで作業する。

＊RP仕様上、パーツ名称が重複していてもパーツが削除されたり、重複するどちらかに自動的に「～ (1)」というような名称がつくことはない。
ただ、同じパーツ名称が複数あるとわかりづらくなってしまうため、このの工程を挟んでいる。

この記事を書いた人

ashikagamitsumi

[盛田屋様]キャンペーンバナーコーディング(スキンケアサイト)

更新頻度

制作するバナーの種類と掲載場所

作業の流れ

テスト環境UP

①対応内容の確認

②画像をアップする

③リピートプラスのパーツ管理から編集

作業の流れ

管理用パーツの解説

※作業開始前の注意事項※

正方形画像に対するテキスト

各パーツのhtmlの解説

■ポップアップバナー（Parts_top_popup_banner または Parts_top_popup_banner_next）

■TOPページ・キャンペーン一覧・スマホナビ内（Parts_top_campaign または Parts_top_campaign_next）

■定期ページ（TofProductListTeikiContents.ascx）※344行目あたり

本番環境UP

▼定期便ページは下記テンプレートを上書き

リリース後対応｜パーツ名称更新

この記事を書いた人

関連記事

■TOPページ・キャンペーン一覧・スマホナビ内
（Parts_top_campaign または Parts_top_campaign_next）

■定期ページ（TofProductListTeikiContents.ascx）
※344行目あたり