ChatWork Creator's Note

ビジネスチャット「チャットワーク」のエンジニアとデザイナーのブログです。

ノンデザイナーズでも少しの気配りで格好つく整え方

こんにちは、守谷(@emim)です。

この記事はChatWork Advent Calendar 2017 - Adventarの、11件目の記事です。お楽しみいただいていますでしょうか。(初めて知ったー!という方は、ChatWorkの他のデザイナー・エンジニアの記事も面白いので、是非ご覧ください!)

さて本題です。

ChatWorkのデザイン部は、サイトやサービスのUIデザインの他、セミナーなどのイベントに使われる資料のデザインや、オフィスの内装の確認・検収までおこなっています。

そんな中、他の職域のスタッフからたまに、「デザイナーが調整すると、ほとんど変えてないのに何か違う(キマる)んだけど、何が違うのか教えて欲しい」という声が上がります。

今回は、デザイナーでなくても簡単に「整う」調整技についてまとめていきます。

せめてこれだけ、の4箇条

デザインは飾り付けることではなく、情報の整理です。

以下でそれぞれ、例を交えて説明していきます。

「間隔と集合」でグループ化

f:id:cw-moriya:20171207164529p:plain

大きさが全く同じ物がランダムに並んでいると、人間はそれぞれを並列に見てしまいます。上に表示された図は、その例を絵にしたものです。

本当に適当に、同じ丸図形を適当に散らしただけなので、何の意図も存在していません。

これを少しずつ寄せてみると……

f:id:cw-moriya:20171207164934p:plain

少なくとも全体を並列には見ず、「丸の集合が3つある」と認識されるようになります。何故かそれぞれの集合が理由があって近くにある(グループ化された)ようにさえ見えてきます。

グループ化されていないというのは、全体を見なくてはいけないということ。つまり視線が定まらない状態、目移りしてしまうということで、どこを見ていいのかがわからなくなります。

関連するものを近づけて集合にすると、必要な情報を大まかに把握できるようになります。

グループ化するために線で囲ったりなどしなくても、集合同士の間を明確に空けるとより効果的です。

大事なこととそうでないことを区别する

グループ化をした中にも、見る側に「押さえてもらいたいポイント」と「補足している内容」という情報の優劣が存在します。

f:id:cw-moriya:20171207172712p:plain

たくさんの情報が並列で書かれていると、「間隔と集合」でグループ化した時と同様、何を受け取っていいのかがわからなくなってしまいます。

大事なところは大きく、そうでもないことは小さく、区别させる必要があります。

f:id:cw-moriya:20171207172721p:plain

前の絵と、線の太さを変えただけで間隔の大きさは同等です。

それだけなのに、太い線が3つあることがわかるようになります。もしかしたら、太い線を境に、3つのグループに別れたようにも捉えられるようになるかもしれません。

この方法でも、情報を分類することが可能です。

揃えて、読みやすく整理

ここまでできたら、あとは書かれている言葉を「人間が読みやすいように整える」だけです。

人は文章を読む時、(速読をマスターしたような一部の人でなければ)大体1行ずつ文字を眺めます。

f:id:cw-moriya:20171211120858p:plain

行末が単語の途中で切れていると、次の行に続くのがどういう文字になるのか読み手は想像を働かせてしまうので、たとえば行末が負の1文字で終わると「負ける」のか「負の◯◯」なのか「負い目」なのか(正解は「負担」です)を一瞬考えるうち、集中力が途切れてしまいます。それが何度も続くことで、そのうち違うことを考え始めてしまうかもしれません。

Webでは調整しづらくほとんど考えられてこなかった調整ですが、スライドや配布資料のように固定表示ができるものならばいっそ、行末は単語ごとに改行を入れてあげた方が読みやすくなることも多いです。

また、たくさんの文を表示する場合などは始まりの位置を揃えたり、長すぎる文章は短めに折り返して次の行をわかりやすくするなど、視線移動の長さを短くするのも読みやすさに繋がります。

自分で作ったルールに沿う

最後に。これがこの中で一番重要です。

以上のルールに則り情報を整理したら、その少ないルールだけに則って全体を調整すること。

文書全体に複数のルールを適用していくと、やはりこれも何を受け取っていいのかわからなくなってしまいます。

まとめ

整理するには最低、4つのポイントに注意すれば十分です。

  1. 「間隔と集合」でグループ化
  2. 大事なこととそうでないことを区别する
  3. 揃えて、読みやすく整理
  4. 自分で作ったルールに沿う

今回挙げた4点はすべてにおいて情報に緩急を作ることに繋がるので、見栄えにリズムが生まれます。デザイナーでない人が資料を作ると、様々な色をつけたり線で括ったり、装飾をして内容を目立たせようとしがちですが、そんなことはしなくてもいいのです。

必要なことと不必要なことをわかりやすく整える、デザイナーが普段やっているのはそういった簡単な調整です。

おまけ

デザインの小技がたくさん載っている、随分昔からの有名な書籍に『ノンデザイナーズ・デザインブック』というのがあります。私は初版をだいぶ前に読んだのですが、現在、第4版ノンデザイナーズ・デザインブック [第4版]が出ています。カラーになって情報量が増えたそうです。

また、より身近な例題から応用編まで、デザインを包括的に学べる書籍にデザインの教室 手を動かして学ぶデザイントレーニング(CDROM付)があります。具体的にラインが引かれて解説されていたり、とても丁寧です。

どちらもおすすめです。