デザインがよく分からない人のための「とりあえずこれだけやっておけばそれなりに見える」デザイン

2012年05月21日(月)【
LINEで送る
Pocket

さーて、デザインセンスの無い僕が偉そうにデザインを語るわけだけれども、そんなすげーテクニックとかも出来るわけじゃないし、美麗なデザインにするためのTIPSは他の方がたくさん提案してくれているのでそちらを参考にしてくださいと丸投げをしつつ、僕からは最も初歩中の初歩であり、別にパソコンを使わなくても出来る何がしでも書いて行こうかなーと言うこの企画。

相変わらず上級者の方には縁の無い情報がダラダラと続いて行くよ!

SPONSORED LINK


とにかくまずは「要素」を考え「ブロック化」する

↑の見出しでは分からないかもだけれども、まず最初に行いたいのは
・一番見せたいもの
・それにまつわる情報
・補足

をそれぞれ見つけ出し、一箇所にまとめてしまうことだ。

例えばAに関する情報はこれとこれとこれ。Bに関する情報はこれとこれとこれ みたいな感じで、関連性の高いものを全部集めておき、それぞれで固めておく。
これだけでも十分情報は整理され、何を見れば何の情報が分かるか、視覚的に訴えることが可能になる。

優先順位を決める

情報は全てにおいて均一的なものではない場合がほとんどで、「特に見せたいもの」と「とりあえず紹介しておきたいもの」のように、それぞれのブロックで優先順位がでてくるはず。
次にこれを考え、優先順位の高いものから見やすい場所に置く、大きく見せるなど、情報の強弱をつけることで、「特に見せたいもの」と「そうでもないもの」をはっきりとさせることが出来る。

セオリーで言えば、一番見せたいものほど上であり、左側であることが望ましく、最も優先順位の低いものが下であり、右が望ましい。
人の視点は左上から始まり、右上→左下→右下 と言う「Z型」の流れになると言うのが基本。

これが出来れば、情報の価値の高さが決定され、最も注目すべきことは何であるかが視覚的に分かるようになる。

迷ったらとりあえず要素を揃えておく

いざデザインを組んでいると、「何かおかしいよなー」ってことになったり「なぜか分からないが見栄えが悪い」と感じることも結構あるわけで、とは言っても革新的な方法を引き出しとして持っているわけでもない・・・
という場合は、基本中の基本に立ち返り、とりあえず「揃えておく」ことを意識してみるといいかもしれない。

例えば、文字の並びがよく見てみるとガタガタになっていたり、特に意図も無く中央揃えにしていると言った場合は、きっちり左寄せにしておくだけでも割と上品に見えるものだ。
また、下記の画像は全てボックス内に対し、左上からそれぞれ3ミリずつ余白を取って整列させている。

センスがいいかどうかはともかく「見た目として見やすいか否か」と言うことを最優先として考え、悩む前にまずは揃えることから始めてみると、意外と答えが見つかりやすくなるもの。
とにかく迷ったら「とりあえずセンター揃え」はやめにして「まずは左寄せ」に戻ってみることをお勧め。

規則(動き)を作る

とは言っても、ただ整列させただけでは面白くないし、何か違う! って思うのが作り手の悩みどころ。
と言う訳で、次に規則を考え、動きを見せるように工夫してみる。

先ほどまでにとりあえず「要素」を「ブロック化」し、「綺麗に揃える」ことまでは出来た。次にこれをそれぞれで独立したものにしてみる。
特に難しいことは考えず、まずは色を変えてみたり、大きさを変えてみる程度でも十分動きは出るので、まずは「揃っている」と言う条件を意識しつつ、変化をつけてみよう。
ブロック間でスペースを作る場合も、均一だけではなく、関連性が薄いと判断した場合は倍のスペースを空けてみてもいいかもしれない。

このときに注意したいのは、大きさや色を変えてしまうと、動きすぎて各ブロックがバラバラになってしまうこと。
しっかりとそれぞれのブロックごとに規則を考え、ブロック間のスペースを均等化する、左右のラインはきっちり揃えておくなど、「整列」も考えておきたい。

もっと動きがあるほうが良い! って思うこともあるかもしれないけれども、まずは基礎の部分でしっかり揃っていないと何やってもダメなので、とにかく最初は整合性をとることを意識することが大切。

最後の仕上げに装飾

この状態でも見栄え自体は問題なくなったんだけれども、どうも文字文字しててなぁ・・・となった場合、ここからがセンスとなってくる。
基本さえしっかりと出来ていて、その次においても意識が出来ていれば、そんなに間違うことはないので、ここで自分なりの「良いもの」を考えてみたい。

スペースに何かを入れてみたり、フォントを変えてみるだけでも十分。
基本は見出しが太く、本文が細くで、こちらも優先順位が高いものから強く見せると言う原則を意識する。
いきなり全部のフォントを変えると整合性が無茶苦茶になりやすいので、最初は見出しだけを変えてみるなどし、一つ一つ順番に整合性を取ることを意識してみましょう。
また、できればストレートな書体を用いる方がよく、間違っても本文でPOP書体を使わないようにしたほうが見栄えは良い。
書体の混同も必要性が無ければ変えるようなことはしない方がベター。変えるときはしっかりと理由を考えた上で行うようにした方が最初は良いでしょうと言う事で。

イメージを入れるときは、情報との関連性を考え、適したものを入れ込む。
下記のサンプルでは関連性といわれてもなんのこっちゃなので、とりあえず色だけでも考えてみた。


まずはイメージを挿入してみる。


次に、見出しの書体を変えてみる。

これが出来るだけでも視覚的に最適化はされ、見てもらうに十分なものになっているはず。
センスだけで考えるのではなく、「要素(ブロック)」「整列」「規則と動き」を理論的に意識するだけでもデザインと言うものは成り立つと言うことをご理解いただければ幸いでございます。

お疲れ様でした

長々とお付き合いいただきありがとうございます。
ここまで意識できれば、すごいセンスがあると言うわけではなくとも、それなりには見えるようになるかなーと。

こう言うのはクリエイティブなデザインの分野だけでなく、プレゼン資料だったり、お客様に提案するための提案書としても覚えておけば損の無いことなので、できるだけ意識してみた方がいいかと思われまする。

商業的に考える場合であれば特に、視覚表現を最適化するか否かだけでも結果は大きく変わるものなので、センスが無いから・・・と諦めずに、基本的な部分だけでもいいので一度詰めてみてくだしい。
デザインセンスの無い僕でも、これだけで割とやっていけてるものですから!

SPONSORED LINK


LINEで送る
Pocket

最後までここにいてくれてありがとう

よろしければ四畳半ワークスのRSS購読、SNS参加もどうぞ!

RSSリーダーに登録する

twitterでフォローする

Facebookページを見る

コメントを残す

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