Canva Webサイトのレイアウト崩壊、どうやったら防げる？ プロに聞いてみた

編集部二村

行き詰ってしまったので、WebデザイナーでありCanva Japan認定講師の山本和泉氏に助けを求めてみた。 度々すみません……。実はCanvaでWebサイトを作ってみていて、レイアウトが崩壊するんですが助けてください。

山本さん

まかせてください！ 基本をおさえた構造にすれば、レイアウトを崩さず組めますよ！

編集部二村

■ どうしてレイアウトが崩れるの？ レイアウトが崩れてしまうのはどうしてでしょう？ 特にモバイル表示にすると、素材が大きくなったり、ページの端まで表示されていても文字が小さすぎたりしてしまいます。

山本さん

それを防ぐには、まずWebのお作法を知っておくことが重要ですね。Webは上から読み込んで行くので、縦組みのデザインに強いんです。まず要素を上から順番に縦に並べることを意識しましょう。ポイントは以下です。

・要素ごとにページをわける ・余白を表示して枠内にデザインをおさめる ・文字はテキストボックスで配置を調整する ・左右に分けるときは要素のサイズを合わせる（右カラムと左カラムに自動でわけられる） 山本さん： このポイントを意識するだけでずれなくなると思いますよ。1つずつ見ていきましょう！ ■ 要素ごとにページをわける 山本さん： まず、今回の要素は以下ですよね。 ・トップページ ・ごあいさつ ・詳細 ・出欠確認

1/2

詳細・出欠確認を1つのページにしていた

2ページに分割することで余白もとれてスッキリ！ 背景を変えてメリハリをつけることで、詳細のページの見やすさも全然違う

山本さん： 今のデザインだと、「詳細・出欠確認」が同じページにあって窮屈なのでここを分けて、ページごとに1つの要素になるようにしましょう。あと、詳細のページはパーティーの時間や場所など重要なことが書いてあるので、目が滑らないように画像の雰囲気を変えて目立たせると良いですよ。

山本さん

■ 余白を表示して枠内にデザインをおさめる ちなみに、元のデザインを作ったときに余白はどうやって取っていましたか？

編集部二村

目測です。 なんかこう、適当に……。

1/3

山本さん

ファイル＞表示の設定＞余白を表示

点線のガイドで余白部分が表示される

余白を表示してその枠内に要素を収めるようにすれば、見切れてしまうことが防げるので、余白は表示しておきましょう。