Canvaで結婚式の招待状LPサイトを作ってみたらレイアウトが崩壊…プロに相談してみたら、ぐーんと改良された
■ 文字はテキストボックスで配置を調整する
次のポイントですね。テキストはスペースで余白を調整せずに、テキストボックスで配置しましょう。
山本さん： このとき、テキストボックスの幅を「配置」から揃えると良いですよ。モバイルに最適化したとき、テキストボックスの幅や大きさによって自動でフォントサイズがかわるので、テキストボックスを揃えておくとレイアウトがずれにくくなります。
■ 左右に分けるときは要素のサイズを合わせる 最後です。どうしても左右に何かを配置したい場合は、サイズを合わせてみてください。
山本さん： 今回の場合は、詳細のページにある文字と地図・画像を左右に分けます。
山本さん： 本当は左右で同じサイズにするのが良いんですが、今回はバランスを見て少し右を小さくしました。でも、左は左、右は右で要素の幅を揃えています。こうすることで自動的に左カラム、右カラムに分けられます。左にある要素が優先されるので、モバイル表示だと文字の下に地図や画像が表示されます。
二村： すごい！ モバイルでも崩れてないです！ 前のより圧倒的に読みやすい……。 山本さん： ここまで紹介したポイントの他には、単純なレイアウトを心がけると良いですよ。WebとDTPは違うので、Webが読み込むのに得意なデザインにしてあげれば崩れにくくなります。上手くいかないときは、Canvaで元のテンプレートがどういう構造になっているのかを研究してみると良いですよ。 二村： ありがとうございました！ ◇ ◇ ◇ 感覚的な操作でWebサイトが作れる「Canva Webサイト」、基本的なポイントをいくつか覚えるだけでWeb初心者でも簡単にWebページが作れるのでぜひ試してみて欲しい。テンプレートや素材が豊富なので、デザインが苦手な人にもおススメだ。
最後に全体のBefore／Afterを掲載する。
