Canvaでウェブサイトを作っていて、「デスクトップではいい感じなのに、モバイルで見ると余白がおかしい…」と困ったことはありませんか？
実は、Canvaのレスポンシブデザインには独特の仕組みがあって、それを理解しないとモバイル表示をコントロールできないんです。
1. レスポンシブデザインの変換基準は？
まず前提として、Canvaではデスクトップ版とモバイル版を別々にデザインできません。
デスクトップで作ったデザインが自動的にモバイル用に変換されます1。
ウェブサイトのデザインをプレビューで確認するときに、「モバイルでサイズを変更」が有効だと、自動的に左右に分割されたカラムを縦並びに配置してくれるのです。
これはメリットでもあります。
一度デザインすれば、自動的にモバイル対応してくれる。
でも、細かい調整ができないというデメリットもあるんです。
じゃあ、Canvaは何を基準にモバイル表示を決めているんでしょうか？
1.1. CSS Gridで理解する変換の仕組み
Canvaは、要素の位置からCSS Gridというレイアウトシステムを自動生成しています2。
各要素の左端と右端が「列のライン」を、上端と下端が「行のライン」を作ります。
面白いのは、同じ位置に複数の要素がある場合。
Canvaは「ゼロ幅カラム」というものを使って、同じ座標に複数の要素を配置できるようにしています3。
これで重なり順序も保持できるんです。
そして、モバイルに変換するときは、このグリッドを再計算します。
デスクトップで5列だったものが、モバイルでは3列（余白、コンテンツ、余白）になり、すべての要素が中央の列に集約されるイメージです。
Canvaはメディアクエリを使用して各デバイス用にブレークポイント（small: 440px、medium: 880px）を作成し、グリッドを再計算します。
バックエンドアルゴリズムがコンテンツを再構成し、画面サイズごとに異なるグリッドレイアウトを生成します。
このとき、グループ化された要素は「一つのまとまり」として扱われます。
だから、グループ化の有無がモバイルでの配置を大きく左右するんですね。
1.2. 縦並びと拡大率
ただし、4分割以上では、左右に余白が追加されました。
1/1は左右余白なしに対して、2分割・3分割ではやや左右余白があり、4分割以上では要素の横幅がディスプレイいっぱいには広がらず、大きな余白が生まれています。
これは、「モバイルでサイズを変更」の仕組みに原因があるようです。
もともと、プレビューで「モバイルでサイズを変更」をオフにすると、サイト全体がかなり小さく表示されます。
これを基準に考えると、「モバイルでサイズを変更」をオンにすると、左右2分割のコンテンツならサイズを2倍に拡大して縦並びに、3分割なら3倍に拡大して縦並びにしていることになります。
ただし、これは要素の単純な拡大・縮小ではありません。
というのも、1カラムや2分割だと、縦横比が変わっています。
また、4分割以上の場合、そのまま4倍、5倍、・・・と拡大していきません。
4分割以上では、3倍までは拡大されるものの、要素の幅が小さい分余白が大きくなります。
さらに、横方向の要素を増やすと、6分割からは2カラムセット、9分割からは3カラムセットになりました。
つまり、小さな要素が極端に大きくならないように、3の倍数での分割が基準になっているようです。
3倍数分割だと余白はありませんが、自動的にセットになります。
モバイル表示を考えると、Canvaサイトでは「3分割カラムまで」でデサインしたほうがよさそうです。
2. 要素の「境界ボックス」が基準
Canvaは各要素の「境界ボックス」を見て判断しています4。
境界ボックスとは、要素を囲む見えない枠のことです。
ここが重要なポイント。
テキストや画像の実際の内容ではなく、この境界ボックスの外枠同士の距離で余白を計算しているんです。
例えば、テキストボックスを作ったとき、文字の周りに余分な空白があるとします。
Canvaはその空白も含めて一つの要素として認識します。
すると、モバイルで表示したときに、意図しない大きな余白が生まれてしまうんです。
対策は、要素をトリミングして、境界ボックスを内容にぴったり合わせること。
これだけで、モバイルの余白問題がかなり改善されます。
2.1. 重なり判定が配置を決める
次のポイントは、要素同士が重なっているかどうかで、モバイルでの配置が変わるということ。
要素の境界が離れている場合、モバイルでは縦に積み重なります5。
デスクトップで横に3つ並んでいた要素が、モバイルでは縦に3つ並ぶイメージです。
ところが、境界が接触していたり重なっていたりすると、モバイルでも横並びのまま6。
ただし、画面幅に収めるために縮小表示されます。
3つ並んだボタンが、モバイルで小さくなって横に並んだまま…というのは、この仕組みのせいなんです。
ちょっとした余白の有無が、モバイルでの見え方を大きく変えてしまう。
ここを理解していないと、思い通りの表示にならないんですね。
2.2. グループ化は「モバイルレイアウトの指示」
そして最も重要なのが、グループ化の役割です。
通常は、グループ化は「要素をまとめて移動しやすくする機能」です。
でも実は、グループ化はモバイルでのレイアウトを制御する重要な命令なんです。
まとめて縦に並べたい要素をグループ化すると、モバイルではグループ単位で縦に並びます7。
例えば、価格表で3つのプランを横に並べているとき、グループ化しないと悲劇が起きます。
すべての見出しが先に並び、次にすべての価格が並び…という具合に、プランのまとまりが失われてしまうんです。
そこで、各プランの要素（見出し、価格、説明、ボタン）をそれぞれグループ化します。
すると、モバイルではプランごとにまとまって縦に並びます。
ただし、画面の横幅いっぱいに広がる大きな要素をグループ化しても、モバイル版でまとまって表示されるわけではありませんでした。
重なる要素がなければ、縦に並びます。
2.3. グループ化の判断基準
では、どういうときにグループ化すべきなんでしょうか？
グループ化すべきなのは、「モバイルでまとめて縦に並べたい要素のセット」です。カード型のコンポーネント（画像、見出し、説明、ボタン）や、証言セット（引用符、テキスト、名前）などが典型例です。
逆に、グループ化すべきでないのは、横幅が広い要素群や、モバイルで個別にスタックさせたいナビゲーションメニューなどです。
重要なのは、「見た目が同じだから」という理由で気軽にグループ化を解除しないこと。デスクトップでは見た目が変わらなくても、モバイルでのレイアウトは大きく変わってしまいます。
グループ化を変更したら、必ずモバイルプレビューで確認する。これが鉄則です。
3. デザイン時の思考プロセス
Canvaでウェブサイトをデザインするときは、こう考えるといいでしょう。
- まず、要素を配置したら「この要素の境界ボックスはどこまで？」と確認します。
余分な空白があればトリミングして最適化。 - 次に、「隣の要素と重なってる？接触してる？」をチェック。
意図的に横並びを保ちたいなら、グループ化を検討します。 - そして、「これはモバイルで縦に並べたい？」と自問。
縦に並べたいなら関連要素をグループ化、個別に動いてほしいなら離しておきます。 - 最後に、X軸・Y軸が揃っているか確認。
左揃えや中央揃えなど、統一された配置にすると、モバイルでも予測可能な結果になります。
3.1. わかってきたこと
Canvaのレスポンシブデザインは、完全な自由度はありません。
でも、仕組みを理解すれば、かなりの部分をコントロールできます。
重要なのは、グループ化が「整理のための機能」ではなく「モバイルレイアウトを決める構造的な指示」だということ。そして、境界ボックスと重なり判定が、要素の配置を左右しているということ。
デスクトップでシンプルで予測可能なレイアウトを作れば、モバイルでも期待通りの結果が得られる。逆に、複雑な配置やバラバラな揃え方をすると、モバイルではアルゴリズムが混乱して予測不能な結果になってしまいます。
この記事で紹介した仕組みを意識してデザインすれば、Canvaのレスポンシブ挙動を80%以上コントロールできるはずです。モバイルプレビューと対話しながら、最適なデザインを探ってみてください。
- Canvaのウェブサイトビルダーは、デスクトップ版とモバイル版を個別にデザインすることはできず、デスクトップでのデザインが自動的にレスポンシブ変換される仕組みになっています。 – Are Canva Websites Responsive?
- Canvaは要素の配置位置を見て、そこから行と列を推測してCSS Gridテンプレートを自動生成します。各要素の位置、幅、要素間のギャップをパーセンテージで計算しています。 – CSS: Absolutely positioning things relatively – Canva Engineering Blog
- CSS Gridはゼロ幅の行と列をサポートしており、これにより無限の座標を作成可能です。同じ位置に複数の要素を配置しながら、重なり順序を制御できます。 – CSS: Absolutely positioning things relatively – Canva Engineering Blog
- Canvaは要素の実際の内容ではなく、境界ボックス（要素を囲む見えない枠）を基準に配置を判断します。要素の周囲に余分なスペースがあると、そのスペースも含めて要素として認識されます。 – 4 Best Canva Website Design Tips for Mobile Responsiveness
- Canvaウェブサイトは通常3カラムフォーマットで設定されており、モバイルでは単一カラムレイアウトに自動変換されます。要素が離れている場合は縦並びに、接触または重なっている場合は横並びのまま縮小表示されます。 – 4 Best Canva Website Design Tips for Mobile Responsiveness
- 重なり合っている要素はモバイルビューで縮小表示されます。要素のボーダーが互いに接触しないようにリサイズまたはトリミングする必要があります。 – My website looks different on mobile – Canva Help Center
- 垂直要素をグループ化すると、モバイルでは各グループが縦に並びます。グループ化しない要素は、モバイルビューで分離される可能性があります。 – 4 Best Canva Website Design Tips for Mobile Responsiveness