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

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

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

注：既定では、HubSpotはデザインマネージャーに含まれるJavaScriptとCSSのミニフィケーション（軽量化）を自動的に行って、不要なスペース、改行、コメントを削除します。この既定の動作は、CLIを使用してデザインマネージャーにアップロードされたJavaScriptとCSSにも適用されます。そのため、あらかじめ軽量化されたコードをデザインマネージャーに直接追加することは避けてください。

JavaScriptとCSSのミニフィケーションの詳細をご確認ください。

モジュールエディター

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

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

ファイルマネージャー

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