Design

【反復】デザインの基本4原則【無料の宿題+質疑応答】

NaoG
NaoG
やぁ!みんな!元気?

クリエイターの@NaoGです。

デザインの4原則って何だろう?
反復ってなんだろう?
どういう時に使えばいいのかな?

これからデザイナーになりたいので、反復について詳しく知りたいです。

こういった疑問に答えます。

この記事の信頼性(著者は実務経験者)

  • 現在はフリーランスのWebデザイナー
  • デザイナー歴は5年

ではさっそく見ていきましょう。

目次

  • デザインの4原則とは?
  • デザインの基本「反復」とは?
  • 「反復」の使い方
  • 「反復」の使用例
  • 「反復」の宿題

デザインの4原則とは?

  • 近接
  • 整列
  • 反復
  • コントラスト

上記の通り。

デザインの基本となる4つの考え方、原則です。
それぞれをまとめた記事は下記になります。

—————————————-
デザインの4原則準備中
—————————————-

デザインの基本「反復」とは?

「反復」とは、デザイン上の何かの特徴を繰り返すことです。

反復をすることで、デザインに一貫性が生まれます。

反復されているものと反復されていないものを見比べてみる

反復されていないもの
反復されているもの

一枚目は反復がされていないので、一貫性がありませんが、二枚目は反復がされているので、一貫性がある。

NaoG
NaoG
確かに一貫性がある!

繰り返しになりますが、この様に反復をすることで、デザインに一貫性が生まれます。

「反復」の使い方

  • 反復したいものを選ぶ
  • ルールを決めて繰り返す

上記のとおり。
それぞれ順番に解説します。

反復したいものを選ぶ

始めに反復したいものを選択します。

この例では選択するものが一つしかないのでこちらを選択します。

ルールを決めて繰り返す

続いて反復したいものを選択したらルールを決めて繰り返します。

NaoG
NaoG
ルール?そんなの必要なの?

って感じですよね。

デザインは基本的には自由ですが、ある程度のルールに乗っとって構成されています。
反復もそのうちの一つです。

こちらの反復もルールに習っています。

NaoG
NaoG
因みにどんなルールだと思いますか?

これです、少しだけ手を止めて考えてみて下さい。

NaoG
NaoG
さぁどうでしょう?
NaoG
NaoG
なんかずっと見てたらコーヒー飲みたくなってきた!
NaoG
NaoG
奢って!笑
NaoG
NaoG
次答え!
  • 上下左右が揃っている
  • 余白が50px空いている

このデザインの反復のルールはこんな感じです。
とはいえ、皆さんこう思ったはずです。

NaoG
NaoG
上下左右が揃ってるのは分かるけど、50px空いてるのは分かるか!ボケ!

そんな口悪くないか。笑

質問:ピクセルって何ですか?

画像は全て縦横のピクセルで成り立っており、その一つのマスをピクセルと言います。

【dpi?ピクセル?】解像度とは?【Photoshopでの解像度設定】解像度ってなんだろう? 画素数とかdpiとか難しそうな言葉ばかりでよく分からないし。 こういった疑問に答えます。...

話を戻すと、これは今繰り替えされているのが二つだから気づかなったルールです。

NaoG
NaoG
は?何言ってるのこの人、意味分からない。

と思った皆さんに自分が意味分からない人にならない様に解説します!

何度も繰り返しちゃってますがこれは一つのものが反復されて二つになりました。
ですがこれが三つになったらどうでしょう?

NaoG
NaoG
うん、まぁそうなるよね。

と思ったそこのあなた。

これは先程のルール

  • 余白が50px空いている

があるから成り立っています。

もしもこのルールがないと、こんな感じでちょっと違和感が生まれてしまいます。

なので繰り返しになりますが、反復を利用する時は、反復したいものを選んで、ルールを決めて繰り返します。

もう一度、反復されているものと反復されていないものを見比べてみる

反復されていないもの
反復されているもの

繰り返しになりますが、一枚目は反復がされていないので、一貫性がありませんが、二枚目は反復がされているので、一貫性がある。

「反復」の使用例

『グレイテスト・ショーマン』で考えてみる

  • ヒュージャックマン
  • ザックエフロン
  • ミシェルウィリアムズ
  • レベッカファーガソン
  • ゼンディア

上記のキャストの情報は反復されている。

『マイティ・ソー』で考えてみる

背景の人物4人は反復されている。

『イフ・アイ・ステイ』で考えてみる

タイル状の画像は反復されている。

NaoG
NaoG
もう分かった!完璧!

ここまで読んで下さった皆さんの気持ちを言い当てます。

NaoG
NaoG
反復が使いたくてうずうずしてる!
NaoG
NaoG
そんなことないかな?笑

「反復」の宿題

という訳で宿題を用意しました。
興味がある方は挑戦してみるのも良いと思います。

実際に現場で使う「Photoshop」を利用して、上記の画像を「反復」してみてください。

【7日間の体験版】Photoshopを無料で始める手順【失敗しない学習法】Photoshopの学習をしたいけど、どうやって始めるんだろう? 使い方も分からないし、いくらかかるんだろうか、、、。 これからPhotoshopを学習したいので「失敗しない学習法」を知りたいです。 こういった疑問に答えます。...

Meをフォローして「反復」した画像をTwitterのDMからお送り下さい。
宿題を送って下さったやる気に満ち溢れている方に限定で何でも質問に一つ回答します。

新しいことを初めると分からないことだらけですよね。

自分で言うのもあれですがWeb業界でデザイナーとしてWeb制作/広告制作/ゲーム制作等で計5年の経験があるので、Webデザインに関することなら一通り答えられます。

体験談:新人の頃に一人で悩んでいた

私も未経験の頃は初めに先輩や会社の方に質問をする勇気が持てなくて、細かいことで日々悩んでいました。

今の皆さんの様にネットで調べまくってました、その時は情報が少なかったんですよね。

同じことに挑戦する人が同じことで悩むって結構時間が勿体ないと思うんですよね。
5年前の自分を救う気持ちって感じですかね。笑

先輩に質問する勇気が出ないなら、本アカでも匿名アカでも何でも作ってMeにDM送る方が多分、気が楽なんじゃないかな?

どうせ、自分はWebデザイナーにはなれないかなと思ったあなたはそう思った時点でなれません。
少し厳しいですが直ぐに行動できない方を相手にしている時間が自分にはありません。

やる気のない人に奉仕しても自分には一ミリもメリットがないので。

この質疑応答ですがたくさん集まると自分もチェックが大変なので、集まり方次第では応募を締め切らせて頂きます。

自分は一人で運営しているのでこの辺はご了承ください。

NaoG
NaoG
じゃあ本気な方だけDMで!