デザインの錯視調整もっと知りたい
寄り目にすると中央のマークが少し浮かんで見えます
お久しぶりでっす！サイです元気です＾＾
デザインの勉強してて、ずっと気になっていることがあるのです。
それはデザインの錯視調整についてです。
- 錯視補正ってなあに
- そもそもなぜ錯視調整が必要なのか
- デザインの錯視調整(ウェブサイト)
- 一般的な錯視の例・錯視にまつわる広告
- デザインの錯視にまつわる書籍
- デザインの錯視にまつわる書籍？海外版(タイプフェイス)
- というわけで...
錯視補正ってなあに
Is this a joke, Google? pic.twitter.com/qrL8U2Vrhw
— Give Me Internet (@GiveMeInternet) September 25, 2017
『Google、マジで？w』
というつぶやきと共に投稿されたこの画像。Twitterをやっているデザイナーさんならこれを見たことがあるかもしれません。
でもこれはデザイン上での錯視調整(視覚補正)を施されたもので、人の目が勝手に引き起こす錯覚を調整したものです。
TLに流れてきたGoogleのロゴの視覚補正の話、実際に作ってみるとおかしいってわかるね。 pic.twitter.com/6GE6HlaQua
— Toshihide Miyata (@cr_market) September 27, 2017
ちなみにこのGoogleのロゴの場合は「数字上の真円は横に伸びて見える」という錯覚で、要はちょっとスリムにしたほうが綺麗な丸に見えるよーっていう補正をしています。
(この一件、まとめのページがあるので見てみると結構面白いですよ！)
---
そもそもなぜ錯視調整が必要なのか
それはロゴを見たときの微細な違和感を解消するためです。
(合ってる？断言したわりにちょっと不安)
それこそ「神は細部に宿る」の世界だと思うのですが、たとえばロゴデザインの場合『ロゴ＝企業の顔』です。なので、そのロゴに違和感を感じたときのモヤっと感って企業イメージに直結するんですよね。
特に広告とかでもそうで、残念なデザインの広告出してる会社って、残念なイメージ抱いちゃうことありませんか？あれがロゴデザインでも起きる可能性があるので、そういう可能性はなるべく排除していきましょうっていうのが錯視調整だと思います。
なんていうか、外から帰ってきて鏡見て、歯に青のりついてたらへこみますよね。友達と会ってたりとか、仕事だった場合は尚更だと思います。
それだったら、出かける前にちゃんと鏡を確認する(ロゴを世に出す前に違和感を調整する)のが良いですよねって話ry
(自分でも例えがわかんなくなってきたのでこれ貼って逃げます)
それで『デザインの錯視調整もっと知りたい！』と思ってググったのをまとめてみましたので、まずはウェブサイトからご紹介していきます＾＾
---
デザインの錯視調整(ウェブサイト)
1. デザイナーが考慮すべき「錯視」のあれこれ
Designer’s Online Magazine「Swings」さんの記事です。
「錯視ってなに？」からの説明と、図形としての錯視の説明、そしてデザイン上で起こる錯視についても触れていて、シンプルかつ分かりやすいページです。
https://bulan.co/swings/the_illusion_in_the_design/
2. デザインは奥が深い！目の錯覚を効果的に使ったUI、ロゴ、イラスト、文字組みのデザインテクニック
デザイン系サイトで有名なコリスさんの記事です。
ほかにも様々な錯視について触れているのですが、gifアニメで紹介していてとてもわかりやすかったです！
3. デザインの視覚調整 ― 人間の認知に適合するデザインのために
リクルートが運営している「POSTD」さんの記事。
こちらはLuke Jonesさんというデザイナーさんの記事の翻訳で、錯視の説明に加え、技術的な要素についても述べられています。
記事の最後に『たとえコンピュータが逆のことを言っても、デザイナーを信じるべきなのです』という言葉に力強さを感じました。
※Luke Jonesさんの元サイトはこちら
---
続きまして、一般的な錯視についてです。
そして、それを応用した広告についてもまとめてみました。
実際検索するとこの図形の錯視がヒット数多いのですが、その中でもデザインに活かせそうなものや、参考になりそうなサイトをご紹介します。
一般的な錯視の例・錯視にまつわる広告
1. 錯視のカタログ
世間でよく言われている一般的な錯視についてです。
錯視の数！量！！豊富！！！素晴らしいです。
ちゃんと勉強したら強みになりそう。
http://www.psy.ritsumei.ac.jp/~akitaoka/catalog.html
2. “目の錯覚”を応用した世界のクリエイティブな広告15選
こういう系の広告、トンチが効いてて面白いですよね！
4番目の新聞広告のデザインが特に好きです。
3. 思わず二度見する！世界のアイデア看板広告40選（後編）
一番最後の広告、ほんとに静止画なのかと疑うくらいグニャグニャ動いてて酔いそうになりました(笑)
でもこれ機会があったら作ってみたくなる錯視ですね。しゅご...
---
ウェブサイトの紹介は以上です！
次は本の紹介いきまーす！
デザインの錯視にまつわる書籍
1. How to Design いちばん面白いデザインの教科書
錯視について書かれているのは数ページですが、ほかにも空間を利用した要素の見せ方や、ゲシュタルト(要素の集合体)におけるデザインの心理学・法則という根本的な部分についても触れられています。
というかデザイン情報満載の本なので、もし本屋さんに行ったら一度手に取って見てほしいです。デザイン本の中でも優れている、良書のひとつだと思います。
2. ロゴデザインの現場 事例で学ぶデザイン技法としてのブランディング
実際の事業を元に、どのようにロゴデザインが行われたかというプロセスの本です。
ロゴの成り立ちがわかるので読み物としても面白いですし、特に佐藤浩二さんのパートではロゴの仕上げにまつわる繊細な微調整が多数載せられています。
---
で、
ここまでくると「まとまってる本ないの？」って思うじゃないですか...
で、
まとまってる本、日本にないんですよね。
じゃあさ、
海外にはないのって思うじゃないですか。
探しました！！！！
だけど...
---
それっぽいのをとりあえず2冊みつけました！
でもこれさ、錯視調整っていうよりもタイプフェイスの本じゃない...？
まあでも突き詰めるとタイプフェイスには行き当たるけれども...うーん
タイプフェースとは
書体。文字のデザインの種類のこと。フォントと同じ意味で使われることが多いが、正確にはタイプフェース（デザイン）とスタイル（太さや斜体）を含めたものをフォントという。
(コトバンクより引用)
デザインの錯視にまつわる書籍？海外版(タイプフェイス)
1. Designing Type
2006年に発売された本。
サンプル画像みるとなかなか良さそう。
っていうか普通におもしろそう。
(pt数とか書いてる...！しゅ、しゅげー...！)
※中身のサンプルはリンク先の画像からご覧ください
Designing Type | Yale University Press
※日本のAmazonで購入できます！
2. How to Create Typefaces
こちらのレビューを参考にさせていただきました！
JESSICAさんが本の中身を載せてくれてるんですけど、見てるとわくわくします。
Font for the Dayさんのサイト
typeface designer JESSICA MCCARTYさんのサイト
(本の中身すこし見れます。ありがたや！)
Book Review: How to Create Typefaces, from Sketch to Screen | Alphabettes
この本はもうスペイン版Amazonからじゃないと日本に発送してもらえないみたいなので、一応探してる方のためにリンク貼りますね！
海外なので、支払いに使えるカードも限られるのでご注意を。
スペイン版Amazonのリンク
一応カード情報入れるときの和訳サイトも貼り貼り...
(自動翻訳の変換ミスってたので助かりました！)
購入考えてる方は値段が気になると思うのですが、ちなみに現在の料金は28,00ユーロになってます。送料は14,00ユーロ。
日本円に換算すると、送料込みで5,693円でした。(2018年7月現在)
---
というわけで...
デザインの錯視で参考になりそうなものをまとめてみたのですが、できれば一冊の本にしてほしいです...orz
どうか、どうか、世のデザイナー様方...
デザインの錯視の本を出してください...！！(泣)
