1/13 レイアウトについて(1/12の補足) vol.8

今日は昨日書ききれなかったレイアウトの深掘りをしていきたいと思います。ここをしっかり理解することは、デザインの土台となる考え方や、デザイン的な目を養うための練習になります。

揃えることの意味

レイアウトを考える際には、その画面のどこにどんな要素を配置するのか、自分の中である程度考える必要があります。0→1を作るのは非常に難しいですが、レイアウトを学ぶうえでよく使うものとして、グリッドがあります。デザインツールを使ったことがあるひとはよく目にしていると思いますが、グリッドとは、画面を格子状に区切ったもので、画面の中の基準となります。レイアウトの基本は昨日もありましたが、整列です。要素を揃えるポイントとして見えない線、グリッドが見えるようになってくるそうです。その目を育てることが、違和感を発見しやすくなるということでしょう。

関係性やグループ化

近接は関係性や情報の意味が近いものを近くに揃えるというものでしたね。近接の意義として、関係性が見えやすくなるという点があります。

比較してわかりやすくする

対比は何かを比較することによって印象的でぱっと見でわかりやすいデザインを作る時に使われます。色の対比も同様です。
大きく画面を分割したり、文字の大きさや色を変えることでも印象的に見せることができます。

法則性を馴染ませる

反復は同じようなデザインを繰り返すことで法則性を見出すためのものです。同じようなデザインを並べることで、統一感が生まれます。繰り返すことによって見ているひとの視線を集中させることができます。注目させたい部分を全体の統一感から逸脱させることによって強調させることができます。

以上が昨日の補足となります。
では今日もここから実際のサイトを見て考察していきます。

実際のサイトから

・enzo

まずは整列の観点から見ていきましょう。整列はわかりやすいですが、意外と自分でデザインを0から作るとなると意識外にいきずれてしまうこともよくあります。ここでは、フォントサイズが大きい見出しと、それより小さい本文と、その下にある詳細へ飛ぶボタンの３点があります。ここの左端を見てください。見えない線が見えてきませんか？しっかり左寄せで揃っています。しっかり揃えることで意図的に配置していることも伝わってきますし、洗練された印象が伝わってきます。またここでは背景に職人さんがいらっしゃるので、整列することによってさらに印象が強くなります。enzoさんはキッチン用品に拘っているので、画像やフォント、整列すべての要素を使って洗練されたイメージを示唆していますね。

・aminomason.jp

次は私が毎日使っているAminoMasonのシャンプーです。どうでもいいですね、失礼しました。
こちらはとてもわかりやすい近接ではないでしょうか。Amino Masonには何種類あるのですが、それらを区別するように色分けと各説明文が入っています。同じカード内に入れることで同じまとまりであることを意味しています。Amino Masonのシャンプーはお高めの商品なのですが、シャンプーの口だったり、ヘアトリートメントのパッケージにもあるような銀・灰色に近い色を使うことで統一感を出し、さらに高級感を醸し出しているような気がします。

・まるちゃん

最後に対比についてです。赤いきつねと緑のたぬき〜♪といったフレーズがとても耳に残っていませんか。この二つの商品をあえて横に配置し、真ん中の赤緑合戦と仕切りを入れることでより明確に対比がされています。この二つの商品が対の関係にあることは大抵の方がわかるので、このデザインもすっと頭に入ってくるのではないでしょうか。そのほかにもそれぞれのカラーである赤と緑をそれぞれの城と甲冑に使いコントラストとしても対比を使っています。対比はこのように横に並べたりするだけでなく、色のコントラストや文字の大きさなどを変えることでも強調することができます。

次回は別のテーマでまとめていきます！まだまだ知識が浅いので気づいた点などコメントいただけると嬉しいです！