[Sponsor]「プログラミングに興味はあるけど難しそう」
という方のための無料講座を渋谷で開催!
はじめてのデザイン 〜デザインの基本・考え方〜

2-5. デザインの4つの基本原則 - 反復

色やタイポグラフィ、画像を含め、制作物全体に一貫性を持たせるための手法を紹介します。

  • デザインの考え方

公開日:2019/08/03最終更新日:2019/08/03

1.反復とは

全体を通して視覚的な特徴を繰り返し使うこと

反復とは、デザイン上の特徴を作品全体を通して繰り返すことです。
フォント、色、配置などの特徴を、作品全体で繰り返し使うことで、視覚的な一貫性が生まれます。

視覚的な面白さをつくり出すことにもつながる

特徴的な要素を反復させることで、視覚的な面白さを演出することもできます。その作品が単調でないことがひと目で分かるからです。
面白そうに見えることで、見てもらえたり、読んでもらえたりする可能性も高まります。

2.実現方法

すでにある一貫性を際立たせる

例えば、見出しなどの一貫して使われる要素を特徴的なスタイルにして際立たせてみましょう。サイズや色などのスタイルを整え、反復して使っていきましょう。

本文中にリストがあるのであれば、リストの中黒(・)に色や形などのスタイルを与えてみてしてください。他にもページの局所的なところに、反復に使える要素はあるかもしれません。

反復のための要素をつくって反復して使う

反復のために要素を創り出し、それを足すのも効果的です。
何かについて説明している小見出しとテキストのグループが複数あるのであれば、その先頭にスタイルの同じアイコンを配置することで、効果的な反復を創り出すこともできます。

全体のスタイルを反復させる

作品全体に渡って、要素の形に依らず決められた色やスタイルを反復するのも効果的です。文字やアイコン、ボタンのスタイルの一部を揃えたりして、全体でスタイルを反復することで一貫性を作り出すこともできます。

うるさく感じるほどには反復させない

ただし、注意しておきたいのが、うるさく感じるほどに反復させないことです。例えば全体に渡って、タイトルも、文字も、アイコンも、本文も、すべてが赤かったりすると、統一というよりも、見るところをかえって妨げてしまいかねません。
 

3.反復を意識した例

今回の例では、Webサイト内のいくつかのセクションをイメージしてみました。
以下の例には複数箇所に渡って反復が使われています。どこが反復されているかを見つけてみてください。

※すべてのデザインには4つの基本原則が含まれているので、この例の中には今回までに説明したものも含まれています。

解説

反復が用いられている箇所は、大きく2箇所あります。
1つが見出しタイトルのスタイルです。
見出しの反復にあたって、少し特徴的な要素を加えることで、視覚的な面白さをつくり出しています。

もう1つがお店の情報の部分です。
2店舗が展開されているということで、2つの店舗の情報の表示を揃えています。店舗情報のスタイルを揃えることで、見る人にとって「どちらのお店に行こうか?」という判断がしやすくなります。

4.まとめ

  • 反復とは、フォント、色、配置などのデザイン上の特徴を作品全体を通して繰り返すことです。
  • 反復を意識することで、視覚的な一貫性と面白さが生まれます。
  • 反復にあたっては、すでにある一貫性を際立たせることから始めましょう。
  • 慣れてきたら、反復のための要素を自らつくってみたり、全体のスタイルを反復させていきましょう。
  • ただし、うるさく感じるほどには反復させないように注意しましょう。

理解度チェック

このレッスンの著者