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

ロゴ、ファビコン、ブランドカラーを編集する

更新日時 2024年 7月 25日

以下の 製品でご利用いただけます(別途記載されている場合を除きます)。

すべての製品とプラン

アカウント既定値の編集権限アクセスを持つユーザーを対象に、自分のブランドキットのロゴ、ファビコン、ブランドカラーを編集することができます。 

私の設定で、 のロゴとファビコン()、およびプライマリー、セカンダリー、アクセント、追加のブランドカラーを設定します。ブランドカラーは、コンテンツエディター、スケジュール設定ページ、見積もり、コミュニケーションチャンネルには表示されますが、セールステンプレートやEメールには表示されません。 

ロゴを編集する

アカウント設定で、既定のロゴを編集することができます。このロゴは、コンテンツごとに個別にオーバーライドできます。 

  • HubSpotアカウントにて、上部のナビゲーションバーに表示される設定アイコンsettingsをクリックします。
  • 左のサイドバーメニューで[アカウントの既定値]をクリックします。
  • [ブランディング]タブをクリックします。 
  • 編集するブランドキットをクリックします。 
  • 新規ロゴを追加するには、[ロゴ]セクションの[+追加]をクリックします。 
  • 新しいロゴを追加します。
    • ファイルツールから既存の画像をロゴとして追加する場合は、[画像を参照]をクリックします。右側のパネルで、画像をクリックします。 
    • 新しい画像を追加する場合は、[アップロード]をクリックし、パソコンから画像を追加します。 
  • [ロゴ名]フィールドに、ロゴの名前を入力します。このフィールドは必須です。 
  • [ロゴのaltテキスト]フィールドに、検索エンジンおよびスクリーンリーダー向けのロゴの説明を入力します。これにより、サイトのアクセシビリティーとSEOが向上します。ウェブサイトのアクセシビリティーについて詳しくは、HubSpotの開発者ドキュメントを参照してください。
  • ロゴにクリック可能なリンクを設定する場合は、[ロゴURL]フィールドにURLを入力します。
  • ロゴのサイズを変更する場合は、[幅]フィールドまたは[高さ]フィールドに、新しい寸法を入力します。他のフィールドは、画像の比率を維持するように自動的に調整されます。
  • 別のロゴを追加するには、[ロゴ]セクションの下部にある[+追加]をクリックします。
  • 既存の画像を削除するには、画像にマウスポインターを合わせ、右上隅の[X]をクリックします。ロゴを削除するには、[アクション]ドロップダウンメニューをクリックし、[削除]を選択します。
edit-logo
  • ロゴの編集が完了したら、左下の[保存]をクリックします。
コンテンツエディターや デザインマネージャーで、特定のコンテンツの既定のロゴをオーバーライドすることができます。[ロゴ] モジュールで、[既定のロゴよりも優先使用] スイッチをクリックしてオンに切り替え、 ロゴをアップロードします。 override-default-logo-in-content-editor

ファビコンを編集する

アカウント設定で、ウェブサイトのファビコン(ブラウザーのタブ内でページタイトルの横に表示される小さな画像)をカスタマイズすることができます。ファビコンはHubSpotでホスティングされているコンテンツにのみ適用されます。 

  • HubSpotアカウントにて、上部のナビゲーションバーに表示される設定アイコンsettingsをクリックします。
  • 左のサイドバーメニューで[アカウントの既定値]をクリックします。
  • [ブランディング]タブをクリックします。 
  • 編集するブランドキットをクリックします。 
  • 新しいファビコンを追加するには、[ファビコン]セクションで[+追加]をクリックします。 
  • 新しいファビコンを追加します。 
    • ファイルツールから既存の画像をファビコンとして追加する場合は、[画像を参照]をクリックします。右側のパネルで、画像をクリックします。 
    • 新しい画像をファビコンとして追加する場合は、[アップロード]をクリックし、パソコンから画像を追加します。 

注:最適な結果を得るには、.ico、.gif、.pngのいずれかのファイル形式で48×48ピクセルの画像としてファビコンを保存してください。

  • [ファビコン名]フィールドに、ファビコンの名前を入力します。 

add-favicon

  • ファビコンの編集が完了したら、左下の[保存]をクリックします。 

ブランドカラーを編集する

コンテンツエディター、スケジュール設定ページ、引用、コミュニケーションチャンネルに表示されるブランドカラーを設定できます。ブランドカラーは、ではなく、セールステンプレートやEメールに表示されます。 

  • HubSpotアカウントにて、上部のナビゲーションバーに表示される設定アイコンsettingsをクリックします。
  • 左のサイドバーメニューで[アカウントの既定値]をクリックします。
  • [ブランディング]タブをクリックします。 
  • 編集するブランドキットをクリックします。 
  • [自分のブランドキット]セクションで、[色]タブをクリックします。 
  • ブランドカラーを設定する:
    • 原色:あなたのブランドで使用されているメインカラー。原色の下で、16進数コードを入力するか、カラーピッカーをクリックし、カラーを選択します。続いて[保存]をクリックします。原色は必須フィールドです。
    • セカンダリーカラー:あなたのブランドで2番目に多く使用されている色。セカンダリーカラーの下で、16進数コードを入力するか、カラーピッカーをクリックし、カラーを選択します。続いて[保存]をクリックします。
    • アクセントカラー:ブランドカラーのプライマリーカラーとセカンダリーカラーを補う。アクセントカラーの下に、16進数コードを入力するか、カラーピッカーをクリックして、カラーを選択します。続いて[保存]をクリックします。アクセントカラーは3色まで追加することができる。
    • 追加カラー:自動的には使用されませんが、カラーピッカーで利用できるようになり、開発ツールで参照できるようになります。add 追加の横にある追加カラーをクリックし、16進数コードを入力するか、カラーピッカーをクリックし、カラーを選択します。次に保存をクリックします。最大16色まで追加することができる。
      • 追加色を削除するには、削除したい色の横にあるdelete deleteをクリックし、Saveをクリックします。

ブランディングカラー

注:

あなたのサイトがブランド設定で設定されていない色を参照する場合、フォールバック・ロジックが使用されます:
  • セカンダリーカラーのデフォルトは、利用可能な最初の追加カラーになります。
  • 最初のアクセントカラーは、デフォルトで2番目の追加カラーになります。
  • 2番目のアクセントカラーは、デフォルトで3番目の追加カラーになります。
  • 3番目のアクセントカラーは、デフォルトで4番目の追加カラーになります。
  • 追加色が設定されていない場合は、既定値が使用されます。既定の色が設定されていない場合は、フォールバックとして原色を使用します。
  • 既にブランドカラーを使用しているライブページから色をインポートすることもできます。 
    • [URLから色をインポート]をクリックします。
    • ダイアログボックスに、ブランドカラーを使用しているページのURLを入力し、[色を検索]をクリックします。 
    • スキャンが終了したら、インポートしない色の横にあるチェックボックスをオフにして、[インポート]をクリックします。 

import-colors

この記事はお役に立ちましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。