アップセル制作フロー

アップセル案件について

「新規制作」とは異なり、既存のアカウントに対して追加の制作や改修を行うことを指します。たとえば、ページ内の一部を改修したり、新しいページを追加制作したりする作業が含まれます。
注意事項
アップセルは公開中のアカウントで作業を行うケースが多いため、既存のページに影響を与えないよう、慎重に対応し、正確な実装を心がけてください。

作業のフロー

1. 参照する資料(データ)の準備

・ディレクターからの依頼スレッド
※アップセルの内容によって対応が異なりますのでご注意ください。
基本、依頼スレッドのみでの実装が多いですが、場合によっては制作管理用シートやカンプ、画像も用意されていることもあります。
  • 問題や不明点がある場合は、ディレクターやデザイナーに確認・相談を行うようにしてください。

2. 対象ページの準備

新規ページ作成の場合
  • 新規ページを作成する
    ①ページ名の先頭に「【ベーシック編集中】」と付けます。
     (顧客と作業がバッティングしないよう、制作中のページを明確にしておくため)
既存ページ改修の場合
  • 対象ページを複製する
    ①ページ名の先頭に「【ベーシック編集中】」と付けます。
     (顧客と作業がバッティングしないよう、制作中のページを明確にしておくため)
    ※複数のページがある場合は、新規ページを作成し、ページ名を「【ベーシック編集中】」と付け、その配下に複製した各ページをまとめておくと、後で確認がしやすくなります。

3. ページの表示状態は「非公開」のまま

ページの表示状態は「非公開」のまま作業します。
※アップセルの作業は公開中のアカウントで行われることが多いため、非公開で作業しないとユーザーに見えてしまう可能性があります。十分ご注意ください。テスト公開モードの状態のアカウントでは、ページを「公開中」にしても問題ありません。
表示状態を「公開」にする場合

 記事リストとして制作中ページを表示させたい場合や、フォームのサンクスページのURLを設定する際など、一時的に「公開」状態にする必要がある場合があります。

手順:

  1. ディレクターに、作業上の必要があり、一時的にページを公開する旨を伝える。
  2. ページ一覧から対象のページを選択し、ページ設定内の「このページをサイト内検索の検索結果から除外する」にチェックを入れる。
  3. SEO設定のタブに移動し、「検索エンジンに対して、インデックスされないように設定する(NOINDEX)」にチェック入れる。
  4. 対象ページを公開状態にして表示確認を行う。
  5. 確認後、表示状態を「非公開」に戻す。
  6. 「ステップ2・3」のチェックを外す。

4. CSSの追記および共通エリア改修時の注意点

4.1 - CSS追記の注意点

  • 既存のCSSに新たなスタイルを追加する場合は、対象箇所に追記し、必ず追加内容の上にコメントアウトで日付と対象ページ名を記載してください。(例://サービス一覧 20240919追加
    ※複数のクラスを続けて記述する場合は、どこからどこまでが今回の追記内容なのかがわかるように「//サービス一覧 20240919追加ここまで」のように、終わりを示すコメントアウトも書いてください。
  • セクションや行(row)、カラム(col)をまたいでCSSを追記する場合は、独自のネストを既存のネストの下に追加しても問題ありません。
    ※コメントアウトを複数箇所に「//20240919追加」と分散して記載するよりも、1箇所にまとめた方が確認や修正がしやすくなります。


【注意】
既存のコードに修正を加える際は、まず別のクラスを作成して組み込み、サイトチェック後、本番反映時に元のスタイルに追記するか、既存のパーツに付いているクラスを新しく作成したクラスに変更してください。
既存のクラスに直接追記すると、公開ページに影響が出てしまうため、ご注意ください。

新たなネストを追加する場合の記述例

/*----------------------------------
      main(コンテンツ)
----------------------------------*/
/*--- TOP ---*/
.theme-fo-base {
  //既存のネスト
}

/*--- TOP(20240919追加) ---*/
.theme-fo-base {
  //アップセルで追記するもの
}
/*--- TOP(20240919追加)ここまで ---*/

4.2 - 共通エリアを改修する場合

アップセルで共通エリアを改修する場合は
手順
  1. 対象のページを複製する。
  2. ページ名の頭に【ベーシック編集中】とつける。 
  3. ページ設定で、編集したいエリアの「共通エリアの使用(ナビ・ヘッダー・フッターなど)」のチェックを外す。
    ※チェックを外すことで、そのページ独自のエリアとして切り離すことができるため、公開ページに影響を与えずに更新することが可能になります。
    ※共通エリアをそのまま編集すると、公開ページにも影響が出てしまうため、必ずチェックを外して独立させてください。
  4. 独立させたナビやフッターを指示通りに編集する。
  5. CSSを追記する場合は、既存のクラスとは別に用意し、その中でスタイルを調整する。
  6. サイトチェック完了後、本番反映時に用意したパーツを共通エリアに反映する。
注意事項
共通エリアの作業中に「共通エリアの使用」にチェックを入れてしまうと、それまで作業していた内容が共通エリアに上書きされてしまうため、チェックを入れないようにしてください。

5. 対象ページの表示チェック

確認する場合は「プレビュー」の共有URLで確認します。
※非公開の状態ですので、Safariで確認する際は、共有リンクを発行してそのURLを使用してください。
※「このリンクを無効にして再発行する」を押してしまうと、その前まで使用していたURLは使用できなくなりますのでご注意ください。

6. サイトチェック後の本番反映

アップセルにより、別途本番反映の作業が発生することがあります。
作業は、サイトチェック後にディレクターからOKの指示が出次第、対応します。
  1. クリップボードで対象のパーツを本番ページに持っていく。
  2. 指定の箇所にクリップボードに入れたパーツを配置する。
  3. リンク設定がある場合は忘れず設定する。
pagetop