今回はレイアウトのお話です。
「レイアウト＝何をどこに置くか」という事ですね。
レイアウトデザインの基本は「見る人が見やすい」配置だったり、「使う人が快適に使える」配置にする事です。
では、具体的にどのような配置が良いのでしょうか。
テキスト・画像・ボタン、それぞれの配置のコツを説明します。
テキストの配置のコツ
まずはテキストの配置のコツについてです。
文字を全く使わないものなら意識する必要はありません。
意識するコツは３つです。
- 表示位置を揃える
- 適度な改行をいれる
- 関連性の低いものは離す
この３つを意識するだけで「まとまり」と「読みやすさ」が出ます。
1.表示位置を揃える
左揃えや右揃えで統一することで読み始める位置を直感的に把握できます。
2.適度な改行をいれる
長文になる場合には改行をいれると読みやすくなります。
いれる場所は「。」の位置がおすすめです。
内容が少し変わる場合や、雰囲気を変えたい場合、強調したい文がある場合には段落を変えるのも効果的です。
上手く使う事で読み易い「リズム」が生まれます。
3.関連性の低いものは離す
いくつかの異なる内容の文の塊を載せる場合には、それぞれを少し離して配置しましょう。
区切り線をいれることなく関連性の高いものをまとめることができ、いくつかある事で整理された印象も与えます。
また、いくつかの塊を並べる場合には「離す度合い（余白の幅）」を統一しましょう。
画像の配置のコツ
次に画像の配置です。
下記３点を意識しましょう。
- 画像サイズを揃える（もしくはコンテンツエリアの外枠からはみ出さないようにする）
- 適度な余白をとる
- 余白を揃える
1.サイズを揃える
サイズを揃える事で、統一感とまとまりを出す事ができます。
2.適度な余白をとる
画像と画像、画像と文字などの余白がないと窮屈な印象を与えます。
見辛さにもつながりますので、適度な余白をとりましょう。
3.余白を揃える
余白の幅や高さがバラバラだと雑で散らかった印象を受けます。
特に風景などの写真やイラストなど、画像の枠がはっきりしているものを使う場合には余白のズレなどが目立ちます。
ボタンの配置のコツ
webサイトやアプリなどのレイアウトを考える際に出てくる「ボタンの配置」についてです。
これはいたってシンプル。
それは、「使う人が使い易いかどうか」です。
必要なのは１点です。
- 押しやすいように周りに十分なスペースをとる
押しにくい場所に配置したり、押し間違いが頻発するようでは使う人にとってはただのストレスです。
（故意に押し間違いを狙うサイトもありますが…。）
周りに十分なスペースを用意しましょう。
終わりに
今回はレイアウトの基本のコツをご紹介しました。
webサイトやチラシ、名刺などの媒体や物別のレイアウトについてもまた紹介していきます。