ノンデザイナーズデザインブックから学ぶ、デザインの基礎!


 

私は、趣味と仕事の境くらいな感じでずいぶん長い事、主に紙媒体のイベントフライヤーや店舗のロゴ制作や名刺制作などをさせていただいておりました。
だけれども元来アーティスト傾向にあるというか(お絵描きは小さいころからの趣味です)デザインという概念がそもそも分からず頭を抱える事が多かったんです。今回はwebだけではなく、もっと広義な意味でのデザインについてのまとめ記事です。

デザインとアートの違いとは?

デザインって何ですか?と聞かれたらわたしは「見る人に優しいもの」(自分以外の他の誰かの為のもの)と答えると思います。
ではアートとは何ですか?と聞かれたら「自我の放流(何でもあり)」(自分自身に内包されている表現の放流)みたいな感じかと思います。

デザインというと世間一般(?)では「センス」「感性」など右脳的なワードが飛び交いがちですが、実際デザインをする際は左脳的ロジカルな面が多いと思っています。勉強しなくても直感で「見る人に優しいもの」が作れるのであればそれはセンスだと思うけれど。。

「ふつうのデザインができるふつうのデザイナー」なら感性、センスは要らないと思っています(勉強は要ると思います。私ももっともっとできるようになりたいです。。)

とにかくコードを覚えるよりもなんだか芸術的なイメージが(一般的には)強いデザインという分野。

だけれども、デザインには確実にルールがあるのです!
アート傾向が強かったわたしに一筋どころか、シッタルダがブラフマンに逢って仏陀になっちゃった級に後光が指した名著中の名著『ノンデザイナーズ・デザインブック』を例にデザイナーでない人がデザインができるようになるかもしれないテクニックを紹介していこうと思います。


ノンデザイナーズ・デザインブック
Amazonへ飛びます。

 
この本です。中古品も多くあるので、300円か400円くらいだせば買えます^^
▲ページTopへ戻る
 

デザインは実は誰でも無意識にしている

例えばパワーポイントなんかで何かの資料を作る際、ページのタイトルの文字は大きく表示させたりしませんか?
そしてフォントなんかもタイトル毎に変えたりせず統一させたりしているんじゃないかと思います。

その資料を見るであろう相手に自分の伝えたい情報を分かり易く集約させて伝えたい項目を大きく表示させる。

小さい頃からノートを取る時も重要な項目には赤ペンや蛍光マーカーなんかひいたりしませんでしたか?
これが既にデザインをしている事だと思います。

皆無意識に「どうすれば分かり易いか」ということを無意識にまとめながらデザインをしているんです。
デザインが出来るようになるには、この無意識の部分を意識的に行うようにすると抜群にデザインする力は上がります。
▲ページTopへ戻る
 

近接

まずは次の画像を見てください。

…文章にまとまりがなく、もやっとしませんか?

次にこちらの画像を見てください。

こうすると、とても印象が変わったと思います。

このように、同じカテゴリに属する情報は近づけてレイアウトすることを「近接」といいます。
また反対に同じカテゴリではない情報(ここではイヌとネコ)は離してレイアウトします。
▲ページTopへ戻る
 

整列

整列とは各レイアウトの中に強力な力線を生みだす事です。
わたしも以前やりがちでしたが、センター揃えにするとなんとなくレイアウトってまとまった気になりませんか?
確かに場合によってはセンター揃えも有効です。シンメトリーな構図は人々に「厳粛である」や「落ち着いている」イメージを持たせる事が出来る為、そういった目的があってセンター揃えをするのであれば、それも方法の一つです。

例を挙げてみます。

趣味で作られているホームページなどでわりと見かけるレイアウトです。

この本の著者はまずセンター揃えを意識的にやめる様にしてみなさい、と言っています。
「整列」とはレイアウトの中に見えない透明の線を作る様意識してレイアウトする事です。

では「整列」と「近接」の法則を用いて上の画像を再度レイアウトし直してみます。

どうでしょうか?
情報も分かりやすく、整然としたのではないかと思います。

これが、整列です。
▲ページTopへ戻る
 

反復

反復とはデザイン上の決まり事を繰り返して使用する事です。
特殊なフォントオブジェクト飾り線など、視覚を通して認識できるものであればなんでもです。
以下に例を挙げてみます。

  1. 動物の前にはカメラのオブジェクトを配置
  2. 動物の項目には手書き文字風のフォントを使用
  3. 本文脇には足跡を繰り返して使用

これは1ページでの反復を行っていますが、例えばwebページ全体でもこの反復の法則を使う事で全体的に一つのwebページという風に認識させる事ができます。

これが反復です。
▲ページTopへ戻る
 

コントラスト

コントラストとは、目立たせたい部分等を色の違い、フォントの種類の違い、フォントサイズの違い、などを用いて目立たせたい項目をより明確に読ませる方法です。
先ほどの画像にコントラストを付けてみました。

コントラストは、私も苦手な部分なのですが、うまくなるためにはちょっとやりすぎたかな?と思うくらい明確にやってみることがいいそうです。
▲ページTopへ戻る
 

まとめ

一番最初の画像


だいぶ読みやすく目を引くビジュアルになったのではないかと思います。

本日書いた原則はデザインの基本的な所ですが、いつも忘れず意識して行うようにしています^^
デザインって楽しそうかも!と思って頂ける様な記事が書けていれば幸いです。
▲ページTopへ戻る

コメントを残す

メールアドレスが公開されることはありません。