誰でもプロ並みのデザインが作れるツール「Canva」。この革新的なツールの登場により、多くの企業でバナーやブログのアイキャッチ画像を内製化する動きが進みました。これは素晴らしいことですが、同時にWeb制作の現場では、ある深刻な「公害」が発生しています。
それは、「Canvaで作った画像が原因で、Webサイトが劇的に重くなっている」あるいは「スマホで見ると画像がボヤけて安っぽく見える」という問題です。
デザインの良し悪し以前に、画像の「画質（解像度）」と「重さ（ファイルサイズ）」のバランスが崩れているサイトは、Googleからの評価（SEO）を落とし、表示速度の遅さでユーザーをイライラさせ、結果としてコンバージョンを逃しています。
今回は、Canvaを使いこなしつつ、Webサイトのパフォーマンスを最大化するための、プロ仕様の画像書き出し・最適化テクニックを解説します。
その画像、本当に「Web用」になっていますか？
Canvaの画面上では綺麗に見えていたのに、WordPressにアップロードした途端に画質が劣化したり、逆に1枚の画像で数MBもの容量を食っていたりする。この現象のほとんどは、保存（ダウンロード）時の設定ミスが原因です。
Webサイトにおける画像運用には、印刷物とは全く異なる「作法」があります。この作法を知らずに「推奨」ボタンのままダウンロードし続けるのは、ブレーキを踏みながらアクセルを踏むようなものです。
表示速度は「0.1秒」が命取り
Amazonの調査では、ページの表示速度が0.1秒遅れるだけで、売上が1%減少するというデータがあります。Googleも、ページの読み込み速度（Core Web Vitals）を検索順位の決定要因に組み込んでいます。
つまり、あなたが作った「重すぎるバナー」は、ただ重いだけでなく、サイトの検索順位を下げ、顧客を追い返すバリケードになっている可能性があるのです。
プロのWebライターやデザイナーは、1KB（キロバイト）単位で画像のダイエットに執念を燃やします。画質を保ちつつ、極限まで軽くする。この矛盾する課題をクリアして初めて、画像は「戦力」になります。
ステップ1：最適な「ファイル形式」を選ぶ
Canvaの「共有」→「ダウンロード」ボタンを押すと、ファイルの種類を選べます。ここで適当に選んでいませんか？ 画像の中身によって、正解は明確に異なります。
写真メインなら「JPG」一択
人物の写真、風景、複雑なグラデーションが含まれる画像の場合、基本は「JPG（ジェイペグ）」を選んでください。JPGは写真のような色数の多い画像を効率よく圧縮することに長けています。
これをPNGで保存してしまうと、見た目は変わらないのにファイルサイズだけが5倍〜10倍に膨れ上がることがあります。写真はJPG。これを徹底するだけで、サイトは軽くなります。
※Canvaのダウンロード設定にある「品質」スライダーは、80%程度に落としてもWeb上ではほとんど劣化が分かりません。
ロゴ・図解・文字なら「PNG」
逆に、ロゴマーク、イラスト、グラフ、文字だけの画像などは「PNG（ピング）」が適しています。PNGは輪郭をシャープに保つのが得意で、JPG特有の「モヤモヤしたノイズ（ブロックノイズ）」が発生しません。
また、背景を透明にしたい場合（透過画像）はPNG必須です。写真が含まれておらず、色数が少ない画像はPNGを選ぶと、画質と軽さを両立できます。
新常識「WebP」の活用
もしCanvaの有料版（Pro）を使っているなら、保存形式で「WebP（ウェッピー）」を選択することをお勧めします。
WebPはGoogleが開発した次世代の画像フォーマットで、JPGと同等の画質を保ちつつ、ファイルサイズをさらに30%ほど軽くできます。一昔前は対応していないブラウザもありましたが、現在はほぼ全ての環境で表示可能です。
CagraPROの制作現場でも、特別な理由がない限り、最終的な出力はWebPに統一しています。
ステップ2：スマホでボヤけない「2倍書き出し」の魔法
「PCで見ると綺麗なのに、iPhoneで見ると画像がボヤけている」。この悩みの原因は、現代のスマートフォンのほとんどが「Retinaディスプレイ（高精細画面）」を採用していることにあります。
Retinaディスプレイは、通常のモニターの2倍〜3倍の密度で画素が詰まっています。そのため、表示したいサイズ「ぴったり」で作った画像を表示させると、スマホ側が無理やり引き伸ばして表示するため、輪郭がボヤけてしまうのです。
プロは「2倍」で作って「半分」で表示する
この問題を解決する唯一の方法は、「表示したいサイズの2倍の大きさで書き出す」ことです。
例えば、Webサイト上で「横幅300px」で表示したいバナーがあるとします。Canvaで作る際は、その倍の「横幅600px」で作成・書き出しを行ってください。
そして、Webサイト（HTML/CSS）側で「width: 300px;」と指定して表示させます。こうすることで、高密度のRetinaディスプレイでも、画素がギュッと詰まった状態で表示され、驚くほどクッキリとした美しい画像になります。
Canvaでの設定方法
Canvaのダウンロード設定には「サイズ」というスライダー（0.5x〜3x）があります。ここで「2x（2倍）」を選択してダウンロードするのが手っ取り早い方法です。
ただし、サイズを大きくすれば当然ファイル容量も増えます。そこで次の「圧縮」の工程が必須となります。
画像の扱いひとつで、企業の「ITリテラシー」が透けて見えます。ボヤけた画像や重すぎるサイトを放置している企業は、「細部に神を宿らせない会社」だと判断されかねません。もし、自社サイトの画像運用に不安があるなら、一度プロの診断を受けてみませんか。
ステップ3：Canva任せにしない「外部ツール圧縮」
これが最も重要な工程であり、多くの人がサボってしまうポイントです。
Canvaから書き出した画像（特に2倍サイズにしたもの）は、そのままではWebで使うには重すぎます。Canvaの「ファイルを圧縮」機能もありますが、正直なところ、圧縮率と画質のバランスにおいて完璧とは言えません。
最後の仕上げは「TinyPNG」か「Squoosh」
プロは、Canvaからダウンロードした画像を、そのまま使いません。必ず「画像圧縮ツール」を通します。
有名なのは「TinyPNG（タイニーピング）」やGoogleが提供する「Squoosh（スクーシュ）」です。これらのツールは無料で使えます。
Canvaで作った画像をここにドラッグ＆ドロップするだけで、見た目の画質をほぼ保ったまま、ファイルサイズを50%〜80%削減してくれます。
「1MB」あった画像が「200KB」になる。この差は巨大です。一手間かかりますが、この工程を経るか経ないかで、サイトの表示速度は劇的に変わります。
CagraPROが実践する「SEOに強い」画像運用
私たちCagraPROが記事制作やサイト制作を行う際、画像の取り扱いにはさらに細かいルールを設けています。それは、画像もまた「コンテンツの一部」であり、SEOの加点対象だからです。
ファイル名とAlt属性の徹底
Canvaからダウンロードした画像は、「名称未設定のデザイン.png」のようなファイル名になりがちです。これをそのままアップロードしてはいけません。
Googleの画像検索ロボットは、画像の中身を見ることができません。ファイル名とAlt属性（代替テキスト）で判断します。
「web-design-tips.jpg」のように、画像の内容を表す英単語でファイル名をつけ、WordPress側で「Webデザインのコツを図解したバナー」とAlt属性を入力する。
ここまでやって初めて、画像検索からの流入が期待できるようになり、アクセシビリティ（視覚障害者への配慮）も担保されます。
遅延読み込み（Lazy Load）の活用
縦に長いページで、大量の画像を使う場合、「Lazy Load（遅延読み込み）」という技術を使います。
これは、ユーザーがスクロールして画像が画面に近づいた瞬間に初めて読み込みを開始する仕組みです。ファーストビュー（最初の画面）の表示速度を爆速に保ちつつ、リッチな画像を多用することが可能になります。
最近のWordPressでは標準機能になりつつありますが、テーマによっては設定が必要です。
たかが画像、されど画像
「Canvaを使えば誰でもデザイナーになれる」というのは半分正解で、半分間違いです。
「見た目を作る」ことは誰にでもできるようになりました。しかし、「Webという環境に最適化された、機能するクリエイティブを作る」には、やはり専門的な知識が必要です。
ボヤけた画像は、ブランドの信頼をボヤけさせます。
重い画像は、ユーザーの足取りを重くさせます。
せっかくCanvaで素晴らしいクリエイティブを作ったのなら、最後のアウトプットまでこだわり抜いてください。
「画質はクリアで、容量は軽い」。このプロの品質基準を自社で実装するのが難しいと感じたら、私たちにご相談ください。
デザインの制作から、サイトへの最適化実装まで、一気通貫でサポートします。
著者：清宮 雄（株式会社カグラ 代表取締役） マーケティング、ブランディングおよび企業経営の領域において20年以上の実務経験を有する。国内外にてIT事業および教育事業を展開。