HubSpotテンプレートマーケットプレイスでのテーマの要件

HubSpotテンプレートマーケットプレイスへの提出のために、テーマが満たす必要のある要件について、詳しくご確認ください。 

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

• 無料のCMS Hubアカウントでは、サイト検索およびCTA機能を使用できません。CMS Hubサブスクリプションでご利用可能な機能の詳細については、HubSpot製品・サービスカタログをご覧ください。
• テーマに含めるコンポーネントの数の上限は次のとおりです。
  • 50個のテンプレート
  • 50個のモジュール
  • 50個のセクション

• テーマに次のコンポーネントを含めることはできません。
  • Eメールテンプレート
  • HubDB機能
  • サーバーレス関数
  • CRMオブジェクトフィールド
  • メンバーシップテンプレート
  • テンプレート内のフレキシブルカラム

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

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

詳しくはCLIを使用してテーマのGoogle Lighthouseレポートを生成する方法をご確認ください。

さらに、テーマアセットは、次のパフォーマンス要件とアクセシビリティー要件を満たす必要があります。

• テーマファイルは正常にミニフィケーションを行える必要があります。
• 全ての画像ファイルはサイズが1MB未満である必要があります。
• 全ての画像タグはalt属性を持つ必要があります（値""は使用可能です）。
• 全ての画像タグはloading属性を持つ必要があります（値""は使用可能です）。

マーケットプレイスのテーマは、次の要件を満たす必要があります。

• 提出される全てのテーマは、明確に区別できるものでなければなりません。例えば、コピーまたはプレースホルダーの内容が異なる同一のテーマは、別個のテーマとして見なされません。 
• テーマの作成には、HTML+HubLテンプレートおよびdnd_areaタグを使用する必要があります。
• 該当する場合には、セクションを使用する必要があります。テーマにはそれぞれ少なくとも5個のセクションが必要です。 
• ドラッグ＆ドロップ ヘッダーとフッターを使用する必要があります。
• 12列グリッドを考慮したテーマでなければなりません。

さらにテーマは、すべてのテンプレート、テーマ フィールド オプション、theme.json設定とfield.json設定、およびモジュールフィールドにおいて次の最小要件を満たす必要があります。

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

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

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

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

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

• タイポグラフィーフィールド：
  • 本文テキストのフォントフィールド（pタグ）
  • h1～h6のフォントフィールド
  • ホバースタイルを含むハイパーリンクの色（aタグ）
• フォームフィールド：
  • タイトルの背景
  • 少なくともフォントの色のスタイルを含むタイトルテキスト
  • フォームの背景色
  • フォーム境界線の色
  • フォームラベルの色
  • フォームフィールドの境界線の色
  • ボタンテキスト、背景色、ホバースタイルの設定を含むフォームボタン

さらに、テーマフィールドは次の要件を満たす必要があります。

• テーマ内のフィールドは、必要に応じて論理的にグループ化する必要があります。例えば、タイポグラフィーに関連する複数のフィールドをTypographyグループとしてグループ化します。
• テーマフィールドには、次のグローバルに適用される要素が必要です。
  • プライマリー、セカンダリー、およびターシャリーの色フィールド
  • 見出しのフォントフィールド
  • 本文のフォントフィールド
• テーマフィールドには、ボタンとフォーム用の個別の色とフォントの制御設定に加えて、ヘッダーとフッター用の個別の色、ロゴ、フォントの制御設定が必要です。 
• テーマの色フィールドとロゴフィールドの一部は、アカウントのブランディング設定を継承する必要があります。
  • 少なくとも2つの色フィールドが、アカウントのブランド設定から色を継承する必要があります。その他の色フィールドでは、白と黒を含む他の色を既定の色として使用できます。
  • テーマ内のモジュールでロゴが使用されている場合、少なくとも1つのロゴフィールドは、アカウントのブランド設定を継承する必要があります。画像フィールドを使用してロゴをレンダリングする場合、画像フィールドはブランド設定を継承する必要はありません。

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

これらのパラメーターの詳細については、theme.jsonドキュメントをご確認ください。

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

テーマと独立モジュールの間の機能互換性を確保するには、フォントと色に関する次の標準的な命名規則をテーマに含める必要があります：primary_color、secondary_color、heading_font、body_font。

テーマフィールドにprimary_color、secondary_color、heading_font、body_fontフィールドがない場合は、alternate_namesフィールドを使用できます。この要件の詳細については、こちらをご覧ください。

 これらのパラメーターの詳細については、fields.jsonのドキュメントを参照し、HubSpot CMS Boilerplateのサンプルfields.jsonファイルを確認してください。 

テーマ設定は以下の要件を満たす必要があります。

テーマ設定は、モジュールで設定されているエディタースタイルまたはスタイルと競合しないものでなければなりません。例えば、CSSで!importantを使用してはなりません。このプロパティーを使用すると、エンドユーザーによる上書きが困難になり、競合を引き起こす可能性があります。

テーマ設定では、コンテンツクリエイターが更新内容を把握できるよう、各設定に分かりやすい説明ラベルを使用する必要があります。

テーマに含まれる全てのテンプレートに同じテーマ設定を適用する必要があります（ただし、追加のスタイルに特定の用途がある場合を除きます）。例えば、設定でh1見出しのスタイルとサイズを変更した場合は、テーマに含まれる全てのh1タグにその変更を適用する必要があります。

テーマにはグローバルパーシャルが含まれている必要があります。グローバルパーシャルは、HTMLとHubLを使用して作成されたテンプレートの一種であり、ウェブサイト全体でこれを再利用できます。典型的なパーシャルは、ウェブサイトのヘッダー、ページのサイドバー、ウェブサイトのフッターです。 

グローバルパーシャルには、使用可能なドラッグ＆ドロップエリアを含める必要があります。また、サイト全体でグローバルに使用されるメニューの場合、ユーザーが自分のアカウント設定で作成したHubSpotナビゲーションメニューを選択できる必要もあります。

詳しくはグローバルパーシャルを作成する方法をご確認ください。

すべてのテーマに適切なフォルダー構造が含まれる必要があり、製品掲載情報を示す単一の親フォルダーの下でグループ化されている必要があります。例えば、マーケットプレイス用に「SuperAwesome」というテーマを作成している場合は、以下の図のような構造になります。テーマファイルの構造について詳しくご覧ください。 

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

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

ライブデモがアクセス不可になった場合、HubSpotはプロバイダーへの通知をもって、ライブデモが再びアクセス可能になるまでテーマを除外または除去する権利を留保します。

テーマアセットを参照する際には、相対ローカル ファイル パスを使用する必要があります。相対パスを含める際の最善の方法は、get_asset_url関数を使用することです。この関数は、アセット、ファイル、テンプレートの公開URLを返します。また、ファイルを右クリックして［公開URLをコピー］を選択するか、［アクション］をクリックして［公開URLをコピー］を選択することで、この関数を生成することもできます。

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

テーマがjQueryに依存している場合、顧客のアカウントで既定で有効化されないイベントにjQueryのバージョンを含める必要があります。 

例えば、jQueryを必要とするモジュールを含める場合、ウェブサイトの残りの部分でjQueryが必要でないときは、次のコードを使用してjQueryを読み込む必要があります。

テーマは複数の言語バージョンに対応可能でなければならず、対応可能な言語を指定する必要があります。グローバルヘッダー内で言語切り替えモジュールを追加すると、顧客が簡単に言語のオプションを見つけて目的の言語を選択できるようになります。

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