デザインマネージャーのクイックツアー

HubSpotのデザインマネージャーは、コンテンツを作成する際にマーケターが求める柔軟性を提供しつつ、デザイナーが最先端のウェブサイトを構築するために必要とするすべてのツールを備えています。

この記事では、デザインマネージャーの全機能をご紹介します。特定のコードの例や参照ドキュメントを探している場合は、HubSpotの開発者ドキュメントをご覧ください。

デザインマネージャーに含まれるツール

デザインマネージャーは、複数の重要なツールを 1 つの強力なアプリに集約します。

• ファインダー -ファイル、テンプレート、モジュール、フォルダーを作成して整理するためのスペース。
• レイアウトエディター - ページ、ブログ、Eメール、およびシステムテンプレートを構成するためのドラッグ＆ドロップエディター。
• インスペクター - ここでレイアウト、モジュール、またはグループのプロパティーを編集できます。 
• コードエディター - すべてのフロントエンドコード（CSS、Javascript、独自のHTMLテンプレート）の統合開発環境（IDE）。
• モジュールエディター - サイトに高度な機能を追加するために設定できる再利用可能なカスタムモジュールですが、技術者以外のユーザーでも管理できます。
• ファイルマネージャー - サイトのすべてのアセット用のファイル ホスティング システム。

これらのツールを探索するには、デザインマネージャーに移動します。HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。

ファインダー

ファインダーは、すべてのフォルダー、テンプレート、モジュール、コードファイルを管理するためのスペースです。ファインダーのドラッグ＆ドロップインターフェイスを使用して、ファイルやフォルダーを好きなように整理できます。ファイルをクリックすると、含まれているファイルを展開または折りたたむことができます。

Marketing Hub ProfessionalおよびEnterprise、ならびにCMS Hub ProfessionalおよびEnterpriseのすべてのアカウントでは、既定でデザインマネージャーの中に@hubspotフォルダーがあります。このフォルダーには、ドラッグ＆ドロップEメールモジュールなど、テーマと既定のモジュールがすべて含まれています。これらのテーマとモジュールは読み取り専用ですが、カスタマイズするのであれば、複製することができます。テーマと既定のモジュールのカスタマイズについての詳細をご確認ください。

［ファイル］をクリックして新しいファイルまたはフォルダーを作成するか、ファインダーで現在選択されているアセットに対してアセットの削除、複製、名前変更などのアクションを実行します。［表示］のオプションを使用して、ファイルとフォルダーの配置を管理します。すべてのフォルダーをすばやく折りたたむか、最近編集または削除したアセットを表示できます。

注：ファインダーはコンテキストに依存します。つまり、アクションは選択されているフォルダーとファイルと常に関連します。特定のフォルダー内で新しいファイルまたはフォルダーを作成するには、ファインダーでそのフォルダーをクリックします。既存のすべてのフォルダーの外部に新しいファイルまたはフォルダーを作成するには、［表示］をクリックし、［すべて選択解除］を選択します。

［アクション］メニューは、ファイルまたはフォルダーが現在選択されている場合にのみ有効になり、そのタイプのアセットに対するコンテキストオプションが表示されます。アセットを直接 右クリックして、次のいずれかの操作を実行することもできます。

• 複製：ファイル、フォルダー、またはテンプレートのコピーを作成します。
• 移動：アセットの新しいフォルダーを選択します。
• 名前を変更：アセットに新しい名前を付けます。
• HTMLに複製：すべてHTMLでコーディングされたアセットのコピーを作成します。
• コピー先 ポータル：アセットのコピーを作成し、アクセスできる別の HubSpot アカウントに送信します。
• ページ／Eメールを作成：このテンプレートを使用して新しいコンテンツを作成します。
• 依存項目を表示：ファイルを使用しているHubSpotコンテンツのリストを表示します。
• 変更履歴を表示：保存したバージョンの履歴を確認します。
• スニペットをコピー：これを使用して、カスタムコード モジュールのコードスニペットをクリップボードにすばやくコピーします。このオプションは、モジュールを右クリックした場合にのみ表示されます。
• フォルダーをロック：ユーザーがデザインマネージャーでコンテンツを編集できないようにフォルダーをロックします。ロックされたフォルダーの内容は、ローカル開発環境内で編集することしかできません。
• 削除 - このファイル、フォルダー、テンプレート、またはモジュールを削除します。

タブ

テンプレート、モジュール、またはコードファイルの名前をクリックすると、エディターのタブで選択内容が開きます。タブを使用すると、マルチタスクやさまざまなテンプレートとコードファイル間の切り替えが容易になります。タブをクリックすると、エディターにタブを管理するオプションが表示されます。右側の下向き矢印をクリックして、開いているタブの完全なリストを確認できます。

レイアウトエディターの作業スペースを広げるには、折りたたむアイコンfirstをクリックしてファインダーを折りたたむことができます。ファインダーを再度展開するには、フォルダーアイコンfolderをクリックします。

新規テンプレートとファイルの作成

新しいテンプレート、モジュール、またはコードファイルを作成するには、ファインダーの左上で［ファイル］＞［新規ファイル］をクリックします。次のタイプのアセットを作成するオプションがあります。

• ドラッグ＆ドロップ：直感的なドラッグ＆ドロップインターフェイスにモジュールを追加することで構築されたテンプレート。
• HTML＆HUBL：HTML、CSS、Javascriptを使用してコードエディターで作成されたカスタムコードテンプレート。
• スタイルシート：モジュールやファイルのスタイルに使用できるコードCSSファイル。
• Javascript：モジュールやファイルに適用できるJavascriptのコードファイル。
• モジュール：テンプレートに追加できるカスタムコードモジュール。

レイアウトエディター

レイアウトエディターは、ページやEメールの構造と既定のコンテンツのドラッグ＆ドロップインターフェイスです。モジュールとグループの名前が、各コンポーネントに適用される本体クラスと一緒に表示されます。各モジュールまたはグループを変更するには、右側のインスペクターで編集用にクリックするか、コンポーネントを右クリックしてインスペクターの機能にアクセスします。

レイアウトエディターでコンポーネントをドラッグ＆ドロップして、テンプレートの配置とサイズを調整します。左上には［元に戻す］ボタンと［やり直す］ボタンがあり、変更内容をすばやく戻すことができます。モジュールを右クリックしてモジュールタイプをすばやくグループ化、複製、または変更するか、キーボードショートカットを使用して同じアクションを実行することもできます。右上の［プレビュー］ボタンをクリックして作業をプレビューし、さまざまな画面サイズでレイアウトをテストします。

すべてのHubSpotテンプレートのレイアウトはレスポンシブなので、さまざまなスクリーンサイズに合わせて自動的に調整されます。このエディターでは、ドラッグ＆ドロップモジュールをまとめてクリーンなHTMLマークアップにし、CSSを組み込んでレスポンシブにしています。

テンプレートの作成および編集方法とテンプレートへのスタイルの追加方法の詳細を確認してください。

インスペクター

インスペクターでは、テンプレートやモジュールのコンポーネントを追加して編集できます。インスペクターは、実行しているタスクとファイルのタイプのコンテキストに依存します。次に例を示します。

• ドラッグ＆ドロップエディターでコンポーネントが選択されている場合、インスペクターにはそのコンポーネントのすべての機能とオプションが表示されます。
• ドラッグ＆ドロップエディターでコンポーネントが選択されていない場合、インスペクターにはテンプレート自体のオプションが表示されます。
• モジュールを編集する場合、インスペクターでフィールドの編集と追加ができます。

テンプレートで選択されたモジュールのタイプによっては、インスペクターで使用できるオプションが異なる場合があります。

ドラッグ＆ドロップテンプレートの場合、［+追加］タブは、レイアウトに新しいコンポーネントを追加するために使用されます。インスペクターの［編集］タブを使用して、カスタムCSSクラスの割り当て、既定のコンテンツの編集、コードファイルができます。

インスペクターの上部にはパンくずナビゲーション：があり、現在作業しているアセット、モジュール、グループ、テンプレートの間をすばやく移動できます。

カスタムコードのHTML＆HUBLテンプレートとモジュールの場合、インスペクターを使用して新規フィールドの追加やコードファイルへのリンクができます。フィルタータグを追加してコードテンプレートやモジュールのコンテンツタイプや機能を指定すると、ファインダーでのそれらの検索をより簡単にすることもできます。これらのカスタムコードアセットをテンプレートで使用する方法についてのスニペットや詳細もあります。

コードエディター

HubSpotのコードエディターは、CSSファイル、Javascriptファイル、そしてHTMLテンプレートのコーディングも可能にする強力なIDEです。コーディングしたりスタイルシートを編集したりしながら、変更の効果をさまざまな画面サイズでライブプレビューできます。コードエディターでは、色分けされたクラス、エラーチェック、構文の強調表示、自動保存、自動終了タグ、自動インテントなど、他にも多くの便利なIDE機能を利用できます。

コードエディターの使用方法の詳細を確認してください。

ご注意：デフォルトでは、HubSpotはデザインマネージャーに含まれるJavaScriptとCSSを自動的に最小化し、不要なスペース、改行、コメントを削除しています。CLIでデザインマネージャーにアップロードされた JavaScriptやCSSにも適用されます。つまり、すでにminifyされたコードを直接デザインマネージャに追加してはいけないということです。

JavaScriptとCSSのminificationについてはこちらをご覧ください。

モジュールエディター

HubSpotのドラッグ＆ドロップテンプレートでは多くの標準モジュールを利用できますが、デザイナーがカスタム デザイン ソリューションを必要とする場合もあります。モジュールは再利用可能なカスタムコードのコンポーネントで、HTMLおよびHubLフィールド、CSS、Javascriptで構成されます。これらのモジュールはページエディターでテンプレートに追加でき、一切コーディングせずにカスタマイズできます。

フィールドの追加、コードファイルの添付、タグの追加によるアセットの整理にはインスペクターを使用します。コードエディターと同様に、作業中、さまざまな画面サイズで作業結果をライブプレビューできます。モジュールフィールドのデフォルトコンテンツの指定、デフォルトコンテンツのロック、特定のモジュールフィールドの必須指定もできます。 

ファイルマネージャー

HubSpotのファイルマネージャーは、コンテンツの作成に使用するすべてのアセットを保管します。このツールを使用して、PDF、画像、動画、オーディオファイル、フォントなどのアップロードができます。クリエイティブアセットにアクセスしたり、アプリから離れずに新しいファイルをすばやくアップロードしたりできます。