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

公開日: : iPhoneアプリ開発

20160724-154909.jpg

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

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

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

    

    

スポンサード リンク

デザインの原則「近接」

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

20160724-160407.jpg

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

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

    

デザインの原則「整列」

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

20160724-160824.jpg

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

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

    

デザインの原則「反復」

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

20160724-161638.jpg

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

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

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

    

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

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

20160724-162148.jpg

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

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

    

@akio0911はこう思った。

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

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

    

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

follow us in feedly

Feedlyで最新記事を購読

Twitterで更新情報をゲット!

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

関連記事

I20160513-010707.jpg

Swiftで計算型プロパティをネストさせてみる

Swiftの計算型プロパティ(Computed property、コンピューテッドプロパティ)を

記事を読む

I20160122-095132.jpg

Swift 2のドキュメントコメントの書き方(JavaDoc的なやつ)

コード補完時やoptionクリック時などに説明が出てくるようにする「ドキュメントコメント(J

記事を読む

I20160201-112159.jpg

ライブラリ管理ツールCarthageのCartfileの書き方

iOS(Cocoa)ライブラリ管理ツール「Carthage」で使用するCartfileの書き方を

記事を読む

20150409-103620.jpg

描いたベクターグラフィックをSwift/Objective-Cコードに変換できる「Paint Code 2」

引用元 : PaintCode ベクターグラフィックを描き、それを描画するためのSwift

記事を読む

I20150709-234536.jpg

Swiftの文法をキッチリ学ぶのにオススメな本「詳解Swift」

解説が細かすぎるのでプログラミング未経験者や初心者にはオススメできませんが、Objective

記事を読む

20141210-164612.jpg

【Swift】Generated Header内にSwiftクラスの定義が記述されない場合の確認事項【Xcode6】

Swiftで書いたクラスをObjective-Cで使う際には、「Generated Header

記事を読む

I20160525-233821.jpg

SwiftBondを使ってみた。observeやObservableの使い方など

Swiftバインディングフレームワークである「SwiftBond」を使ってみました!

記事を読む

20160807-113229.jpg

UITableViewのリサイズに合わせて一番下のセルを常に一番下に表示する方法

一番下のセルを表示している状態でUITableViewの下端を上に移動させると一番下のセルが隠れ

記事を読む

20160508-170745.jpg

SwiftTaskで失敗したタスクによって異なるエラー処理を行う方法

SwiftTaskで複数のタスクを.successでチェーンさせ、失敗したタスクによって

記事を読む

20160309-131202.jpg

ゆるい入門書では物足りない人向けの濃い内容!「本気ではじめるiPhoneアプリ作り」

ヤフー株式会社のiOSエンジニアである西 磨翁(にし まお)さんより、「本気ではじめるiPhon

記事を読む

【Mac】macOSのメール(Mail.app)でGmailをサクサク快適に使う方法

macOSに搭載されているメールアプリ、いわゆるMail.ap

【メンズネイル】新宿区大久保のネイルサロンで紫とピンクのネイルにしてもらった

2016年11月12日、東京都新宿区大久保にあるネイルサロン「

[Xcode][Swift]ボタンなどの同時タップを禁止する

iOSで、ボタンなどの同時タップを禁止する方法を紹介します。

【HomeKit】家の照明をSiriで制御できるようにしてみた

Apple製品と家電を連携するシステム「HomeKit(ホーム

【メンズネイル】新宿区大久保のサロンでターコイズとピンクのメタルネイルにしてもらった

2016年10月22日、いつもお世話になっているネイルサロン「

→もっと見る

PAGE TOP ↑