Canvaは初心者でも手軽にデザインが作れる便利なツールですが、「LP（ランディングページ）を作るのは意外と難しい……」という声をよく耳にします。その中でも特に多いのが、「モバイル表示でレイアウトが崩れてしまう」という悩みです。
実際、PCで完璧に見えていたデザインが、スマホで見た瞬間にテキストが左寄せになっていたり、縦長に間延びしてしまったり……。今回は、CanvaでLPを作成する際によくあるレイアウト崩れの原因と、その解決法をご紹介します。
実際に私が制作したテンプレートをもとに、こちらのLPの使い方やスマホで崩れる際に予防法を一緒に解説します。
✅モバイル表示でテキストが左寄せになる理由と対処法
例えば、上記の例では透明図形を入れてない場合、ロゴ左に少し余白ができたり、説明文は左寄せになってしまっています。
この現象を解決するには、PC版のレイアウトに下記のように図形を入れると直ります。今はわかりやすくするために図形に色を入れてますが、調整が終わったら、透明度をゼロにします。
✅スマホでも２列表示にしたいときのテクニック
もう一つよくあるのが、「PCでは複数列で表示されていたのに、スマホだと全部縦に並んでしまう」という問題です。
たとえば、PCで４列に並んだサービス紹介セクション。スマホで見ると自動的に１列ずつ表示され、縦に長くなりすぎてしまうことがあります。スクロールが長くなりすぎると、ユーザーにとっても負担です。
２列表示にしたい場合の設定方法
上記のように２列ずつ１つの図形を入れることで、スマホでも２列ずつ表示されるようになります。
✅スマホ表示で余白を入れたい時
PCではちょうどいい余白が確保できているのに、スマホ表示になると余白が狭くて窮屈に見えてしまうことがあります。そんな場合にも、透明図形を使って余白を調整することができます。
例えば、このように、タイトルの下に透明図形を挿入することで、スマホでも十分な余白を確保することができます。
こちらのLPテンプレートについての別のブログも掲載していますので、合わせてチェックしてください！
⬇️テンプレートの利用はこちら
実際、こちらのLPがどのような作りになっているか気になる方は、こちらのURLよりテンプレートを購入できます。
他の人のテンプレートを見ることで、たくさん学べることがあります。
自分のデザインスキルが向上し、より効果的なLPを作成するためのヒントが得られます！
まとめ
PC版のデザインをそのままスマホに適用すると、どうしても表示が崩れやすいですが、透明図形を使うことで、より柔軟にレイアウトをカスタマイズし、どのデバイスでも美しいデザインを維持できます。
レイアウト崩れの防止：テキストや画像がずれてしまう問題を回避
余白の調整：スマホ表示でも快適に表示できる余白を確保
簡単なカスタマイズ：透明度を調整するだけで、デザインに手を加えることなく自然に調整
Canvaを使ってLPを作成する際、透明図形は非常に有効なツールです。ぜひ、これらのテクニックを活用して、PCとスマホ両方で完璧に見えるデザインを作り上げてください。
