デザインの素人がノンデザイナーズ・デザインブックを読んだら、デザインの原則が結構分かるようになった!

公開日: : iOSアプリ開発

20160724-154909.jpg

ずっとエンジニアとして働いてきてデザインに関してはまったくの素人な僕ですが、「ノンデザイナーズ・デザインブック」という本を読んだことでデザインの原則がある程度理解でき、ダメなデザインに対して「なぜダメなのか?」をそれなりに言語化して説明できるようになりました!

(もちろん、この本を読んだだけでデザインの全てが分かるわけではありません。あくまでもデザインについて学び始める入り口としてかなりいいかもよ!ってことです)

今回はこの本を読んで学べたことを、実例をまじえて簡単にまとめておこうと思います。

    

    

デザインの原則「近接」

いくつかの項目が互いに近接している場合、それらはいくつかのバラバラのユニットではなく、視覚的に一つのユニットとなります。

20160724-160407.jpg

左の例ではそれぞれの要素がバラバラに配置されており、組織化がなされていません。

右の例ではそれぞれの要素が他の要素と近接しており、情報の組織構造ができあがっています。

    

デザインの原則「整列」

すべてのものを意識的に配置し、すべての要素が他の要素と視覚的つながりをもつようにする、ってことです。

20160724-160824.jpg

左の例だと、各要素が無造作に並べられただけのように見え、どの要素も他の要素と関連していません。

右の例だと、右端に強い縦の線が生まれ、この線が各要素を結びつけています。

    

デザインの原則「反復」

デザイン全体を通して視覚的要素を反復すると、孤立している部分が結びつき、作品が一体化され強化されます。

20160724-161638.jpg

左の例では、最後の行まで見終わったら、視線は名刺の外にさまよい出てしまいます。

右の例では、最後の行まで見終わったら、視線が2つの太字体の要素の間を行ったり来たりします。

反復は、断片をまとめて一体感を与えてくれます。

    

デザインの原則「コントラスト」

コントラストは見た人の目を引き付けます。2つの異なる要素を配置するときには、それを似せてはならず、2つの要素がはっきりと異なっている必要があります。

20160724-162148.jpg

左の例では、書体の太さとサイズが同じになっており、情報の組織化がなされていません。

右の例では、書体の太さとサイズが明確に異なっており、情報がハッキリと組織化されています。

    

@akio0911はこう思った。

原則を読んだだけだと「なんだ、当たり前のことだな」って思っちゃうんですけど、これらがデザインの原則であることを明確に意識しながらレイアウトしていくと、アウトプットのクオリティがずいぶん変わってきます。

「デザインのセンスがないんだけど、どうすれば向上させられるのか分からない」という方にオススメできる一冊です!

    

この記事を書いた人
あきお(@akio0911
iOSエンジニア、ブロガー。「プログラミングで人々を幸せに」をテーマに活動中。著書に「iPhoneアプリ開発レシピ」「cocos2d for iPhoneレッスンノート」など。東京・大阪にてアプリ開発講座「アプリクリエイター道場」を主催。 MAMORIO株式会社 技術顧問(インタビュー記事)、VISITS Technologies株式会社 技術顧問(インタビュー記事)。ブログ「卵は世界である」を運営。

関連記事

この記事が気に入ったら「いいね!」しよう

follow us in feedly

Feedlyで最新記事を購読

Twitterで更新情報をゲット!

LINEでご感想・ご要望お送りください!
(スマホでLINEを起動 > 友だち追加 > QRコード)

プログラミング未経験者向けのプログラミング入門連載記事を始めます

こんにちは、@akio0911です。 これからプログラミング未経

【RxSwift】BehaviorRelayとPublishRelayについてまとめてみた

こんにちは、@akio0911です。今回はRxSwiftのBe

【RxSwift】materialize, dematealizeを使ってみた

@toshi0383さんに教えていただいた、RxSwiftのm

【RxSwift】ストリームのcompletedをつぶす(消し去る)方法

RxSwiftで元々のストリームからcompletedをつぶす

【RxSwift】completedかerrorが流れてきたらsubscribeはdisposeされる

RxSwiftにおいて、completedかerrorが流れて

→もっと見る

PAGE TOP ↑