お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
CMS-General

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

更新日時 November 22, 2018

対象製品

Marketing Hub
marketing-basic-pro-enterprise
Professional, Enterprise
Basic
HubSpot CMS

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

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

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

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

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

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

ファインダー

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

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

デザインマネージャーがフォルダーを折りたたんで選択解除

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

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

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

右クリック

タブ

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

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

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

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

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

レイアウトエディター

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

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

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

テンプレートの作成と編集およびテンプレートへのスタイルの追加については、このガイドの後のセクションで説明します。

インスペクター

インスペクターを使用すると、テンプレートやモジュールのコンポーネントを追加して編集できます。インスペクターは、実行しているタスクとファイルのタイプのコンテキストに依存します。たとえば、次のような場合です。

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

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

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

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

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

コードエディター

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

コードエディターの使用方法についての詳細は、このガイドの後のセクションで説明します。

モジュールエディター

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

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

ファイルマネージャー

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

ファイルマネージャー