​「Canva」スマホとPCで表示がズレる現象を防ぎたい【T】

「Canva」はパソコンの大画面で細部までこだわってデザインできるのが魅力ですが、いざスマートフォンで確認すると、印象が違って見えたり重要な情報が隠れてしまったりすることがあります。

特にWEBサイトのバナーやSNSのヘッダーなどは、閲覧する端末によって表示される範囲が自動的に調整されるため、中心から外れた位置にある要素は切り捨てられてしまうケースが少なくありません。

作成環境と閲覧環境のギャップを埋め、どのデバイスからアクセスしても一貫した美しさを保つデザインを実現する助けになるかもしれない注意点を紹介します。

セーフエリアを意識して中央に配置する

スマートフォンとパソコンで最も表示が変わりやすいのは、画像の「上下左右」の端の部分です。

多くのプラットフォームでは、画面サイズに合わせて中央を基準に画像を拡大・縮小するため、端に配置した文字やロゴは真っ先に表示範囲外へ追いやられてしまいます。

これを防ぐには、重要な情報は常にキャンバスの中央付近（セーフエリア）に寄せて配置し、背景画像だけを端まで広げる構成にすることが最も確実な対策となります。

• デザインのキャンバスの端から10パーセント程度は余白として空けておきます

• 最も伝えたいキャッチコピーやロゴは、中央の四角いエリアに集約させます

• 表示設定からガイドラインや定規を表示させ、目安となる枠線を引きます

• 背景素材は、多少端が切れても問題ない風景やパターン画像を選びます

注意点として、パソコン画面での見栄えを優先して余白を詰め込みすぎると、スマートフォンでは文字が画面いっぱいに広がりすぎてしまい、圧迫感を与えてしまうことがあります。

適度な「抜け感」を意識し、画面が小さくなっても文字同士が重ならない程度のスペースを保つことが、読みやすさを維持するための重要なポイントです。

プレビュー機能で異なるデバイスの見た目を確認する

Canvaには、作成中のデザインが異なるデバイスでどのように見えるかをシミュレーションできるプレビュー機能が備わっています。

特にWebサイト形式のデザインを作成している場合は、ワンクリックでスマートフォン、タブレット、パソコンのそれぞれの表示モードに切り替えることができ、公開前にレイアウトの崩れをいち早く発見することが可能です。

• 画面右上にある公開ボタンやプレビューアイコンをクリックします

• 上部に表示されるデバイスアイコン（スマホ・PCなど）を切り替えます

• それぞれのモードで、文字の大きさや画像のトリミング位置をチェックします

• ズレが気になる箇所があれば、編集画面に戻って要素の位置を微調整します

アドバイスとして、SNSのヘッダー画像などは、公式が推奨しているサイズよりも少し余裕を持たせた「共通して表示される領域」を事前に調べておくのが効果的です。

その範囲をガイド線で囲ってからデザインを始めることで、投稿後の「文字がアイコンで隠れてしまった」といった失敗を未然に防ぎ、ストレスのない制作活動に繋げることができるでしょう。