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

​

テーマの制限

• 無料のCMS Hubアカウントでは、サイト検索、CTA機能、ネイティブHubSpot動画を使用できません。CMS Hubサブスクリプションでご利用可能な機能の詳細については、HubSpot製品・サービスカタログをご覧ください。
• テーマに含めるコンポーネントの数の上限は次のとおりです。
  • 50件のテンプレート（最小ページが必要）
  • 50モジュール（最小5件）
  • 50セクション（最小5個）
• テーマに次のコンポーネントを含めることはできません。
  • Eメールテンプレート
  • HubDB機能
  • サーバーレス関数
  • CRMオブジェクトフィールド
  • テンプレート内のフレキシブルカラム

​

全体的なテーマの要件

• 提出される全てのテーマは、明確に区別できるオリジナルのものでなければなりません。例えば、コピーやプレースホルダーの内容が異なるだけのテーマは、別のテーマとは見なされません。詳細はHubSpotテンプレートマーケットプレイスのコンプライアンスをご確認ください。
• テーマの作成には、HTMLおよびHubLテンプレートと、dnd_areaタグを使用する必要があります。
• テーマは、12列グリッドに準拠する必要があります。

​

テーマファイルの構造

​

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

{{require_css(get_asset_url('../../css/main.css')) }}

​

テーマのパフォーマンス

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

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

​

テーマのプレビューURL

​

jQueryの使用

{# 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
{
  "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
}

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

​

テーマ設定（fields.json）

• fields.jsonファイルに少なくとも3つの色フィールドが含まれている必要があります。
• テーマと独立したモジュールの互換性を確保するには、テーマにフォントおよび色の標準命名規則として、primary_color、secondary_color、heading_font、body_fontを含める必要があります。詳細はモジュールとテーマの互換性をご確認ください。

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

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

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

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

​

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

​

セクション

• 適用可能な場合は常にセクションを使用する必要があります。テーマにはそれぞれ少なくとも5個のセクションが必要です。
• セクションには固有の実用的なスクリーンショットが必要です。
• セクションとモジュールを冗長にしないでください。

​

ページテンプレート

• ウェブサイトページテンプレートまたはランディングページテンプレート。
  • 複数のページテンプレートを含める場合、各テンプレートは別個の目的を持つ必要があります。例えばホームページ、会社概要__ページ、全幅ランディングページ、右サイドバー付きランディングページなどです。
  • 1つのテーマに少なくとも8個のページテンプレートを含めることをお勧めします。
• 別個のブログリストテンプレートとブログ記事テンプレート。
  • ブログリストテンプレート: リスト形式で全てのブログ記事を表示するページ（「ブログロール」と呼ばれる）。テンプレートのタイトルは、リストページ用であることを示す必要があります。
  • ブログ記事テンプレート: 個々のブログ記事を表示する、ブログ記事の詳細ページ。テンプレートのタイトルは、ブログ記事ページ用であることを示す必要があります。
  • さらに、ブログコメント欄とブログ執筆者欄のスタイルを、テーマに合わせて設定する必要があります。
• 次のシステムページテンプレート：
  • 404エラーテンプレート: 存在しないページに訪問者がアクセスしようとしたときに表示されます。
  • 500エラーテンプレート: ウェブサイトで内部エラーが発生したときに表示されます。
  • パスワード プロンプト テンプレート: ページがパスワードで保護されているときに表示されます。
  • サブスクリプションテンプレート: 配信（サブスクリプション）設定ページ。このページで、Eメール受信者は配信登録するEメールの種類を管理できます。
  • サブスクリプション更新テンプレート: Eメール受信者が配信設定を更新したときに表示される確認ページ。
  • 配信登録解除バックアップテンプレート: 配信登録を解除しようとしているEメール受信者に対し、HubSpotがそのEメールアドレスを判断できない場合に表示されるページ。
  • 検索結果テンプレート: サイト検索を使用したときに返される検索結果を表示します。有料のCMS Hubアカウントでのみご利用いただけます。

​

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

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

​

モジュール

​

グローバルコンテンツ

​

グローバルパーシャル

• テーマにはグローバルパーシャルが含まれている必要があります。
• グローバルパーシャルには、使用可能なドラッグ＆ドロップエリアを含める必要があります。例えば、ドラッグ＆ドロップエリアを「非表示」クラスで非表示にすることはできません。
• 使用可能なドラッグアンドドロップエリアをヘッダーとフッターに組み込む必要があります。
• また、サイト全体でグローバルに使用されるメニューについては、ユーザーがアカウント設定で作成したHubSpotナビゲーションメニューを選択できるようにする必要もあります。

​

多言語サポート

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

​

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

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