HubSpotアセットマーケットプレイスのコンプライアンス、デザイン、コード品質、および掲載情報

マーケットプレイスのアセットプロバイダーは、テーマを（テーマのテンプレートとモジュールとともに）提出する際に、HubSpotが規定した次の基準を順守する必要があります。これらの基準は、マーケットプレイスの全てのアセットに適用されます。 

マーケットプレイスプロバイダーは、プロバイダー情報を常に最新の状態に維持する必要があります。プロバイダー情報（Eメールやウェブサイトなど）に誤りや欠落がある、またはそれらが機能しなくなった場合には、HubSpotはアセット掲載情報を削除またはその承認を取り消す権利を留保します。

現時点では、アセットマーケットプレイスに提出できるのはテーマのみとなっています。テンプレートとモジュールは、テーマの一部としてのみ提出することができます。テーマでは、HubDBやサーバーレス関数などの機能は使用できません。テーマの制限について詳細をご確認ください。

サードパーティーのアセットファイルは、JSDelivr、Google Hosted Libraries、CDNJS（リンク先の情報は英語で提供されます）などの信頼できるソースからのファイルでない限り、HubSpot CDNに読み込まれる必要があります。これらのアセットは、@import機能を使用してスタイルシートに追加できます。

注：モジュールにファイルを含める場合は、meta.jsonファイル（デザインマネージャーの［リンク済みファイル］セクション）にcss_assetsおよびjs_assetsパラメーターを使用する必要があります。

アセット マーケットプレイス プロバイダーは、最大20個の無料テーマ（テーマ アクセラレーター プログラムから提出されるテーマを除く）を提供できます。

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

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

以下は、アセットをデザインする際に満たす必要がある要件です。

アセットは、一般的なモバイルおよびデスクトップの解像度／幅で適切に表示される必要があります。つまり、モバイルとデスクトップの両方の画面でアセットが適切に表示されなければなりません。さらに､アセットは､ユーザーがページ領域外にスクロールしなければならなかったり（アセットの意図的な動作である場合を除く）、異なるブラウザーで予期しない結果を引き起こしたりするものであってはなりません。

 実際のデバイスとさまざまなブラウザーを使用してテストすることをお勧めしますが、次のようなサードパーティーのサービスも使用できます。なお、リンク先の情報は英語での記載となります。

• BrowserStack
• Responsinator
• Sauce Labs

全てのアセットは、HubSpotでサポートされているブラウザーに対応する必要があります。こちらのナレッジベースの記事で、一覧をご覧いただけます。

美的品質に優れ、視覚的に訴えるデザインである必要があります。以下は、アセットマーケットプレイスへの提出を無効にする可能性がある美的品質が低いデザインの例です。

• 既存のアイテムと酷似したデザイン：すでに掲載されているアイテムと非常によく似ており、区別しづらく混乱を招く可能性があるデザイン。
• 要素の間隔、パディング、余白、または線の高さが統一されていない：要素間の間隔が統一されていないデザインでは、ユーザーがセクションやテキストグループを視覚的に識別できません。
• 不適切な画像、透かしが入った画像、ピクセル化された画像、または使用権のない画像の使用：デザインには適切な画像を使用する必要があります。検索エンジンの「画像」検索で見つけた画像には、公共での使用が許可されません。無料の画像をお探しの場合は、無料画像サイトに関するブログ記事（英語）をお読みください。
• 補色ではない色の使用：デザインには、見た目の美しい配色が含まれている必要があります。配色を選択するときには、インクルーシブデザイン（英語）を作成するためにアクセシビリティーの基準（英語）を考慮することを強くお勧めします。
• 誤って配置された要素または配置に一貫性のない要素：デザインは、ビジュアルフローが論理的であり、視覚的に乱雑でなく統一感がある必要があります。例えば、テキストの配置が想定されていない領域にフローティング テキスト ボックスが誤って重なっているなど、ユーザーの混乱を招く要素があってはなりません。

アセットにラベルを付けるときは、記述的な命名規則を使用する必要があります。例えば、ユーザーがフィルター付きギャラリーリスト形式で画像を表示できるようにするモジュールを作成する場合には、次のようになります。

• 適切な命名の例：フィルター付きの画像ギャラリー
• 不適切な命名の例：ギャラリー

テンプレートを作成する際には、テンプレートアノテーションのドキュメントを参照してください。ページ作成フローでページテンプレートを選択するときにコンテンツクリエイターに表示されるラベルを制御する、labelアノテーションを使用する必要があります。

モジュールラベル、テンプレートラベル、セクションラベルでは、ラベルにアセットの名前を含めないでください。例えば、テーマのタイトルが「Gizmo」である場合、ラベルに「Gizmo - Slider」のようなテーマ名を含めることはできません。 

モジュールのコンテンツ要件について詳細をご確認ください。

アセットで使用する全ての用語、画像、メディア、および既定のコンテンツは、アセット掲載情報ページとデモサイトでの広告内容に一致する必要があります。

例えば、テーマ掲載情報が不動産を対象としていて、動作デモが含まれている場合は、エンドユーザーに同様のテーマを提示する必要があります。購入した際にフィットネスを中心とするテーマがエンドユーザーに提示される場合は、おとり商法と見なされ、受け入れられません。

次のようなアセットの異なるバリエーションの提出は許可されません。

• 色のバリエーション：配色だけ異なる同一のアセットは、一意のアセットとして見なされません。例えば、青い色のテーマを含むアセットを提出した後、同じアセットの赤い色のバージョンを提出することはできません。  
• テンプレートレイアウト：「右サイドバー付きランディングページ」と「左サイドバー付きランディングページ」などのように、サイドバーが単純に入れ替わっただけのアセットを提出しても、アセットの一意の個別インスタンスとして見なされません。
• コンテンツバリエーション：教育を対象としたコンテンツを含むアセットを提出し、その後不動産を対象とした同じアセットを提出しても、アセットの一意の個別インスタンスとして見なされません。

アセットには、アセットマーケットプレイスの既存の掲載情報の要素を使用することはできません。購入もしくはダウンロードされたアセット、またはアセットマーケットプレイスから購入もしくはダウンロードされたアセットを複製したものは全て却下されます。 

テーマにスタイルシートやJavaScriptファイルを組み込む場合は、これらのファイルを組み込むときにrequire_css関数とrequire_js関数を使用することをお勧めします。パフォーマンス向上のために、レンダリングをブロックするJavaScriptをフッターに読み込むことをお勧めします。

テーマのモジュールにスタイルシートやJavaScriptファイルを組み込む場合は、モジュールにこれらのファイルの依存関係をリンクすることを強くお勧めします。モジュールのコード品質要件について詳細をご確認ください。

IDとクラスを適用する場合は、適切な名前を使用し、一貫性のある命名規則に従う必要があります。ウェブ上にはさまざまな命名規則の方法論があります。例えば、以下が挙げられます。なお、リンク先の情報は英語での記載となります。

• BEM：https://en.bem.info/methodology/naming-convention/
• ABEM：https://css-tricks.com/abem-useful-adaptation-bem/
• ITCSS：https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
  • https://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528

コンテンツのスタイルは、生成された既定のクラス（サイト構造フレームワークの一部）に基づいて設定しないでください。これには、テンプレートとモジュールでHubSpotによって生成される次のクラスやIDが含まれますが、これらに限定されません。

HubSpotで生成される既定のクラスは、いつでも変更される可能性があります。代わりにカスタムクラスを使用してください。カスタムクラスは、指定されたクラスフィールドのデザインツールを使用して割り当てられるか、またはローカル開発でカスタムクラスを要素タグに追加することで割り当てられます。

「ソースコード」オプションを使用して、リッチ テキスト エディターでコンテンツ内にカスタムクラスまたはIDを含めないでください。このオプションを使用して追加されたクラスとIDは（直接的または間接的に）容易に上書きされる可能性があり、これによりアセットで認識される問題が発生します。

アセットが動作するために必要ではないコードやアイテムをアセットに含めることは認められません。このようなアイテムには、以下のものが含まれます。

• 未使用のスタイルシートまたはスクリプト 
• コメントアウトされたコード 
• 未使用のコード

コメントアウトされたコードと、コード内のコメントは異なります。明確化のために背景情報をコードに指定する場合は、コメント区切り記号を使用してください。コメント区切り記号を使用すると、コメントをページの［ソースを表示］ビューや［調査］ビューには表示せずに、コードにコメントを追加することができます。以下の例を参照ください。

テーマでは、提出される全てのテンプレートで、HubSpotの全ての既定のモジュールが適切にスタイル設定され表示される必要があります。

デザインマネージャーやブラウザーコンソール内では、エラーが表示されるテーマ、そのテンプレート、およびモジュールは認められません。デザインマネージャー内で表示されるエラーには、次のようなものがありがます。

サードパーティーのアセットを使用している場合、適切なセキュリティーを確保するために、掲載情報の読み込みはHTTPS経由で処理する必要があります。同様に、全てのコードはHTTPSで表示するときに適切にレンダリングする必要があります。これは、ブラウザーコンソールで混在コンテンツの警告を回避し、全てのコンテンツが正しく表示されるようにするためです。

アセットマーケットプレイスにアセットを掲載するときの要件は、以下の通りです。HubSpotは、以下の要件に準拠するために、アセット掲載情報の提出時に情報を変更する権利を留保します。

アセットに名前を付ける際には、アセットを簡単に区別できるように一意の名前を使用してください。アセットの命名において、以下は許可されません。

• アセットタイプを識別するための「テーマ」、「モジュール」、「セクション」という単語の使用。アセットは上記のタイプですでに分類されているため、これらの単語は不要です。 
  • 例：「サンプルテーマ」、「簡単なアコーディオンモジュール」、「1回限りの送信Eメール」
• 会社名。アセット掲載情報ページには、アセットプロバイダーの名前と情報がすでに表示されています。 
  • 例：「HubSpotで成長戦略」、「スライダー| HubSpot」、「HubSpotの簡単メーラー」
• バージョン番号。HubSpotのマーケットプレイスでは、アセット掲載情報に表示される公開済みアセットに独自のバージョン管理システムを使用しています。 
  • 例：「成長戦略 - 1.21」「成長戦略v2」「成長戦略2-1」

モジュールの命名およびその他のコンテンツ要件（英語）について詳細をご確認ください。

説明には、アセットの概要が記載され、主なセールスポイントと、購入者の目標達成にアセットがどのように役立つかについての情報が含まれていなければなりません。テーマの説明を作成するときには、テーマに含まれるモジュールやテンプレートのリストを含める必要はありません。モジュールやテンプレートはアセット掲載情報ページにすでに記載されています。

アセットの画像では、アセット自体に画像の主な焦点を当てる必要があります。画像のコンテンツの少なくとも75%が、アセットを示していなければなりません。

画像には、以下の要素を含めることはできません。こうしたが含まれている場合は、HubSpotが独自の裁量で削除します。

• 過剰なマーケティング表現やスローガン、テキスト、またはブランディング
  • 例：「100以上の機能とサポート！！！」、アセットの画像にテキストやブランディングを重ね合わせること。
• 実在または架空の人物がポーズをとったり、アイテムを指さしたり、アイテムを抱えていたりする画像。
  • 例：コンピューターを抱えている人物のストック画像を使用し、そのコンピューターの画面にアセットが表示されている。
• アセットのレビューとインストール、HubSpotパートナーティアまたはバッジ（存在する場合）、あるいはウェブサイトのパフォーマンス評価に関連する情報を表示するバッジまたはバナー。このようなデータは変動する可能性があるため、誤解を招きかねません。HubSpotパートナーであり、パートナーティアやバッジを表示したい場合は、最新版であることを確認してください。

アセットのフルサイズ画像を使用して、アセットの外観と機能を紹介してください。アセット掲載情報を最適な状態で閲覧できるようにするため、以下の画像サイズを使用することを強くお勧めします。 

• サムネイル画像：
  • サイズ：480px × 360px（比率4:3）以上
  • 形式：JPG、JPEG、PNG
• テーマ画像：
  • 最小幅：1160px
  • 形式：JPG、JPEG、PNG
• キービジュアル： 
  • サイズ：480px × 360px（比率4:3）以上
  • 形式：JPG、JPEG、PNG
• クライアントの例：
  • サイズ：480px × 360px（比率4:3）以上
  • 形式：JPG、JPEG、PNG

デモ動画では実際のアセットを紹介し、適切な使用例を伝える必要があります。動画はmp4形式である必要があります。最適に表示されるように4:3または16:9の比率を使用することをお勧めします。

機能のタイトルは、アセットマーケットプレイスのリストビューに表示されます。また、潜在顧客に対して最初に表示される要素の1つです。

機能セクションを使用して、アセットの主な機能を強調します。また、アセットが特定の問題を解決する上でどのように役立つかについて、適切な使用例を用いて潜在顧客に説明する必要があります。機能セクション内では、マーケティングベースの画像を使用して一連の機能を紹介することができます。例えば、ボタンのスタイルを紹介する画像のコラージュを使用できます。

HubSpotには、テーマに割り当てる既定のタグのセットがあります。特定のタグが利用できない場合は、新しいタグを追加できます。

アセットの検索タグを選択する場合、以下の点を考慮してください。

• リストされているアセットを正確に反映したタグを使用します。
• 次の要素を含むタグは使用できません。
  • 会社の名前（「HubSpot」「Example Company」など）。
  • 「最高評価」「最高」「ナンバーワン」などの相対的な用語。
  • 「テーマ」「モジュール」「Eメール」などのアセットタイプを記述するタグ。このような内容は、表示されているアセットタイプから解釈できます。
  • 冒涜的または侮蔑的な言葉。

クライアントの例（適切に機能しているクライアントのウェブサイトなど）は、他社がアセットをどのように利用しているかを顧客が確認できるようにする上で重要です。クライアントの例を示すことで、潜在顧客はアセットの使い方を把握し、どのようにカスタマイズできるかも確認できます。クライアントのウェブサイトへのリンクの許可を、クライアントから書面で得ることを強くお勧めします。要請があった場合に備えて、検証の目的にクライアントの書面による許可を使用できるようにしてください。

HubSpotは、上記に記載されていない理由によりアセットを拒否する権利を留保しています。いかなる場合でも、拒否された場合にはHubSpot品質保証（QA）エンジニアがEメールでフィードバックを提供します。

アセットは3回目の再提出で承認されない場合は、自動的に却下されます。 

QAエンジニアは、提出されたアセットのキューに基づいて作業を行います。QAに合格しなかったアセットが再提出されると、このアセットはキューの最後に移動します。また、提出されるアセットの数は変動するため、キュー内でのアセットの位置やレビューの期間に関する情報は提供できません。初回のQAプロセスでアセットが合格できるよう、アセットの提出に関するHubSpotによる推奨事項をご覧ください。 

アセット マーケットプレイス プロバイダーは、アップロードされた全てのコードとファイルに対する責任を負います。コードまたはファイルに問題がある場合は、マーケットプレイスでの掲載期間中、それぞれ単独で対応する必要があります。

アセット マーケットプレイス プロバイダーとそのチーム（アセットの開発に関与していない可能性がある社内の他のプロバイダーを含む）が、自社の掲載情報のレビューを行うことは許可されません。

プロバイダーは、領収書を依頼された場合には次の項目を含む詳細な領収書を提供できなければなりません。

• アセット掲載情報名
• アセット掲載情報の説明
• アセット購入日
• アセットの価格
• VAT（付加価値税）に関する情報（該当する場合）
• アセット マーケットプレイス プロバイダーの企業情報

HubSpotは、以下に示す理由（ただしこれらに限られません）により、マーケットプレイスの掲載情報を削除する権利を留保します。

• アセットにバグがある。
• 提出物に含まれるサードパーティーのアセットが破損している。
• アセットに、HubSpotでサポートされているブラウザー（セクション2.1.2）との互換性がない。
• 配布ライセンスのない画像、アイコン、フォント、音声、動画など、著作権で保護された素材を使用している。
• ユーザーに十分な情報を提供した上で明示的なオプトインの同意を得ずに、ユーザーを追跡するアセット。
• 以下を含むアセット（アセットマーケットプレイスまたはアセットデモのコンテンツへのリンクを含む）：
  • 違法行為の促進や関与
  • 名誉棄損や中傷を含むコンテンツ、悪意のあるコンテンツ 
  • 不誠実または虚偽の記載
  • 特定の人種、宗教、年齢、性別、性的指向を侮辱するようなコンテンツ
• モジュールがページやEメールの他の要素に影響する場合、モジュールは削除される（「コード品質に関するモジュールの要件」のセクション5（英語）を参照してください）。

当社は他者の知的財産権を尊重し、アセットプロバイダーの皆さまにも同様に尊重していただけるようお願いしております。当社は、独自の裁量により、他者の知的財産権を侵害したアセットプロバイダーによるアクセスの一時停止、または当該アセットプロバイダーのアカウントの停止を実行できるものとします。サードパーティーのアセットに基づくアセット（テーマ、テンプレート、モジュールなど）は、著作権保有者から当該アセットの使用許可を得ていない限り、提出しないでください。また、他社のロゴを組み込んだアセットは、当該企業の許可を得ていない限り提出しないでください。サードパーティーのマーケットプレイスから（個別または別の製品の一部として）アセットを購入し、HubSpot製品と連携するように変更する場合は、当該アセットの著作権保有者であるか、あるいは当社のようなサードパーティーのマーケットプレイスでのアセットの販売や配布を許可する基本ライセンスを所有していることを確認してください。確認が行われていない場合、そのアセットは当社の承認を得られない可能性があります。皆さまの作成したコンテンツが、当社のマーケットプレイス上で著作権の侵害に当たる形で複製されたと思われる場合は、ウェブサイト利用規約ページに掲載されている「著作権侵害の申し立て」の項に記載された手順に従ってください。

アセットには、HubSpot Shutterstock連携の画像を含めることはできません。

HubSpotは、アセット マーケットプレイス プロバイダー アカウントに接続できる、StripeとPayPalの2つの支払いゲートウェイオプションを提供しています。HubSpotは、アセット マーケットプレイス プロバイダーが自国でStripe支払いゲートウェイを利用いただける場合には、Stripe支払いゲートウェイを使用することを強く推奨します。Stripeがお住まいの国で利用いただけない場合は、PayPal支払いゲートウェイを使用することをお勧めします。