「反復」繰り返しの原則

反復(繰り返し)の原則は、デザイン要素の決まりごとを全体を通して繰り返すこと。繰り返す要素は、書体やその太さ・形など、または他の写真やイラスト・オブジェクトの色や形などです。

反復というとすごく難しく感じますが、普段から使っていることも多くあります。
例えば、箇条書きの先頭につけるリストマークなどは、大体が統一されています。そのほかにも、段落の初めにつける「見出し」は全体を通して大きな文字になっているのではないでしょうか。

ページのある雑誌やウェブサイトなどは、「反復」をうまく使うことで、ページをまたいで統一感を出すことができます。

反復とは、リズムを生み出すこと

例えば、下の例をみてみましょう。

全てが明朝体で統一されています。
もちろん、本文と見出しは区別して文字の大きさを変えています。
フォントが統一されたデザインは、厳かでクールな印象ですが、リズムが生まれにくく、単調なイメージとして捉えられることもしばしばあります。

続いて、「見出し」要素をより活かすために、シンボリックなフォントを使って、「反復」を強調してみましょう。

どうでしょうか。これは、すごく極端な例ですが、見出し+パラグラフの一体感が生まれ、また、各パラグラフが反復しているように感じないでしょうか。

同時に、メインタイトルの下の文章が各パラグラフとは違うレベルの説明文だと感じませんか?

※デザイン的な良し悪しは、そのデザインのコンセプトにもよります。今回は、反復を使うことでリズムが生まれることを実感するために差をつけるようにしていますが、全てを明朝体で揃えることが、必ずしも悪いわけではありません。

制作物が違う場合も、反復を使うことで統一できる。

例えば、ビジネスの場合、名刺や封筒メモパッドなどのツールに統一せいを持たせる場合、全てに同じ要素を反復利用することで、統一できます。

この例では、アクセントカラーの繰り返し、署名部分の繰り返しを使っています。アクセントカラーの繰り返しでは、カラーだけでなく、「下部に帯で使う」部分も反復しています。

「反復」の要素はなんでも良い

ここまでの説明を見てきて「反復」とはとても堅苦しい基本原則のように感じませんか。
実はそんなことはなくて、反復要素は特になんでも良いのです。

例えば、先ほどの例では、「下部の帯」には何の意味もありません。
なので、統一感のあるイラストでも特に問題ないのです。

どうでしょうか。全く同じものではなくても、「共通点」が見いだせるイラストなどであれば関連性を感じませんか?

このように「反復」は統一感を出すだけでなく、「面白さ」を追加することもできるのです。

まとめ

反復をうまく使うことで、面白さを出しながら統一感を持たすことができます。そして、リズムを生み出すこと。これが反復の役割です。
反復を使う際のポイントは、他の要素との「明確な違い」を反復項目に使うことです。そうすることで、反復の始まりを受け手に知らせることができます。

基本原則「整列」のまとめ

 

整列は、見えない線を作る

「整列」とは要素の間に見えない線を作り、要素同士が離れていてもその線で結ばれているため、関連性を持たせることができます。 これは「近接」によるグループを、複数作った時にも、役立ちます。 まずは乱雑に要素を並べてみます。これは近接の時にも説明した通り、目線が泳ぐ配置です。 次に全ての要素を右寄せで整列します。右側に見えない線が見えますか? これで、右側に寄った情報が「ひとかたまり」という認識になったでしょうか。 そこまでならなくても、何かしらの「関係性」を伺うことはできるかと思います。 乱雑に配置されていた情報が、これだけでより構造化しました。 次に、中央に整列したもの。  中央に整列した物の中に、一つだけ右寄せの要素を入れてみました。すると、中央に整列した要素はグループ化されている認識になるのに対し、右寄せは別グループのように感じないでしょうか。 もっと整理してみます。どうでしょうか。さらに構造化を感じられるかと思います。 これは、近接との組み合わせです。

ページの統一化と構造化ができる

はっきりした整列は、はっきりした統一化と構造化を生み出します。 コツは、見えない線をどこかに引くことです。 要素が多いデザインほど、整列の効果が発揮できると思います。 見えない線は複数よりも、1本の方が構造化が明確で、見ている人にもわかりやすいです。 先ほどの画像は整列線が2本あります。整理はできていますが、以下のように、1本の整列線にすることでさらに精錬されたデザインになります。

中央揃えは安心感を生み出す

中央揃えは、バランスが良く、安心感や静粛な印象を生み出します。 ただし、その反面、「退屈」なデザインにもなりかねません。中央揃えの効果は「意識的に」使うことで効果を発揮します。 安心感や静粛な印象を与えたい時に使うと効果絶大です。 また、文字を中央揃えにしたとしても、要素自体をズラすことで、一ランク上のデザインになります。

左右揃えはモダンなイメージ

左右揃えは、モダンで研ぎ澄まされたデザインイメージになります。 近接や余白と組み合わせることで、より効果を発揮します。

まとめ

4原則でもお話しした通り、近接や整列などの原則を単体で使うことは少なく、基本的には組み合わせによるデザインレイアウトとなります。 その上で、整列は近接との相性がよく、近接と整列をうまく使うことで、デザインのランクアップを目指せます。

 

 

整列は、見えない線を作る

「整列」とは要素の間に見えない線を作り、要素同士が離れていてもその線で結ばれているため、関連性を持たせることができます。 これは「近接」によるグループを、複数作った時にも、役立ちます。 まずは乱雑に要素を並べてみます。これは近接の時にも説明した通り、目線が泳ぐ配置です。 次に全ての要素を右寄せで整列します。右側に見えない線が見えますか? これで、右側に寄った情報が「ひとかたまり」という認識になったでしょうか。 そこまでならなくても、何かしらの「関係性」を伺うことはできるかと思います。 乱雑に配置されていた情報が、これだけでより構造化しました。 次に、中央に整列したもの。  中央に整列した物の中に、一つだけ右寄せの要素を入れてみました。すると、中央に整列した要素はグループ化されている認識になるのに対し、右寄せは別グループのように感じないでしょうか。 もっと整理してみます。どうでしょうか。さらに構造化を感じられるかと思います。 これは、近接との組み合わせです。

ページの統一化と構造化ができる

はっきりした整列は、はっきりした統一化と構造化を生み出します。 コツは、見えない線をどこかに引くことです。 要素が多いデザインほど、整列の効果が発揮できると思います。 見えない線は複数よりも、1本の方が構造化が明確で、見ている人にもわかりやすいです。 先ほどの画像は整列線が2本あります。整理はできていますが、以下のように、1本の整列線にすることでさらに精錬されたデザインになります。

中央揃えは安心感を生み出す

中央揃えは、バランスが良く、安心感や静粛な印象を生み出します。 ただし、その反面、「退屈」なデザインにもなりかねません。中央揃えの効果は「意識的に」使うことで効果を発揮します。 安心感や静粛な印象を与えたい時に使うと効果絶大です。 また、文字を中央揃えにしたとしても、要素自体をズラすことで、一ランク上のデザインになります。

左右揃えはモダンなイメージ

左右揃えは、モダンで研ぎ澄まされたデザインイメージになります。 近接や余白と組み合わせることで、より効果を発揮します。

まとめ

4原則でもお話しした通り、近接や整列などの原則を単体で使うことは少なく、基本的には組み合わせによるデザインレイアウトとなります。 その上で、整列は近接との相性がよく、近接と整列をうまく使うことで、デザインのランクアップを目指せます。

 

基本原則「近接」のまとめ

「近接」はグループ化

近接は情報を構造化することに役立ちます。 近接の原則は関連する項目をグループ化するということ。 つまり、関連項目を近づけることで、ひとかたまりの情報として認識させることです。 逆を言えば、関連しない情報は近づけてはいけない。ということ。 こういった構造化を目指すことで、見ている人が「情報の関連性」を無意識に見いだすことができます。

視線の流れ

近接の説明の前に、視線の流れを意識してみましょう。

「近接」は視線の流れ(動き)を生み出す

この「視線の流れ(動き)」はデザインにおいていつも重要視されることですが、近接もそれを意識する必要があります。 つまり、「近づける」「離す」をうまく利用して、流れを作るということです。 極端な例ですが、下の画像の例を見てどうでしょうか。 視線が定まらず、あちこち見回してしまいませんか?

少し手を加えて、視線に流れを作ってみましょう。

中央の「近接の原則」、右上の文字、どちらに最初に目がいきましたか? そのあとはどうなったでしょうか。 上記の例はどちらも、視線の流れをうまく作れていません。 なぜなら、すべての情報に順序よく視線が流れていかないからです。

近接を使って情報を整理

情報を整理してみましょう。

どうでしょうか。 上から順番に視線が動き、最後に「終わり」で締まったかと思います。 また、「読み終えた」感覚はありましたか?   これが、近接の効果です。 この例では、「終わり」以外が同じグループとして「近接」について説明しています。 「終わり」は読んだまま説明が終わりですよ、というお知らせです。 その「情報のグループ」を近接を使うことで明確に示しています。 デザインの原則についてわかりやすく説明している本があります。 そちらを参考にしてもいいかもしれません。 [wpap service=”with” type=”detail” id=”4844367528″ title=”デザイン・ルールズ[新版] デザインをはじめる前に知っておきたいこと”]

活字の関係性

書体の関係性 一つのデザインの中に複数のフォント・スタイルを使うときにその間にはそれぞれ「関係性」が生まれます。 その関係性を把握することで、相乗的によく働く場合と、悪く働く場合があるので理解しておくことが大切です。 関係性は3つの「C」に分けられます。

  • 協調関係(CONCORD)
  • コントラスト関係(CONTRAST)
  • 衝突関係(CONFLICT)
この3Cは、書体の関係性を表す重要な3要素です。 この3つの中で、「協調関係」「コントラスト関係」は概ねプラスに働き、「衝突関係」はマイナスに働きます。 [wpap service=”with” type=”detail” id=”4839955557″ title=”ノンデザイナーズ・デザインブック [第4版]”]

協調関係

スタイル・サイズ・ウェイト(太さ)などにあまり差のない関係。基本的には単一の書体ファミリーを使用したときに生じます。 デザインの調和が取りやすく、格式高い印象になる一方で、単調で退屈なイメージを与えることもあります。

コントラスト関係

はっきりと違う要素や書体ファミリーを使うことで生じます。 コントラスト関係を上手く使いこなすことで、より効果的なデザインができます。 コントラストには、情報の構造を分かりやすくする効果があります。そのため、多くのデザインではコントラストを多用しています。

衝突関係

スタイル・サイズ・ウェイトなどが似ているフォントを使用したときに起こります。 「類似性」は、協調(統一)関係でもなく、コントラスト(対比)関係でもないため、NGです。

書体だけでなく、要素も衝突を起こす

これらの関係性は、活字と活字だけではなく、デザインないの要素と要素でも発生します。 一例では、似たようなオーナメント素材を複数使っています。 これらは、曲線や女性らしさは似ていますが、太さのコントラストなどの相違点が多くあります。

まとめ

マイナスに働く「衝突関係」を避け、プラスに働く「協調関係」「コントラスト関係」をうまく使うことでよりいいデザインになります。 コントラストを使いこなすには、書体の特徴を捉えている必要があるので、前回の記事「書体の基本カテゴリ6つ」が重要となります。 また、デザインをよくするためには、「どこが違うか」を探すのではなく、「どこが似ているか」を探すことで「衝突関係」を突き止め、改善に役立ちます。 [wpap service=”with” type=”detail” id=”B00YMSVD8E” title=”月刊MdN 2015年 7月号(特集:絶対フォント感を身につける/付録小冊子 フォント見本帳)[雑誌]”]]]>

書体の基本カテゴリ6つ

書体の基本カテゴリは6つ 世の中にいくつも存在する書体も大きくは6つのカテゴリに分けることができます。 この分類は活字の話をする上で、重要となるためしっかり覚えておく必要があります。 6つのカテゴリは以下の通りです。

  • オールドスタイル
  • モダン
  • スラブ・セリフ
  • サン・セリフ
  • スクリプト
  • デコラティブ

オールドスタイル−手書き文字を元に作ったスタイル

オールドスタイルは、手書き文字をベースに作ったフォントです。 特徴は
  • 「セリフ」がある
  • 小文字のセリフは斜め
  • 線の太さが均一でない
  • ストレスが斜め
「セリフ」というのは文字の書き始め部分や書き終わり部分の「飾り」のことです。 羽ペンで書く文字の名残です。 「ストレス」は文字の一番細い部分と細い部分を結ぶ線のこと。 オールドスタイルの文字は、線の太さに緩急があるのも特徴です。 その多くは、縦線が太く、横線が細いです。 OやSなどの曲線のある文字は、垂直部分が一番太く、水平部分が一番細く、他の部分はそれらを緩やかにつなぐ塩梅で太さを変えます。

安定感のある、「空気」のような印象

オールドスタイルの印象は、まさしく「空気」。あまりの自然さに、「印象がない」というスタイルです。 その特徴を活かして、長文などに使用されることが多いです。

モダン−機械的でスマートなスタイル

モダンはオールドスタイルの構造を残しつつも、より洗練されたスタイルです。 特徴は、
  • 「セリフ」がある
  • セリフは平行
  • 極端な太さの対比
  • 垂直なストレス
印刷技術の向上とともに登場したモダンスタイルは、より機械的でスマートなスタイルです。

クールかつエレガントな印象

「モダン」の名の通り、近代的でクール、そしてエレガントな印象を与えます。 見た目もかなり印象的で、目に飛び込んでくる傾向があるので長文に使用することはあまりありません。

スラブセリフ−モダンスタイルから太さの対比を無くしたスタイル

モダンスタイルを遠くから見ると、極端に細い部分が見えない不都合が起こります。 それを解決するために作り出されたスタイルがスラブセリフです。 特徴は、
  • 「セリフ」がある
  • 小文字のセリフは水平で太い = これをスラブという
  • 太さの対比がない・ほとんどない
  • 垂直なストレス

可読性に優れたスタイル

このスタイルは、非常に可読性に優れています。 そのため本文に使われることも多いですが、オールドスタイルに比べページの印象が暗くなります。 それは、対比を無くし可読性を高めることで、文字全体が太くなったためです。

サン・セリフ−セリフのないスタイル

「sans」はフランス語で「〜がない」という意味。その名の通り、セリフがないスタイルです。 また、書体の中では割と後期に発生したスタイルで、他に比べて歴史も浅く、20世紀に入ったころから注目されました。 特徴は
  • セリフがない
  • 太さが均一 = ストレスがない

同書体でも太さを変えるだけで、印象が大きく変わるスタイル

一つのデザインの中に、同書体で太さを変える(コントラストをつける)だけで、役割を持たせることができるます。 そのため、同じ書体で様々な太さが用意されています。 ごく稀に、太さの対比をもつサン・セリフ体が存在します。 セリフはないものの、太さの対比があるため、純粋なサン・セリフと印象が変わります。 [wpap service=”with” type=”detail” id=”4568504287″ title=”フォントのふしぎ ブランドのロゴはなぜ高そうに見えるのか?”]

スクリプト−直筆のようなスタイル

スクリプト、と一口に言っても、筆記体のような書体からペンで殴り書きをしたような書体まで、様々です。 一つ言える特徴は「手書き」をイメージさせる点です。

あまり使いすぎない

スクリプトスタイルのフォントは、印象が強いため多用するとよくありません。 装飾的に、控えめに使うことがいいかもしれません。

デコラティブ−飾り文字

これまでに挙げた以外のスタイルで、いわば「普通の文字ではない」ものがデコラティブに分類されます。

使い方次第でデザインの意図するところを操作できる

ここまでクセが強いと、デザイン全体の意図するところを飛躍させることも壊すこともできます。 全て「DEAD END」つまり行き止まりという意味ですが、違った印象です。

まとめ

今回は、書体の種類について説明しました。 カテゴリは6つ。それぞれ使用場所に向き不向きがある、ということ。 書体の印象は、気づかぬうちにデザインの印象を左右しています。 ブランドロゴがよい例で、ブランドロゴは「文字だけ」でそのブランドの印象を決めていると言っても過言ではありません。 それだけ、書体は大切なのですね。 次回は、それら活字をデザインの中で使用する際に発生する関係性についてお話しします。]]>

デザイン4つの基本原則

コントラスト(Contrast) コントラストは最も重要な視覚的な要素とも言えます。コントラストとは、翻訳すると「対比」という意味です。 要素を対比関係にすることで、メリハリをつけることができます。

要素の優先順位を無意識に認識させること

コントラストの目的は視覚的要素の違いをハッキリさせて、要素の優先順位を無意識に認識させること。

違いをハッキリさせることがコツ

コントラストのコツは、デザイン上の要素(書体・色・線の太さ・サイズ・形・空間)を単純に他と似せるのを避けることです。また、要素が同じでないなら、その違いをはっきりさせることでコントラストがハッキリして、メリハリのあるデザインになります。

繰り返し(Repetition)

そのままの意味で、要素を繰り返すことです。 同じ要素を繰り返すことで、たとえ無造作に並べられていても関連性を示すことができます。 *無造作な配置をすることはあまりないですが。

関連性を高めること

繰り返しの目的は、要素を体系的にまとめ、関連性を高めること。

統一性を持たせて繰り返すこと

繰り返しのコツは、同じ要素や関連する要素は、色・形・質感や位置関係・線の太さ・サイズなどの視覚的要素を、作品全体を通して統一して繰り返すこと。 同じレイアウトや色・形などでまとめること。同じ項目について、フォーマットを作っておくと便利。

整列(Alignment)

そのままの意味で、要素を整列することです。繰り返し(Repetition)と共に関連性を表す原則です。 要素の色や形が違っても、整列していることで関連性を示すことができます。

清潔・洗練・新鮮という印象を与えること

整列の目的は、情報を整理し、視覚的関連性を無意識に認識させ、清潔・洗練・新鮮という印象を与えること。

整列のコツは、意図して配置すること

要素を無作為に並べるのではなく、意図して配置すること。

近接(Proximity)

グループ化してまとめることを近接(Proximity)と言います。

情報を構造化すること

近接の目的は、要素のグループ化・カテゴライズをハッキリすることで、情報を構造化すること。 情報を構造化すると、とても見やすいデザインになります。

配置するときに、距離を一定にすること

近接のコツは、関連要素(例えば、写真とその写真の説明など)を近づけて配置すること。 要素には、以下の3つがあります。
  • 関連要素
  • 準関連要素
  • 非関連要素
これは、僕が勝手に分けているだけですが、関連要素とは、例えば「画像」と「その画像のキャプション」や「見出し」と「本文」です。 準関連要素とは、「本文」と「画像とそのキャプション」や「見出しと本文」と「もう一つの見出しと本文」など、関連性のある要素群と要素群。 非関連要素とは、その名の通り、全く関係ない要素です。 これらの3つを意識して、近接の度合いを調整(関連要素・準関連要素・非関連要素の順で離れていく)すると情報の構造化がより分かりやすくなります。

4原則のまとめ

最初にも説明しましたが、これらの4原則が全て個別に働くことは基本的にはありません。 いくつかまたは全ての原則を掛け合わせることでデザインが成立します。 デザイナーじゃなくてもデザインを求められる時代に、便利な [wpap service=”with” type=”detail” id=”4895630072″ title=”ノンデザイナーズ・デザインブック”]]]>