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

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

関連記事

20141224-231137.jpg

【Swift】Auto Layoutで特定のデバイス・画面サイズの時だけ制約を変更する方法

Auto Layoutで、特定のデバイスや画面サイズの時だけ制約を変更する方法について紹介したい

記事を読む

I20160918-133158.jpg

StoryboardでChild View Controllerにデータを渡す方法(Xcode 8 & Swift 3)

Storyboardで、Child View Controllerにデータを渡す方法を紹介します

記事を読む

20141227-125250.jpg

実践的な内容まで載っている!開発のプロが教える Swift標準ガイドブック

株式会社マイナビ様より「開発のプロが教える Swift標準ガイドブック」の見本紙を頂きました。早

記事を読む

20150525-224340.jpg

【Swift】クロージャをメソッドや関数の引数として渡す方法

Swiftでメソッドの引数としてクロージャを渡す方法について解説したいと思います。     

記事を読む

iPhoneゲームを簡単に開発したいならこの本がオススメ!「Sprite Kit iPhone 2Dゲームプログラミング」

iPhoneゲームアプリを簡単に開発したいなら「Sprite Kit iPhone 2Dゲームプ

記事を読む

I20160207-111059.jpg

【Swift】Xcodeで型推論された変数や定数の型を調べる方法

Swiftには、そのデータ型が明らかであれば型を明記する必要が無い「型推論」という機能があります

記事を読む

I20160217-170931.jpg

2016年2月15日以降、Missing iOS Distribution Signing identity for XXX というエラーが出た場合の解決方法

2016年2月15日以降、AppStoreへの申請やipaファイルのエクスポートで「Missin

記事を読む

Auto LayoutやStoryboardの仕組みをしっかり理解できる!「UIKit徹底解説」

インプレスジャパン様より献本御礼。UIKit周りを中心に、「Auto Layout」「Story

記事を読む

I20160122-095132.jpg

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

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

記事を読む

I20160418-235604.jpg

XcodeのStoryboardで部品を選択しやすくする2つの方法

ストーリーボード上で部品が入り組んでくると選択しづらくなってきますが、そんな状況でも部品を選択し

記事を読む

I20170228-002742.jpg
約3ヶ月で体脂肪率を6.2%も落とせたキッカケについて

(右上の赤枠内がダイエット開始前、左下の赤枠内が3ヶ月後の数値

I20161224-174949.jpg
「季節の野菜を直接配送!季節のスムージー」を買ってみた

「FiNCモール」で、「季節の野菜を直接配送!季節のスムージー」を

I20161002-152537.jpg
【メンズネイル】東京・新宿のネイルサロンでマットネイルしてもらった

2016年7月18日、東京・新宿のメンズOKなネイルサロン「Tot

I20160925-163452.jpg
タブバーアイコン非選択時の色を変更する方法【iOS 10】

UITabBarControllerで、タブバーアイコン非選択時の

I20160924-123726.jpg
iPad Pro 9.7インチ SIMフリーモデルにFREETELのSIMを入れて使ってみた

今までiPad miniで使っていたFREETELのSIM

→もっと見る

PAGE TOP ↑