Canvaで作ったLPがずれる！レイアウト崩れを防ぐために私がしている2つのこと🙌

CanvaでLPを作っていて、

「PC画面ではきれいに見えていたのに、

スマホで見たら文字や画像の位置がずれる…」

そんな経験はありませんか？

最近はスマホからLPを見る方がほとんど。

だから私は、LPを作るときは最初から

スマホで読みやすいことを基準にデザインしています。

今日は私がCanvaでLPを作るときに必ずしている

レイアウト崩れを防ぐ2つのコツをご紹介します。

---

コツ：幅600px以内におさめて、透明な図形を置く

先に結論をいうと、私が意識しているのはこの2つです。

1.すべての要素を幅600px以内におさめる

2.幅500px程度の透明な図形を一番下に置く

この2つだけでPCで編集したときの見た目と、

スマホで見たときの表示が同じに！

「スマホで見るとずれちゃう😢！」

という事態がなくなります🙌

それぞれ詳しく解説しますね🌸

コツ① 最初から「幅600px以内」で作る

PCで編集していると画面が横に広く使えるので、

つい文字や画像を外側まで置きたくなりますよね。

でも、実際にプレビューで確認してみると、

・PCではデザインが画面いっぱいに広がって読みにくい

・スマホだと要素がずれて思った通りに表示されない

という事態が発生します😭

そこで私は、必ず最初に幅600pxのガイド線を置きます。

そして、文字・画像・ボタン・装飾など

すべての要素をこの範囲内におさめます。

【さらにひと工夫💡】

ガイド線は制作中にうっかり動かしてしまわないように、

ロックしておくのがおすすめ🌸

PCで作業していると少し窮屈に感じるかも

しれないけど、スマホで読んだときには

このくらいの幅がちょうどいいです🙌

【ガイド線を引く手順】

①幅600pxの図形を作る

②その図形を右クリック

⇒「ページに合わせる」⇒「中央に配置」

③図形の左右に沿うようにガイド線を引く

もしガイド線が表示されない場合は、

以下の手順で設定を確認すると出てきます🥰

①「ファイル」をクリック

②「設定」をクリック

③「定規とガイドを表示」をクリック

コツ② 幅500px程度の透明な図形を置く

もうひとつ私がしているのが、

幅500px程度（サイズはざっくりOK！）の透明な図形を

デザインの一番下に置くことです。

透明な図形を置いておくと、

何も入れずにデザインしたときに起こりやすい

「自動のレスポンシブ調整」を防ぐことができます。

例えば

・本当は2列で並べたかった要素が1列になる

・配置した位置が意図せずずれてしまう　など

透明な「固定用の図形」を1つ配置しておくだけで、

Canvaが勝手にレイアウトを調整するのを防ぎ、

編集画面で見たままのデザインを保つことができます。

図形は透明にして、ほかの素材の邪魔をしないように

一番下へ配置します。

【覚えておくと便利💡】

一発で一番下のレイヤーに移動するショートカットキーがあります🌸

素材を選択して　Alt + Ctrl + [　です

Canvaのショートカットキーって色々あるけど、

これは本当に時短できるからおすすめ🤗

（正直言うとわたしも2-3個しか使ってないですっ！）

置いたあとはこれもロックしておくと

誤って一緒に動いちゃう！事態を回避できます。

PCで見ると崩れないの？

「スマホ幅に合わせて作ると、

PCで見たときに小さくなりすぎない？」

と最初は不安かもしれません。

紹介したコツを使ったモバイルファーストの

LPテンプレートがあるので、

実際の見え方をぜひ確認してみてください🌸

▼ LPのプレビュー⁢ ▼ꕀ⁢ꕀꕀꕀꕀꕀ⁢⁢ꕀ⁢ꕀ

↓実際の見え方をご覧いただけます↓

ayase-design.my.canva.site/bridalfair

⁢ꕀꕀꕀꕀꕀ⁢ꕀꕀꕀꕀꕀ⁢ꕀꕀꕀꕀꕀ⁢⁢ꕀ⁢ꕀ

特に

・Instagramやスレッズ、Xなどの発信媒体

・LINEからの発信

・メルマガ経由

で見てもらうLPなら、私は迷わずモバイルファーストで設計します。

最後は必ずスマホ実機で確認を🤳

わたしはPCで編集作業をしますが、

公開前に　必ずスマホ本体　で見え方を確認しています。

【スマホで見るときのチェック項目💡】

・🌸特に大事🌸読んでいて窮屈に感じないか

・文字が小さすぎないか

・写真や装飾がずれていないか

・ボタンが押しやすい位置にあるか

PCとスマホでは画面の大きさが全く異なるので、

「読んでいて窮屈に感じないか」

これはかなりしつこくチェックします🫣！

ちょっとした工夫ですが、

「なんだか見づらいかも…」となるのを防げるので

ぜひ試してみてください🌸

Canvaで自由に編集できるLPテンプレートも制作しています

文章や写真を入れ替えるだけで

自分に合ったLPを作成できるテンプレートも制作しています。

オリジナルのLPテンプレートだけでなく、

・AIを活用した感情を動かす原稿作成ガイド

・3ステップでできるLPの公開手順書

もついているので、ぜひご覧ください👇

これからも

「デザインが楽しくなるちょっとしたヒント」を

お届けしていきます🌸

フォローしていただけると嬉しいです🤗