TH01-07
Webサイトを閲覧していて、「ページを移動したら別のサイトに来たみたいだ」と不安に感じたことはありませんか?
その違和感は、ユーザーの離脱を招く大きな要因となります。
デザインの4原則の3つ目、「反復(Repetition)」は、サイト内に独自のルールを作り、それを繰り返すことでユーザーに安心感と使いやすさを提供する技術です。
目次
反復の目的は「学習コスト」を下げること
ユーザーは、サイトを開いた瞬間にそのサイトの「使い方」を無意識に学習し始めます。
- 「この色の四角はクリックできるボタンだ」
- 「この大きな太字は、新しいトピックの始まりだ」
一度覚えたルールが次の画面でも繰り返されることで、ユーザーは「次は何をすればいいか」を考える必要がなくなり、コンテンツの内容に集中できるようになります。
反復は、ユーザーの脳にかかる負荷(認知負荷)を最小限にするためのロジックなのです。
何を「反復」するべきか?
「一貫性」を作るために繰り返すべき要素は、主に以下の3点です。
- 視覚的要素:色(カラーパレット)、フォント、アイコンのスタイル、角丸のサイズ(px)。
- レイアウト:余白のルール(TH01-03で学んだマージン)、見出しの配置パターン。
- 機能的要素:ボタンのホバーエフェクト(マウスを乗せた時の動き)、ナビゲーションの動作。
これらをバラバラにせず、同じルールで使い続けることが「反復」の肝です。
「パターン」が信頼を生む
「反復」が徹底されているデザインは、それだけで安定した印象を与えます。
逆に、ページごとにボタンの形が微妙に違ったり、見出しのデザインがバラバラだったりすると、どんなに装飾が豪華でも「手抜き」や「未完成」な印象を与えてしまいます。
反復とは「一度決めたルールを、例外なく適用し続ける粘り強さ」と言い換えることもできます。
コンポーネント化の重要性
現代のWeb制作ツール(Figmaなど)において、反復を効率的に行うための機能が「コンポーネント」や「スタイル」です。
- 同じ要素を何度も手で作るのではなく、一つの「親(マスター)」を作り、それをコピーして使う。
- ルールを変更するときは「親」を直すだけで、サイト全体の整合性が一瞬で保たれる。
このように、システムとしてデザインを管理することが、反復を実現する定石です。
反復はユーザーへの「おもてなし」
デザインにおける「遊び心」は、強固な「反復(ルール)」の上で初めて成立します。
まずはサイト全体を貫く一貫したルールを作り、それを丁寧に繰り返すことで、ユーザーが迷子にならない親切な設計を目指しましょう。
