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

公開日: : 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コード)

関連記事

I20160122-095132.jpg

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

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

記事を読む

I20151030-214417.jpg

【開発本】SpriteKitの入門書籍「iPhoneのゲームアプリをつくろう!」

SwiftとSpriteKitでiPhoneゲームアプリを開発するための入門書「iPhone

記事を読む

I20160417-171311.jpg

Xcodeのブレークポイントで変数の中身を通知センターに表示してみる

Xcodeのブレークポイントの機能を使って、ブレークポイントを通過した時点での変数の中身を通知セ

記事を読む

I20160129-115948.jpg

【対処法】Swift 2(iOS 9)ではUITextFieldのtextがString?になっている

Swift 1(iOS 8)時代において、UITextFieldのtextプロパティは va

記事を読む

20150109-223509.jpg

【Xcode 6】対応する開き括弧と閉じ括弧を調べる方法

Xcodeで、対応する開き括弧と閉じ括弧のを調べる簡単な方法があったので紹介したいと思います!

記事を読む

I20151107-111928.jpg

Swift 2で要求バージョンの指定・実行環境バージョンの確認を行う(#availableと@available)

Swift 2で追加された#available, @availableの使い方についてメモしてお

記事を読む

I20150805-182005.jpg

Swiftにおける関数型のエッセンスを学ぶために「関数プログラミング実践入門」を読み始めた

Swiftの関数型言語的な特徴についての話を各所で見るようになりましたが、自分は関数型言語の

記事を読む

I20150808-104713.jpg

【Xcode】シミュレーターリストの表示がおかしくなった時の解決方法

Xcodeのシミュレーターリストの表示が、上のスクリーンショットのようにおかしくなってしまっ

記事を読む

20140916-130550

Swiftの列挙型、switch文、網羅性チェックが素晴らしい!

アップルの新プログラミング言語「Swift」をちょっとずついじってるんですが、列挙型とswitch文

記事を読む

I20160208-152320.jpg

【Swift】privateなタイプメソッド作るなら、privateな関数でも良いかもと思った

structとかclassの中で、ちょっとした処理を担当させるprivateなタイプ

記事を読む

I20170521-225453.jpg
東京駅八重洲口の「羊肉酒場 悟大」で網焼きジンギスカンを頂きました!

ゆうせいさんと株式会社 大庄さんからご招待頂き、悟大withサッポ

I20170514-165235.jpg
iPhoneと連携できる体重体組成計「Withings Body Cardio」を使ってます

ジムに通い始めて体脂肪率が落ち始めたのをキッカケに、iPhoneと

I20170507-155440.jpg
【派手髪】ハーレイクイン風の髪色に染めてもらいました

2016年10月20日、ハーレイクイン風の髪色に染めてもらいました

I20170504-173110.jpg
【メンズネイル】東京・新宿のネイルサロンでターコイズのホログラムネイルしてもらった

ネイルネタが1年分くらい溜まっているので、ちょっとずつ書いていこう

I20170502-010117.jpg
SNUGGのライトニングケーブルが耐久性高し。8ヶ月使ってますが断線の気配なし!

iPhoneの充電&転送ケーブルであるLightningケーブルっ

→もっと見る

PAGE TOP ↑