MENU

Canvaで粗くならないメインビジュアル画像を作成する方法

Canvaで粗くならないメインビジュアル画像を作成する方法

この記事にはプロモーションが含まれています

あらすじ

Canvaでメインビジュアル画像を作成する

今やブロガーの画像加工必須ツールとしておなじみの、アイキャッチやメインビジュアルを簡単にかつオシャレに作成できる「Canva」。

みなさんはどのように作成されていますか？

「Canvaで画像を作成すると粗くなる」という情報が俄かに広まっているようですが、実際はどうなのか？ということでSWELLのメインビジュアルを例に検証してみました。

今回の検証にあたり、カメラブログ「MAMACAMELOVE!」を運営されているMAKIさん（@mamacamelove）にご協力いただき、実例としてご紹介させていただきます。MAKIさん、ご協力ありがとうございます！

今回は以下のとおり「背景画像にテキストを中央に配置」する作例になります。

元画像

153KB（96dpi）

完成イメージ（JPG形式でダウンロード）

Canvaで「JPG」ダウンロード

作成方法をご紹介する前に、まず「SWELLのメインビジュアルサイズ」について、さらっとご説明しますね。

SWELLのメインビジュアルのサイズ

オリジナルの画像をメインビジュアルに配置するときに、画像サイズをどうすればいいか迷いますよね。まずはそのおさらいから。

SWELL公式ではメインビジュアル画像の推奨サイズはアナウンスされていません。というのも、メインビジュアルの大きさは「メインビジュアルの高さ設定」に影響されるからです。

SWELLのスタイルシートでは、以下のように定義されています。

.u-obf-cover {
    display: block;
    height: 100%!important;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%!important;
}

上記の object-fit: cover; により、画像のアスペクト比を維持したまま、メインビジュアル領域全体を埋めるように拡大縮小されます。

画像のアスペクト比がメインビジュアル領域のアスペクト比と合わない場合は、メインビジュアル領域の長辺に合わせて拡大/縮小され、画像の中心を起点に切り取られます。

（上図は、メインビジュアルの高さを「30vw」にしたときのイメージです）

メインビジュアルの表示領域はユーザーの閲覧環境によって異なるため、メインビジュアルに適切な画像サイズは？となると、サイトのデザインやメインビジュアルの設定にもよりますが、迷ったらSWELLのデモサイトでも採用されている「16：9」のアスペクト比で「1600px×900px」で作成するのが無難でしょうね。

スマホは別の画像を指定する場合、SWELLではスマホのブレイクポイントが「画面幅：599px」で設定されているので、「横幅：600px」で作成するといいと思います。

SWELLのメインビジュアル画像のサイズは
・パソコン：幅1600px × 高900px
・スマホ：　幅600px
がオススメです。

Canvaでメインビジュアル画像の作成手順

それでは、Canvaでメインビジュアル用の画像を作成してみましょう。

なお、ここからの説明は、Canvaの無料アカウントに登録済み」を前提として進めていきますので、もし未登録の方は登録しておいてください。

Canvaの無料登録はこちら
STEP
Canvaにアクセスし「デザイン作成」から「カスタムサイズ」を選択

Canvaにアクセスし、「デザイン作成」をクリック。

今回はサイズを指定して作成しますので、「カスタムサイズ」をクリックします。

STEP
「カスタムサイズ」で「1600×900」を入力

「カスタムサイズ」画面で

  • 幅：1600
  • 高さ：900
  • 単位：px

と入力し、「新しいデザインを作成」をクリックします。

STEP
画像をアップロードしキャンバスに配置

画面左のオブジェクトパネルから「アップロード」をクリックし「画像」にファイルをアップロードします。その後、アップロードした画像をキャンバスに配置（ドラッグ）します。

あるいは、キャンバスに直接ドラッグ＆ドロップしてアップロ―ド、配置することもできます。

STEP
背景画像サイズを調整

キャンバスに配置した画像を、ハンドルを使ってキャンバスサイズに合わせます。

STEP
画面の中央にテキストを配置

オブジェクトパネルで「テキスト」をクリックし、キャンバスの中央をクリックして文字を入力します。

画面上の「フォント」でフォントを選択し、文字サイズを調整します。

  • フォント：花鳥風月

　

これでデザインは完了です。

STEP
ファイルをダウンロード

画面右上の「共有」をクリックし、「ダウンロード」をクリックします。

STEP
ファイル形式の選択

「ファイルの種類」をクリックします。

STEP
ファイル形式で「JPG」を選択

「ファイルの種類」から「JPG」を選択します。

STEP
ファイルをダウンロード

「ダウンロード」をクリックし、パソコンにファイルを保存します。

これで、「JPG」形式で画像の作成は完了です。

Canvaで作成した画像が粗くなる？最適な作成方法はどれ？

ここからは、冒頭の「Canvaで画像を作成すると粗くなる」というウワサを検証するために、ファイル形式（ダウンロード方法）と画像の圧縮方法により、本当に画像が粗くなるのか？また最適なファイル形式は？という点について検証していきたいと思います。

Canva（無料版）でのダウンロード方法と画像ファイルの作成パターン

Canvaで作成したファイルのダウンロード方法と、画像ファイルの作成パターンは以下になります。

ファイルのダウンロード方法

画像ファイルの作成パターン

  1. JPG
    JPG形式でダウンロードしたファイル
  1. PNG
    PNG形式でダウンロードしたファイル
  1. PDF（標準）　PDF → JPG変換
    PDF（標準）形式でダウンロード後、PDFからJPG形式に変換したファイル
  1. PDF（標準）　PDF → PNG変換
    PDF（標準）形式でダウンロード後、PDFからPNG形式に変換したファイル
  1. PDF（印刷）　PDF → JPG変換
    PDF（印刷）形式でダウンロード後、PDFからJPG形式に変換したファイル
  1. PDF（印刷）　PDF → PNG変換
    PDF（印刷）形式でダウンロード後、PDFからPNG形式に変換したファイル

上記の①②については、Canvaからダウンロードで作成できますが、画像ファイルの圧縮と、③～⑥のJPG/PNG変換には、以下のオンラインツールを使用します。

使用するオンラインツール

それぞれのツールの使い方については、後ほどご説明します。

画像ファイルの作成パターンによる画像の粗さの比較

それでは、上記の「画像ファイルの作成パターン」によって画質がどのように変化するのかをまとめてみました。

※それぞれ「圧縮前」と「圧縮後」の画像のサイズは「1600×900」を最終サイズとします。

  1. JPG
    JPG形式でダウンロードした場合。

圧縮前（45KB）

　

部分拡大

圧縮後（25KB）

　

部分拡大
  1. PNG
    PNG形式でダウンロードした場合。

圧縮前（421KB）

　

部分拡大

圧縮後（235KB）

　

部分拡大
  1. PDF（標準）→JPG変換
    PDF(標準）形式でダウンロード後、PDFからJPG形式に変換した場合。

圧縮 → リサイズ（60KB）

　

部分拡大

圧縮 → リサイズ → 再圧縮（21KB）

　

部分拡大
  1. PDF（標準）→PNG変換
    PDF(標準）形式でダウンロード後、PDFからPNG形式に変換した場合。

圧縮 → リサイズ（724KB）

　

部分拡大

圧縮 → リサイズ → 再圧縮（173KB）

　

部分拡大
  1. PDF（印刷）→JPG変換
    PDF(印刷）形式でダウンロード後、PDFからJPG形式に変換した場合。

圧縮 → リサイズ（60KB）

　

部分拡大

圧縮 → リサイズ → 再圧縮（23KB）

　

部分拡大
  1. PDF（印刷）→PNG変換
    PDF(印刷）形式でダウンロード後、PDFからPNG形式に変換した場合。

圧縮 → リサイズ（883KB）

部分拡大

圧縮 → リサイズ → 再圧縮（213KB）

　

部分拡大

いかがでしょうか？

メインビジュアルのファイルサイズ（容量）は小さいに越したことはないですが、サイズを落とすために圧縮をかけるとかなり粗くなります。
（ファイルサイズの目安としては100KB以下が理想）

ノートパソコンやスマートフォンなどの小さな画面なら粗さも目立たないようですが、部分拡大画像を見てわかるように、文字の輪郭部分が粗くなり、さらにPNGを圧縮すると色数が減少しドットが目立っています。

SWELLのメインビジュアルサイズの設定によっては、デスクトップパソコンのディスプレイ（2560×1440など）で見ると画像が拡大され、画像が粗い印象を与えてしまいます。

メインビジュアル画像に最適なCanvaの画像作成方法は？

では、ディスプレイのサイズに関係なく、粗さが目立たないようにCanvaで画像を作成する方法は？となると、画像素材にもよるので一概にはいえませんが、上記の検証結果から見ると、

「③ PDF（標準）でダウンロード → JPG変換」が最適

と言えます。(「標準」も「印刷」も結果として変わりませんでした）

圧縮をかけるとどうしても粗くなってしまいますので、「画像ファイルの容量が100KBを超えるような場合は圧縮する」を目安として、サイト表示スピードに影響のない範囲で調整すればいいと思います。

ちなみに、「PDF→PNG」に変換すると、解像度が「200dpi」のPNGファイルが生成されます。（写真など色数の多いファイルはファイル容量も大きくなります）

印刷に使用するには適していますが、ブログなどで使用する場合、ディスプレイ解像度は「96dpi」が主流ですので、200dpi→96dpiに圧縮すると、結果として粗くなってしまいます。

それでは、ここからは「③ PDF（標準）でダウンロード → JPG変換」での作成手順についてご説明します。

「PDF（標準）でダウンロード → JPG変換」画像の作成方法

STEP
Canvaで「PDF（標準）」のPDFファイルをダウンロード

「ダウンロード」より、「ファイルの種類」で「PDF（標準）」を選択、「ダウンロード」をクリックしパソコンに保存します。

STEP
ダウンロードしたPDFをJPG形式に変換

パソコンに保存したPDFファイルを、PDFコンバーター「PDF to Image」を使用して、JPG形式に変換します。

上記サイトにアクセスし、「PDF to JPG」タブを選択します。

「ファイルをここにドラッグ＆ドロップしてください」領域に、PDFファイルをドラッグ＆ドロップします。

STEP
JPG形式に変換されたファイルをダウンロード

「PDF to Image」で変換が始まり、完了するとZIPファイルが作成されます。

このZIPファイルの「ダウンロード」をクリックして、パソコンに保存します。

STEP
ダウンロードしたJPGファイルの確認

パソコンに保存したZIPファイルを解凍し、ファイルの状態を確認します。

  • 種類：JPGファイル
  • サイズ：102KB
  • 解像度：96dpi
  • 大きさ：3334×1875

「解像度」がディスプレイ解像度の「96dpi」に変換されていますが、「大きさ」が「3334×1875」に拡大されています。

これは「印刷用解像度→ディスプレイ解像度（WEB用）」に変換された際に自動的に変更されたためです。

STEP
変換したJPGファイルを圧縮

パソコンに保存したJPGファイルを、「iLOVEIMG」を使用して圧縮します。

「リサイズ」ではなく、必ず「圧縮」を先に行います。リサイズを先に行うと、リサイズ圧縮されるため画像が粗くなります。

上記サイトにアクセスし、「画像の圧縮」をクリックします。

STEP
JPGファイルをアップロード

JPGファイルを、「画像を選択」から選択するか、ドラッグ＆ドロップでアップロードします。

STEP
JPGファイルを圧縮

「画像の圧縮」をクリックし、圧縮します。

STEP
圧縮したJPGファイルをダウンロード

「圧縮された画像をダウンロード」をクリックし、ファイルをパソコン保存します。

なお、この状態ではまだ「3334×1875」サイズのままなので、つづいて「1600×900」のサイズにリサイズします。

STEP
変換したJPGファイルをリサイズ

トップにもどり「画像のサイズ変更」をクリックします。

STEP
JPGファイルをアップロード

先ほど圧縮したJPGファイルを、「画像を選択」から選択するか、ドラッグ＆ドロップでアップロードします。

STEP
JPGファイルのサイズを「1600×900」に変更

「横」のサイズを「1600」に変更（※高さは自動で900に変更されます）し、「画像のサイズ変更」をクリックします。

STEP
リサイズしたJPGファイルをダウンロード

「サイズ変更された画像をダウンロード」をクリックし、ファイルをパソコンに保存します。

STEP
リサイズしたJPGファイルをダウンロード

「サイズ変更された画像をダウンロード」をクリックし、ファイルをパソコンに保存します。

STEP
ダウンロードしたJPGファイルの確認

圧縮→リサイズしたファイルの状態を確認します。

  • 種類：JPGファイル
  • サイズ：60KB
  • 解像度：96dpi
  • 大きさ：1600×900

これで、画像が粗くなるのを最小限に抑えながら、ファイルサイズも圧縮することができます。

かなりめんどくさい手順ですね・・・。

単純に「JPG」でダウンロードした場合の画像の粗さが気になる場合は、上記手順で作成すればある程度よくなると思います。

Canva＋SWELLでレスポンシブなメインビジュアルを設定するカスタマイズ

今回は、メインビジュアル用の画像をCanvaできれいに作成する手順をご紹介しました。

なお、SWELLのメインビジュアル機能では、メインビジュアルの背景画像に「ブログパーツ」で分離したロゴや文字などの画像を被せることができます。

この方法により、最小限のサイズできれいな画像のまま、ロゴや文字などの画像をレスポンシブに表示することもできます。

「Canva＋SWELLでレスポンシブなメインビジュアルを設定する」カスタマイズ方法については、以下の記事でご紹介しています。

あわせて読みたい
Canva+SWELLでレスポンシブなメインビジュアルを作成 SWELLでメインビジュアルを設定するとき「高さはいくつに設定すればいいの？」と悩みますよね。 閲覧ユーザーの画面の大きさによって、せっかくデザインしたメインビジ…
Canvaの無料登録はこちら

あと、Canvaの使い方などでわからないことがあれば、どんぐり所長が運営している「ブログデザインラボ」でCanvaの使い方を詳しく解説されていますので、そちらもご参照ください～。

ブログデザインラボ
Canvaでデザイン | ブログデザインラボ 大人気のクラウド型デザインサービス「CANVA」その使い方を説明していきます。

ではでは。

あわせて読みたい
メインビジュアルを「自己満足型」にカスタマイズ！ – SWELLカスタマイズ 前回、マスクした背景を動画にしたので、せっかくならともう少し動きを加え、マスク部分をアニメーション化してみました。これこそ、アクセスしてきた人にとってはどーでもいい、自己満足型カスタマイズの極みです。

＼ ご支援ありがとうございます！ ／

くれぐれもカスタマイズは「自己責任」でお願いします^^;

当ブログでご紹介しているようなカスタマイズ（←本来の意味での）をしなくても、SWELLの基本機能だけで十分オシャレなブログ・サイトが構築できます。

テーマ選びに迷ったらSWELLを選んでおけば間違いないです！

（カスタマイズ沼にハマらないようご注意ください^^;）

SWELLを使用したブログの構築・カスタマイズのご相談承ります

本業の傍ら、SWELLを使用したブログの構築およびカスタマイズを承っております。
「おしゃれなブログにしたい」
「独自のカスタマイズをしたい」など、
お気軽にご相談ください。
詳しくは、TwitterのDMからどうぞ。
まずはTwitterで仲良くしてください ^^

#ヤモヲのひとりあそび

WordPressテーマ「SWELL」

17,600円（税込）

シンプル美と機能性の両立。圧倒的な使い心地を追求するWordPressテーマ。ブロックエディター完全対応！

ご購入はこちら
デモサイトを見る
CUSTOMIZE
＋PLUGIN
KNOWLEDGE
SWELLER的な SWELLカスタマイズ SWELLカスタマイズ – SWELLカスタマイズの基本
SWELL-KNOWLEDGE
シェアしていただけるとうれしいです^^
  • URLをコピーしました！
  • URLをコピーしました！

こちらの記事もよかったらどうぞ

あらすじ