Design Manager(デザインマネージャー)のツアー

更新日時 July 1, 2016

必要条件

ソフトウェア: HubSpot マーケティング
サブスクリプション: Basic, Pro, & Enterprise

どのようなプラットフォームにウェブサイトを設計する場合でも、テキストエディター/IDE、FTPクライアント、CMSなど、いくつかの異なるツールの使用が必要です。 これらのツールを使うことにそれほど煩わしさを感じないとしても、あらゆる編集、保存、アップロード、更新をしながら整理された状態を保とうとすれば、サイトの公開に時間がかかることになります。 そして、サイトが公開されたら、マーケターが希望する柔軟なデザインオプションがないので、変更するためにデザイナーに何度も連絡しなければならなくなるおそれがあります。

HubSpotのDesign Manager(デザインマネージャー)は、コンテンツを作成する際にマーケターが求める柔軟性を提供しつつ、デザイナーが最先端のウェブサイトを構築するために必要とするすべてのツールを備えています。このユーザーガイドは、HubSpotのCOSで初めてサイトを構築する方法を知りたいベテランウェブデザイナーにも、既存のページ、Eメールの構成、スタイルの増築について知りたいコンテンツ作成マーケターにも、詳細なチュートリアルと、HubSpotでデザインするためのベストプラクティスを提供します。 特定のコードの例や参考文書を探している場合は、designers.hubspot.comをご覧ください。

ユーザーガイドのこのセクションには、Design Manager(デザインマネージャー)のあらゆる機能のツアーがあります。

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

Design Manager(デザインマネージャー)はいくつかの重要なツールを1つの強力なアプリに集約しています。 ツールには以下のものが含まれます。

Design Manager(デザインマネージャー)の操作

Design Manager(デザインマネージャー)を開く最も簡単な方法は、コンテンツタブの[Content(コンテンツ)] > [Design Manager(デザインマネージャー)]から移動することです。

Design Manager navigation

フォルダー

デザインマネージャーを使って、すべてのテンプレートやコードファイルをフォルダーに整理できます。フォルダーはアプリの左側のサイドバーにあります。名前の横の開示矢印を選択すると、各フォルダーを展開できます。テンプレートやコードファイルを作成する際、[New folder(新規フォルダー)]ボタンをクリックすることで、新しいカスタムフォルダーも作成できます。カスタムフォルダーは中にテンプレートやファイルが何も入っていない場合、自動的に削除されます。  

フォルダーの下に、作業を行いたいテンプレートやファイルをすばやく見つけるのに役立つフィルターオプションもあります。以下のようなオプションがあります。

Templates and coded files

フォルダーをクリックするとファイルのリストを表示する他、検索バーにファイル名やキーワードを入力してフォルダー内を検索することもできます。広範な結果を得るには、検索の前に最上位レベルのフォルダーをクリックします。

Search templates

タブ

テンプレートまたはコードファイルの名前をクリックすると、タブ内に選択したものが表示されます。マルチタスクやさまざまなテンプレートとコードファイル間の切り替えが、タブで容易にできます。Design Manager(デザインマネージャー)に新たなタブを追加するには、[+タブ]をクリックします。

Tabs

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

新しいテンプレートまたはコードファイルを作成するには、アプリの右側の青いボタンをクリックします。テンプレートフォルダー、コードファイルフォルダー、カスタムモジュールフォルダーがあるかどうかによって、選択したボタンは[New template(新規テンプレート)]、 [New coded file(新規コードファイル)]、[New custom module(新規カスタムモジュール)]とそれぞれ表示されますテンプレートコードファイルの作成方法については、このガイドの後のセクションでさらに詳しく説明します。

New template

Template Builder(テンプレートビルダー)

Template Builder(テンプレートビルダー)はページとEメールの構成やデフォルトコンテンツの設定を可能にする「ドラッグ&ドロップ」エディターです。 ゼロからHTMLテンプレートをコーディングすることは可能ですが、テンプレートビルダーを使用してウェブサイトやEメールを構築すれば、デザイナーは時間を節約でき、マーケターはコンテンツの構成をさらに詳細に管理できます。  

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

インターネット上の全トラフィックのほぼ3分の1がモバイルデバイスからとなるため、スクリーンの大きさにかかわらず、あらゆるデバイスのサイトをユーザーフレンドリーにする必要があります。 テンプレートの作成と編集について組み込みやカスタムのCSSでテンプレートを形作る方法については、このガイドの先のセクションで学びます。  

Template Builder

Code Editor(コードエディター)

HubSpotのコードエディターは、CSSファイルJavascriptファイル、そしてHTMLテンプレートのコーディングも可能にする強力なIDEです。 コーディングしたりスタイルシートを編集したりしながら、公開するコンテンツに影響を与えることも、アプリを離れることもなく、テンプレートに行う変更の効果をライブでプレビューすることができます。コードエディターは編集をライブでプレビューすることに加え、構文の強調表示、自動保存、自動終了タグ、自動インデントなど、その他の多くの役立つIDEの機能も活用します。

このエディターの使い方はこのガイドの後のセクションでさらに詳しく学びます。  

Code editor

Primary CSS(プライマリCSS)

Primary CSS(プライマリCSS)は、すべてのHubSpotテンプレートに適用されるグローバルCSSファイルです。 プライマリCSSは、テンプレートに表示されるメニュー、フォーム、その他の標準モジュールを形作るのに最適な場所です。これらのファイルを使用するとデザイナーは時間を節約でき、常に整理された環境で作業ができます。 プライマリCSSについてはこのガイドの後のセクションでさらに詳しく学びます

Primary CSS

Custom modules(カスタムモジュール)

HubSpotのテンプレートにはさまざまなモジュールオプションが盛り込まれていますが、専門技能を持たないユーザーがコードを壊してしまう心配がないように、デザイナーがマーケターのためのさらなるカスタムソリューションを求める場合があります。カスタムモジュールは、再利用可能なコード化されたモジュールです。これによりデザイナーは裏でカスタム変数の作業を行える一方、マーケターは柔軟にコンテンツをカスタマイズすることができます。 

Custom module

画像やテキストをページ単位で選択することができるため、マーケターはコードに触れることなくこのモジュールのコンテンツをカスタマイズできます。

Custom module preview

File manager(ファイルマネージャー)

HubSpotのFile manager(ファイルマネージャー)は、コンテンツの作成に使用するすべてのアセットを保管します。このツールを使用して、PDF、画像、動画、オーディオファイル、フォントなどのアップロードができます。デザインマネージャーはすべてのクリエイティブアセットへのアクセスを可能にするため、アプリを離れることなく新しいファイルをすばやくアップロードすることができます。デザインマネージャーを通してアップロードしたり、ファイルにアクセスしたりする方法は、このガイドの後のセクションでさらに詳しく学びます。  

File manager

前の記事

次の記事