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

# デザインマネージャー

> デザインマネージャーはウェブベースの統合開発環境です。デザインマネージャーを使用して、テンプレート、モジュール、CSS、JavaScriptを作成することもできます。

'[https://cdn2.hubspot.net/hubfs/327485/module%20editor.png](https://cdn2.hubspot.net/hubfs/327485/module%20editor.png)';

デザインマネージャーはウェブベースの統合開発環境です。デザインマネージャーを使用して、[テンプレート](/cms/start-building/building-blocks/templates/overview)、[モジュール](https://developers.hubspot.com/docs)、CSS、JavaScriptを作成することもできます。デザインマネージャーは、上部ナビゲーションバーの[**［マーケティング］＞［ファイルとテンプレート］＞［デザインツール］**](https://app.hubspot.com/l/design-manager/)にあります。

<Alert type="tip">
  使い慣れたコードエディター、ワークフロー、テクノロジーを使ってローカル環境で開発することをご希望の場合は、代わりに[CMS CLI](/developer-tooling/local-development/hubspot-cli/install-the-cli)を使用できます。
</Alert>

ローカルでの開発、またはデザインマネージャーを使ったアセット制作にかかわらず、デザインマネージャーではご使用のアカウントのデベロッパー ファイル システム全体を確認し、編集することが可能になります。

![HubSpotデザインマネージャーのスクリーンショット](https://f.hubspotusercontent00.net/hubfs/53/designmanager%203-20-2020.png)

[デザインマネージャーとローカル開発を組み合わせたワークフロー](/cms/start-building/introduction/developer-environment/creating-an-efficient-development-workflow)を採用する開発者やチームもあります。[`hs fetch`](/developer-tooling/local-development/hubspot-cli/install-the-cli)CMS CLI]\(/guides/cms/tools/local-development-cli)の\[コマンドを使用すると、デザインマネージャーの編集内容をローカル環境に取得できます。または編集を防止し、全体的な[コードベースとソース管理環境とのCI（継続的インテグレーション）](/cms/start-building/introduction/developer-environment/github-integration)を実現できます。

デザインマネージャーとそのコンポーネントの概要については、この[ナレッジベースの記事](https://knowledge.hubspot.com/design-manager/a-quick-tour-of-the-design-manager)をご覧ください。

## デザインマネージャーの設定

デザインマネージャーには基本的なIDE設定があり、これを作業のフローに適した設定にすることができます。下部のバー内のヘルプボタンの横に表示される設定ボタンから、設定を行うことができます。

<DndSection>
  <DndModule numCols={8}>
    <div>
      次の設定が可能です。

      * エディターテーマ
      * フォント
      * タブサイズ
      * 字下げの単位
      * ソフトタブ
      * スマートインデント
      * フォーマット入力時の字下げ
      * タブによる字下げ
      * 行の折り返し
      * 閉じかっこの自動付加
      * かっこの対応
      * タグの対応
      * ESLint
      * その他の設定について、詳しくは[このナレッジベースの記事](https://knowledge.hubspot.com/design-manager/customize-design-manager-settings)を参照してください。

      これらの機能がニーズに合わない場合は、[ローカル開発のツール](/developer-tooling/local-development/hubspot-cli/install-the-cli)と[ワークフロー](/cms/start-building/introduction/developer-environment/creating-an-efficient-development-workflow)をお試しください。
    </div>
  </DndModule>

  <DndModule numCols={4}>
    ![デザインマネージャーの設定画面のスクリーンショット](https://cdn2.hubspot.net/hubfs/53/Design%20Manger%20Settings-1.png)
  </DndModule>
</DndSection>