ブランドのロゴ、ファビコン、ブランドカラー、フォント、テーマを編集する
更新日時 2026年6月23日
以下の 製品でご利用いただけます（別途記載されている場合を除きます）。
ブランドキットを使用してHubSpotアカウントのブランディングアセットを管理します。ブランドブランドキットで、ロゴ、ファビコン、ブランドカラー、テーマ、フォントを追加または編集して、HubSpotでホスティングされているコンテンツとサポートされているツール全体でブランディングの一貫性を保ちます。
例えば、コンテンツエディター、日程設定ページ、見積もり、コミュニケーションチャネルに表示される既定のブランドカラーを設定できます。ブランド追加オプション がある場合、ブランドごとにブランドキットを作成して管理できます。
ブランドキットの編集によってAIの結果がどのように改善されるかについてもっと詳しく。
ブランドキットを編集するには、 スーパー管理者 またはアカウントのデフォルト設定の編集 権限が必要です
ロゴの追加、編集、削除
「ブランドキット」の「」タブで、デフォルトのロゴを編集します。このロゴは、コンテンツごとに個別にオーバーライドできます。
- HubSpotアカウントで、［その他］をクリックし、［マーケティング］＞［ブランド］の順に進みます。アカウントに［その他］が表示されない場合は、［マーケティング］＞［ブランド］に直接移動します。
- 「Brands」アドオン（）をご利用の場合は、右上の「」ドロップダウンメニュー（）をクリックし、ロゴを更新したい「」ブランド（）を選択してください。
- 「」のブランドキットの「」タブで、「Add logo +」をクリックします。
- 右側のパネルに、新しいロゴを追加してください：
- ファイルツールから既存の画像をロゴとして追加する場合は、［画像を参照］をクリックします。右側のパネルで、画像をクリックします。
- 新しい画像を追加する場合は、［アップロード］をクリックし、パソコンから画像を追加します。
- ［ロゴ名］フィールドに、ロゴの名前を入力します。このフィールドは必須です。
- ［ロゴのaltテキスト］フィールドに、検索エンジンおよびスクリーンリーダー向けのロゴの説明を入力します。これにより サイトのアクセシビリティーとSEOが向上します。ウェブサイトのアクセシビリティーについて詳しくは、HubSpotの 開発者ドキュメントを参照してください。
- の「Link」欄（ ）に、ロゴをクリック可能にしたい場合は、 のURL（ ）を入力してください。
- このロゴをデフォルトに設定するには、「」の「Yes」をクリックしてください。。ロゴをドメインに割り当てるには、[ ]（No）をクリックします。次に、[ ]（）のドロップダウンメニューをクリックして、[ ]（）のドメインを選択します。
- クリック保存.
- ロゴを編集または削除したり、ロゴをデフォルトに設定したりするには、verticalMenuIconの縦型メニューアイコンをクリックし、「デフォルトに設定」、「ロゴを編集」、または「ロゴを削除」をクリックします。
ファビコンの追加、編集、削除
のブランドキットにある「」タブで、ウェブサイトのファビコン（ブラウザのタブにページタイトルの横に表示される小さな画像）をカスタマイズできます。ファビコンはHubSpotでホスティングされているコンテンツにのみ適用されます。 ブランドごとに最大20個のファビコンを追加できます。
- HubSpotアカウントで、［その他］をクリックし、［マーケティング］＞［ブランド］の順に進みます。アカウントに［その他］が表示されない場合は、［マーケティング］＞［ブランド］に直接移動します。
- 「Brands」アドオン（）をご利用の場合は、右上の「」ドロップダウンメニュー（）をクリックし、ロゴを更新したい「」ブランド（）を選択してください。
- 「」のブランドキットの「」タブで、「Add Favicon +」をクリックします。
- 右側のパネルで、新しいファビコンを追加します。
- ファイルツールから既存の画像をロゴとして追加する場合は、［画像を参照］をクリックします。次に、画像をクリックします。
- 新しい画像を追加する場合は、［アップロード］をクリックし、パソコンから画像を追加します。
- [ファビコン名] フィールドに、ファビコンの名前を入力します。
- ファビコンをデフォルトに設定するには、「」を選択し、「」をクリックしてください。ドメインにファビコンを割り当てるには、No.をクリックします。次に、ドメインのドロップダウンメニューをクリックし、ドメインを選択します。
- クリック保存.
- ファビコンを編集または削除したり、ファビコンをデフォルトに設定したりするには、verticalMenuIconの縦型メニューアイコンをクリックし、「デフォルトに設定」、「ファビコンを編集」、または「ファビコンを削除」をクリックしてください。
ブランドカラーの追加、編集、削除
コンテンツエディタに表示される「」ブランドキットの「」タブで、ブランドカラーを設定してください。また、ページ、見積書、および会話チャネルのスケジュール設定も行ってください。ブランドカラーは、セールステンプレートおよびEメールには表示されません。
- HubSpotアカウントで、［その他］をクリックし、［マーケティング］＞［ブランド］の順に進みます。アカウントに［その他］が表示されない場合は、［マーケティング］＞［ブランド］に直接移動します。
- 「Brands」アドオン（）をご利用の場合は、右上の「」ドロップダウンメニュー（）をクリックし、ロゴを更新したい「」ブランド（）を選択してください。
- 「」ブランドキットの「」タブで、「」をクリックし、「Colors」を編集します。。
- ブランドカラーを設定するには、右側のパネルで次の操作を行います：
- URLから色をインポートするには、[ URLから色をインポート]をクリックします。
- ダイアログボックスに、ブランドカラーを使用しているページのURLを入力し、［色を検索］をクリックします。
- 使用する色を割り当てたい色の隣にドラッグ&ドロップします。例えば、「#754262」を 「基本色 」セクションにドラッグします。
- 16進数コードを入力するか色を選択するには:
- 基本色：ブランドで使用されるメインの色。［基本色］で16進数コードを入力するか、カラーパレットをクリックして色を選択します。
- 第2色：ブランドで2番目に多く使用される色。［第2色］で16進数コードを入力するか、カラーパレットをクリックして色を選択します。
- アクセントカラー:プライマリーカラーとセカンダリーのブランドカラーを引き立てる色。［アクセント色］で16進数コードを入力するか、カラーパレットをクリックして色を選択します。
- 追加の色: これらの色は自動的には使用されませんが、カラーパレットで使用可能になり、開発ツールで参照できます。「追加の色」の横にある［add 追加］をクリックし、16進数コードを入力するか、カラーパレットをクリックして色を選択します。 追加色を削除するには、[ 削除]をクリックします。
- URLから色をインポートするには、[ URLから色をインポート]をクリックします。
- ［保存］をクリックします。
- ブランドカラーを削除するには、そのカラーの横にある「deleteIcon」削除アイコンをクリックします。
ご注意：
ブランド設定で設定されていない色をサイトが参照している場合は、フォールバックロジックが使用されます。- 第2色は、デフォルトでは使用可能な最初の追加の色になります。
- 最初のアクセント色は、デフォルトでは使用可能な2番目の追加の色になります。
- 2番目のアクセント色は、デフォルトでは3番目の追加の色になります。
- 3番目のアクセント色は、デフォルトでは4番目の追加の色になります。
- 追加の色が設定されていない場合は、デフォルトの色の値が使用されます。デフォルトの色が設定されていない場合は、基本色がフォールバックとして使用されます。
フォントの追加、編集、削除
ご注意：ブランド設定でフォントを追加すると、HubSpotのコンテンツツールで使用可能なデフォルトのフォントが設定されます。カスタムテーマ、コーディング済みのテンプレート、またはカスタムスタイルシートを使用しているページの場合、テンプレートやスタイルシート内でフォントを読み込む必要がある場合もあります。（Google Fonts：）を使用する場合は、そのフォントの @import ステートメントを、そのページで使用されているスタイルシートに追加してください。
「」ブランドキットの「」タブで、コンテンツ全体で使用されるプライマリフォント、セカンダリフォント、およびカスタムフォントを設定してください。
フォントを追加する
- HubSpotアカウントで、［その他］をクリックし、［マーケティング］＞［ブランド］の順に進みます。アカウントに［その他］が表示されない場合は、［マーケティング］＞［ブランド］に直接移動します。
- 「Brands」アドオン（）をご利用の場合は、右上の「」ドロップダウンメニュー（）をクリックし、ロゴを更新したい「」ブランド（）を選択してください。
- 「」ブランドキットの「」タブにある、「」フォントの「」セクションで、変更したいフォントの「」をクリックし、「Edit」を選択します。
- 右側のサイドバーで、「」を選択し、「」のドロップダウンメニューからフォントを選択します。
- 検索バーに フォント名 を入力するか、リストからフォント を選択します。
- コンテンツエディタのフォント選択画面で使用できるカスタムフォントを設定するには、を開き、「カスタムフォントを追加」をクリックしてください。
- [フォント名 ]フィールドに、フォントの名前 を入力します。
- [フォントファイルを選択]をクリックします。
- コンピューターからアップロードする フォントファイル を選択します。サポートされているファイル形式:TTF、OTF、WOFF。
- フォントファイルをさらに追加するには、[+さらにファイルをアップロード ]をクリックします。
- ［次へ］をクリックします。
- ドロップダウンメニュー を使用して、対応するフォントスタイルを選択します。
- [+別のフォントスタイルを追加 ]をクリックしてスタイルを追加します。
- ［保存］をクリックします。
カスタムフォントを編集または削除する
カスタムフォントを編集するには、次の手順に従います。
- HubSpotアカウントで、［その他］をクリックし、［マーケティング］＞［ブランド］の順に進みます。アカウントに［その他］が表示されない場合は、［マーケティング］＞［ブランド］に直接移動します。
- 「Brands」アドオン（）をご利用の場合は、右上の「」ドロップダウンメニュー（）をクリックし、ロゴを更新したい「」ブランド（）を選択してください。
- のブランドキットの「フォント」セクションにある「」の「カスタムフォント」の既存のフォントの横にある「」の「アクション」をクリックし、「」の「編集」または「」の「削除」を選択します。
-
- ドロップダウンメニュー を使用して、対応するフォントスタイルを選択します。
- [+別のフォントスタイルを追加 ]をクリックしてスタイルを追加します。
- ［保存］をクリックします。
テーマを変更する
のテーマ「」は、ウェブサイトを作成するために使用できるテンプレート、モジュール、グローバルコンテンツ、およびスタイル設定のセットです。のコンテンツエディタ（）で、テーマを使用してページや投稿を編集し、のブログ設定で、テーマを使用するようにブログテンプレートを設定してください。
全てのアカウントでは、少なくとも1つのデフォルトのHubSpotテーマにアクセスできます。テーマは、「」のテンプレートマーケットプレイスからもダウンロードできます。
注：ナレッジベースでは、修正バージョンのテーマが使用されます。のナレッジベーステーマ設定の編集方法の詳細については、をご覧ください。
テーマを変更するには、次の手順に従います。
- HubSpotアカウントで、［その他］をクリックし、［マーケティング］＞［ブランド］の順に進みます。アカウントに［その他］が表示されない場合は、［マーケティング］＞［ブランド］に直接移動します。
- 「Brands」アドオン（）をご利用の場合は、右上の「」ドロップダウンメニュー（）をクリックし、ロゴを更新したい「Brand」（）を選択してください。
- の「ブランドキット」タブで、「」をクリックし、「Set theme」または「」をクリックして、「Change theme」を選択し、別のテーマを選択します。
- 利用可能なテーマが表示されます。ブランドに使用するテーマの横にある［有効なテーマに設定］をクリックします。
- 検索バーに テーマ名 を入力してテーマを検索します。
- 利用可能なテーマが表示されます。ブランドに使用するテーマの横にある［有効なテーマに設定］をクリックします。
- 検索バーに テーマ名 を入力してテーマを検索します。
- をクリックし、「編集／プレビュー」からにアクセスして、テーマの設定を編集してください。
