LP（ランディングページ）

目次

LPの制作方法について

基本的な制作方法は通常サービスサイトと同じですが、CSSの記述箇所やクラスの命名規則などの一部制作方法が異なります。
通常の制作手順を理解しているという前提で、本ページではLPの制作手順を説明しています。

そのためこちらのページだけでなく、通常ページの制作作業の内容を必ず確認するようにお願いします。
また、公開中のサービスサイトにLPを追加する場合は、公開中のサイトに影響しない形でLP制作をするよう常に心がけてください。

2種類の制作方法が存在します

  • サービスサイトのデザインを踏襲して構築する方法
    原則としてデザインパーツを中心に構築
    →サービスサイトと共通のベースデザイン設定を使用してLPを構築する場合
  • サービスサイトから完全に独立したデザインで構築する方法
    デフォルトパーツのみで構築
    →ベースデザイン設定は流用せず、サービスサイトとは全く別の独立したデザインとしてLPを構築する場合
    →旧CMSでのLP制作についても、こちらの構築方法に該当します。
注意事項
新CMSの場合、どちらの方法で制作するのかは、組み込み開始時にディレクターに確認をしてください。

サービスサイトのデザインを踏襲して構築する方法

サービスサイトのデザインを踏襲して構築する方法

サービスサイトから独立したデザインで構築する方法

サービスサイトから独立したデザインで構築する方法

LP（サービスサイトのデザインを踏襲して構築する方法）

サービスサイトのデザインを踏襲してLPを制作する案件では以下の手順で制作を行います。

1. 使用するページ

  • LP用ページテンプレートを複製して作ります
    →fO左メニュー　サイト　＞　ページ一覧
    　旧CMSに存在していた「マーケティング・最適化　＞　LP」の機能は廃止されたため、「ページ一覧」の中にLPも制作します。
    　また、LPの中にフォームが存在する場合には、LP用のサンクスページも準備します。
  • LP制作で使用するページ

2. パーツ配置

新CMSでは原則としてデザインパーツを使用し、ベースデザイン設定の各種設定に紐づく形で構築します。
デザイン上必要があれば、クラスを付与してCSSで調整を加えてください。
また、デザインパーツと全く異なるデザインを実装する必要があれば、デフォルトパーツを使用してもかまいません。
ただしデフォルトパーツを使用する場合にも、ベースデザイン設定の内容が適切に反映されるように変数を使用して記述してください。

3. セクションの追加方法とルール

セクション追加のルールについては、サービスサイトと同様です。
ベースデザイン設定が当たるようにするため、必ず色のついたデザインパーツのセクションを配置してください。

4. CSSの記述

基本的にデザインパーツをそのまま使用していきますが、必要な箇所には独自クラスを付与してCSSで調整を行います。
命名規則や記述のルールについてはサービスサイトと同じですので、確認の上、実装を進めてください。

セクションの配置

セクションの配置

セクションの命名規則と
コーディングルール

セクションの命名規則とコーディングルール

LP（サービスサイトから独立したデザインで構築する方法）

サービスサイトからは独立したデザインでLPを制作する案件では、以下の手順で制作を行います。

1. 使用するページ

  • 新CMS
    →fO左メニュー　サイト　＞　ページ一覧
    　通常のサービスサイトのページと同じ場所に新規ページとして作ります。
    　旧CMSに存在していた「マーケティング・最適化　＞　LP」の機能は廃止されたため、「ページ一覧」の中にLPも制作します。
  • 旧CMS
    →fO左メニュ　マーケティング・最適化　＞　LP
    　案件によっては、ディレクターからページ一覧で作成するように指示があることもあります。組み込み前に確認しましょう。
  • 新CMS・旧CMS共通
    LPの中にフォームが存在する場合には、LP用のサンクスページも準備します。

2. パーツ配置

デフォルトパーツのみを配置して実装を行っていきます。
ただし、後述の通り、セクションパーツについては、デザインパーツを使用するルールとなっています。
旧CMSではデザインパーツ／デフォルトパーツという概念がないため、左側に出ているパーツ群をどれでも使用してかまいません。
ナビ・ヘッダー・フッターについて
サービスサイトから独立したデザインのLP案件の場合、特にディレクターから指示がない場合には、ナビ・ヘッダー・フッターには共通エリアは使いません。
セクションを用い、コンテンツ内と同じようにパーツを配置して構築するようにしてください。
また、ナビは指示がない限りは固定とし、ヘッダーやフッターのロゴには制作しているLPページへのリンクを貼ってください。
サンクスページも同様に、共通エリアは使わず、ナビとフッターのセクションをクリップボードでコピーして配置します。
記事リストのようなデザインが指定されている場合
LP案件の場合、記事リストパーツのような動的なコンテンツと同じ見た目のものがデザインとして指定されている場合も、記事リストを使用せず、画像・見出し・テキストといった固定パーツを組み合わせて構築するようにしてください。
※記事リスト使用の旨、ディレクターから指示があった場合は除く
見出しやボタンについて
見出しやボタンはサービスサイトとは独立したデザインになる前提となるため、デフォルトパーツを使用し、命名規則に基づいたクラスを必ず付与してスタイルを当てます。

3. セクションの追加方法

新CMSでLPを制作する案件では、 セクションパーツ > 空白のセクション から背景色なしのセクションを追加してください。
サービスサイトと独立させるため、ベースデザイン設定の背景色の影響を受けないようにするためです。
デフォルトパーツのみで構築するLP案件では、独立したデザインを保つため、デフォルトで用意されているCSS（コピー元）の指定の箇所にスタイルを記述する必要があります。
なお、旧CMSの場合など、独自クラスを作成してセクションに付与する場合は以下の命名規則に従います。
  命名規則
（1つ目のLP）		 命名規則
（2つ目のLP）
セクション（section） lp_〇〇_sec
※新CMSでは「lp_sec」は原則不要です		 lp02_〇〇_sec
3つ目以降は、03、04…と数字を増やしてください
新CMSにおける「lp_sec」の扱いについて
旧CMSでのLP制作においては、サービスサイトとのデザインを確実に区別するため、全てのセクションに「lp_sec」を付与し、そこから紐づけるというコーディングルールが適用されます。
新CMSではデフォルトで用意されているCSS（コピー元）の構造が仕様に合わせて変更され、「lp_sec」をすべてのセクションに付与する必要はなくなりました。

※このCSSの構造の変更については以下の「LPに関するスタイルの記述箇所（新CMS）」をご確認ください。
LPに関するCSSの構造（新CMS）
LPの基本構造となる「LP body（本体）」内では、「lp_header_sec」とそこに続くsecionを紐づける、というネスト構造となっています。
そのため、これまで必須となっていた「lp_sec」の記述が廃止されています。
  •  紐づけ箇所については「//LPコンテンツ記述」 をご参照ください
  • スタイルの記述は基本「 LP body（本体）」ではなく「LP contents(コンテンツ)」内に行います
※以下のCSSは最新でない場合があります。現状の新CMSコピー元サイトの記述を正としてください。

/*----------------------------------
    LP body（本体）
----------------------------------*/
@include theme-fo-base {
  //LPヘッダー
  &.lp_header_sec {
    font-family: $lp_font_family;
    color: $lp_text_color;
    line-height: $lp_text_line_height;
    letter-spacing: $lp_text_letter_spacing;
    padding: 0;
    @include lp-heading();
    @include lp-richtext();
    @include lp-form();
    .inner {
      padding: 10px 20px;
      @include breakpoint-sp {
        padding: 10px;
      }
      .row {
        &.header_row {
          display: flex;
          align-items: center;
          @include breakpoint-pc {
            min-height: 60px;
          }
          .col {
            padding: 0;
            &.logo_col {
              @include breakpoint-pc {
                max-width: 300px;
                min-width: 150px;
                width: auto !important;
              }
              .component {
                &.image {
                  margin: 0;
                  &.logo_img {
                    img {
                      @include breakpoint-pc {
                        max-width: $lp_header_logo !important;
                        width: 100% !important;
                      }
                      @include breakpoint-sp {
                        max-height: $lp_header_sp_logo !important;
                      }
                    }
                  }
                }
              }
            }
            &.btn_col {
              display: flex !important;
              justify-content: flex-end;
              align-items: center;
              flex: 1;
              @include breakpoint-pc {
                width: auto !important;
              }
              .component {
                margin: 0;
                &:not(:first-child) {
                  @include breakpoint-pc {
                    margin-left: 15px;
                  }
                }
                &.button {
                  margin-top: 0;
                  .button-cont {
                    a {
                      @include breakpoint-sp {
                        background: none;
                        width: auto;
                        min-width: auto;
                        font-size: 0 !important;
                        letter-spacing: 0;
                        border-radius: 0;
                        border: 0;
                        margin: 0;
                        box-shadow: none;
                        padding: 5px 10px 5px 5px;
                      }
                      &::before {
                        @include breakpoint-sp {
                          font-size: 22px;
                          line-height: 1;
                          color: $lp_main_color;
                          margin: 0;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
        &.nav_row {
          @include breakpoint-pc {
            margin: 20px 0 -10px;
          }
          .col {
            padding: 0;
            .component {
              &.list {
                margin: 0;
                ul {
                  @include breakpoint-pc {
                    display: table;
                    width: 100%;
                    table-layout: fixed;
                  }
                  li {
                    margin: 0;
                    padding: 0;
                    font-size: 14px;
                    @include breakpoint-pc {
                      display: table-cell;
                    }
                    @include breakpoint-sp {
                      width: 50%;
                    }
                    a {
                      display: block;
                      font-size: inherit;
                      color: inherit;
                      text-align: center;
                      padding: 20px 10px;
                      @include breakpoint-sp {
                        padding: 10px 5px;
                      }
                      &:hover {
                        background-color: $lp_main_color;
                        color: #fff;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    //LPコンテンツ記述
    & ~ section {
      @include lp-heading();
      @include lp-richtext();
      @include lp-form();
      @include lp-mv();
      @include lp-contents();
      //フッター
      &.lp_footer_sec {
        padding: 0;
        .inner {
          max-width: 100% !important;
          padding: 0;
          .row {
            padding: 0;
            &:not(.copyright_row) {
              max-width: $lp_max_width;
              margin: 0 auto;
              padding: 0 20px;
            }
            &.site_map_row {
              padding: 40px 20px;
              .col {
                vertical-align: middle;
              }
            }
            .col {
              padding: 0;
              .component {
                &.image {
                  &.footLogo_img {
                    img {
                      max-width: 250px !important;
                      width: 100% !important;
                    }
                  }
                }
                &.list {
                  &.site_map_list {
                    ul {
                      display: flex;
                      gap: 10px 20px;
                      @include breakpoint-sp {
                        flex-direction: column;
                      }
                      li {
                        margin: 0;
                        padding: 0;
                        a {
                          color: inherit;
                          &:hover {
                            opacity: $lp_hover_opacity;
                          }
                        }
                      }
                    }
                    &.vertical {
                      ul {
                        flex-direction: column;
                        li {
                          a {
                            padding: 0;
                          }
                        }
                      }
                    }
                  }
                }
                &.cta {
                  margin: 0;
                  .cta-row {
                    padding-top: 0 !important;
                    &.page_top_row {
                      @include page_top;
                      & + .cta-row {
                        margin-top: -40px;
                      }
                    }
                    .cta-column {
                      padding: 0;
                      .component {
                        &.richtext {
                          &.foot-copyright {
                            @include copyright_custom;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  //LPセクション固定
  &.lp_sticky_sec {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: $lp_box_shadow_nav_common;
    & ~ section {
      .inner {
        .row {
          .col {
            [id] {
              //ヘッダーの高さに合わせてください(ヘッダーの高さ＋componentのmargin10px）
              @include breakpoint-pc {
                scroll-margin-top: 80px;
              }
              @include breakpoint-sp {
                scroll-margin-top: 55px;
              }
            }
          }
        }
      }
    }
  }
}

/*------------- カスタム用 LP END-------------*/

LPに関するスタイルの記述箇所（新CMS）
基本的なスタイルは「LP contents(コンテンツ)」に記述していきます。
これはmixinで「lp-contents」として作られており、「LP body（本体）」内に読み込まれています。

/*----------------------------------
    LP contents(コンテンツ)
----------------------------------*/
@mixin lp-contents {
  font-family: $lp_font_family;
  color: $lp_text_color;
  line-height: $lp_text_line_height;
  letter-spacing: $lp_text_letter_spacing;
  //セクション余白調整
  @include breakpoint-pc {
    padding: calc(#{$lp_section_padding} - 30px) 0 calc(#{$lp_section_padding} - 40px);
  }
  @include breakpoint-sp {
    padding: $lp_section_sp_padding 0;
  }
  &.lp_cta_sec {
    .inner {
      .row {
        .col {
          .component {
            &.cta {
              margin: 0;
            }
          }
        }
      }
    }
  }
  .inner {
    .row {
      //よくあるご質問
      &.lp_faq_row {
        margin: 10px 0 20px;
        & + .lp_faq_row {
          margin-top: 40px;
        }
        .col {
          background: #fff;
          box-shadow: $lp_box_shadow_common;
          border-radius: $lp_border_radius_common;
          padding: 20px;
          .component {
            &.richtext {
              &:is(.faq_qu,.faq_an) {
                position: relative;
                border-bottom: 1px solid $lp_border_color;
                margin: 0;
                padding: 15px 15px 15px 50px;
                @include breakpoint-sp {
                  padding-left: 40px;
                }
                &::before {
                  content: "Q.";
                  display: inline-block;
                  font-size: 28px;
                  font-weight: bold;
                  color: $lp_accent_color;
                  position: absolute;
                  left: 5px;
                  top: 4px;
                  @include breakpoint-sp {
                    top: 2px;
                  }
                }
              }
              &.faq_an {
                border-bottom: 0;
                &::before {
                  content: "A.";
                  color: $lp_text_color;
                }
              }
            }
          }
        }
      }
      .col {
        .component {
          &.richtext {}
          &.image {}
          &.list {}
        }
      }
    }
  }
}

4. CSSの記述

パーツに独自クラスを付与してスタイルを当てる場合、
LP案件にのみ適用されるルールや注記事項がいくつか存在しますので、それらに基づいて構築する必要があります。
注意事項
デフォルトパーツのみで構築するLPの場合には、デザインパーツの使用や、ベースデザイン設定と紐付けた記述をすることはNGです。

セクションパーツの配置

セクションパーツの配置行う際に適用されるルールや命名規則について解説しています。
セクションパーツ配置

セクションの命名規則とルール

LP案件におけるセクションの追加方法についてルールが定められています。

セクションの命名規則とルール

fOでの基本設定

パーツ配置

CSSでの装飾

サイトチェック

pagetop

© Basic Inc. All Rights Reserved.