> ## 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テンプレートマーケットプレイスへの提出のために、テーマが満たす必要のある要件について、詳しくご確認ください。

テーマ作成の取り組みを始めたばかりの場合は、HubSpotの無料のCMSテーマボイラープレートを利用することを強くお勧めします。このテンプレートは、HubSpotの[Gitリポジトリー](https://github.com/HubSpot/cms-theme-boilerplate)からダウンロードすることも、[アカウントのデザインマネージャーUI内でインポート](https://www.youtube.com)することもできます。

また、テンプレートをHubSpotテンプレートマーケットプレイスに提出する際は、[テンプレート掲載ページの要件](https://developers.hubspot.com/docs)をご確認ください。

## テーマの制限

テーマごとに以下の制限が適用されます。

* 無料の**CMS Hub**アカウントでは、サイト検索、CTA機能、ネイティブHubSpot動画を使用できません。**CMS Hub**サブスクリプションでご利用可能な機能の詳細については、[HubSpot製品・サービスカタログ](https://legal.hubspot.com/hubspot-product-and-services-catalog)をご覧ください。

* テーマに含めるコンポーネントの数の上限は次のとおりです。

  * 50件のテンプレート[（最小ページが必要）](#templates-css%2C-sections%2C-page-templates%2C-etc.)
  * 50モジュール（最小5件）
  * 50セクション（最小5個）

* テーマに次のコンポーネントを含めることは**できません**。
  * Eメールテンプレート
  * HubDB機能
  * サーバーレス関数
  * CRMオブジェクトフィールド
  * [テンプレート内のフレキシブルカラム](https://developers.hubspot.com/docs#flexible-columns)

<Alert type="info">
  **モジュールとセクション**

  セクションは、コンテンツ制作者がページ上の全幅ドロップゾーンにのみドロップできるため、開発者が質の高い最終製品を保証するのに役立ちます。

  特に固定レイアウトセクションは、コンテンツ制作者がセクション内の要素を移動できないため、ドラッグ＆ドロップエディターでは実現できないクリエイティブな書式設定やレイアウトを提供するための優れたツールとなります。

  セクションには、コンテンツ制作者にとっての使いやすさというメリットもあります。セクション内で個々のモジュールを選択できるため、モジュールフォームが短くなり、編集中の要素に絞って設定できるようになります。
</Alert>

## 全体的なテーマの要件

* 提出される全てのテーマは、明確に区別できるオリジナルのものでなければなりません。例えば、コピーやプレースホルダーの内容が異なるだけのテーマは、別のテーマとは見なされません。詳細は[HubSpotテンプレートマーケットプレイスのコンプライアンス](https://developers.hubspot.com/docs#template-marketplace-compliance)をご確認ください。
* テーマの作成には、HTMLおよびHubLテンプレートと、[dnd\_area](/cms/reference/hubl/tags/dnd-areas)タグを使用する必要があります。
* テーマは、12列グリッドに準拠する必要があります。

### テーマファイルの構造

全てのテーマは、適切なフォルダー構造を持ち、製品掲載情報を表す単一の親フォルダーにまとめられている必要があります。例えば、マーケットプレイス用に「SuperAwesome」というテーマを作成する場合は、以下の図のような構造になります。詳細は[テーマファイルの構造](https://developers.hubspot.com/docs#theme-file-structure)をご確認ください。

<DndSection>
  ![template-name](https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/template-name.png)

  ![file-structure](https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/file-structure.png)
</DndSection>

### テンプレートの相対ローカルファイルパス

テーマアセットを参照する際には、相対ローカルファイルパスを使用する<u>必要があります</u>。相対パスを含める際の最善の方法は、[get\_asset\_url関数](/cms/reference/hubl/functions#get-asset-url)を使用することです。この関数は、アセット、ファイル、テンプレートの公開URLを返します。また、**ファイル**を右クリックして**公開URLをコピー**を選択するか、**アクション**をクリックして**公開URLをコピー**を選択することで、[この関数を生成](/cms/reference/hubl/functions#get-asset-url)することもできます。

例えば、`require_css`と`get_asset_url`で参照されるスタイルシートを次のように書式設定する必要があります。

<Tabs defaultSelected="0">
  <Tab tabId="0" title="入力">
    ```hubl theme={null}
    {{require_css(get_asset_url('../../css/main.css')) }}
    ```
  </Tab>

  <Tab tabId="1" title="出力">
    ```html theme={null}
    //cdn2.hubspot.net/hub/1234567/hub_generated/template_assets/1565970767575/custom/styles/style.min.css
    ```
  </Tab>
</Tabs>

以下の動画で、開発者アカウント内のファイルとマーケットプレイスの顧客に配信されるファイルとのファイル構造の違いをご確認ください。

<IFrame src="https://www.youtube.com/embed/SSOdhqOciuk?feature=oembed" maxHeight="144.64px" maxWidth="256px" allowFullScreen={false} />

## テーマのパフォーマンス

Google Lighthouseを使用する場合は、テーマのスコアが次のしきい値を<u>上回る</u>必要があります。

* **デスクトップのアクセシビリティー**: 65
* **デスクトップのベストプラクティス**: 80
* **デスクトップのパフォーマンス**: 70
* **モバイルのパフォーマンス**: 40

詳しくは[CLIを使用してテーマのGoogle Lighthouseレポートを生成する方法](/developer-tooling/local-development/hubspot-cli/install-the-cli)をご確認ください。

* テーマファイルはミニフィケーション可能でなければなりません。
* 全ての画像ファイルはサイズが1MB未満である必要があります。
* 全ての画像タグは`alt`属性を持つ必要があります（値`""`は使用可能です）。
* 全ての画像タグは`loading`属性を持つ必要があります（値`""`は使用可能です）。

### テーマのプレビューURL

プレビューURLを作成する場合は、独自のドメイン名を使用する必要があります。次のような構造を持つHubSpot提供のドメインを使用することはできません：`[AccountID].hs-sites.com`

デモサイトの画像ではなく、公開中のウェブサイトを使用する必要があります。

ライブデモにアクセスできなくなった場合、HubSpotはプロバイダーに通知した上で、再びアクセスできるようになるまでテーマの掲載を停止または削除する権利を留保します。

## jQueryの使用

jQueryは、お客さまのHubSpotアカウントで[デフォルトでは有効になっていません](https://knowledge.hubspot.com/ja/website-pages/include-jquery-across-your-hubspot-pages)。テーマがjQueryに依存している場合は、テーマが想定通りに機能するように、jQueryのバージョンを含める必要があります。

例えば、jQueryを必要とするモジュールを組み込むが、サイトの他の部分ではJQueryが不要な場合、次のコードを使ってjQueryを読み込む必要があります。

```hubl theme={null}
{# this checks if the "Include jQuery" option in Settings > CMS > Pages is checked #}
{% if not site_settings.include_jquery %}
  {{ require_js("../jquery-3.4.1.js", "footer") }}
{% endif %}
```

## テーマ構成（teme.json）

`theme.json`ファイルには、次のパラメーターを含める必要があります。

```json theme={null}
// theme.json
{
  "label": "Cool Theme",
  "preview_path": "./templates/home-page.html",
  "screenshot_path": "./images/templates/homepage.jpg",
  "enable_domain_stylesheets": false,
  "version": "1.0",
  "author": {
    "name": "Jon McLaren",
    "email": "noreply@hubspot.com",
    "url": "https://theme-provider.com/"
  },
  "documentation_url": "https://theme-provider.com/cool-theme/documentation",
  "license": "./license.txt",
  "example_url": "https://theme-provider.com/cool-theme/demo",
  "is_available_for_new_content": true
}
```

`theme.json`ファイルをチェックして、次のことを確認してください。

* ラベル名が、テーマ掲載情報での名前と一致していること。
* HubSpotの無料のCMSテーマボイラープレートを使用している場合は、ボイラープレートの値が存在していないこと。これには、作成者情報、ドキュメントURL、サンプルURLなどが含まれます。
* ドキュメントURLが解決され、このURLにテーマの使い方に関するドキュメントが用意されていること。
* プレビューパスがテーマ内の有効なファイルを指していること。
* スクリーンショットパスが有効なファイルを指していて、テーマに関連していること。
* サンプルURLが正しく解決され、テーマのデモページが表示されること。サンプルURLで`preview.hs-sites.com`サブドメインや`[AccountID].hs-sites.com`サブドメインが使用されていないこと。

詳細は[Theme.jsonのパラメーター](https://developers.hubspot.com/docs#theme-json)をご確認ください。

## テーマ設定（fields.json）

`fields.json`ファイルは、テーマエディターで利用可能なフィールドとフィールドグループ（スタイルフィールドを含む）を制御します。含めるフィールドは、ページエディターでの制作担当者による制御をどの程度可能にするかに応じて異なります。

* `fields.json`ファイルに少なくとも3つの色フィールドが含まれている必要があります。
* テーマと独立したモジュールの互換性を確保するには、テーマにフォントおよび色の標準命名規則として、`primary_color`、`secondary_color`、`heading_font`、`body_font`を含める必要があります。詳細は[モジュールとテーマの互換性](https://developers.hubspot.com/docs#module-compatibility-with-themes)をご確認ください。

テーマフィールドに`primary_color`、`secondary_color`、`heading_font`、`body_font`フィールドがない場合は、`alternate_names`フィールドを使用できます。

詳細は、[fields.jsonのパラメーター](https://developers.hubspot.com/docs#fields-json)と、HubSpot CMSボイラープレートの[サンプルfields.jsonファイル](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/fields.json)をご確認ください。

テーマ設定には次の要件も適用されます。

* エディタースタイルまたはモジュールを通じて設定されたスタイルと競合しないこと。例えば、CSSスタイルシートでは`!important`を使用しないでください。このプロパティーを使用すると、エンドユーザーによる上書きが困難になり、競合の原因となる可能性があります。
* コンテンツ制作者が更新内容を把握できるよう、テーマ設定では各設定に分かりやすい説明ラベルを使用すること。
* テーマ設定を、テーマに含まれる全てのテンプレートに適用すること（ただし、追加のスタイルに特定の用途がある場合を除きます）。例えば、テーマ設定で`h1`見出しのスタイルとサイズを変更した場合は、テーマに含まれる全ての`h1`タグにその変更を適用する必要があります。

テーマには、少なくとも次のテーマフィールドを含める**必要があります**。

**タイポグラフィーフィールド**:

* 本文テキストのフォントフィールド（`p`タグ）
* `h1`～`h6`のフォントフィールド
* ホバースタイルの設定を含むハイパーリンクの色（`a`タグ）

**フォームフィールド**:

* フォームの背景色
* フォーム境界線の色
* フォームラベルの色
* フォームフィールドの境界線の色
* フォームボタン（ボタンテキスト、背景色、ホバースタイルの設定を含む）

さらに、次の要件も適用されます。

* テーマ内のフィールドは、必要に応じて論理的にグループ化する必要があります。例えば、タイポグラフィーに関連する複数のフィールドを`Typography`グループとしてグループ化します。
* テーマフィールドには、ボタンとフォーム用の個別の色とフォントの制御設定に加えて、ヘッダーとフッター用の個別の色、ロゴ、フォントの制御設定が必要です。
* テーマ内のモジュールでロゴが使用されている場合、少なくとも1つのロゴフィールドは、アカウントの[ブランド設定](/cms/start-building/building-blocks/fields/brand-and-settings-inheritance)を継承する必要があります。画像フィールドを使用してロゴをレンダリングする場合、画像フィールドはブランド設定を継承する必要はありません。

## テンプレート（CSS、セクション、ページテンプレートなど）

### セクション

* 適用可能な場合は常に[セクション](https://developers.hubspot.com/docs#reusable-sections)を使用する必要があります。テーマにはそれぞれ少なくとも5個のセクションが**必要です**。
* セクションには固有の実用的なスクリーンショットが必要です。
* セクションとモジュールを冗長にしないでください。

### ページテンプレート

テーマには、少なくとも次のテンプレートタイプを含める<u>必要があります</u>。

* ウェブサイトページテンプレートまたはランディングページテンプレート。

  * 複数のページテンプレートを含める場合、各テンプレートは別個の目的を持つ必要があります。例えばホームページ、会社概要\_\_ページ、全幅ランディングページ、右サイドバー付きランディングページなどです。
  * 1つのテーマに少なくとも8個のページテンプレートを含めることをお勧めします。

* 別個のブログリストテンプレートとブログ記事テンプレート。

  * **ブログリストテンプレート**: リスト形式で全てのブログ記事を表示するページ（「ブログロール」と呼ばれる）。テンプレートのタイトルは、リストページ用であることを示す必要があります。
  * **ブログ記事テンプレート**: 個々のブログ記事を表示する、ブログ記事の詳細ページ。テンプレートのタイトルは、ブログ記事ページ用であることを示す必要があります。
  * さらに、ブログコメント欄とブログ執筆者欄のスタイルを、テーマに合わせて設定する必要があります。

* 次のシステムページテンプレート：
  * **404エラーテンプレート**: 存在しないページに訪問者がアクセスしようとしたときに表示されます。
  * **500エラーテンプレート**: ウェブサイトで内部エラーが発生したときに表示されます。
  * **パスワード プロンプト テンプレート**: ページがパスワードで保護されているときに表示されます。
  * **サブスクリプションテンプレート**: 配信（サブスクリプション）設定ページ。このページで、Eメール受信者は配信登録するEメールの種類を管理できます。
  * **サブスクリプション更新テンプレート**: Eメール受信者が配信設定を更新したときに表示される確認ページ。
  * **配信登録解除バックアップテンプレート**: 配信登録を解除しようとしているEメール受信者に対し、HubSpotがそのEメールアドレスを判断できない場合に表示されるページ。
  * **検索結果テンプレート**: [サイト検索](/cms/start-building/building-blocks/modules/content-search)を使用したときに返される検索結果を表示します。有料の***CMS Hub***アカウントでのみご利用いただけます。

### ページテンプレートの命名

* 類似した名前のテンプレートがある場合は、それぞれの違いが分かる説明的な単語を名前に追加します。
* 大文字と小文字の一貫性を保ち、ハイフンを削除し、短縮形を使用しないようにします（例えば、「bg」を使用する代わりに「background」とスペルアウトします）。
* 会社名やテーマ名をテンプレート名に含める必要はありません。

## モジュール

テーマモジュールと個々のモジュールの要件については、[こちら](https://developers.hubspot.com/docs)で詳細をご確認ください。

## グローバルコンテンツ

### グローバルパーシャル

[グローバルパーシャル](/cms/start-building/building-blocks/global-content)は、HTMLとHubLを使用して作成されたテンプレートの一種であり、ウェブサイト全体で再利用できます。典型的なパーシャルは、ウェブサイトのヘッダー、ページのサイドバー、ウェブサイトのフッターです。詳しくは[グローバルパーシャルを作成する](/cms/start-building/building-blocks/global-content#creating-a-global-content-partial-template-using-local-development-tools)方法をご確認ください。

* テーマにはグローバルパーシャルが含まれている<u>必要があります</u>。
* グローバルパーシャルには、使用可能な[ドラッグ＆ドロップエリア](https://developers.hubspot.com/docs)を含める<u>必要があります</u>。例えば、ドラッグ＆ドロップエリアを「非表示」クラスで非表示にすることはできません。
* 使用可能なドラッグアンドドロップエリアをヘッダーとフッターに組み込む<u>必要があります</u>。
* また、サイト全体でグローバルに使用されるメニューについては、ユーザーがアカウント設定で作成した[HubSpotナビゲーションメニューを選択](/cms/start-building/building-blocks/modules/menus-and-navigation)できるようにする必要もあります。

<Alert type="warning" titleText="注：">
  注：グローバルパーシャル内にグローバルモジュールを含めることは避けてください。エンドユーザーのユーザーエクスペリエンスに悪影響を及ぼす可能性があります。
</Alert>

## 多言語サポート

テーマは複数の言語バージョンに対応できる<u>必要があり</u>、対応可能な言語も明記する必要があります。グローバルヘッダー内で[言語切り替えモジュール](/cms/reference/modules/default-modules#language-switcher)を追加すると、顧客が簡単に言語のオプションを見つけて目的の言語を選択できるようになります。

* 1度に表示できる言語は<u>1つのみ</u>にしてください。例えば、UIに英語とスペイン語の両方が同時に表示されないようにしてください。
* ハードコーディングされたテキストを使用しないでください。例えば、ブログリストボタンのテキストを「続きを読む」とハードコーディングするのではなく、エンドユーザーがコードに触れずにテキストを更新できるように、フィールド内でテキストを設定します。

## モバイルおよびレスポンシブ要素

テーマでは、コンテンツの閲覧に使用されるデバイスに合わせたコンテンツの適応に対応できる必要があります。また、さまざまなデバイスで一貫して優れたユーザーエクスペリエンスを提供できるテーマである必要もあります。これに該当する要素には以下のものが含まれますが、これらに限定されません。

* メインナビゲーション
* スライダーとタブ
* 大きな画像
* 水平スクロールは使用しないようにします（意図的な場合を除く）