CSS UI・Webデザイン集 | Webサイト基本構成：サービスサイト

Web APP CSS
スポンサーリンク
スポンサーリンク

サービスサイトの基本構成とデザインの目的

サービスサイトは、特定のプロダクトやサービス（SaaS、アプリケーション、専門的なビジネスなど）の魅力を深く伝え、ユーザーに「利用登録」や「資料請求」、「お問い合わせ」といった具体的なアクションを起こしてもらうためのWebサイトです。企業の全体像を紹介するコーポレートサイトとは異なり、サービスサイトは「いかにそのサービスがユーザーの抱える課題を解決できるか」に特化している点が大きな違いです。プログラミング初心者の方がサービスサイトを構築する際は、ユーザーの視線の動きを自然に導くレイアウト設計と、迷わずアクションボタンへ誘導するコンバージョン動線を意識することが成功の鍵となります。

サービスサイトを構成する主要セクションの設計

効果的なサービスサイトには、ユーザーの関心を惹きつけ、納得させ、行動させるための王道ともいえるセクションの構成があります。

  • ファーストビュー（Hero）：サービスの一言で伝わるキャッチコピーと、直感的なビジュアル、そしてユーザーを即座に行動へ促すCTA（Call to Action）ボタンを配置します。
  • 特徴・メリット（Features）：競合との違いや、ユーザーがそのサービスを選ぶべき理由を分かりやすいポイントに絞って伝えます。
  • 料金プラン（Pricing）：サービス導入の心理的ハードルを下げるため、わかりやすい比較表やカード形式で明確な料金体系を提示します。
  • CTAエリア：ページの最後やスクリーンの要所に、ユーザーを申し込みページへと誘導する強力なボタンを配置します。

実務で役立つHTMLとCSS・SCSSのコード実装

サービスサイトで最もコンバージョン（成果）に直結する重要なパーツの一つである「料金プラン（Pricing）」のセクションを例に、具体的なコードを見ていきましょう。複数のプランを比較しやすく並べ、おすすめのプランを目立たせるデザイン手法を取り入れます。

料金プランセクションの実装例

HTML

<!-- HTML構造 -->
<section class="pricing">
  <div class="pricing__inner">
    <h2 class="pricing__heading">料金プラン</h2>
    <p class="pricing__subheading">お客様の規模やニーズに合わせた最適なプランをお選びいただけます。</p>
    <div class="pricing__list">
      <div class="pricing__card">
        <h3 class="pricing__title">スターター</h3>
        <p class="pricing__price"><span class="pricing__number">9,800</span>円/月</p>
        <ul class="pricing__features">
          <li>基本機能の利用</li>
          <li>メールサポート</li>
          <li>ストレージ 10GB</li>
        </ul>
        <a href="#" class="pricing__button">選択する</a>
      </div>
      <div class="pricing__card pricing__card--popular">
        <span class="pricing__badge">人気No.1</span>
        <h3 class="pricing__title">プロフェッショナル</h3>
        <p class="pricing__price"><span class="pricing__number">29,800</span>円/月</p>
        <ul class="pricing__features">
          <li>すべての基本機能</li>
          <li>優先チャットサポート</li>
          <li>ストレージ 100GB</li>
        </ul>
        <a href="#" class="pricing__button">選択する</a>
      </div>
    </div>
  </div>
</section>
HTML

CSS

/* CSSコード */
.pricing {
  padding: 80px 20px;
  background-color: #f4f7f6;
}

.pricing__inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.pricing__heading {
  font-size: 2rem;
  color: #2c3e50;
  margin-bottom: 15px;
}

.pricing__subheading {
  font-size: 1rem;
  color: #7f8c8d;
  margin-bottom: 50px;
}

.pricing__list {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: stretch;
}

.pricing__card {
  background-color: #ffffff;
  padding: 40px 30px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  flex: 1;
  max-width: 380px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.pricing__card--popular {
  border: 2px solid #3498db;
  transform: scale(1.03);
}

.pricing__badge {
  position: absolute;
  top: -15px;
  right: 30px;
  background-color: #3498db;
  color: #ffffff;
  padding: 5px 15px;
  font-size: 0.85rem;
  font-weight: bold;
  border-radius: 20px;
}

.pricing__title {
  font-size: 1.25rem;
  color: #2c3e50;
  margin-bottom: 20px;
}

.pricing__price {
  font-size: 1rem;
  color: #7f8c8d;
  margin-bottom: 30px;
}

.pricing__number {
  font-size: 2.5rem;
  font-weight: bold;
  color: #2c3e50;
}

.pricing__features {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
  text-align: left;
  flex-grow: 1;
}

.pricing__features li {
  padding: 10px 0;
  border-bottom: 1px solid #ecf0f1;
  color: #34495e;
}

.pricing__button {
  display: block;
  padding: 15px;
  background-color: #ecf0f1;
  color: #2c3e50;
  text-decoration: none;
  font-weight: bold;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.pricing__card--popular .pricing__button {
  background-color: #3498db;
  color: #ffffff;
}

.pricing__button:hover {
  opacity: 0.9;
}
CSS

SCSS

/* SCSSコード */
$color-primary: #3498db;
$color-text-main: #2c3e50;
$color-text-sub: #7f8c8d;
$color-bg-light: #f4f7f6;
$color-white: #ffffff;
$radius-base: 12px;

.pricing {
  padding: 80px 20px;
  background-color: $color-bg-light;

  &__inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
  }

  &__heading {
    font-size: 2rem;
    color: $color-text-main;
    margin-bottom: 15px;
  }

  &__subheading {
    font-size: 1rem;
    color: $color-text-sub;
    margin-bottom: 50px;
  }

  &__list {
    display: flex;
    gap: 30px;
    justify-content: center;
    align-items: stretch;

    @media (max-width: 768px) {
      flex-direction: column;
      align-items: center;
    }
  }

  &__card {
    background-color: $color-white;
    padding: 40px 30px;
    border-radius: $radius-base;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    flex: 1;
    max-width: 380px;
    position: relative;
    display: flex;
    flex-direction: column;

    &--popular {
      border: 2px solid $color-primary;
      transform: scale(1.03);

      @media (max-width: 768px) {
        transform: none;
      }
    }
  }

  &__badge {
    position: absolute;
    top: -15px;
    right: 30px;
    background-color: $color-primary;
    color: $color-white;
    padding: 5px 15px;
    font-size: 0.85rem;
    font-weight: bold;
    border-radius: 20px;
  }

  &__title {
    font-size: 1.25rem;
    color: $color-text-main;
    margin-bottom: 20px;
  }

  &__price {
    font-size: 1rem;
    color: $color-text-sub;
    margin-bottom: 30px;

    .pricing__number {
      font-size: 2.5rem;
      font-weight: bold;
      color: $color-text-main;
    }
  }

  &__features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    text-align: left;
    flex-grow: 1;

    li {
      padding: 10px 0;
      border-bottom: 1px solid #ecf0f1;
      color: #34495e;
    }
  }

  &__button {
    display: block;
    padding: 15px;
    background-color: #ecf0f1;
    color: $color-text-main;
    text-decoration: none;
    font-weight: bold;
    border-radius: 6px;
    transition: opacity 0.3s ease;

    .pricing__card--popular & {
      background-color: $color-primary;
      color: $color-white;
    }

    &:hover {
      opacity: 0.85;
    }
  }
}
SCSS

実務における重要ポイントの深掘り

プログラミング初心者から一歩抜け出し、実務で評価されるWebデザイナー・フロントエンドエンジニアになるために知っておくべき設計のコツを解説します。

ユーザーの決断を促すコンバージョンデザイン

サービスサイトでは、ただ情報を並べるだけではなく「どのプランを選んでほしいか」を明確に視覚化することが極めて重要です。今回の料金プランの例では、最も売りたいプロフェッショナルプランに pricing__card--popular という修飾クラスを付与し、枠線を強調してわずかに大きく（transform: scale(1.03)）表示させています。このように、ユーザーの注意を自然と誘導する心理学的アプローチをデザインやCSSに落とし込むことが、コンバージョン率を高めるプロのテクニックです。また、スマートフォンなどの狭い画面幅では、拡大表示によるレイアウト崩れを防ぐためにメディアクエリを用いて効果を無効化する配慮も実務では欠かせません。

SCSSによる保守性と拡張性の高い設計

先ほどのSCSSコードでは、色や角丸の値を冒頭で変数化しています。実務ではプロジェクトの途中でメインカラーの変更などの仕様変更が頻繁に発生するため、値が直接記述されていると修正漏れやミスの原因になります。変数を一元管理すること、そしてBEMの構造に合わせてネストをスマートに記述することで、コードの量や複雑さを抑えつつ、誰が見ても分かりやすい美しいコードベースを維持することができます。

スポンサーリンク
タイトルとURLをコピーしました