反復【猫で学ぶ基礎デザイン講座：第3回】 #猫デザ

今回はデザインの基本4原則の一つ「反復」について紹介します。
その前に、初めての方でこの講座のことをよく知らないという方は、こちらの記事をご覧ください。

反復とは？

反復とは、視覚的要素を全体を通して繰りかえすことです。リピートすることを心がけましょう。

反復のメリット

反復のメリットはこちらです。

・全体の統一感を出すことができる

文字だとイメージしづらいので反復のNG例を用意しました。統一感がないと、全体としてどのような情報を伝えているのか曖昧な印象を与えてしまいます。

NGポイント
・書体がバラバラ
・書体のウェイト（太さ）がバラバラ
・見出しに使っているあしらいがバラバラ

そして、NG例を改善したものがこちらです。

同じ書体、同じあしらいを繰り返すことで、全体の統一感が出ました。

反復の応用問題を解いてみよう！

ここまで学んだ知識を使って、反復の応用問題を解いてみましょう！
猫の毛色を紹介するスライドを作りました。さて、どこを改善するとよいでしょう？

応用問題のNGポイント・解答例

NGポイント
・見出しと文章の並び方に一貫性がない
・左揃え・中央揃え・右揃えが混在している
・要素を囲む矩形の大きさがバラバラ
・要素同士の間隔が一定でない

解答例1はこちら。まずはシンプルに文章を左揃えにして、要素を囲む矩形の大きさや、要素同士の間隔を全て同じにした改善案です。

統一感が出たことで、より情報が見やすくなりました。変な引っ掛かりなく、スムーズに全体の情報を見ることができます。

カード型に情報を整理するメリットとしては、要素の数が一目で把握しやすいことです。要素が10個くらいでしたら要素の個数が把握しやすいと思います。

解答例2。カード型以外の整理の方法もあります。リスト型のメリットは、目線の動きが左上から下方向へとシンプルになり、情報を読み込むスピードが速くなります。

解答例3。リストのあしらいを変えたバージョンです。高さがぎゅっと圧縮され、見出しの項目にメリハリがついて目を引くような見た目になりました。コンパクトな領域で情報を見せたいときはこのような見せ方がオススメです。

今後、より楽しんで学べる講座にしていきたいと思っているので、感想や気づいたことがありましたら、ぜひTwitterやnoteでコメントをいただけると嬉しいです。皆さんと一緒に講座を作っていければと思います。ハッシュタグはこちらです。 #猫デザ

画像内の猫に関する文章は以下のウィキペディアから引用しています
「ネコ」（最終更新 2021年8月30日 (月) 14:44）『ウィキペディア日本語版』。