サイハテの手記

不定期ですが、よろしくね!

デザインの錯視調整もっと知りたい

f:id:sainomeproject:20180711162242j:plain
寄り目にすると中央のマークが少し浮かんで見えます

 

 

 

 






お久しぶりでっす!サイです元気です^^

 

 

 

デザインの勉強してて、ずっと気になっていることがあるのです。
それはデザインの錯視調整についてです。

 

 

 

 

 

 

 

 錯視補正ってなあに 

 

 

Google、マジで?w』

というつぶやきと共に投稿されたこの画像。Twitterをやっているデザイナーさんならこれを見たことがあるかもしれません。 

でもこれはデザイン上での錯視調整(視覚補正)を施されたもので、人の目が勝手に引き起こす錯覚を調整したものです。

 

 

 

 

 

 

 

 

ちなみにこのGoogleのロゴの場合は「数字上の真円は横に伸びて見える」という錯覚で、要はちょっとスリムにしたほうが綺麗な丸に見えるよーっていう補正をしています。

 

 

 

 

 

 

 

 

(この一件、まとめのページがあるので見てみると結構面白いですよ!)

 

togetter.com

 

 

 

 ---

 

 

そもそもなぜ錯視調整が必要なのか

 

 

それはロゴを見たときの微細な違和感を解消するためです。
(合ってる?断言したわりにちょっと不安)

 

 

それこそ「神は細部に宿る」の世界だと思うのですが、たとえばロゴデザインの場合『ロゴ=企業の顔』です。なので、そのロゴに違和感を感じたときのモヤっと感って企業イメージに直結するんですよね。

特に広告とかでもそうで、残念なデザインの広告出してる会社って、残念なイメージ抱いちゃうことありませんか?あれがロゴデザインでも起きる可能性があるので、そういう可能性はなるべく排除していきましょうっていうのが錯視調整だと思います。

 

 

なんていうか、外から帰ってきて鏡見て、歯に青のりついてたらへこみますよね。友達と会ってたりとか、仕事だった場合は尚更だと思います。

それだったら、出かける前にちゃんと鏡を確認する(ロゴを世に出す前に違和感を調整する)のが良いですよねって話ry

 

 

(自分でも例えがわかんなくなってきたのでこれ貼って逃げます)

 

www.youtube.com

 

 

 

 

 

 

 

 

 

それで『デザインの錯視調整もっと知りたい!』と思ってググったのをまとめてみましたので、まずはウェブサイトからご紹介していきます^^

 

 

 

---

 

 
デザインの錯視調整(ウェブサイト)

 

1. デザイナーが考慮すべき「錯視」のあれこれ


f:id:sainomeproject:20180711115157p:plain

 

Designer’s Online Magazine「Swings」さんの記事です。

「錯視ってなに?」からの説明と、図形としての錯視の説明、そしてデザイン上で起こる錯視についても触れていて、シンプルかつ分かりやすいページです。

https://bulan.co/swings/the_illusion_in_the_design/

 

 

 

 

 

 

 

 

 

 

2. デザインは奥が深い!目の錯覚を効果的に使ったUI、ロゴ、イラスト、文字組みのデザインテクニック

 

 

f:id:sainomeproject:20180711120310p:plain

 

 

デザイン系サイトで有名なコリスさんの記事です。

ほかにも様々な錯視について触れているのですが、gifアニメで紹介していてとてもわかりやすかったです!

 

 

coliss.com

 

 

 

 

 

 

 

 

3. デザインの視覚調整 ― 人間の認知に適合するデザインのために

 

 

f:id:sainomeproject:20180711121706p:plain

 

  

リクルートが運営している「POSTD」さんの記事。

こちらはLuke Jonesさんというデザイナーさんの記事の翻訳で、錯視の説明に加え、技術的な要素についても述べられています。

記事の最後に『たとえコンピュータが逆のことを言っても、デザイナーを信じるべきなのです』という言葉に力強さを感じました。

  

 

※Luke Jonesさんの元サイトはこちら

medium.com

 

 

 

 

 

--- 

 

 

 

続きまして、一般的な錯視についてです。
そして、それを応用した広告についてもまとめてみました。

実際検索するとこの図形の錯視がヒット数多いのですが、その中でもデザインに活かせそうなものや、参考になりそうなサイトをご紹介します。

 




一般的な錯視の例・錯視にまつわる広告

 

 

1. 錯視のカタログ

 

f:id:sainomeproject:20180711125040p:plain

 

 

世間でよく言われている一般的な錯視についてです。

錯視の数!量!!豊富!!!素晴らしいです。
ちゃんと勉強したら強みになりそう。

 

http://www.psy.ritsumei.ac.jp/~akitaoka/catalog.html

 

 

 

 

 

 

2. “目の錯覚”を応用した世界のクリエイティブな広告15選

 

adgang.jp

 

こういう系の広告、トンチが効いてて面白いですよね!
4番目の新聞広告のデザインが特に好きです。

 

 

 

 

 

  

3. 思わず二度見する!世界のアイデア看板広告40選(後編)

 

一番最後の広告、ほんとに静止画なのかと疑うくらいグニャグニャ動いてて酔いそうになりました(笑)
でもこれ機会があったら作ってみたくなる錯視ですね。しゅご...

 

idea-soken.com

 

 

 

 

---

 

 

ウェブサイトの紹介は以上です!
次は本の紹介いきまーす!

 

 

 

 デザインの錯視にまつわる書籍

 

 

1. How to Design いちばん面白いデザインの教科書

 

f:id:sainomeproject:20180711152242j:plain

  


錯視について書かれているのは数ページですが、ほかにも空間を利用した要素の見せ方や、ゲシュタルト(要素の集合体)におけるデザインの心理学・法則という根本的な部分についても触れられています。

というかデザイン情報満載の本なので、もし本屋さんに行ったら一度手に取って見てほしいです。デザイン本の中でも優れている、良書のひとつだと思います。

 

  

www.amazon.co.jp

 

 

 

 

 

 

 

 

2. ロゴデザインの現場 事例で学ぶデザイン技法としてのブランディング

 

 

f:id:sainomeproject:20180711152305j:plain

 

 

実際の事業を元に、どのようにロゴデザインが行われたかというプロセスの本です。
ロゴの成り立ちがわかるので読み物としても面白いですし、特に佐藤浩二さんのパートではロゴの仕上げにまつわる繊細な微調整が多数載せられています。

 

 

www.amazon.co.jp

 

 

 

 

 

 

---

 

 

 

 

で、

 

ここまでくると「まとまってる本ないの?」って思うじゃないですか...

 

 

 

 

 

 

 

 

 

 

で、

 

まとまってる本、日本にないんですよね。

 

 

 

 

 じゃあさ、

 

海外にはないのって思うじゃないですか。

 

 

 

 

 

探しました!!!!

 

 だけど...

 

 

 

 

---

 

 

 

それっぽいのをとりあえず2冊みつけました!
でもこれさ、錯視調整っていうよりもタイプフェイスの本じゃない...?
まあでも突き詰めるとタイプフェイスには行き当たるけれども...うーん

 

 

タイプフェースとは

書体。文字のデザインの種類のこと。フォントと同じ意味で使われることが多いが、正確にはタイプフェース(デザイン)とスタイル(太さや斜体)を含めたものをフォントという。
(コトバンクより引用)

 

 

 

 

 デザインの錯視にまつわる書籍?海外版(タイプフェイス)

 

 

 

 

 

1. Designing Type

 

f:id:sainomeproject:20180711145038j:plain

 

 

f:id:sainomeproject:20180711144128j:plain




2006年に発売された本。
サンプル画像みるとなかなか良さそう。
っていうか普通におもしろそう。

(pt数とか書いてる...!しゅ、しゅげー...!)

 

 

※中身のサンプルはリンク先の画像からご覧ください

Designing Type | Yale University Press

 

 

※日本のAmazonで購入できます!

https://www.amazon.co.jp/Designing-Type-Karen-Cheng/dp/0300111509/ref=sr_1_1?ie=UTF8&qid=1531273365&sr=8-1&keywords=Designing+Type

 

 

 

 

 

 

 

 

2. How to Create Typefaces

 

こちらのレビューを参考にさせていただきました!
JESSICAさんが本の中身を載せてくれてるんですけど、見てるとわくわくします。

 

 

Font for the Dayさんのサイト

fmstudio.jpn.org

 

 

typeface designer JESSICA MCCARTYさんのサイト
(本の中身すこし見れます。ありがたや!)

Book Review: How to Create Typefaces, from Sketch to Screen | Alphabettes

 

 

 

 

 

 


この本はもうスペイン版Amazonからじゃないと日本に発送してもらえないみたいなので、一応探してる方のためにリンク貼りますね!
海外なので、支払いに使えるカードも限られるのでご注意を。


スペイン版Amazonのリンク

www.amazon.es

 

 

一応カード情報入れるときの和訳サイトも貼り貼り...
(自動翻訳の変換ミスってたので助かりました!)

bbs.arukikata.co.jp

 

 

 

  

 

 

f:id:sainomeproject:20180711145829p:plain

購入考えてる方は値段が気になると思うのですが、ちなみに現在の料金は28,00ユーロになってます。送料は14,00ユーロ。
日本円に換算すると、送料込みで5,693円でした。(2018年7月現在)

 

 

 

---

 

というわけで...

 

デザインの錯視で参考になりそうなものをまとめてみたのですが、できれば一冊の本にしてほしいです...orz

 

 

どうか、どうか、世のデザイナー様方...

デザインの錯視の本を出してください...!!(泣)