CANVACHAPTER 5 / LESSON 1

位置をそろえて余白を整える

ガイドと配置機能を使い、要素の位置と間隔をそろえられる

位置をそろえて余白を整えるのアイキャッチ画像

文字やカードの位置が少しずつずれていると、内容が同じでも読みにくく見えます。基準にする線と間隔を決めて、要素をそろえましょう。

位置と間隔がばらばらなカードと基準線にそろえたカードの比較
端の位置と要素どうしの間隔をそろえると、まとまりが伝わります。

1. ずれている場所を見つける

まず、三つのカードや文字の左端、上端、間隔を見比べます。一度に全部を直そうとせず、そろえる基準を一つ決めます。

Canvaで見出しと説明文の左端がそろっていないデザインを開いた実際の画面
見出しと説明文の始まる位置が少しずれていることを確認します。

2. そろえる要素をまとめて選ぶ

複数の要素を同時に選ぶと、まとめて位置をそろえられます。背景など関係のない要素まで選ばれていないか確認します。

Canvaで見出しと説明文の二つを複数選択した実際の画面
Shiftキーを押しながら選ぶと、二つの文字を同時に選択できます。

3. 「配置」を開く

複数の要素を選んだ状態で配置メニューを開きます。画面の表示は端末や選択内容によって変わるため、選んだ要素を先に確認します。

Canvaの配置メニューに上揃え、左揃え、中央揃えなどが表示された実際の画面
配置メニューには、上下左右と中央にそろえるボタンがあります。

4. 左端または中央をそろえる

デザインに合う基準を一つ選びます。左揃えにすると文章の始まりがそろい、中央揃えにすると短い要素をまとめやすくなります。

Canvaの配置メニューで左揃えを選び、二つの文字の左端がそろった実際の画面
今回は「左揃え」を選び、見出しと説明文の左端をそろえます。

5. 間隔と外側の余白を確認する

要素の端だけでなく、要素どうしの間隔とページの端までの余白を見ます。数値だけに頼らず、同じまとまりに見えるか確認します。

Canvaで見出しと説明文の左端をそろえ、デザイン全体を確認している実際の画面
選択を外し、そろえた位置と周囲の余白をデザイン全体で確認します。

このレッスンの完成チェック

  • そろえる基準を一つ決めた
  • 必要な要素だけを複数選択した
  • 配置メニューで位置をそろえた
  • 要素どうしと外側の余白を確認した
完成物位置と間隔がそろったレイアウト