まとまりのある cohesive

今回紹介する cohesive は、特にデザイナー同士の会話で頻繁に耳にする言葉です。辞書を引けば「結束した」「まとまりのある」と出てくるものの、使うのに適した場面やニュアンスをよく理解できていませんでした。

あるとき、同僚とのやりとりの中で cohesive の使い方がピンと来た出来事がありました。プロダクトのランディングページに、ブランドアセットとして存在していた 3D のイラストを配置していたところ、Figma でコメントをもらいました。

This illustration can be colorized to feel more cohesive with the background.
このイラストも色を付けると、背景との統一感が増しそうです。

このコメントを見たとき、「まとまりのある」という辞書の説明よりも、「背景との一体感を高める」という具体的なイメージの方が、cohesive の意味をずっとよく表しているように感じました。

このコメントを通して、cohesive はデザインの要素同士が調和し、全体として「まとまり」や「一体感」があることを表す言葉なのだと腑に落ちました。

How could we make the colors a bit more cohesive?
これらの色をもう少しまとまりのある感じにできないかな？

The new layout looks great, but do you think we can make the elements feel more cohesive?
新しいレイアウト、良い感じなんだけど、要素をもう少しまとまりがあるように感じさせることはできるかな？

Look at this app. Their cohesive design makes them stand out from our product.
このアプリを見てみて。まとまりのあるデザインで、私たちのプロダクトより際立ってる。

We need the user experience to be cohesive across the different devices.
さまざまなデバイスにまたがって、一体感のあるユーザー体験が必要だ。

• cohesiveness（名詞）まとまり、結合していること

• cohesively（副詞）団結して、密着して

FEATURE

私が好きな cohesive なデザインを紹介させてください！

イングランド北部にある、世界で唯一現存するガス灯の映画館がリブランディングを行いました。新しいブランドアイデンティティは、映画のフィルムに印刷され、映写技師へリールの切り替えを知らせるキューマークの、タバコの焦げ跡のような見た目から着想を得ています。1

上映作品のカテゴリごとに、映画の雰囲気に合わせて異なる書体が使われています。それぞれに個性がありながらも、同じ映画館のグラフィックだと分かる、まとまりのあるデザインに仕上がっています。

サンフランシスコのデザインスタジオ Play は、Dropbox のサブプロダクトである Capture、Sign、Forms、Fax、DocSend のグラフィックシンボルをデザインしました。それぞれのシンボルは形状や丸み、パースが異なりますが、Dropbox のロゴマークに使われている青と、ロゴタイプの黒を共通して用いることで、Dropbox のブランドとの一体感を生み出しています。

仮にロゴマークの青だけを使ってシンボルを描いていたら、ここまでまとまりのある印象にはならなかったかもしれません。

cohesive に似た言葉に consistent（一貫した）があります。consistent は、ブランドのビジュアル全体で同じタイポグラフィやカラースキームを用いるなど、スタイルやルールに一貫性があることを表す言葉です。一方、cohesive は、タイポグラフィやレイアウトが異なっていても、要素同士が調和し、全体としてまとまりが感じられる状態を意味します。

紹介した二つの事例は、高い一貫性 consistent によって統一感を生み出しているというよりも、異なる要素を調和させることで cohesive なデザインを実現している例だと言えるのではないでしょうか。