デザインの反復｜同じ役割を同じ見た目にする

リオ商品ごとにデザインを変えたら、三枚とも別のお店みたいになっちゃった。

サヤカそれぞれのお菓子らしさは残したいんです。でも、価格を探す場所はそろえたいです。

反復で、次の情報を探しやすくする仕組み

一枚目で価格が商品名の下にあると分かれば、次のカードでもその辺りを探せます。ところが、二枚目では右上、三枚目では写真の中に価格があると、そのたびに探し直すことになります。反復は、このような共通の探し方を作るために役立ちます。

たとえるなら、毎回同じ位置に氏名欄がある申込用紙です。内容は人によって違っても、欄の役割が変わらなければ記入する場所を探せます。案内のデザインでも、同じ位置や書き方が情報の役割を伝えます。ただし、前の紙面を見ていない人もいるので、位置だけに頼らず「価格」「開催日」などの意味も読めるようにします。

反復するものは装飾だけではありません。見出しの階層、日付の表記、写真の縦横比、説明の始まる位置なども含みます。同じ店の案内でも、毎回必要な情報が違えば、反復する単位を小さくした方が扱いやすくなることがあります。

一方で、同じ見た目なのに役割が違うと、誤解を招きます。商品名と受付終了のお知らせが同じ囲み方なら、どちらが商品情報で、どちらが重要な状態か分かりにくくなります。似せる前に「これは何の情報か」を分けることが先です。

三つの商品名をそろえる例

架空の販売会で、スコーン、クッキー、マフィンを案内するとします。ここでは価格や写真を置かず、商品名の見せ方だけを比べます。三つとも同じ階層の見出しなので、書体と太さを共通にした案を作ります。

元の案に優劣が付くわけではありません。それぞれが異なるブランドの商品なら、違いを見せる理由があるかもしれません。同じ販売会の同じ階層として読んでほしい場合に、共通の見た目が働きます。何を同じ仲間として見せるかで、選ぶ案は変わります。

次に価格を加えるなら、商品名の書式をそのまま使うのではなく、価格用の書式を決めます。商品名と価格は、それぞれの役割の中でそろえればよいのです。書体が増えて判断しにくくなったときは、フォントの種類を整理する方法で役割ごとに分けられます。

そろえる部分と、変える部分を分ける

最初から細かな決まりを大量に作ると、原稿を入れるだけで困ってしまいます。まずは三枚並べたときに毎回探す情報を選びます。商品なら名前と価格、催しなら日時と申込先、記事一覧ならタイトルと説明が候補です。

例えば、商品名が短いカードに合わせて高さを固定すると、長い名前だけ小さな文字にすることがあります。それでは、名前の長さで重要度が違うように見えかねません。二行まで使えるようにするなど、共通ルール側に幅を持たせる方法を先に試します。

「同じ枠に入るから」と意味のある語を削ることにも注意します。種類を区別する名前や、販売条件の一部を省けば、見た目がそろっても伝える内容が変わります。形の整えやすさより、読み手が選ぶための情報を優先します。

自分の制作に使う小さなルール

ルールは「統一感を出す」という抽象語より、次の一枚を作れる形で残します。例えば「商品名は左上、同じ書体の太字」「価格は説明の下」「写真の枠は正方形。ただし主役が切れる場合は別写真を選ぶ」のように書きます。

大事なのは、数値だけでなく理由を一緒に残すことです。「上に24px空ける」だけだと、カードが小さくなったときに変えてよいか分かりません。「隣の商品と別の組だと分かるように、商品間の空きを本文の行間より広くする」と書けば、サイズが変わっても目的を確認できます。

Webで作るなら、同じ見出しやカードに共通の設定を使うと、変更が各所へ反映されます。デザインアプリでも、文字のスタイルや部品を保存できる場合があります。機能を探す前に何を共通にするかを決めておくと、単に複製しただけの間違いを広げにくくなります。

実際の運用では、元のカードを複製して作ることもあります。その場合、前の商品の価格や日付が残っていないかも確かめます。反復してよいのは見せ方のルールであって、更新が必要な内容まで同じにしてよいわけではありません。

そろえるだけでは効かない場合

三枚が同じ見た目でも、何の販売会か、どこで買えるかが書かれていなければ案内として不足しています。反復は情報の不足を直す方法ではありません。内容、読む順番、文字の読みやすさは別に確認します。

また、すべてが同じ強さだと、終了・変更・残りわずかといった状態の違いが伝わりにくくなることがあります。状態を区別する場合は、色だけを変えるのでなく「受付終了」などの文言も付けます。同じ状態には同じ見せ方を繰り返し使うと、例外にも一貫した意味を持たせられます。

新商品だけを大きく見せるなら、何を強調したいのかを決めてから変更します。文字、写真、背景、位置を全部変える必要はありません。共通部分を残し、一つの差を設けた案から比べると、シリーズのつながりと強調が両立しているか確かめやすくなります。

単調に感じるときも、見出しのルールを壊す前に写真や題材の違いを見てください。同じ枠の中に異なる内容が入るだけで、変化が生まれることがあります。SNSの複数投稿へ応用するなら、統一する要素の決め方へつながります。

三枚を並べて、次の一枚を試作する

三つ以内はこの練習で確認しやすくするための区切りです。実務のルール数を制限するものではありません。ルールを増やす場合も、何の判断を助けるのかを一つずつ説明できる状態にします。

次の一枚を作れるルールを残す

三枚をそろえるときに困った場所は、次の一枚でも迷いやすい場所です。うまく収まった条件だけでなく、長い名前や横長の写真に対応した方法も残しておくと、型を使い続けやすくなります。

反復の目的は、変化をなくすことではありません。変えてよい内容と、読み手のために守る約束を分けることです。新しい一枚を並べたとき、同じ情報を同じように探せるかで確かめてみてください。