こんにちは、デザイナー兼イラストレーターのUTAです。
今回はデザイナーらしく、デザインが苦手、もしくは、デザインをこれから学びたいと言う方へ、デザインの基本をみなさんにご紹介したいと思います。
まずは、「デザインの４原則」の内容をご紹介します。
✅整列
✅寄せる・離す
✅反復
✅メリハリ
以上がその４つです。言葉だけ見ても分かりづらいと思うので、１つ１つご説明いたします。
1️⃣ 整列
こちらは、そのままです。とにかく揃えましょう😁 だけでは説明になっておりませんね。もちろん図解でご説明いたしましょう。
まずは、下記のレイアウトをご覧ください。
どうでしょうか、少しやりすぎましたかね😅 見たままですが、ぐちゃぐちゃのレイアウトです。そして、このレイアウトを整理整頓すると、
このように、端を揃えるなどて整理整頓するだけで、見栄えがだいぶ変わってきます。極論を言ってしまうと、デザインはこの「整列」の繰り返しです。一応グリッドでどこが揃っているか確認してみましょう。
このように線を引くだけでも、どこが揃っているか一目瞭然です。ここで分かる通り、
✅デザイナーは几帳面でなくてはいけません。
自分の部屋が散らかっていても、レイアウトデザインの上では几帳面になりましょう😁
2️⃣ 寄せる・離す
さて、二つ目からは少しわかりづらくなりました😅 寄せる・離すと言ってもなんのことだか分かりません。まずは結論から申し上げると、余白で区切りをつけることです。順を追って説明しましょう。
上のレイアウトを見ていかがでしょうか。内容を知っていれば分かるとは思いますが、知らない人にしてみたら、どっちがどっちの写真だけ分かりづらいです。なぜかと言うと、関連性のあるものもないものも同じくらいの距離感で配置しいるのです。MicrosoftOfficeで慣れない方がレイアウトデザインをすると、大概こうなることが多いのです。
それでは、上記の画像の関連性の強いもの同志を寄せていきましょう。
どうでしょうか。先ほどよりかはマシになった感じですかね😅 ですが、まだまだ足りません。今度は、関連性が薄いものは少し離しましょう。
おお！ これで、バッチリ記事と記事が別れましたね👍
つまりは、寄せて・離すことにより、
✅余白で区切りをしっかりとつける
ということになります。デザインが不慣れな方は、こういった余白にも情報を詰め込もうとします。
❌「この余白をギチギチに詰めて、他の記事が入る！」
という勘違いをしがちですが、デザイナー目線で言うと、余裕のないレイアウトは読んでもらう可能性が低くなります。デザインの観点からすると
⭕️余白は写真や情報と同じくらい重要
なのです。
3️⃣ 反復
この言葉を見て、察しの良い方なら分かると思いますが、同じデザインを繰り返すということです。次の画像を例に見てみましょう。
上記の画像は、整列された画像です。ですが、整列はされているものの、見出しの配置や横幅など、レイアウトデザインが同じではありません。同列の記事として扱うのであれば、体裁を揃えたくなりますよね。なので、「三四郎」のレイアウトを「吾輩は猫である」へ反復しましょう。
きれいに揃いました。このように体裁が揃うだけで、レイアウトが整うのと、それらの情報が同列であるということが分かるようになります。さらに、反復はたくさん並べると効果が絶大です。
このように、よく見るパターンになりましたね😊 反復をすることで一番大切な考え方は、
✅情報を整理して分かりやすくする
ということです。大きなくくりの中に中くらいのくくりがあり、さらに小さなくくりがある、、、ように、それらをビジュアルで統一させることができるのです。
4️⃣ メリハリ
さぁ、最後になりました。デザイナーの力量が試される一番の見せ場がこの「メリハリ」ではないでしょうか。皆さんはメリハリと聞くと、文字や写真の大小をはっきりさせることだと思っていませんか？ もちろん、それは正解なのですが、それだけではありません。実は３つのポイントがございます。
【メリハリの３つのポイント】
🔘大きさ
🔘配色（コントラスト）
🔘書体の太さ
以上の３つを抑える必要があります。
まずは、大きさのご説明をいたしまし。こちらの画像をご覧ください。
全くメリハリもなく、のっぺりとした文字の配列です😅 ここはしっかりと「タイトル」「著者名」「見出し」と分かるように大きさにメリハリをつけましょう。
こんな感じですかね。あまりやりすぎない程度にメリハリをつけました。とてもベーシックなメリハリの付け方です。
続いては、配色（コントラスト）の例をご説明いたします。
上の画像を見て、皆さんはどう思うでしょうか。例なので少し大袈裟に作ってみたのですが、十中八九「見づらい」というご意見が出てきそうですね。これは確実にメリハリをつけなくてはいけません。
メリハリをつけるとすると上記のような２パターンになります。このくらい配色のコントラストがつけば、文字もはっきりとして読みやすいですね。ちなみに画像の「ジャンプ率」とは、デザイン用語でメリハリのことを言います。
そして最後に、フォントの太さです。
見たままですね。書体の大きさをそのままに、メリハリをつけるパターンです。書体の場合は、メリハリというよりも黒い部分の面積が増え「密度が上がる」と言った方がいいかもしれません。下記の画像をご覧ください。
一部分だけ書体を太くした一文です。グッと密度が濃くなり、強調されていますね👍
このようにメリハリはものの大小だけでなく、いろいろな要素が絡んでいるということがお分かりいただけましたでしょうか。それでは、最後に繰り返します。
🔘大きさ
🔘配色（コントラスト）
🔘書体の太さ
メリハリは以上の３つのポイントを抑えて調整しましょう。
＞＞ まとめ
私はデザイナー歴１５年のベテラン。それでも、デザインに迷いが出たりする場面があると必ず「デザインの４原則」に立ち戻って制作物を見直します。私にとっては、基本というよりかはデザインの指標となっているのかもしれませんね。
ちなみに、この「デザインの４原則」はデザインの名著「ノンデザイナーズ・デザインブック」からの引用でございます。ご興味のある方は下記にリンクを貼っておきます🤚
