デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

格段にデザインが生まれ変わる レイアウトの2つの極意


こんにちは、正月の暴飲暴食で太り気味のkoheiです。

今回は、デザイン制作のレイアウトで使う2つの極意を紹介します。
これらを意識すればデザインが格段に生まれ変わること間違いなしです!
※ちなみに、今回は名刺やチラシ制作を例に説明しますがプレゼン資料やWebデザインなど、様々なデザイン作業に当てはめることができます。

スポンサーリンク

1.グループ化する

Kohei
よーし、名刺を作るぞ!とりあえず、社名、名前、連絡先を適当に並べて・・・・
カエル神
こりゃ〜!しっかりと要素をグループ化しないと、相手に伝わらないぞ!

デザインの要素を配置する時、適当に感覚で配置していないですか?

以下の名刺デザインの例をご覧ください。

グループ化していない例

それぞれの要素である、会社名、肩書・氏名、住所などの情報が1つの塊になっており、
情報が伝わりにくくなっています。

続いて以下の例をご覧ください。

グループ化している例

同じ意味や役割を持つ要素をグループ化し、それぞれのグループ間に余白を設けることで視覚的な関連性が生まれ伝わりやすいデザインになります。

グループ化の方法には余白以外にもいくつかあります。

・色でグループ化
同じ役割を持つ要素を色分けすることでグループ化します。
一目でそれぞれが異なる情報だということが認識できます。

色でグループ化した例

・罫線でグループ化
同じ役割を持つ要素を罫線などで囲むことでグループ化します。
個人的には、罫線を多用しすぎると、無駄なデザイン要素が増え、少し煩雑なイメージになると思っています。
従って、基本は余白や色などでグループ分けし、罫線はあまり多用しすぎないように心がけています。

罫線でグループ化した例

これらの方法を利用し、意図的に要素を配置するように心がけましょう!

グループ化のポイント
・同じ意味や役割を持つ要素をグループ化する
・関連性のない情報は余白を利用し、視覚的に別のグループだと認識できるようにする

2.強弱(コントラスト)をつける

Kohei
グループ化を意識してちらしを作ってみたけど、何かインパクトが足りないな〜
カエル神
グループ化できたら次は、強弱(コントラスト)をつけてみてはどうじゃ?

デザインに面白みがない、何か物足りないと感じたことはありませんか?
そんなときは、デザイン要素の強弱(コントラスト)が足りないかもしれません。
デザイン要素の役割に応じて、強弱をつけることで魅力的なデザインへと生まれ変わります。

以下のチラシの例をご覧ください。

強弱が弱い例

キックをしている少年のイメージがアイキャッチ的な要素となり、半分より下はテコンドーの魅力、練習日などの詳細情報というレイアウトになっています。
全体としては、まとまっているように見えますが、何かインパクトが弱い印象です。

続いて以下の例をご覧ください。

強弱が強い例

キックしている少年や「強くなりたい」というキャッチフレーズを大胆に大きく配置し、他の要素との強弱(コントラスト)をつけています。
これにより、テコンドーの躍動感、スピード感が強調されたインパクトのあるデザインとなりました。

大切なのは、それぞれグループ化した要素に対して、強調したい要素は大きく、そうでない要素は小さく配置することです。
ここで注意してもらいたいのが、中途半端に強弱をつけてしまうことです。制作者の意図なのか、ミスなのかはっきりしない強弱は見る人に違和感を与えます。
誰が見てもはっきり分かる強弱をつけるように心がけましょう。

強弱(コントラスト)をつけるのは、画像と文章の対比だけではありません。

・大きい文字、小さい文字との対比

文字の大小で強弱をつけた例

・色の対比

色で強弱をつけた例

これらの要素で強弱(コントラスト)をつけてデザインにリズムを加えましょう。

強弱(コントラスト)のポイント
・強調したい要素を明確にする
・強調したい要素は大きく、そうでない要素は小さく配置する
・中途半端な強弱ではなく、はっきり分かる強弱をつける

3.最後に

以上、レイアウトの2つの極意をご紹介しました。
今回紹介したことは、普段、みなさんが感覚的にやっていることだと思います。
感覚的にやっていたことを論理的に理解することでデザイン力は格段に向上していきます。
ぜひ、今回紹介したことを意識していただけると幸いです。

最後までお読み頂きありがとうございました。
それでは!

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン