Become a HubSpot power user — join us for HubSpot Training Day 2017.

HubSpot内で画像を編集および最適化する方法

更新日時 July 1, 2016

必要条件

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

ページ、ブログ、Eメール、またはソーシャルメディアの投稿に画像を追加すると、コンテンツが格段に魅力的になります。画像を使うと、ソーシャル投稿やEメールのクリックスルー率が向上するだけでなく、ページやブログ記事にユーザーをより長く惹きつけることができます。

HubSpotの最新のコンテンツ提供用インフラストラクチャでは、世界中からアクセスするユーザーのページの読み込み時間を最適化できますが、ウェブサイトにアップロードする高解像度画像ファイルの数が多すぎると、ページの読み込みが遅くなり、ユーザーはページから離れてしまいます。同様に、Eメールに大きな画像ファイルを複数含めると、Eメールがスパムフィルターでキャッチされる可能性も高くなります。また、HTMLエディターやHubSpotのライブ反映機能エディターを使用して画像の表示サイズを調整できますが、この操作でファイルサイズは縮小されません。これにより、多くのマーケターはAdobe PhotoshopやPixlr.comに依存してテキストのサイズ変更、切り取り、追加、フィルター処理、ウェブ用の保存を行いますが、別のソフトウェアスキルを学習するためには多くの時間を費やさなければなりません。

HubSpotを使えば、コンテンツエディター、File Manager(ファイルマネージャー)、またはSocial Publisher(ソーシャルパブリッシャー)内からページ、ブログ記事、ソーシャル投稿の画像を簡単に編集およびサイズ変更することができます。フォトエディターには、次のような便利なアプリケーションがあります。

  • 画像の寸法とファイルサイズを縮小してページの読み込み時間を削減し、画像の適切な最大幅を確保する。
  • 画像をトリミングしてコンテンツに合わせる。
  • テキスト、ステッカー、および描画を画像に追加して、内容を説明したり、画像の領域を強調表示する。
  • 写真の明るさやコントラストを調整して画像を鮮明にする。

ウェブ用に画像を最適化する

ウェブ用に画像を最適化すると、技術面とSEOの両方にメリットがあります。HubSpotページでの画像の最適化に関するヒントを以下に示します。

  • HubSpotのレスポンシブページやEメールの画像は自然なサイズになるまで拡大されます。したがって、通常は画像をページ(通常は980~1280px)またはEメール(通常は600px)のメインコンテンツよりも広げる必要はありません。ただし例外として、大きい背景画像を使用する場合は、より大きな高解像度画像が必要となる場合があります。
  • 画像の寸法とファイルサイズを小さくすると、Eメールがスパムフィルターにかかる(およびEメールに多くのテキストが含まれる)ことを防ぐことができます。
  • altテキストまたは説明を画像に追加すると、検索エンジンやスクリーンリーダーが画像を解釈し、その内容を把握するうえで役立ちます。Keywords(キーワード)ツールで識別される関連のターゲットキーワードを使用すると、コンテンツのSEOが向上します。
  • 画像が適切で自然なサイズになったら、HubSpotのライブ反映機能エディターでさらにサイズを調整できます。

手順

画像をソーシャルメディア投稿に添付する場合、画像をFile Manager(ファイルマネージャー)にアップロードする場合、または画像をコンテンツエディターを使って追加する場合に画像エディターにアクセスできます。編集オプションは画像へのアクセス方法に関わらず同じですが、このチュートリアルでは、主にコンテンツエディターを使った画像の追加方法を説明します。画像をサイトページ、Eメール、ランディングページ、またはブログ記事に追加する場合は、次の手順に従って画像を編集します。

コンテンツエディターにアクセスする

この例では、ウェブサイトページを編集して([Content(コンテンツ)] > [Website(ウェブサイト)])コンテンツエディターにアクセスしますが、以下の手順はEメール、ランディングページ、ブログ記事でも同じです。

クリックして画像を追加する

画像はさまざまな種類のモジュールに追加できますが、この例では、画像はリッチテキストモジュールに追加されます。[Insert/Edit Image(画像を挿入/編集)]アイコンをクリックします。

HubSpot Help article screenshot

新しい画像をアップロードまたは選択する

新しい画像をアップロードするか、既存のイメージを編集できます。 HubSpotでは写真素材が格納されたフォルダーも提供します。

HubSpot Help article screenshot

[Clone & Edit(複製して編集)]をクリックする

ギアアイコンをクリックし、[Clone & Edit(複製して編集)]をクリックします。

HubSpot Help article screenshot
画像は、HubSpotのフォトエディターで編集可能なJPGまたはPNG形式として保存する必要があります。[Clone & Edit(複製して編集)]オプションが表示されない場合は、画像が正しい拡張子(.jpg or .png)と正しいファイルタイプで保存されていることを確認してください。

画像を編集する

フォトエディターには、個別にまたは組み合わせて使用できる高度な編集機能がいくつか用意されています。フォトエディターには次の機能があります。

Crop(トリミング)

Crop(トリミング)機能は、選択範囲の外側の部分を削除し、画像の縦横比を変更します。トリミングは、画像の形状を変更したり、画像から余分なスペースを削除するのに便利です。

画像をトリミングするには、[Crop(トリミング)]をクリックします。 選択範囲の角をドラッグするか、プリセットを選択します。[Apply(適用)]をクリックして画像をトリミングします。[保存(保存)]を選択して複製した画像を保存します。

HubSpot Help article screenshot

Resize(サイズ変更)

Resize(サイズ変更)では、画像の寸法を調整することができます。画像の寸法を小さくすると、画像のファイルサイズも縮小され、読み込み速度が向上します。

画像のサイズを変更するには、[Resize(サイズ変更)]をクリックして新しい寸法を入力し(寸法をロックするかどうか切り替え可能)、[Apply(適用)]をクリックします。[Save(保存)]を選択して、複製した画像を保存します。

HubSpot Help article screenshot

Orientation(向き)

Orientation(向き)機能では、画像を回転または反転することができます。これは、アップロードする画像が自動的に正しい向きにならない場合に便利です。

画像の向きを変更するには、[Orientation(向き)]をクリックして回転または反転ボタンをクリックし、[Apply(適用)]をクリックします。[Save(保存)]を選択して、複製した画像を保存します。

HubSpot Help article screenshot

Text(テキスト)

Text(テキスト)機能を使用して、画像に注釈を付けたり、キャプションを追加できます。画像にテキストを追加すると、画像を説明したり、ページや記事のテキストと関連付けることができるので便利です。また、多くのEメールクライアントは背景画像をサポートしていないため、Eメールの画像の上にテキストを配置する際にこの機能を使用できます。

テキストを追加するには、[Text(テキスト)]をクリックしてテキストを入力し[Apply(適用)]をクリックします。複数のテキストボックスを追加できるだけでなく、フォントやテキストの色も変更できます。[Save(保存)]を選択して複製した画像を保存します。

HubSpot Help article screenshot

Effects(効果)

Effects(効果)を使用すると、画像に特徴を加えることができます。

効果を追加するには、[Effects(効果)]をクリックして適切な効果を選択し、[Apply(適用)]をクリックします。 [Save(保存)]を選択して、複製した画像を保存します。

HubSpot Help article screenshot

Enhance(画質向上)

Enhance(画質向上)では、写真の品質を向上させる3つのプリセットを使用できます。Enhance(画質向上)には次のモードがあります。

  • [Hi-Def(高精細)]は画像をシャープにします。
  • [Illuminate(イルミネーション)]は照度の問題に対応します。
  • [Color Fix(色修正)]では、色の自動調整が可能です。

画質を向上させるには、[Enhance(画質向上)]をクリックしてモードを選択し、[Apply(適用)]をクリックします。 [Save(保存)]を選択して、複製した画像を保存します。

HubSpot Help article screenshot

Draw(描画)

画像の上に描画するには、[Draw(描画)]をクリックして色/ブラシを選択し、画像の上でマウスをドラッグして[Apply(適用)]をクリックし、描画を写真に追加します。[Save(保存)]を選択して、複製した画像を保存します。

HubSpot Help article screenshot

Frames(フレーム)

フレームに描画するには、[Frames(フレーム)]をクリックしてフレームを選択し、[Appy(適用)]をクリックして描画を写真に追加します[Save(保存)]を選択して、複製した画像を保存します。

HubSpot Help article screenshot

Stickers(ステッカー)

Stickers(ステッカー)には、画像に追加できる矢印、思考やセリフの吹き出しなど楽しいイラストオブジェクトが含まれています。追加するには、[Draw(描画)]をクリックして色/ブラシを選択し、画像の上でマウスをドラッグして[Apply(適用)]をクリックし、描画を写真に追加します。[Save(保存)]を選択して、複製した画像を保存します。

HubSpot Help article screenshot

Brightness(明るさ)

[Brightness(明るさ)]をクリックしてスライダーをドラッグし、[Apply(適用)]をクリックして画像の明るさを調整できます。[Save(保存)]を選択して、複製した画像を保存します。

HubSpot Help article screenshot

Contrast(コントラスト)

[Contrast(コントラスト)]をクリックしてスライダーをドラッグし、[Apply(適用)]をクリックして画像のコントラストを調整できます。[Save(保存)]を選択して、複製した画像を保存します。

HubSpot Help article screenshot

Saturation(彩度)

[Saturation(彩度)]をクリックしてスライダーをドラッグし、[Apply(適用)]をクリックして画像の彩度を調整できます。[Save(保存)]を選択して、複製した画像を保存します。

HubSpot Help article screenshot

Warmth(暖かみ)

[Warmth(暖かみ)]をクリックしてスライダーをドラッグし、[Apply(適用)]をクリックして画像の暖かみを調整できます。[Save(保存)]を選択して、複製した画像を保存します。
HubSpot Help article screenshot

Focus(フォーカス)

Focus(フォーカス)機能では、写真のエッジをぼかすことができます。[Focus(フォーカス)]をクリックして形状を選択し、画像にその形状をドラッグして[Apply(適用)]をクリックします。[Save(保存)]を選択して、複製した画像を保存します。

HubSpot Help article screenshot

Redeye(赤目)

[Redeye(赤目)]をクリックしてブラシのサイズを選択し、画像の目をクリックして[Apply(適用)]をクリックすると、画像の赤目を軽減できます。[Save(保存)]を選択して、複製した画像を保存します。

HubSpot Help article screenshot

コンテンツに画像を追加する

[Save(保存)]をクリックした後に、複製した画像を選択し、[Use Image(画像を使用)]をクリックしてコンテンツに画像を挿入します。

HubSpot Help article screenshot

前の記事

Measuring Your Performance Project

次の記事