モーショングラフィックス デザイン講座#3
映像を組むとき、誰しも一度はこんな気持ちになったことがあるんじゃないでしょうか?
デザインとは余白をいかに作るかみたいなところもありますので、ホワイトスペースの意識を少し持つことでレイアウトに対するイメージが少し変わってくるかもしれません。
時間がない時に、「とりあえず必要な要素を詰め込んどけ!」と焦ってエレメントをぎゅうぎゅうすし詰めにしちゃった時に限って担当者からこんなことを言われちゃいます。
そんなときは「ホワイトスペース」の概念を思い出しましょう!
という感じで、デザインテクニックと理論的に見えるかっこいい言葉で担当者を納得させちゃいましょう。
では、ホワイトスペースの内容と実用例を見ていきたいと思います。
#3『ホワイトスペース』とは
ホワイトスペースとは、文字や画像などのデザイン要素が入っていないスペースのことを指します。
要は「何もない場所」なのですが、あらゆるデザインにとって重要な要素になります。
ただ、余白を作るだけではなく、講座#2でもお伝えさせて頂いた「グリッドスペース」のように余白のスペースに対してエレメントを揃えるべきラインは揃えて、見せたい部分はしっかり詰めて見せてあげることが大事です。
映像的な組み方としてはこんなイメージが考えられます。
こういうタイプのデザインはあまり全体を動かすというよりはみせるべき要素をがっつり動かして見せてあげると効果的かと思います。
テキストに視線を誘導しつつ、おしゃれな雰囲気もある程度出ているのではないでしょうか。
このように、ホワイトスペースには適度な間を感じさせたり、見せたい要素に視線を集中させるといった役割があります。
1.バランスチェックの際には、意識してホワイトスペースの形を見てみる
2.デザイン要素が画面全体に散っているとどこをみたらいいかわからなくなるので、要素ごとにまとめたりしながらスペースを意識して作ってみる
3.四方全てを空間にしてしまうと抜けすぎてしまうことがあるため、1つないし2つの辺に余白を作るとバランスを取りやすい場合が多い
こちらも「#2グリッドスペース」と同じく広告やWEBではかなりよく見られるデザインセオリーなので、意識して街を歩いてみると新たな発見があるかもしれません。
「ホワイトスペース」をはじめとして、この講座のテクニックの多くはこちらの書籍を参考に映像に落とし込んだものとなっています。
主に広告に向けたデザインテクニックが網羅されていますので「ほかのテクニックも早く知りたい!」という方はこちらをどうぞ