反復とリズム

ねらい

同じボタン、同じ余白、同じ見出しの形。それが何度も出てくると、人は「これは一つのまとまりだ」と感じる。これが反復（リピティション）だ。そして反復が一定の間隔で並ぶと、目の中にリズムが生まれる。

このクエストのねらいは一つ。「なぜ繰り返すと整って見えるのか」「なぜ一貫していると信頼されるのか」を、丸暗記ではなく理由ごとつかむこと。さらに、反復は退屈と紙一重だと知り、どこで**変化（アクセント）**を差せばいいかを身につける。

反復は、このあと学ぶ「デザインシステム」の土台でもある。ここを押さえると、Webサイト全体が一気に作りやすくなる。

反復とは何か ―― 「同じ」を繰り返すと脳がまとめる

まず言葉を一つ。**反復（リピティション）**とは、同じ要素や同じ特徴を、画面の中で何度も使うことだ。同じ色、同じ形のボタン、同じ余白の幅、同じ見出しの大きさ――こういうものを繰り返す。

なぜ繰り返すと「まとまり」が生まれるのか。理由は、人の脳の性質にある。1910〜20年代のドイツで、心理学者たちが、人の脳がバラバラのものを自動でまとめて見る仕組みを研究した。この学派をゲシュタルト心理学と呼ぶ。1923年、その代表マックス・ヴェルトハイマーが、脳がまとまりを作るときの規則を群化（ぐんか）の法則としてまとめた。その一つが、**類同（るいどう）**だ。簡単に言うと――人は、見た目が似たものを「仲間」だと感じる。

（準備編の「ゲシュタルト原則」で学んだ群化の法則を思い出そう。近接・類同・閉合・連続のうち、ここで効いているのが類同だ。)

つまり、同じ形・同じ色のものが並んでいると、脳が勝手に「これは一つのグループだ」とまとめてくれる。あなたが線で囲わなくても、ただ繰り返すだけで、見る人の頭の中でまとまるのだ。

なぜ一貫すると「信頼」になるか ―― 約束を守る感じ

反復には、もう一つ大事な働きがある。一貫性だ。一貫性とは、最初から最後まで同じやり方を貫くこと。ボタンの形、色の使い方、余白の取り方を、ページのどこでも同じにする。

なぜ一貫すると信頼されるのか。身近な例で考えよう。約束を毎回守る友達は、信用できる。言うことがコロコロ変わる人は、信用しにくい。デザインも同じだ。サイトのどこを見ても同じルールで作られていると、「この作り手はちゃんとしている」と無意識に伝わる。 逆に、ページごとにボタンの形や色が違うと、見る人は「雑だな」「大丈夫かな」と不安になる。

これがそのままブランドになる。ブランドとは、「あの会社っぽさ」が一目で分かる状態のこと。コカ・コーラの赤は、同じ要素を100年以上も繰り返し続けた結果だ。無印良品の生成り色と素朴な書体も、長年そろえ続けたからこそ「らしさ」になった。反復こそが、ブランドの正体である。

リズム ―― 反復に「間隔」が加わると拍が生まれる

ここで音楽とつなげよう。レイアウト編は「構造＝和声（わせい＝音の重ね方のルール）」にあたると見たね。そして反復は音楽の**拍（ビート＝タン・タン・タンと規則正しく刻む基本の刻み）**にあたる。

音楽のリズムは、音と音の間隔で決まる。「タン・タン・タン」と同じ長さで打てば、規則正しい拍になる。デザインも同じだ。同じ要素を同じ間隔で並べると、目がその間隔を「一定の拍」として感じる。これが視覚のリズムだ。

大事なのは、繰り返すのは「もの」だけではない、ということ。間（あいだ）＝余白も繰り返す。要素と要素のすき間が、ぜんぶ同じ幅なら、画面は心地よく整う。すき間がバラバラだと、リズムが崩れて落ち着かない。音楽で言えば、拍がガタガタな演奏のようなものだ。

反復は退屈と紙一重 ―― だから「変化（アクセント）」を差す

ここが、このクエストの一番大事なところだ。反復は安心をくれる。でも、同じものがずっと続くと、今度は退屈になる。全部が同じだと、どこを見ればいいか分からず、目が滑ってしまう。

音楽を思い出そう。ずっと同じ拍だけの曲は眠くなる。だから音楽には強い拍がある。「タン・タン・タン・タン」と、ときどき強く打つ。この強い一打が、曲に表情を与える。

デザインでも同じことをする。これをアクセントと呼ぶ。たくさん繰り返した中に、一つだけ違うものを混ぜる。色を一つだけ赤にする。一つだけ大きくする。一つだけ余白を広く取る。すると、その一つがパッと目立つ。

ここに法則がある。アクセントは、まわりが反復で揃っているからこそ効く。 全部バラバラな中に赤を一つ置いても、埋もれて気づかれない。「同じ」が99％あるから、1％の「違う」が叫ぶ。 これが反復とアクセントの関係だ。

なぜこの考えが整理されたか ―― 4つの原則の一つとして

反復という考えは、昔からデザイナーが感覚で使っていた。それを「初心者でも使える4つの原則」として、はっきり言葉にした人がいる。アメリカのデザイナー、ロビン・ウィリアムズだ（映画俳優とは別人の、同名の女性デザイナー）。

彼女は1994年の本『ノンデザイナーズ・デザインブック』で、良いデザインは4つの原則でできていると示した。**Contrast（対比）、Repetition（反復）、Alignment（整列）、Proximity（近接）の4つだ。本では Proximity（近接）→Alignment（整列）→Repetition（反復）→Contrast（対比）の順――頭文字をつなぐと「PARC（パーク）」になる――で並べていた。この4原則は、のちに頭文字を並べ替えたC.R.A.P.（クラップ）**という通称で広く呼ばれるようになった。この4つに決まった順番はない――覚えやすいように頭文字を並べただけで、準備編では「近接・整列・反復・対比」の順で出てきた。順番の違いは、思想の違いではない。

なぜわざわざ言葉にしたのか。背景には、1980〜90年代の出来事がある。パソコンが普及して、誰でもチラシやレポートを作れる時代が来た。でも、原則を知らない人が作ると、文字も色もバラバラで読みにくいものになった。そこで彼女は、「これさえ守ればマシになる」という最小限の道具として、4原則を差し出した。反復は、その中の柱の一つなのだ。

デザインシステムへ ―― 反復を「仕組み」にする

最後に、反復が現代のWeb制作でどう生きるかを見よう。ここがこのクエストの行き着く先だ。

反復を、毎回手で繰り返すのは大変だ。ボタンを100個、いちいち同じ形に整えるのは無理がある。そこで現代の作り手は、部品を一回だけ作って、何度も使い回す。この「使い回す部品」をコンポーネントと呼ぶ。ボタン、カード、見出し――それぞれ一個の「型」を作り、サイト中で同じ型を呼び出す。

このコンポーネントや、色・余白・文字サイズの決まった値の集まりをまとめたものを、デザインシステムと呼ぶ。たとえば「余白は8の倍数だけ使う」「ボタンの色は3種類だけ」と決めておく。すると、誰が作っても自動的に反復がそろう。反復を、気合いではなく仕組みで保証するのがデザインシステムだ。

ここでスイス様式（別クエスト）とつながる。スイスが理想にした「再現できる仕組みとしてのデザイン」は、まさにこのことだった。反復→コンポーネント→デザインシステムは、その理想を技術で実現した姿なのだ。

見分け方・使い方

最後に、制作で迷ったときの手順にまとめる。

サイトが「なんかバラついて見える」とき、原因はたいてい反復が足りていない。ボタンの形、見出しのサイズ、要素のすき間――どれかが場所ごとにズレている。そろえる（＝繰り返す）方向に直すと、たいてい落ち着く。

逆に「なんか単調・退屈」なとき、原因は反復しかないこと。アクセントを一つも差していない。一番見せたい場所に、色・大きさ・余白のどれかで一点だけ変化を入れると、画面が生きる。

順番が大事だ。まず反復で全部そろえる。それから、ほんの少しだけ崩す（アクセント）。 逆にやると、ただのバラバラになる。これは序論で学んだ「先に継承、それから理由をもって外す」と同じ形だ。

これらはバラバラのテクニックではない。すべて**「似たものは仲間に見える」という一つの脳の性質**（類同）から出ている。反復は秩序を、アクセントはその秩序を破る一点を作る。両方そろって、はじめて「整っていて、しかも退屈でない」画面になる。

譜例

棚（design-gallery）で、反復とリズムが効いている実例を見よう。ボタンやカードがどう繰り返され、どこに一点のアクセントが差してあるかを数えてみるとよい。

• 棚：反復とリズムの実例を見る

練習・チェック

1. 身近なWebサイトを1つ選び、「繰り返されているもの」を3つ挙げよう。（ヒント：ボタンの形／余白の幅／見出しの大きさ／色）
2. そのサイトで「一点だけ違うもの（アクセント）」を探そう。どこに、何で（色・大きさ・余白のどれで）差してあるか。
3. 友達のチラシやスライドが「バラついて見える」とき、まず何をする？　――答え：そろえる（反復を増やす）。「単調・退屈」なときは？　――答え：一点だけ崩す（アクセントを差す）。