はじめに
こんにちは、春です。
昨年入社して、1年半が経ちました。この期間でウェブサイトを作ったり、VRのアプリを作ったり…色々な案件に関わりました。
その中でデザインについて考えなければいけない機会が何回かありました。
元々興味はあったのですが、この機会にきちんと勉強してみようかなと思い、今、少しずつ勉強している最中です。
さて、デザインについて勉強すると「デザインの４原則」というものに出会うことになります。
「近接」、「整列」、「反復」、「対比」ですね。デザインの基本中の基本ということで、どこかで耳にしたことがある人もいるかもしれません。
ただ、これらが見た目にどのような影響を及ぼし、どのような役割を果たしているのかというのを意識することはあまりないのではないのでしょうか。
ということで今回は「デザインの４原則」について、意識したときとしていないときでどれくらい見た目に差が生まれるのかを検証してみたいと思います。
検証方法
今回はカフェのメニューを題材にして進めていきます。
メニュー内容はChat-GPTに決めてもらおうと思ったのですが、出力されたメニューに使えそうな料理の画像が思いのほかなく、「Oishiso」様から私の独断と偏見でカフェにありそうなメニューをピックアップし、簡単に作成しました。
https://oishiso.jp/2019/04/18/vanilla-icecream/
価格も学生の頃のアルバイト先を思い出しながらそれっぽいものをつけました。
そうして出来上がったものがこちらになります。
色やフォント、サイズなど、とにかく色んなものをあえて適当に配置しました。
ここから見た目を整えていきます。ですが、今回はあくまで「デザインの４原則」の効果を見たいので
- 色、フォントは原則そのまま（フォントの太さは変えてもOK）
- 位置、大きさのみ変更できる
この２つをルールとして進めていきます。
「近接」の適用
今回は画像があるのでまだわかりやすいですが、同じグループに属するものを近くに配置し、違うグループのものは遠ざけて配置することで「関係するもの」をわかりやすくしていきます。
「メニュー」、「フード」、「ドリンク」「デザート」の４つのグループになるように分けてみました。グループごとに隙間が生まれたので項目の違いがはっきりとしたんじゃないでしょうか。
「整列」の適用
画像や文字の位置を揃えて、全体をすっきりさせていきます。
今回は商品１つ１つに中央揃えを適用し、「フード」、「ドリンク」、「デザート」がそれぞれ３品ずつあるのでカテゴリを跨いで縦にも位置が揃うようにしました。
画像や文字の大きさが違うのでまだガタガタして見えますが、それでも最初に比べて見やすくはなっているのではないでしょうか。
細かい調整は最後に行うとして一旦先に進みたいと思います。
反復の適用
要素を繰り返して統一感を持たせます。
今は「フード」、「ドリンク」、「デザート」のカテゴリ名の位置が違うのでこれらの位置を揃えていきます。
どうでしょうか。変わったのはほんの一部ですが、統一感と見やすさが更に上がったような気がしますね。
対比の適用
注目してほしいところは目立つように、逆にそうでないところは控えめになるように見た目に強弱をつけていきます。
ここは目的や好みによってどこを見せたいのかが変わってくるので、こうしないといけないという決まった正解はないと個人的に思います。
とりあえず今回は目立たせたい順に
- タイトル
- カテゴリ
- 写真
- 商品名
- 値段
という優先度で行こうと思います。
どうやって強弱をつけるのかについては、色や大きさを変えたり、装飾をつけたりと色々あると思うのですが、今回は最初に決めたルールがあるので、大きさと文字の太さで強弱をつけていこうと思います。
という訳で強弱をつけたものがこちらになります。
文字サイズに差をつけてみましたがあまり強弱がついているようには見えない気がします・・・
背景色が濃い目なせいか、真っ白なカテゴリ名がとても目立って見えますね。
完成
最後に大きさが変わって位置がずれた部分を整えて完成です。
始めの物と見比べてみましょう。
大きさや位置がバラバラだったものが揃ったので見やすさはとても向上したとは思いませんか？
ただ背景が赤色のせいか、カフェというよりは街中華のメニューに見えますね笑
考察とまとめ
今回は実際にカフェのメニューをお題にして「デザインの４原則」がどれだけ見た目に影響を及ぼすのかを検証してみました。
フォントも色もごちゃごちゃでしたが、位置や大きさが整うだけでもかなり見た目は向上したかなと思います。
ただ分かっていたことではありますが、これだけで十分かと言われると全然そんなことはないですね。
デザインの４原則というのは、全体のレイアウトを決めて、作るものの方向性を固めることが主な役割で、見た目の華やかさに大きく作用するものではない。かといって疎かにすると全体が破綻してしまう縁の下の力持ちのようなものなのだろうなと実際に作ってみて感じました。
という訳で今回はここまでです。それではまたいつか。