デザインをもっと楽しく!WEBデザイナーの皆様にとって役に立つ情報をお届けいたします! おしゃれなボタンの作り方やテクスチャの使い方、制作関連のおすすめサイトなどの情報が満載! | フォトショッパーフォトショッパー

チラシや資料作りにも役立つ!簡単なデザインの作り方【レイアウト編】


823_thum

ちょっとの工夫で「レイアウト」はこうも変わる!

こんにちは、おぎしおです!前回ご紹介した記事でも簡単なデザインの作り方(要素のまとめ方)をご紹介しましたが、今回はレイアウトについて、気をつけると出来映えが変わるちょっとしたポイントをご紹介していきたいと思います!

1,明度差に気をつける

823_p0001

上記の“before”のタイトル部分など「なんだか文字が見えにくいなぁ」と感じる場合、背景と文字の明度差が小さい可能性があります。文字と背景に色の差があったとしても明度(色のもつ明るさや暗さ)が小さければ、文字と背景が同化して文字が読みにくくなってしまいます。
“after”のように明度を上げてあげると、文字が読みやすくなります。自分の作ったデザインの「文字」と「背景」が適切な明度差を保っているのか、の判断に迷うときはツールを利用してみるのも良いと思います。

たとえばKANZAKIさんのチェックツールだと、明度差の他にも輝度差、色差などもチェックしてくれて、初心者でも簡単に背景色と文字色の色の比較をすることができます。

823_p0002

「それでもこの背景色を使いたい!」という場合、文字に淵をつけたり文字色を変えてみると、視認性があがり、わかりやすいデザインになります!

2,ホワイトスペースに気をつける

823_p0003

「文字や要素を大きくしたい!」そんな風に思っていると、ついついコンテンツいっぱいに要素を敷き詰めてしまいますが、適切なホワイトスペースがないと、かえってデザインが見にくくなってしまいます。デザインに適宜ホワイトスペースを与えることで、ひとつひとつの要素の区切りを意識することができ、内容がより理解できるようになります。

3,上下左右のマージンを揃える

823_p0004

上の図のように、コンテンツ内のそれぞれの要素のマージンの数値が違うと、全体のバランスが悪くなり、サイト全体が不揃いだ、という印象を与えてしまうこともあります。
内容によって、あえてマージンを調整することもありますが、基本的には「ラインを揃える」と覚えておくと良いと思います。

4,カーニングを調整する

823_p0005

文字を入力した際に文字と文字の間が空いていたらカーニングを調整しましょう。
要素の間に不必要なスペースがあると、そこで要素が一区切りする!と認識してしまいます。

特にカタカナ、数字、文字と記号の間のカーニングが、不揃いになりやすい傾向にあります。
カーニングを意識してみると、デザインがより洗練されたイメージになるので、ぜひ調整するクセをつけてみてください!

5,読みやすい行間を設定する

823_p0006

最後に、行間についてです。
行間が詰まりすぎていると、文字が詰まって内容を読み飛ばされる可能性があります。
私は、一度1.5倍の行間をあけ、見栄えを確認してから行間調整を行っています(雑誌編集デザインをしていた方から「1.5を基本に調整すると良いよ!」と教わり以後ずっとこの方法で調整しています)。

文字のサイズや色、その他のホワイトスペースとのバランスもあるので、一概には言えませんが、12ptなら18pt、14ptなら21ptを基本にして調整すると行間調整が楽になると思います。

まとめ

いかがでしたでしょうか?
今回の記事は自分自身のおさらいの意味もこめてを書いてみました。
2回にわたってレイアウト、要素のまとめ方などについて書いてみましたが、デザイナーになりたての頃は、この基本的なコツを掴めず苦労しました。。
簡単に実践できるポイントだけをまとめたので、資料をつくるとき、町内会のチラシを作るとき、ポスターをつくるときなど、様々な場面で応用していただけたら嬉しいです。
ぜひ試してみてくださいね〜!


Comment

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

新着