> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.jp/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# 既定のテーマ｜HubSpot（ハブスポット）

> HubSpotでは、そのまま使用したり変更を加えたり、または自社のウェブサイトテーマ制作時の参考にしたりすることも可能な数多くのテーマを提供しています。テーマはCLIツールを使用してローカル環境にダウンロードすることも可能です。

export const SupportedProducts = ({marketing, sales, service, cms, marketingLevel, salesLevel, serviceLevel, cmsLevel}) => {
  const translations = {
    header: "サポートされる製品",
    description: "次のいずれかの製品またはそれ以上が必要です。",
    productNames: {
      marketing: "Marketing Hub",
      sales: "Sales Hub",
      service: "Service Hub",
      cms: "Content Hub"
    },
    tiers: {
      free: "無料ツール",
      starter: "Starter",
      professional: "Professional",
      enterprise: "Enterprise"
    }
  };
  const translateTier = tier => {
    if (!tier) return '';
    const lowerTier = tier.toLowerCase();
    return translations.tiers[lowerTier] || tier;
  };
  const products = [{
    name: marketing ? translations.productNames.marketing : '',
    level: translateTier(marketingLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/marketing-bolt.svg",
    alt: "Marketing Hub"
  }, {
    name: sales ? translations.productNames.sales : '',
    level: translateTier(salesLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/sales-star.svg",
    alt: "Sales Hub"
  }, {
    name: service ? translations.productNames.service : '',
    level: translateTier(serviceLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/service-heart.svg",
    alt: "Service Hub"
  }, {
    name: cms ? translations.productNames.cms : '',
    level: translateTier(cmsLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/content-play.svg",
    alt: "Content Hub"
  }].filter(product => product.name && product.level);
  if (products.length === 0) return null;
  return <div>
      <div className="text-sm mb-2">{translations.description}</div>
      <div className={`grid ${products.length === 1 ? 'grid-cols-1' : 'grid-cols-2'} gap-1.5`}>
        {products.map((product, index) => <div key={index} style={{
    display: 'flex',
    alignItems: 'center'
  }}>
            <img src={product.icon} alt={product.alt} className="w-3.5 h-3.5 mr-1.5 mt-2.5 mb-2.5 flex-shrink-0 align-middle" />
            <span className="font-medium mr-1 text-sm">{product.name} -</span>
            <span className="text-sm">{product.level}</span>
          </div>)}
      </div>
    </div>;
};

<Accordion title="サポートされる製品" defaultOpen="true" icon="cubes">
  <SupportedProducts cms={true} cmsLevel="starter" />
</Accordion>

HubSpotには、制作担当者が基本テーマを修正することなくウェブサイトページの作成に使用できる、既定の一連のテーマが用意されています。こうしたテーマは、開発の知識や要員が限られている制作担当者に最適です。

独自のテーマを作成する場合は、[HubSpot CMSボイラープレート](/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate)から始めることをお勧めします。ただし既定のテーマは、[HubSpot CLI](https://developers.hubspot.jp/docs/guides/cms/tools/local-development-cli)経由でダウンロードし、修正することができます。

以下では、現在利用可能な既定のテーマについて説明します。

<Warning>
  注：**CMS Hub** *Starter* アカウントでは、Growthテーマのみ利用可能です。
</Warning>

## 既定のテーマに対する変更

HubSpotの既定のテーマは、デベロッパー ファイル システム内の@hubspotというフォルダーにあります。このフォルダーは読み取り専用で、HubSpotだけが変更できます。テーマに変更を加える場合は、必要なテーマを[fetch](https://developers.hubspot.jp/docs/guides/cms/tools/local-development-cli#fetch)してから、テーマに変更を加えて、@hubspot以外のフォルダーに[アップロード](https://developers.hubspot.jp/docs/guides/cms/tools/local-development-cli#upload)する必要があります。

## 既定のテーマのリスト

以下に記載されているCLIコマンドを使用して、HubSpotの既定のテーマを自由にダウンロードしてください。[CMS CLI](https://developers.hubspot.jp/docs/guides/cms/tools/local-development-cli)での[fetchコマンド](https://developers.hubspot.jp/docs/guides/cms/tools/local-development-cli#fetch)については、詳細をご覧ください。

### Growthテーマ

<DndSection>
  <DndModule numCols={5}>
    <Frame>
      <img src="https://www.hubspot.com/hubfs/5Cdocs/default-themes/growth-homepage.jpg" alt="Growthテーマのホームページ" />
    </Frame>
  </DndModule>

  <DndModule numCols={7}>
    <div>
      [Growthテーマのデモページにアクセスする](https://design-assets.hubspot.com/growth/home)
    </div>

    <div>
      #### Industry:

      Any

      #### Features:

      * 18 Modules
      * 12 Sections
      * 16 Templates

      #### How to download:
    </div>

    ```shell theme={null}
    hs fetch @hubspot/growth <destination-folder>
    ```
  </DndModule>
</DndSection>

## メンテナンスモードの既定のテーマ

以下のテーマはメンテナンスモードに移行されました。今後、新しい機能を追加する更新は行われず、セキュリティー、アクセシビリティー、バグ修正に関連する更新のみが行われます。

### Barricadeテーマ

建設企業向けのテーマ。

<DndSection>
  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/default-themes/cms-barricade-theme-thumb-4.jpg" alt="Barricadeテーマのスクリーンショット" />
    </Frame>
  </DndModule>

  <DndModule numCols={7}>
    <div>
      [Barricadeテーマのデモページにアクセスする](https://design-assets.hubspot.com/barricade/home)
    </div>

    <div>
      #### Industry:

      Construction

      #### Features:

      * 10 Modules
      * 19 Templates

      #### How to download:
    </div>

    ```shell theme={null}
    hs fetch @hubspot/barricade <destination-folder>
    ```
  </DndModule>
</DndSection>

### Educationテーマ

学校、大学などの教育機関向けに作成されたテーマ。

<DndSection>
  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/default-themes/cms-education-theme-thumb-4.jpg" alt="Educationテーマのスクリーンショット" />
    </Frame>
  </DndModule>

  <DndModule numCols={7}>
    <div>
      [Educationテーマのデモページにアクセスする](https://design-assets.hubspot.com/education/home)
    </div>

    <div>
      #### Industry:

      Education

      #### Features:

      * 13 Modules
      * 18 Templates

      #### How to download:
    </div>

    ```shell theme={null}
    hs fetch @hubspot/education <destination-folder>
    ```
  </DndModule>
</DndSection>

### Martechテーマ

マーケティングテクノロジー企業向けのウェブサイトテーマ。

<DndSection>
  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/default-themes/cms-martech-theme-thumb-4.jpg" alt="Martechテーマのスクリーンショット" />
    </Frame>
  </DndModule>

  <DndModule numCols={7}>
    <div>
      [Martechテーマのデモページにアクセスする](https://design-assets.hubspot.com/martech/home)
    </div>

    <div>
      #### Industry:

      Business Services, Marketing Agency

      #### Features:

      * 9 Modules
      * 19 Templates

      #### How to download:
    </div>

    ```shell theme={null}
    hs fetch @hubspot/martech <destination-folder>
    ```
  </DndModule>
</DndSection>

### Rallyテーマ

企業や代理店向けに作成されたテーマ。

<DndSection>
  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/default-themes/cms-rally-theme-thumbnail-1-4.png" alt="Rallyテーマのスクリーンショット" />
    </Frame>
  </DndModule>

  <DndModule numCols={7}>
    <div>
      [Rallyテーマのデモページにアクセスする](https://design-assets.hubspot.com/rally/home)
    </div>

    <div>
      #### Industry:

      Business Services, Marketing Agency

      #### Features:

      * 14 Modules
      * 19 Templates

      #### How to download:
    </div>

    ```shell theme={null}
    hs fetch @hubspot/cms-rally <destination-folder>
    ```
  </DndModule>
</DndSection>

### Sessionテーマ

企業向けに作成されたテーマ。

<DndSection>
  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/default-themes/cms-session-theme-thumb-4.jpg" alt="Sessionテーマのスクリーンショット" />
    </Frame>
  </DndModule>

  <DndModule numCols={7}>
    <div>
      [Sessionテーマのデモページにアクセスする](https://design-assets.hubspot.com/session/home)
    </div>

    <div>
      #### Industry:

      Business Services, Consumer Services

      #### Features:

      * 9 Modules
      * 18 Templates

      #### How to download:
    </div>

    ```shell theme={null}
    hs fetch @hubspot/session <destination-folder>
    ```
  </DndModule>
</DndSection>

### Sproutテーマ

企業や代理店向けに作成されたテーマ。

<DndSection>
  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/default-themes/cms-sprout-theme-thumb-4.jpg" alt="Sproutテーマのスクリーンショット" />
    </Frame>
  </DndModule>

  <DndModule numCols={7}>
    <div>
      [Sproutテーマのデモページにアクセスする](https://design-assets.hubspot.com/sprout/home)
    </div>

    <div>
      #### Industry:

      Business Services, Consumer Services

      #### Features:

      * 15 Modules
      * 21 Templates

      #### How to download:
    </div>

    ```shell theme={null}
    hs fetch @hubspot/sprout <destination-folder>
    ```
  </DndModule>
</DndSection>

### Vitalityテーマ

企業や代理店向けに作成されたテーマ。

<DndSection>
  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/default-themes/cms-vitality-theme-thumb-4.jpg" alt="Vitalityテーマのスクリーンショット" />
    </Frame>
  </DndModule>

  <DndModule numCols={7}>
    <div>
      [Vitalityテーマのデモページにアクセスする](https://design-assets.hubspot.com/vitality/home)
    </div>

    <div>
      #### Industry:

      Business Services, Healthcare, Consumer Services

      #### Features:

      * 8 Modules
      * 18 Templates

      #### How to download:
    </div>

    ```shell theme={null}
    hs fetch @hubspot/vitality <destination-folder>
    ```
  </DndModule>
</DndSection>