レイアウトをマスターしよう!対比と動き編

レイアウトには本当にさまざまな種類の方法でより整理された見やすいレイアウト方法があります。
今回はその数あるレイアウト方法の中の「対比と動き」についてお話をしていきたいと思います。

違いを対比として表現する方法と静止するレイアウトに対して動きを感じさせるという方法で一体レイアウトにどの様な影響を与えるのでしょうか。解説してまいります。

 

対比は比較や選択を表現する際に有効

対比は違いを明確にする際に有効的なレイアウト技法です。
例えばそば派とうどん派の表現するデザインの際に左半分はそばについて、右半分はうどんについてと一つのレイアウトの中に、それぞれ表現する要素を区別させることで比較しやすく違いも分かりやすくなります。

 

 

シンメトリー配置でより明確に

両サイドに各要素を配置することで、情報として比較なのか対立なのかなどを色やイメージの違いで表現することができます。
情報をよりわかりやすく配置する事もデザインの役割の一つと言えますので、これらは有効的な表現方法と言えます。

 

 

シンメトリー以外の対比表現方法も

シンメトリーで対比を表現するとより強い表現方法となりますが、
対角線上に表現すると関連性は強く対比としての表現はソフトになり表現したいものによっては有効的な方法と言えます。

 

161105-02

 

図形の大きさや目線で動きを付ける

同じ図形の配列でも並べ方や大きさによって動きを表現することができます。
また色が濃いものに関しては重たいイメージとなるので比較的薄いパステルカラーなどの軽い印象で動きを付けるといった表現方法もあります。

 

 

目線によって見せたい要素を表現する

人の顔はデザインをする上で有効的な要素の一つです。
人の目線の写真は見る人の目線の導線づくりに役立ちます。
その目線の先にキャッチコピーや読ませたい情報を配置することでより自然な目線の流れを作り出すことができます。

 

161105-03

 

動きと対比を活用したレイアウト

それでは実際に動きと対比を活用したレイアウトを見てみましょう。

 

これらは人を配置することで目線の動きを作り出し、かつ対比を使用し見え方としては比較や違いを表現する方法を活用したレイアウトになります。
161105-04

 

 

最後に

いかがでしたでしょうか?レイアウトの手法としては基本的な手法になりますが、基本的だからこそ長く使用できより情報をわかりやすく表現したい時には最適なレイアウト手法となります。

 

関連記事

  1. Web初心者は必ず知っておきたい!CMS・WordPressのキホン

  2. レイアウトをマスターしよう!アクセントと調和編

  3. 見た目で勝負!パッケージデザインの基本

  4. 今からはじめるLINE!【アカウントの作り方】

  5. Facebookページの作り方(2016年版)

  6. Diantのホームページ制作サービスをおさらいしよう!

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA