あなたがデザインできないのは、「構成要素」を知らないから

photo by CollegeDegrees360

よく「デザインに興味はあるけど、自分にはセンスが無いから無理」と仰られている方を見かけます。

そんな方は、ぜひデザインの構成要素を知ることからスタートされてはいかがでしょうか。

なぜセンスが無いから無理だと思い込んでしまうのか

デザインを学んだことが無い方にとって、デザインされたものは「１つのビジュアル」にしか見えません。

つまり、それがどんな原理で成り立っているのか、どんなプロセスで出来上がったものなのかが分からないのです。

だからこそ、「デザインはセンスだけでやるもの → 自分にはセンス無いからできない」という思考の流れになってしまいます。

デザインをプログラミングに置き換えてみると…

しかし、デザインをプログラミングに無理やり置き換えてみるとどうでしょうか。

エンジニアが「デザインが分からない」というのは、デザイナーの「エンジニアリングが分からない」と同じことです。

ここで、例えばデザイナーがWebアプリケーションを作ってみたいと思ったとします。

もしエンジニアリングの知識が全く無ければ、既に完成したWebアプリを見ても、それがどういう原理で、どういったプロセスで作られたものなのかが全く分かりません。

そして、先ほどの例と同じく、自分にはとても学べないんじゃないかと思い至ります。

構成要素が分かれば、道が拓ける

しかし、構成要素を知ることができれば話は変わってきます。

親切なエンジニアの方が、「Webアプリケーションを自分で作ってみたいと思うなら、OSとサーバーとデータベースと、とっつきやすいプログラミング言語覚えたらイケるよ！」と言ってくれたとしたら…

• じゃあOS学ぶか → Linux
• 次にサーバー学ぶか → Apache
• さらにDB学ぶか → MySQL
• プログラミング言語学ぶか → PHP 

といったように、実現したいものを構成要素に分解し、個別に攻めていくことで道が拓けるのです。

デザインの構成要素を確認しよう

デザインを勉強する際も、同様に構成要素を知ることができればバッチリです。

例えばWebエンジニアが「自分でUIもデザインしたい！」と思った時は、UIデザインの構成要素を集めることから始めればOKです。

社内にデザイナーがいるのなら、彼らに聞くのが手っ取り早いでしょう。

構成要素を知ることができれば、これまでは「ただの１つのビジュアル」にしか見えなかったアプリのビジュアルも、

• レイアウト
• タイポグラフィ
• ユーザインタフェース
• 色彩設計
• Photoshop, Illustrator, Sketch（ツール）

といった構成要素の上に成り立っていることが理解できます。

上記の構成要素がつかめれば、あとは本屋でそれぞれの要素についての本を買って読めばだいたい基礎が身につくでしょう。

まとめ

漠然とデザインの勉強がしたいと思ってそれっぽい本を読んでも、結局はよく分からないままになってしまいがちです。

しかし、「何となくデザイン勉強したい…」という段階から、「レイアウトが学びたい！」「タイポグラフィが知りたい」といった粒度にまで落とし込むことができれば、良い本も探しやすくなります。

最後に、「本を探すのは大変だし面倒だ」という方もいらっしゃると思うので、わたしのおすすめをご紹介します。

レイアウト

ノンデザイナーズ・デザインブック [フルカラー新装増補版]

よく紹介されているのでご存知の方も多いでしょう。

内容はレイアウトだけではありませんが、レイアウトの基本４原則「近接」「整列」「反復」「対比」を分かりやすく学べる、基礎を身につける上で価値ある一冊です。

タイポグラフィ

タイポグラフィの基本ルール -プロに学ぶ、一生枯れない永久不滅テクニック-[デザインラボ]

フォントがデザインに与える影響は計り知れません。

タイポグラフィの基本ルールを知り、美しい文字の配置を学びましょう。

ユーザインタフェース

デザイニング・インターフェース 第2版 ―パターンによる実践的インタラクションデザイン

UIデザインの本はたくさん出ていますが、こちらは上級者向けです。

デザインも、突き詰めればパターンを知ることだと理解できればもうお手の物。

デザインを抜きにしても、理論的な画面設計ができるようになれば、エンジニアにとっても役立つはずです。

色彩設計

ハンディクラフトのデザイン学

こちらは手工芸の本ですが、色について体系的にわかりやすく説明されており、大変おすすめです。

個人的には、色についての本はWeb関係の方が出版されているものより、こうしたアカデミックな方が書かれた本の方が体系的に学べると考えています。

ツール

プロになるためのWebデザイン入門講座 実践で役立つPhotoshop&Illustrator徹底ガイド

PhotsohopとIllustratorを使ったWebデザインの手法について学べます。

Photoshopは「写真屋」の名の通り、もともとは画像編集ソフトなので、実はPhotoshopを使ったWebデザインの手法を解説した本は少ないのです。

そういった意味で、大変勉強になる一冊です。