> ## 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.

# ドラッグ＆ドロップテンプレート

> デザインマネージャーのドラッグ＆ドロップテンプレートは、ビジュアルビルダーを使用して作成されるテンプレートです。利便性の面でコードテンプレートが優れているため、新しく作成する場合にドラッグ＆ドロップテンプレートは推奨されません。

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 marketing={true} marketingLevel="professional" cms={true} cmsLevel="professional" />
</Accordion>

<Warning>
  **ドラッグ＆ドロップテンプレートは、新しいテンプレートには推奨されません。**ドラッグ＆ドロップテンプレートはテーマの一部として使用できないため、テーマフィールドのようなテーマ機能と、テーマモジュールをサポートしません。また、CMS Hub Starterではサポート**されない**ため、代わりに`dnd_area`を使用してください。ドラッグ＆ドロップテンプレートでは、CMSの一部の新しい機能（[アクセス権設定（メンバーシップ）](/cms/start-building/features/memberships/overview)、[ドラッグ＆ドロップエリア](https://developers.hubspot.jp/docs/guides/cms/content/templates/drag-and-drop/overview)、[再利用可能セクション](/cms/start-building/building-blocks/sections/sections)、GraphQLなど）がサポートされません。拡張性が十分ではなく、制作担当者や開発者にとってコードテンプレートほどの利便性が得られません。代わりに、[ドラッグ＆ドロップエリア](/cms/start-building/building-blocks/templates/html-hubl-templates)を有する、コード化された[HTML＋HubLテンプレート](https://developers.hubspot.jp/docs/guides/cms/content/templates/drag-and-drop/overview)の利用をお勧めします。開発者やマーケティング担当者にとっての利便性が向上します。CMSの利用を始めるには、コードテンプレートを使用して構築されている[HubSpot Theme Boilerplate](https://github.com/HubSpot/cms-theme-boilerplate)（テーマボイラープレート）をぜひご参照ください。
</Warning>

ドラッグ＆ドロップ[テンプレート](https://developers.hubspot.jp/docs/guides/cms/content/templates/overview)は、技術的な知識がなくてもHubSpotのCMS上で簡単にウェブサイトを構築できるように設計されています。ドラッグ＆ドロップテンプレートには視覚的なテンプレートビルダーが採用されていますが、内部ではHTML+HubLが生成されます。

ビジュアルビルダーの動作に必要なHTML出力はHubSpotによって制御されていて、開発者がその構造化部分を直接制御することはできません。さらに、**layout.cssファイルがページに読み込まれて、ブートストラップ2に基づく基本的な12列グリッドが有効になります**。これにより、ドラッグ＆ドロップテンプレートを使用したウェブサイトは既定で、コンテンツの行が縦に積み重なったレスポンシブ対応になります。レスポンシブデザインの複雑なカスタマイズを行う場合には、独自のレスポンシブスタイルを追加可能です。

ドラッグ＆ドロップテンプレートはデザインマネージャー内で構築し、APIまたは[ローカル開発ツール](/developer-tooling/local-development/hubspot-cli/install-the-cli)を使用する場合にはJSONで表記します。ドラッグ＆ドロップテンプレートの編集方法としては、その性質上、デザイン マネージャー インターフェイスを使用する方法が推奨されます。\*\*コーディングが必要な場合は、バージョン管理機能を使用するか、使い慣れたローカルツールを使用して編集します。HTML+HubLコードテンプレートにより、最適な開発体験が提供されます。\*\*HTML+HubLテンプレートの[dnd\_area](/cms/reference/hubl/tags/dnd-areas)機能でも、ビジュアル コンテンツ エディター内で制作担当者が作業できるので、デザインマネージャーのドラッグ＆ドロップインターフェイスよりも優れた利便性を備えています。

## ドラッグ＆ドロップ テンプレート ビルダー

ドラッグ＆ドロップテンプレートを作成するには、デザインマネージャーを開き、ファインダー内で新しいファイルを作成し、作成するテンプレートと[テンプレートのタイプ](https://developers.hubspot.jp/docs/guides/cms/content/templates/overview#template-types)を選択します。

ドラッグ＆ドロップテンプレートには、モジュール、グループ、グローバルグループ、フレキシブルカラムというさまざまな構成要素があります。

詳しくは[ドラッグ＆ドロップ テンプレート ビルダーの使用方法](https://knowledge.hubspot.com/ja/design-manager/structure-and-customize-template-layouts)をご覧ください。

### モジュール

モジュールは、ページ上で編集できる再利用可能な要素です。モジュールは、HTML+HubLテンプレートのフラグメント、CSS、JS、およびフィールドで構成されます。制作担当者は、モジュールをフレキシブルカラムとdnd\_areasの内部に配置できます。制作担当者によるウェブサイトのコンテンツ管理の基本機能です。モジュールを作成することで、数多くの機能、検索、画像ギャラリー、メニュー、複雑なマーケティングアニメーション、電卓、製品比較など、想像力次第でさまざまな処理が可能になり、制作担当者の利便性の向上につながります。フィールドは、制作担当者が出力を制御する手段になります。モジュールはドラッグ＆ドロップテンプレートに使用できるだけではなく、HubSpotのCMSにおける重要な構成要素です。ドラッグ＆ドロップテンプレートでは、モジュールフィールドの既定値を[インスペクター](https://knowledge.hubspot.com/ja/design-manager/a-quick-tour-of-the-design-manager)内で設定できます。詳しくは[モジュールについて](https://developers.hubspot.jp/docs/guides/cms/content/modules/overview)をご参照ください。

<Frame>
  <img src="https://cdn2.hubspot.net/hubfs/53/image2-3.png" alt="モジュールを示すデザイン マネージャー インターフェイス" />
</Frame>

### グループ

グループは他のグループやモジュールのためのラッパーであり、CSSクラスやラッピングHTMLを使用できます。グループの配置とサイズ設定を円滑化する、レイアウトクラスを伴うラッピングHTMLとして機能します。グループには内部専用名を付けることができます。このようにデザインマネージャー上で[モジュールをグループ化](https://knowledge.hubspot.com/ja/design-manager/structure-and-customize-template-layouts#group-modules)することで、ページのさまざまな部分が識別しやすくなります。例として、サイドバーやバナーが挙げられます。

<Warning>
  新しいサイトでは[HTML＋HubL](/cms/start-building/building-blocks/templates/html-hubl-templates)ファイルが推奨されるため、[ドラッグ＆ドロップエリア](https://developers.hubspot.jp/docs/guides/cms/content/templates/drag-and-drop/overview)の列、セクション、行によってグループの目的の大半が置き換えられます。

  さらに開発者は、パーシャルおよび[グローバルパーシャル](/cms/start-building/building-blocks/global-content)を作成し、ドラッグ＆ドロップエリアに加えて自由形式のコードも含められます。

  ドラッグ＆ドロップテンプレートでは、ドラッグ＆ドロップエリア、パーシャル、およびグローバルパーシャルがサポートされません。
</Warning>

<Frame>
  <img src="https://designers.hubspot.com/hubfs/image4-1.png" alt="デザインマネージャーでサイドバーグループが選択されているスクリーンショット" />
</Frame>

### グローバルグループ

グローバルグループは、編集されると、特定のページだけでなくウェブサイト全体に影響するグループです。グローバルグループは、複数のテンプレートに配置可能で、通常はウェブサイトのヘッダーやフッターに使用されます。グローバルグループはパーシャルに似ていますが、ドラッグ＆ドロップテンプレートによって適用される構造に限定されます。必要に応じてHTML＋HubLファイルに埋め込むこともできますが、その場合はグローバルパーシャルを使用する方が理にかなっています。

<Frame>
  <img src="https://cdn2.hubspot.net/hubfs/53/image1-3.png" alt="ヘッダーとフッターのグローバルグループを示すデザイン マネージャー インターフェイス" />
</Frame>

### フレキシブルカラム

フレキシブルカラムは特別なタイプのグループです。モジュールの既定のセットを含めることができますが、制作担当者はその中のモジュールを追加、削除、移動することが可能です。フレキシブルカラムを利用すると、1次元的にモジュールを上から下に並べ替えることができます。[dnd\_areaタグとは異なり](https://developers.hubspot.jp/docs/guides/cms/content/templates/drag-and-drop/overview)、\*\*フレキシブルカラムでは、モジュールを格納できるセクションもスタイル機能もサポートされません。 \*\*フレキシブルカラムは、ドラッグ＆ドロップテンプレートに限定されません。[HTML＋HubL](/cms/start-building/building-blocks/templates/html-hubl-templates)テンプレートで使用できる[HubLタグ](/cms/reference/hubl/tags/standard-tags#flexible-column)があります。詳しくは[ドラッグ＆ドロップテンプレートにフレキシブルカラムを追加する方法](https://knowledge.hubspot.com/ja/design-manager/structure-and-customize-template-layouts#add-a-flexible-column)をご確認ください。

<Tip>
  一般的に、ドラッグ＆ドロップエリアの使用が推奨されます。多くの状況で使いやすく、フレキシブルカラムに相当する機能を全て利用できるためです。

  ただしサイドバーのように、フレキシブルカラムを使用する方が便利な場合もあります。メインのコンテンツ領域としては、ドラッグ＆ドロップエリアが非常に柔軟です。
</Tip>

<Frame>
  <img src="https://designers.hubspot.com/hubfs/image3-2.png" alt="デザインマネージャーでのメイン コンテンツ グループの選択を示すスクリーンショット" />
</Frame>

フレキシブルカラムを使用する理由を考えてみてください。ウェブサイトは変化を伴います。長期間にわたって構築および維持されます。例えば、企業のホームページで特定の製品が大きく扱われることがありますが、マーケティングニーズの変化につれて頻繁な変更が必要になる場合もあります。フレキシブルカラム内のコンテンツは制作担当者による追加、削除、変更が可能なので、マーケティング担当者にとって煩雑な作業ではありません。開発者は軽微なページ調整に対応する代わりに、本質的な開発作業に集中できます。

同じように、1つのウェブサイトのページごとに異なる構造が必要な場合があるかもしれません。こうしたページもフレキシブルカラムというコントロールを利用すれば、マーケティング担当者がカスタムモジュールを使用して作成できます。

<DndSection>
  <DndModule numCols={8}>
    ### ドラッグ＆ドロップテンプレートにカスタムコードを追加する

    複数の追加方法が用意されており、中でも最も基本的な方法はカスタムモジュールです。ただし、モジュールやグループのラッパーコードの追加が必要になる場合があります。そのためには、モジュールまたはグループをクリックして、それをインスペクターで表示し、ラッピングHTMLフィールドを検索します。そのフィールドにHTMLを追加します。

    また、HTMLのheadへのコード追加や、`</body>`の直前へのコード追加が必要になる場合もあります。テンプレートを開いた状態で、何も選択していないことを確かめてください。インスペクターには、テンプレート自体のフィールドが表示されます。この状態で、スタイルシートやJavaScriptファイルへのリンクを追加したり、headまたは`</body>`タグの直前にHTMLを追加したりできます。

    追加するには[インスペクター](https://knowledge.hubspot.com/ja/design-manager/a-quick-tour-of-the-design-manager)を使用します。インスペクターには、[スタイルシート、JavaScript](https://knowledge.hubspot.com/ja/design-manager/a-quick-tour-of-the-design-manager##attach-stylesheets-and-javascript-files)、[`<head>`マークアップ](https://knowledge.hubspot.com/ja/design-manager/a-quick-tour-of-the-design-manager#customize-your-template-s-head-and-body-options)などのための、テンプレート側のフィールドがあります。
  </DndModule>

  <DndModule numCols={4}>
    <Frame>
      <img src="https://designers.hubspot.com/hubfs/image5.png" alt="デザインマネージャーのカスタム コード インスペクター パネル" />
    </Frame>
  </DndModule>
</DndSection>