
こんにちは!Benchmark Emailでデザインを担当している、BEDです。
HTMLメールで重要なメインビジュアルやその他の画像ですが、Benchmark Emailに標準実装されている画像編集ツールを使ってデザインのクオリティを上げることができます。この記事を参考に、ぜひHTMLメールに入れる画像を編集してみてください。
画像編集で行う事とは?
どんな画像をどんなところに使いたいのかで画像編集でやることは変わってきますが、主に以下のような事があるかと思います。
トリミング・リサイズ
余計なものを切り取ったり、掲載する媒体のサイズへと調整したりなどする時に行います。
色の変更、調整
暗い写真や、色が黄色みかかっていたり青みが強かったりなどした時に調整が必要になります。
テキストの挿入(フォント、文字組など)
画像の上にテキストを置くことで、バナーなどのような制作物を作ることができます。また、フォント(字体)を決めたり、文字のバランスなども調整することによって何を一番伝えたいのかなどを調整することができます。
Benchmark Emailの画像編集ツールだとこんなことができる
デザインに自信がない担当者さまでも簡単に使える、シンプルで便利な機能をご紹介します。今回はこの画像を参考にしてツールのご説明をしていきます!
まずはメールエディタ上で、編集したい画像を選択して、「コンテンツ」→「編集」をクリックすると画像編集ツールの画面に変わります。
トリミングの例
トリミング機能では、元の写真から省きたい部分を削り取ることができます。
元から用意されている、スクエアのボタンを押せばスクエア型にトリミングをしてくれます。
デフォルトの状態です。
スクエアを選んだ場合はこうなります。
そして、画像をドラッグして位置の調整もできます。
また、自分で白い枠線の左端などを掴んで自由なサイズに調整することができリサイズすることができます。
用途にあわせてトリミングやリサイズをしてみてください!
色の変更、調整の例
Benchmark Emailの編集ツールの”補正オプション”には、明るさ、彩度、コントラスト、ガンマ値(コントラストと似ているが、色の明るさや暗さを丁寧にしてくれるもの)などがあります。基本的にはこのベーシックを調整するだけで十分ですが、アドバンスといって、より細かく調整したい方は、透明度、露出補正、影補正などの調整をすることができます。
今回はベーシックの中からと違いが分かりやすく数値を高めにしての設定になっています。実際に編集する画像の元の色味や色調にあわせて数値を調整してください。
明るさを調整したものです。
彩度を高く調整したものです。
コントラストをあげて、少しビビットな感じにしたものです。
このように、色味の調整などを自由にすることができます。
様々な調整をしてみると面白いのでぜひトライしてみてください!
テキストの挿入(フォント、文字組など)の例
画像の上にテキストを入れると、伝えたいことの訴求などになるので、メルマガのメインビジュアルやブログのサムネイル、バナーなどが作れるようになります。
上記のように単純にテキストを配置したものや、
入力したテキストをデコレーションしてくれる機能まであるので、しっかり読ませたい文字とマークのような感じでデコレーションされた文字を入れることでより訴求力やデザインのクオリティがアップします。
まとめ
他にもスタンプやフレームといった機能もあるので、専用の編集ソフトがなくてもBenchmark Emailの画像編集機能で大抵のことはできてしまうと思います!
さらに、作った画像を別途保存することで、SNS投稿など他の用途でも使えます!ぜひ一度使ってみて、あなただけの素敵な画像を作ってみてください!
それではまた!BEDでした。
(関連記事)
・HTMLメルマガ作成で役立つ画像サービス20選
・デザイナーがインスピレーションを得る為に見ているサイト27選!
・メルマガの印象が大きく変わる!イメージに合ったフォントの選び方とは?
・【事例あり】メールマーケティングの成功を左右するメルマガデザイン
・メルマガデザイン初心者でも90点レベルのHTMLメールを作れる6つの思考