『なるほどデザイン』の要約まとめ。ブログで使えるデザインが学べる

Amazonの商業デザインでベストセラー1位を獲得した『なるほどデザイン』の要約まとめが知りたい。


こんな人の悩みを解決します。


『なるほどデザイン』のサブタイトルには、目で見て楽しむデザインの本。とある通り、文書での説明はほとんどありません。


デザインの知識がない人でもスラスラ読めて、読み終わった後はブログに役立つデザインの基礎が身につくでしょう。


それでは、見ていきましょう!



『なるほどデザイン』を読むべき人


このような悩みを抱えている人におススメです。

  • 複数の画像の配置が苦手な人
  • 色で目立たせる方法を知りたい人
  • 最適な文字のフォントを選び方が分からない人
  • 見やすいグラフの作り方を知りたい人


beforeとafterで比較しているので、「どこを変えるだけでよく見える」のか、感覚的に分かってきます。


この本を読んで、デザインのことが好きになるくらい分かりやすく解説しています。



『なるほどデザイン』の基礎情報




『なるほどデザイン』の基本情報はこちらです。



基本情報


単行本:272ページ
出版社:エムディエヌコーポレーション
言語:日本語
発売日:2015/7/31
著書:筒井美希
価格:¥2,160

著者、筒井美希のプロフィール


    武蔵野美術大学デザイン情報学科卒業後、2006年(株)アレフ・ゼロ(現・コンセント)入社。雑誌・ムック・書籍・広報誌・学校案内・Webサイトなど、幅広くアートディレクション/デザインを手がける。2014年、撮影ディレクションを担当した『立教大学 大学案内/大学院案内』が「APAアワード2014」広告作品部門に入賞。 2015年7月『なるほどデザイン 目で見て楽しむデザインの新しい本。』をMdNより刊行。

参考:なるほどデザインHP 著者について より



他にも、「花王 AEM 導入支援プロジェクト」のガイドライン制作担当やデザイン会社がつくった研修制度「コンセントデザインスクール」の運営をしていたり、活動はさまざまです。


『なるほどデザイン』の要約2つ


この本に書かれている2つのポイントをまとめました。


ひとつずつ解説していきます。



「デザインをする」ための6つのステップ


デザインをするには、6つのステップがあります。

    ①図解とラフ
    ②方向性を決める
    ③骨格を決める
    ④キャラを立たせる
    ⑤足し算と引き算
    ⑥ブラッシュアップ


これらの6つを抑えれば、デザインをすることができます。

①図解とラフでは、デザインしたいことが整理できているか確認するためにラフを作成します。


②方向性を決めるでは、構造を決めます。たとえば、写真配置を左にそろえるのか、中央に集めるのか、ランダムに配置するのか、どの方向性にするか決めます。


③骨格を決めるでは、言葉、文字がなくても伝わる配置を意識する。


④キャラを立たせるでは、文字の書体、写真の配置に個性を出すことでひとつひとつの印象がガラリと変えます。


⑤足し算と引き算では、タイトルを目立たせたり、背景の色を変えたり、箇条書きの番号に色を足したり、全体のバランスを足し引きして整えます。


⑥ブラッシュアップでは、文字を加工したり、写真の周りにフチをつけたりと細かな部分をデザインしていきます。


これら6つを意識するだけで、全体的にまとまりのあるデザインをつくることができます。


デザインのコツは?デザイナーから学ぶ6つの道具とは!?


続いて、デザインをする上で知っておくといい6つのテクニックがあります。


それぞれ紹介していきます。



  • ダイジ度天秤
  • スポットライト
  • 擬人化力
  • 連想力
  • 翻訳機
  • 虫めがね


ダイジ度天秤


伝えたい要素が多すぎて、ごちゃごちゃしちゃうことを避けるために伝えたいことの取捨選択をしましょう。


【取捨選択するための3つのステップ】
①伝えたいことの数を絞る。
②同時に実現できない要素は天秤にかけ優先順位をつける
③ダイジなほうを強調するため、サイズや色を調整する

スポットライト


「主役」が脇役に埋もれてしまわないようにスポットライトを当てます。

読み手の目線が重要な場所に行くようにデザインをする必要があります。


【ライトを当てるための3つのステップ】
①いつもの数倍離れた場所からどう感じるか見てみる
②主役にスポットが行かなかったら、何らかの形で当ててみる
③もう一度離れた場所から見てみる

擬人化力


要素をただ並べただけだと、まとまっているけどなんか微妙と感じるときはガヤガヤさせてみよう!


「ドレスアップした女性」「すっぴんの女性」「メイクを濃くした女性」それぞれ違うタイプを並べるのもデザインのひとつです。

連想力


テーマを出して、それに連想される言葉やモノをたくさん出してみる。どんなカタチ?色?匂い?などなど。思いつくものを並べていくと方向性が見えてきます。


【連想力を導くための3つのステップ】
言葉の連想…コンセプトから連想される言葉やモチーフを書き出す。
イメージを連想写真を眺めたり、その場所に行ったり、イメージに浸る。
ヒントを引き出す…実際に取り入れられそうな色やカタチを引き出す。

翻訳機


コミュニケーション方法は2種類あります。


一つ目は会話、文章で伝えるなどの言語コミュニケーション


二つ目は顔の表情・視線・身振りなどの非言語的コミュニケーション


言葉/非言語のどちらを選ぶかで大きくデザインは変わってきます。


【翻訳する3つのステップ】
要素を並べる…要素を並べて、「翻訳」できそうなポイントを見つける
非言語に翻訳同じ内容でも表現を変えると印象も変わる
バランスを調整…言語と非言語の適切なバランスで

虫めがね


デザインのクオリティを決めるための最終兵器です。


1つ目は、「視覚の解像度を上げる」色やカタチに対しての見方を細かく見ていくほどクオリティは上がります。


2つ目は、「神は細部を宿る」細部をおろそかにしていては、全体の美しさは得られません。


3つ目は、「見た目で考える」。人間が起こす錯覚や見え方のズレをなくすことが重要。

この本を読んで得られたこと


続いて、この本を読んで「何が得られたのか?」解説していきます。

書体で印象がガラリと変わる


『なるほどデザイン』P.68,69より



同じ言葉でも書体(フォント)を変えるだけで「満面の笑顔での挨拶」「か弱い挨拶」「応援団長の挨拶」などそれぞれ違う声色で聞こえてきますね。


吹き出しで表現しているブログ記事を見かけますが、このようにフォントを変えてあげるだけで見せ方は変わってきます。


ブログの例だと、「悩んでいる場面」「ギモンを解決した場面」「解説している場面」それぞれの場面が想定されます。


フォントでユーザの気持ちを表現してあげると、より説得力が伝わるでしょう。



色は五感に訴えかけることができる


『なるほどデザイン』P.206,207より



上の写真のように色は「味覚」「嗅覚」などの五感に訴えることでできます。


もし、コンビニのペットボトルのラベルが全て真っ黒だったらぱっと見でどんな商品かわかりませんよね?


この場合、ひとつひとつ手にとって商品を知る必要があります。


例えは違いますが、このような手間を省くために、書き手(ブロガー)はサイト訪問がひとめで分かるような記事を書くことがユーザ目線がわかっていることになります。



集計するのに必要な「グラフ」を使ったデザインが学べる


『なるほどデザイン』P.254,255より



データを比較するときには、大きく4つのグラフを使います。


    円グラフ…割合をだすとき
    横棒グラフ…項目の大小をだすとき
    縦棒グラフ…時系列の増減をだすとき
    折れ線グラフ…分布をだすとき


この4つを覚えておけば、分かりやすいブログ記事を書けるでしょう。


色も大事で上の写真のように薄い色を使ってあげると内容が入ってきやすいです。




最後に冒頭でも伝えましたが、このような悩みを抱えている人にぜひ読んでほしい本となっています。

  • 複数の画像の配置が苦手な人
  • 色で目立たせる方法を知りたい人
  • 最適な文字のフォントを選び方が分からない人
  • 見やすいグラフの作り方を知りたい人


デザインの基礎を知っているだけで、ブログ以外の場所にも応用することができます。


見やすいサイトを運営するのに相応しい1冊をなっています。





関連記事:ブログ開設する前に読むべき本5選【本嫌いでもサクサク読める】
最新情報をチェックしよう!