フロントエンジニアにぜひ読んでもらいたい、グラフィックデザインに関する書籍のご紹介

やっはろー(= ゚ω ゚)ノ カヤックテックブログ2回目の登場、UIよりUXが優れた人間になりたいフロントエンジニアの町田と申します。 前回の「svg / canvas出力ができるbodymovinの紹介」は、好調な出だしで、現在「bodymovin」で検索すると４番目に表示されます。ご覧いただきありがとうございます。

さて、今回は「デザインについて」の記事です。 デザインと聞くと、専門分野じゃないと言って、身構える人が多くいます。 仕事上そのような態度で、デザイナーと接することはマイナスでしかありません。 ですが、何も知らないまま突っ込んでいくと、デザイナーとの泥仕合に発展する可能性もあります。

そのような人がデザイナーの方と対等に話し合えるようにしたい、デザイナーにCSSに基本ぐらいは知っておいてほしいのと同様に、デザイナー側もプログラマーにデザインの基本的なことを知ってほしいんじゃないかと思い、今回テックブログに書かせて頂きました。

書籍紹介の前にデザインの要素について

デザインの本を紹介する前に、デザインという概念はどのような要素に適用させるのか考え、羅列してみます。
・グラフィックデザイン
・webデザイン
・エディトリアルデザイン（タイポグラフィ）
・モーションデザイン（キネティック・タイポグラフィなど）
・タイポグラフィ（カリグラフィーなど）
・UIデザイン（インターフェイスデザイン、インタラクティブデザイン）
・UXデザイン
・その他、照明、ファッション,CGなど（今回はWEB上の表現に限らせて頂きます。 (○´―`)ゞ ﾎﾟﾘﾎﾟﾘ）

デザインとは具体的な問題を解決するために思考・概念の組み立てを行い、それを様々な媒体に応じて表現することと解される。
Wikipedia:デザイン

と説明されているように、これだけのデザインしなければならない問題を抱えているということです。
例えば、フォントにどのような問題があり、どのような解決方法があるのかみなさん考えて見てください。

・サンセリフ体とセリフ体どちらが読みやすいと思いますか？
・行間が広い場合、文字の大きさは小さいほうがいいですか？大きい方がいいですか？
・行長はどのくらい必要ですか？
・サンセリフ体を使用した場合、カーニングは広いほうがいいですか？

いろいろ問題がありますね。これらを解決するために、タイポグラフィの基本と概念があります。

他の要素も同じです。
オレンジに合う色は何色か？
ロゴデザインするときは、どうやって作るか？
なぜ、そういうレイアウトにしたのか？
同じく、基本と概念があります。

また、このような問題解決もコミュニケーションデザインという概念に包摂されます。
コミュニケーションデザインとは、最も広義に解釈した情報デザインの捉え方です。

デザインはセンスではなく、知識からしぼり出させるものです。 見やすさとはなにか、読みやすさとは何か、色彩とはなにか。デザインってなにか。 これを知ってるだけで、デザインの見方は変わってくると思います。

普段から手を動かし、日々アウトプットとインプットしているデザイナーに、テクニックやある種の個性的な美的感覚で、勝てるわけがありません。 偉そうにデザインのことを語ってる私も、デザイナーの感性を持ってはいません。 ですが、知識ならどうでしょう。理論や概念、合理性でデザイナーと対等に話すことができれば、デザインのレベルをみんなであげることができると思います。

これから紹介する本たちは、きっとあなたのクリエイティブ活動に役立つはずです。
一冊でもいいので、お手にとって読んで見てください。

※カヤックテックブログはアフィリエイトサイトではありません。

GRAPHIC DESIGN 2014

GRAPHIC DESIGN 2014 グラフィックデザイン 2014

まずデザインに興味を持ちましょう。 少し前のデザインアーカイブ本ですが、自分が、今まで見たアーカイブ本の中で１番オススメできるものです。 まず、表紙がいい。素敵。YOSHIROTTENさんというかたが担当しています。 中身も、商業デザインというより、アーティスティック寄りなのもいい。 アーカイブ本といえば、MdNやJAGDAの発行のものを持ってる方がいいですが、 若干、内輪な空気があるので、個人的にMdNやJAGDAのアーカイブ本は、あまり買わないようにしています。 本ではなく、behanceやPinterestを見るのもいいでしょう。

デザインのあれこれ　100 Keywords of Design – JAGDA REPORT

デザインのあれこれ 100 Keywords of Design: JAGDA REPORT (JAGDA REPORT Vol. 191)

JAGDA会員（日本グラフィックデザイナー協会）が意見や図も交えて解説するデザイン事典 現代のグラフィックデザインにおける重要な用語約100項目を紹介している本です。 大日本タイポ組合が書いた「模倣」の章は面白いです。

Design Rule Index デザイン、新・25+100の法則

Design Rule Index[第2版]― デザイン、新・25+100の法則

UI, UX, IA(情報アーキテクチャ) なんてことの前に、 基本として知っておくことが記載されています。 カテドラル効果、擬人化形状、３分の１法則など、面白い内容が盛り沢山です。 この本さえ読んでいれば、デザイナーとの話し合いで泥仕合にならないかも？しれないです。 この本、シリーズ化しており、150の法則とか、小型本にしたやつとかでています。

Detail In Typography

ディテール・イン・タイポグラフィ 読みやすい欧文組版のための基礎知識と考え方

タイポグラフィの入門書です。 欧文の本文組に対してのみですが、サッカードやカーニング(特にA,T,V,W,Y)、 １行あたり何文字が適正なのかなど、専門用語を交えて説明してあります。 「読みやすい」とはどういうことなのかを知ることできます。

Typographic Systems

Typographic Systems―美しい文字レイアウト、8つのシステム

こちらの本はタイポグラフィの応用書的な立ち位置です。 かなり奇抜な、文字組みや、レイアウトについて解説しています。 文字周りの表現レベルを上げたいデザイナーやUIエンジニアにオススメです。

100ｓビジュアルアイデア：カラー・コンビネーション

100ｓビジュアルアイデア：カラー・コンビネーション

前半は用語や色組の紹介、後半はより実践的な内容となっています。 サンプルを踏まえてしっかり解説してくれます。 この本を読んだあと、企業のロゴやポスターなどの色使いを意識して見てみましょう。 ルミネのポスターは、カラフルで、女性的な色使いが多かったり、 ユニクロの赤い色は、なぜあの赤い色なのか調べてみるのも面白いです。

UI GRAPHICS ―世界の成功事例から学ぶ、スマホ以降のインターフェイスデザイン

UI GRAPHICS ―世界の成功事例から学ぶ、スマホ以降のインターフェイスデザイン

文章を書いてるのは、有名なクリエイターばかりです。 フラットデザイン以降のスマホUIデザインについて、事例を紹介しながら解説している本です。 ある程度基礎知識があった方が理解度が深まる本です。

デザインのデザイン

デザインのデザイン

原研哉さんという、日本デザインセンターの代表取締、無印良品や、松屋銀座のディレクションをなさっている方が書いた書籍です。 この書籍は、デザインという概念が生まれた時代から現代のデザインへの変化をわかりやすく説明したデザインの本です。 こういったデザインの歴史をデザイン史といい、美大や芸大のデザイン学科では必須科目となっています。（だいたい、みんな講義中寝てますが…） 「デザインとは何か」という疑問にたいして、広く浅く解決してくれるのではないかと思います。 深く知りたい方は、美大、芸大の講義を聴講したり、めっちゃ分厚い本を読んでみてください。 書籍の中盤から、原研哉さんの携わったプロジェクトのことを書いており、デザイナーの考え、考え方に触れる事ができます。 昨今のクリエティブを痛烈にディスる言葉の数々に驚くでしょう。

・現在のデザインはテクノロジーがもたらす「新奇な果実」を社会にプレゼンテーションする役割を担わされ、「今日あるものを明日古く見せる」ことに力を発揮してしまっている。

・形や素材で驚かすのではなく、平凡に見える生活の隙間からしなやかで驚くべき発送を次々に取り出す独創性こそデザインである。

おまけ

ここから先は個人的に好きなものを紹介します。

ggg Books

デザイン業界を知るとスキなデザイナーが１人や２人できます。 亀倉雄策や田中一光を好きになるひとは多いと思います。 そんなデザイン開拓者の神様たちに、お布施を差し出すのもいいと思います。 ちなみに僕は、ソール・バスが好きです。

typographics ti:

日本タイポグラフィが発行してるめっちゃ薄い本です。 国内外のデザイン事情や紙、文字をテーマにした冊子です。 僕は大学生時代によく買ってました。

PARTNER フリーペーパー

全国の美大で配布されているフリーペーパーです。 企画、発行を全国の学生やっています。運営は株式会社モーフィングがしています。 僕は大学生時代に、DTPデザイナーとして所属していました。 ほかにもデザイン完成のフリーペーパーはあるので探して見てください。

Adobe Book 2016「CREATOR'S HINTS 26悩める美大生におくるクリエイター26人のつくるヒント」

Adobeが発行したフリーペーパーです。 全国の美術系の大学、専門学校で配布され、瞬く間に捌けたらしいです。 ちなみに僕このフリーペーパー持ってます。

Magic Visualizer

デザインと言うより、写真、映像向けの本です。 主にカラコレのはなしが中心となっています。 この本、実はコミケに出されていた本です。 コミケと聞くとえっちぃ本だと思う人が多いですが、そんな要素は一切ありません。かなり真面目です。

雑誌のデザイン特集

たまに、PENやBRUTUSなどでデザイン特集が組まれることがあります。 あとは、本の装丁デザイン特集や、デザイン事務所特集などもあります。

蔦屋書店

値段が高いと思ったらまず、蔦屋書店で立ち読みするのもありです。 蔦屋書店のデザインコーナーは充実度がかなり高い傾向があります。 モード学園コクーンタワーの本屋くらい充実してるかもしれないです（言い過ぎかも？） 気に入った本があったら買ってみましょう。

カヤックでは、デザインもなんとなくできちゃうエンジニアを募集しています！