ランダムな感じでワイワイ配置したデザインの作り方

こんにちは、三年目デザイナーのはなです。

私は洗練されたミニマルでシンプルなデザインも好きですが、どちらかというと装飾をワイワイたくさん置いた華やかなデザインの方が好きです。

今回はそんなワイワイしたデザインを作るときに欠かせない、バランスの良いオブジェクトのランダム配置のやり方についてお話します。

オブジェクトの準備

まず、オブジェクトを大まかに、大・中・小に分けます。

「大」は主役、もしくは準主役です。

真ん中にタイトルなどが来る場合はそれが主役になるので、「大」のオブジェクトは準主役になります。タイトルなどがない場合(イラストなどだけをランダム配置する場合)は主役になります。

基本的には一つの画面に1個か2個だけ置きます。

「中」は脇役です。

主役よりも色や書き込みの量に少し差をつけるとなお良いです。

画面の大きさやバランスによりますが、主役より多く、3~5個ほど置くと良いと思います。

「小」はモブです。

画面の賑やかしです。

主役と脇役を配置したあと、余白に置いていきます。

置く数は画面の広さで大幅に変わります。脇役の数より多いこともあれば、少ないこともあります。

オブジェクトの配置

「大」「中」「小」の順に配置していきます。

まず「大」を配置します。

大胆に画面からはみ出るぐらい置くとダイナミックさが出ていいと思います。

2つ以上置く場合は一箇所に固まりすぎないように気をつけ、角度に差をつけます。 

次に「中」を、「大」の間に置いていきます。

こちらも、近くにある「中」同士が似た角度にならないように気をつけます。

最後に「小」を、余った部分に入れていきます。

「小」と「すこし小さめの小」を作って一緒に配置していくとよりランダム感が出ます。

配置の良い例・悪い例

こちらが配置の良い例です。

そしてこちらがあまり良くない例です。

よりいいバランスのランダム配置にするには、下記のポイントに気をつけましょう。

・余白が均等に空きすぎている

タイトルの目立ち感が少ないですね。

また、オブジェクト同士の余白がだいたい同じぐらい空いていて、スカスカしているように見えます。

「粗」(空いているところ)と、「密」(詰まっているところ)が生まれるように配置しましょう。

また、主役の周りは「疎」にすると主役をより目立たせることができます。

・似た要素を似た角度で置かない

「大 A」「大 B」の角度が似ています。

また、「中 a」と「中 B」の角度も似ていますね。

ランダム配置の場合に似た要素が似た角度になると「何らかの意味」があるように感じられて不自然になります。

角度はばらばらになるようにしましょう。

・「触れるか触れないか」はやめる

「大 A」の下、「小」が触れるか触れないかの場所に置いてあります。

この、「触れるか触れないか」というのも「何らかの意味」を生みます。

ちゃんと離すか、ちゃんと重ねるかどちらかにしましょう。

ランダム配置は、「おもちゃ箱を投げたときにおもちゃが床に散らばる感じ」をイメージします。

同じ形のおもちゃが全く同じ角度になる確率はとても低いだろうし、おもちゃとおもちゃの隙間が全部均等になることなんて多分ありませんよね。

作成したランダム配置に沿って、お花を置いてみました。

お花バナー

華やかで可愛い感じにできたと思います!

まとめ

ランダム配置は何度も作っていると、なんとなく感覚でできるようになってきます。

それまでは、

他人に見せる→バランスが悪いと思うところを指摘してもらう

というのを繰り返すといいと思います。

少し休憩を挟んだり、離して見てみたりするのも有効な手です。

1人で作っているとなんだかよくわからなくなってくるので…

(私もしょっちゅうなんだかよくわからなくなっています)

この世に私好みの可愛くてワイワイしたデザインが一つでも増えるといいなと思っていますので、みなさんもどんどんランダム配置を使ったデザインを作ってくださいね〜!(強欲)


コメント