デザイン未経験者も「裏切りデザイン」を覚えると上達します! 【デザイン4原則「反復」編】

デザイン未経験者も「裏切りデザイン」を覚えると上達します! 【デザイン4原則「反復」編】
  • X
  • Facebook
  • note
  • hatena
  • Pocket
2023/03/17 08:00

 『レイアウト・デザインの教科書』(SBクリエイティブ)の共著者であるベーコンさんが、ちょっとしたデザイン術やツールの使い方を解説します。今回は、デザイン4原則の「反復」がテーマです。

 こんにちは。ベーコンです。今までデザインの4原則から「強弱」「整列」「近接」のコツをお伝えしてきました。今回はデザイン4原則の4つめ「反復」について解説していきます。

反復はみんなできちゃうからこそプロの技で差をつけたい

 個人的な感覚でお伝えすると初心者が真っ先に覚えるべきデザインの4原則は強弱と整列です。今回お伝えする反復や、前回の近接というのは、縁の下の力持ち、ライブイベントだと照明さんかもしれないし、YouTubeだと動画の編集者さんかもしれない。

 つまり一般的には、わかりやすくはないけれど、欠かせない存在ということです。

 注目されづらい「近接」と「反復」ですから、ここをしっかり理解することでデザイン力の底上げになります。

 この記事ではデザイン書であまりみない「反復」の悪い例も紹介していきます。悪い例を見ることで「反復」の構造をより理解することができるはずです。

まずは「反復」を図で解説

左のデザインも良いんだけどね、意図と違うのです。
左のデザインも良いんだけどね、意図と違うのです。

 反復とは、デザインを繰り返すことで統一感をもたせることです。でも、そう言われるとこう思いませんか?

「いや、デザインって統一感を持たせない場合もあるんじゃない?」
「そもそも、統一感を持たせる意味ってなに?」

 そんな疑問に答えるべく、ここからは図で解説していきます。まずこちらをご覧ください。いつもみなさんが観ているBeaTube(ベーチューブ)。次の図は正しく反復されている状態です。

 これが反復されてないと次のようになります。

動画投稿サイトの特性上、サムネイルの色や形が違うのは当然なので反復はしなくてOKです。
動画投稿サイトの特性上、サムネイルの色や形が違うのは当然なので反復はしなくてOKです。

 正しく整列はされているのですが、デザインが気持ち悪くありませんか?

 美しさのデザインとしては、このくらい遊びがあるデザインでも良いのですが、機能面のデザインではあまりよろしくありません。

 次の図は、一部分を拡大したものです。

 タイトルとサムネイルに注目してみると、位置が逆になっていますね。

 紙のデザインと違い、サムネイル、タイトル、チャンネル名はクリックできるボタンの役目もあるわけですから、ある程度同じような並びのほうが使いやすいデザインとなります。

 慣れている人であれば問題ないかもしれませんが、初めて使う人にとっては同じ並びのデザインのほうが使いやすいデザインなはずです。

 次の図が、正しく反復を使っている例です。サムネ、タイトル、チャンネル名が同じルールで並んでいるとわかりやすいですよね。

良い意味で反復を使わない例

 続いてこちらをご覧ください。一部、反復を使うのをやめたデザインです。

 いちばん上の「はじめての吠え」というサムネイルが大きなサイズになっています。この部分に関しては、反復を使っていないデザインとなりますので、正しくないデザインに思えるかもしれません。

 しかし、このデザインは、これで良いのです。

 意図をもち、あえてひとつだけ反復させずに目立たせる。これがまさに反復の正しい使いかたです。

反復の本当の意味

 ここがいちばん重要です。

 最初に書いた「反復デザインを繰り返すことで統一感をもたせること」の本当の意味は

  • 反復はデザインをたまに繰り返さないことでアクセントを作り出す
  • 反復はアクセントを作るためのフリとして有効な技術

と言い換えることもできます。

 反復はデザインをきれいにしたり、見やすくしたりする効果がある一方、反復を使わないことで目立たせたり特別感を与えたりすることができます。

 ちなみにこのハズしテクニックは「整列」でも「近接」でも同じように使えます。ただし、しっかりと基本をおさえて反復を繰り返したからこそハズしが効くことを忘れないようにしましょう。

真面目な人が反復を使いすぎると陥るワナ

 反復を使い始めて楽しくなってきたころに、真面目な人ほど陥るワナをお伝えします。

 これは、整列でも強弱でも同じなのですが、デザインの4原則とは、デザインを整えるために昔の人たちが考え、言語化した素晴らしい技です。

 ただ、すべてをこの4原則に沿ってデザインを作ると、ただ整った、誰にも伝わらないデザインになってしまいます。

 「理論では合っているけどなんか違うデザイン」になってしまうことは、本当によくあるんです。とは言ってももちろん、真面目な人がダメという話ではないんですけどね。

 このあとデザインの4原則を上手に抜け出す応用方法を紹介していきます。

 ちなみに「真面目」ではなくて、デザインの4原則を使ったことがない人は、デザインの4原則をきっちり使うことであっという間にデザインが良くなるのでお試しくださいね。

[まとめ]デザイン制作に必要な「反復」とは繰り返すこと、そして裏切ること

 「反復」とは、フォントやアイコンや色やレイアウトを繰り返すことでリズムを作ったり、デザインを統一することです。

 しかし途中で反復をやめてリズムを崩すことで、デザインにアクセントが生まれます。そこがデザイナーの腕の見せどころです。

良いデザインを作るポイント

 良いデザインを作るポイントは4原則から抜け出すことです。

 反復ならば、どれだけ反復するかをよく考えることです。よく考えるとは、いろいろなパターンを試して比較すること。

 反復して、反復して、ひとつだけ反復せずに4原則からはみ出した部分に個性が生まれます。同じことを繰り返すからこそ、ひとつだけ違う部分が調和からはみ出し、結果的に目立つのです。

 その部分をどうやって表現するかが、デザインの4原則を使いこなしたデザイナーの技術だと思います。

反復をもっと理解するためのまとめ

 反復って近接と似ているんですよね。混ざってしまうことも多そうなので、いくつかキーワードを書いておきます。

  • 反復とはデザインを繰り返すこと
  • 前回記事で解説した「近接」と似ている(かぶっている役割もある)
  • 同じフォントを繰り返すことは反復
  • 同じ色を繰り返すことも反復
  • 同じアイコン、同じようなイラストを繰り返し使うのも反復
  • 横に並べたら近接

 均等のスペースに同じデザインで並べるときは、反復と均等を両方とも使っていることになります。

整列を使ったデザインでもありますね。
整列を使ったデザインでもありますね。

 以上、デザインの4原則「反復」 の正しい使いかたと悪い使いかたでした。

 インターネットの解説記事ではさらっと正しい例だけで紹介されることが多い「反復」も、悪い例にも触れる紹介ことでより理解が深まったはずです。

 前回紹介した近接や整列、強弱の使いかたを紹介した記事もあります。良い例だけではなくて悪い例も見比べることで、デザイン力の上達につながりますので、ぜひ楽しく勉強してください。