こんにちは、佐伯です。

みなさん、最近の猛暑をいかがお過ごしでしょうか?
桃でも食べて元気出していきましょうね!(雑か)

●前回、デザインの四原則の一つとして「近接」の説明をしました。

デザインの四原則を桃太郎で解説していく試み【近接編】

今回は整列について解説をしていきます。

突然ですが、みなさんは「空気を読む」って得意ですか?

いきなり踏み込んだことを聞きますが、みなさんは日本人らしく空気を読んで生きてますか?
今回はそれに似た話になってきます。

整列と聞くと「綺麗に並べる」「揃える」とかってイメージを持つことが多いかと思います。
違ってはないのですが、それだけだと解説と呼べるのかという気持ちにもなってきます。


では、そもそも「整列」って?

今回も簡単に書くと要素相対的な法則距離感を調整することです。

前回は要素でまとまりを作って整理するような感じでしたが、今回は少し俯瞰した目線でもって要素同士の繋がりを綺麗に整えてあげる感じです。



グラフィックデザインで例えると

例えばチラシを作る際など、必要なテキストや素材は準備できた時などは優先度などの必要性に応じたレイアウトをする必要があります。
そんなとき、いかに要素の役割を理解して適切に配置するかなどが求められます。

では、今回はすでに配置されている図形を綺麗に調整してみましょう!

238040ee 29ba 4c49 80a9 3ba3ec0aca57

と、こんな感じで調整することができます。
変わった部分を、ABCで分けてみました。

773e8429 13da 4390 b648 28eb272cb45d

こうなりました。解説すると、

A:同じサイズの余白を法則的に配置したことで、端と要素との距離で相対的にバランスが取れた。

B:同じ幅の余白を法則的に配置したことで、要素同士の距離で相対的にバランスが取れた。

C:A、Bの法則により、全体と要素単体が相対的なバランスで整えられた。



ベースの枠余白要素同士に「あっちもこうしてるから、ここもいい感じにしておこう」と、空気を読んでもらったわけです。



桃太郎で例えると

・・・・・と、その前に・・。

前回の記事を公開直後、内部の他社員に「桃太郎に出てくるのはじゃなくて財宝だろ!」「姫はついでだろ!」などと言われ、こっそり追記で「諸説あり」と書き足したのですが、それさえも「諸説とはなんだYOUの知ってる諸説には財宝は出てこないのか!」などと集中攻撃を受けてしまいました(脚色あり)


登場させるべくは姫ではなく財宝だったことを、この場を借りてお詫び申し上げます( ´∀`)モウシワケアリマセンデシタァァァッッッ



話が脱線しましたが、桃太郎をいざ整列で例えてみましょう。
ダメな例を先に挙げて、あとで整えていく感じにしましょう!

※※※ダメな例※※※

ある日、桃太郎の住んでいる近くにある集落が、鬼によって荒らされていることを知りました。
桃太郎は単身で鬼のいる鬼ヶ島へ行くことにしましたが、鬼に返り討ちに───────

───────────これでは話が進みませんね。





そこで、話を少し調整しましょう。
現在の登場人物は桃太郎だけですね。

その2人の戦力はどうでしょうか。
1511adcf f6ca 4edb 85c5 a59246aba075

この話を成立させるためには、桃太郎と鬼の間を埋めるべく存在するものがありますがそれはなんでしょうか。


キジ。この3つの存在ですね。

では、桃太郎と鬼の間にこの三匹(頭?)(羽?)の戦力をとりあえず置いてみましょう。

ですが、ここで大変なことが起きてしまいました。

4b052323 53d9 4616 84ca c67dd38a045d

このままではバトルロイヤルな戦いが始まってしまいます。



なぜこのようなことが起きたのでしょうか。
言ってしまえばここに存在するのはただの犬ただの猿ただのきじ、ですね。このままでは鬼を倒そうという気持ちどころか、ただお腹を空かせて争ってしまうだけです・・・・・

576c4889 8f06 4b99 a4a8 a4cf11cddb2b

あれ?お腹を空かせt・・・・

C6d788f4 76b0 4155 9eb6 6cc9b5a6ca37

ああああ!!!!!!

お気付きでしょうか。もう一つ、この物語で欠かせない存在があります。

・・・・そうです、きびだんごですね。


きびだんごが登場することによって調整できること

①犬、猿、キジの気持ちを揃えられた。

②鬼に必要な戦力を揃えられた。

①今まで空気のような要素でしたが、桃太郎の犬と猿とキジをきびだんごの効果で「この人についていこう」みたいな気持ちをみんな同じ方向で揃えることができました。
D4f790ca 5f44 4974 bb82 80450de806eb

②気持ちを揃えたことで、桃太郎だけでは届かなかった鬼の戦力と同等になることができました。
Ad835731 bb4d 4aa1 aa5e 07aa20269222

ここで大事なのは、空気を読んだのはきびだんごであり、犬・猿・キジは三者ともきびだんごを食べたという法則が存在します。

それがきっかけで桃太郎の家来になり同じ敵という法則も生まれたわけです。


※※※ちょっとは良くなった例※※※

ある日、桃太郎の住んでいる近くにある集落が、鬼によって荒らされていることを知りました。
桃太郎は悪い鬼を退治するために鬼ヶ島へ行くことを決意しました。
道中できびだんごによって仲間にした犬、猿、キジ・・・彼らを戦力に加え桃太郎は鬼ヶ島へ戦いを挑む───────────彼らの冒険はこれからだ!!!ご愛読ありがとうございました!!!!



みたいな感じ、どうでしょうか。え?だめ?



まとめ

つまり何を言いたいのかというと、整列によって生まれる効果というのは、グラフィックデザインにおいては「法則に則った美しさや綺麗さ」の一種のセオリーで、桃太郎などのストーリーに当てはめて考えるとしたら、何かしらの「道筋の設定」だとか「物語の気持ち良さ」などにも繋がるということです。

今回の連載的な解説では桃太郎を軸に書いていきますが、桃太郎だけではなくいろんな場面で活躍する考え方と言えます!

「あれやこれで当てはめたらどうなるんだろう」とか「いつも見てるあれやこれが綺麗に揃ってるのはもしかして・・」など、考えてみてください〜〜〜〜



次回の記事ではコントラストについて書こうと思います!!!(書けるといいな)



●以前書いた関連記事はこちら

デザインの四原則を桃太郎で解説していく試み【近接編】

Shere
  • はてなブログ
  • Twitter
  • Facebook
デザインの四原則を桃太郎で解説していく試み【整列編】

Writer

  • Name

    佐伯 明紀

  • Position

    デザインとか

  • Profile

    もともと紙系のデザインなどをやっていましたが、転職を機にWEBデザイン関係の仕事に就くことになりました。自分なりに頑張っていこうと思いますのでよろしくお願いします。作業用BGMとして映画の予告を延々と流すことにハマってます。