デザインをする上で、遠近法が助けになることは少なくありません。 
遠近法といえば、一点透視図法や二点透視図法で有名な幾何学遠近法が真っ先に思い浮かぶ方は多いと思いますが、 
遠近法は他にもいろいろ存在します。
いろいろな遠近法について、<a href="http://blog.livedoor.jp/kokinora/archives/1008065272.html" target="_blank">説明くださっているサイト</a>がありましたので、 
そちらを参考に、遠近法を試してみました。
&nbsp;
<h2>重畳遠近法</h2>
<a href="/uploads-archive/2016/03/d548bb9e050520e0a0808c6b22859773.jpg" rel="attachment wp-att-9845"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9845" src="/uploads-archive/2016/03/d548bb9e050520e0a0808c6b22859773.jpg" alt="重畳遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/d548bb9e050520e0a0808c6b22859773.jpg 656w, /uploads-archive/2016/03/d548bb9e050520e0a0808c6b22859773-300x220.jpg 300w, /uploads-archive/2016/03/d548bb9e050520e0a0808c6b22859773-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
最もシンプルな遠近法です。 
２つ以上のものが重なっているとき、前よりも後ろの物のほうが遠くに見えるという遠近法です。
<h2>上下遠近法</h2>
<a href="/uploads-archive/2016/03/5c5472227ef85d54bb7f42aed50523e2.jpg" rel="attachment wp-att-9847"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9847" src="/uploads-archive/2016/03/5c5472227ef85d54bb7f42aed50523e2.jpg" alt="上下遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/5c5472227ef85d54bb7f42aed50523e2.jpg 656w, /uploads-archive/2016/03/5c5472227ef85d54bb7f42aed50523e2-300x220.jpg 300w, /uploads-archive/2016/03/5c5472227ef85d54bb7f42aed50523e2-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
水平線に向かって、上にあるものほど遠くに見えるという遠近法です。
<h2>大小遠近法</h2>
<a href="/uploads-archive/2016/03/4455c8c2061f88082884efe5b4ddd993.jpg" rel="attachment wp-att-9849"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9849" src="/uploads-archive/2016/03/4455c8c2061f88082884efe5b4ddd993.jpg" alt="大小遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/4455c8c2061f88082884efe5b4ddd993.jpg 656w, /uploads-archive/2016/03/4455c8c2061f88082884efe5b4ddd993-300x220.jpg 300w, /uploads-archive/2016/03/4455c8c2061f88082884efe5b4ddd993-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
大きなものほど近く、小さなものほど遠くに見えるという遠近法です。
<h2>空気遠近法</h2>
<a href="/uploads-archive/2016/03/57ff4cc0370ffed9deaf284cc22ba0f2.jpg" rel="attachment wp-att-9844"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9844" src="/uploads-archive/2016/03/57ff4cc0370ffed9deaf284cc22ba0f2.jpg" alt="空気遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/57ff4cc0370ffed9deaf284cc22ba0f2.jpg 656w, /uploads-archive/2016/03/57ff4cc0370ffed9deaf284cc22ba0f2-300x220.jpg 300w, /uploads-archive/2016/03/57ff4cc0370ffed9deaf284cc22ba0f2-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
遠くのものは大気の影響で霞んでいくことから、 
彩度、コントラストが弱いものほど遠くに見えるという遠近法です。
<h2>色彩遠近法</h2>
<a href="/uploads-archive/2016/03/891ac6b6a9d43baad2361e08c6541c42.jpg" rel="attachment wp-att-9848"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9848" src="/uploads-archive/2016/03/891ac6b6a9d43baad2361e08c6541c42.jpg" alt="色彩遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/891ac6b6a9d43baad2361e08c6541c42.jpg 656w, /uploads-archive/2016/03/891ac6b6a9d43baad2361e08c6541c42-300x220.jpg 300w, /uploads-archive/2016/03/891ac6b6a9d43baad2361e08c6541c42-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
色彩が寒色系に近づくほど遠く、暖色系に近づくほど近くに見えるという遠近法です。
<h2>消失遠近法</h2>
<a href="/uploads-archive/2016/03/db2bbcef7b5fbd7a6d2940b36cc645d1.jpg" rel="attachment wp-att-9846"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9846" src="/uploads-archive/2016/03/db2bbcef7b5fbd7a6d2940b36cc645d1.jpg" alt="消失遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/db2bbcef7b5fbd7a6d2940b36cc645d1.jpg 656w, /uploads-archive/2016/03/db2bbcef7b5fbd7a6d2940b36cc645d1-300x220.jpg 300w, /uploads-archive/2016/03/db2bbcef7b5fbd7a6d2940b36cc645d1-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
焦点に由来する遠近法で、 
焦点がぼやけたところほど遠くに見えるという遠近法です。
<h2>幾何学遠近法(透視図法)</h2>
<a href="/uploads-archive/2016/03/f8c7578620dd360fa20c8aa3e3868548.jpg" rel="attachment wp-att-9843"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9843" src="/uploads-archive/2016/03/f8c7578620dd360fa20c8aa3e3868548.jpg" alt="幾何学遠近法(透視図法)" width="656" height="480" srcset="/uploads-archive/2016/03/f8c7578620dd360fa20c8aa3e3868548.jpg 656w, /uploads-archive/2016/03/f8c7578620dd360fa20c8aa3e3868548-300x220.jpg 300w, /uploads-archive/2016/03/f8c7578620dd360fa20c8aa3e3868548-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
<a href="/uploads-archive/2016/03/9cae0087df9d97d3d1bcf40d1a1b9b23-1.jpg" rel="attachment wp-att-9864"><img decoding="async" class="alignnone wp-image-9890 size-full" src="/uploads-archive/2016/03/9cae0087df9d97d3d1bcf40d1a1b9b23-1.jpg" alt="" width="100%" srcset="/uploads-archive/2016/03/9cae0087df9d97d3d1bcf40d1a1b9b23-1.jpg 656w, /uploads-archive/2016/03/9cae0087df9d97d3d1bcf40d1a1b9b23-1-300x220.jpg 300w, /uploads-archive/2016/03/9cae0087df9d97d3d1bcf40d1a1b9b23-1-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
一番有名な遠近法ですが、一番難易度の高い遠近法です。 
消失点に近いものほど小さく、遠く見えるというもので、 
一点透視図法、二点透視図法、三点透視図法などがあります。
&nbsp;
思っていた以上に多くの遠近法があることを知ることができました。 
必要に応じて使い分けたり、デザインのヒントにしていきたいです。
<h2>参考サイト</h2>
<a class="link" href="http://blog.livedoor.jp/kokinora/archives/1008065272.html" target="_blank">遠近法について知っておこう ー概要ー : ノラの絵画の時間</a>

small_db2bbcef7b5fbd7a6d2940b36cc645d1.jpg

thumbnail_db2bbcef7b5fbd7a6d2940b36cc645d1.jpg

db2bbcef7b5fbd7a6d2940b36cc645d1.jpg

いろんな遠近法

デザインでイラストを入れたり、絵を描いたりするとき、 
質感を出来るだけ短時間で出すことが求められる機会は多いと思います。
この質感を出す上で、一つのポイントとなることがあるのが、 
目が見ている色と、脳が見ている色にはズレが出てくることがあることを意識することです。
今回はその中でも影と色の関係についての、基本的な部分についてご紹介いたします。
&nbsp;
<a href="/uploads-archive/2016/03/shadow-color_2.jpg" rel="attachment wp-att-9782"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9782" src="/uploads-archive/2016/03/shadow-color_2.jpg" alt="shadow-color_2" width="656" height="480" srcset="/uploads-archive/2016/03/shadow-color_2.jpg 656w, /uploads-archive/2016/03/shadow-color_2-300x220.jpg 300w, /uploads-archive/2016/03/shadow-color_2-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
↑こちらのいらすとの、下にある白黒のチェックですが、 
円柱の影になっている箇所は、実際には↓のように、影になっていない黒の部分よりも暗い色なのですが、 
白として認識できると思います。
<a href="/uploads-archive/2016/03/shadow-color.jpg" rel="attachment wp-att-9783"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9783" src="/uploads-archive/2016/03/shadow-color.jpg" alt="shadow-color" width="656" height="480" srcset="/uploads-archive/2016/03/shadow-color.jpg 656w, /uploads-archive/2016/03/shadow-color-300x220.jpg 300w, /uploads-archive/2016/03/shadow-color-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
実際は暗い色なのですが、 
影と色の関係から、脳が再処理を行ってくれるため、 
影になった部分も白としてみることができます。
&nbsp;
もうひとつですが、
<a href="/uploads-archive/2016/03/shadow-color02.jpg" rel="attachment wp-att-9785"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9785" src="/uploads-archive/2016/03/shadow-color02.jpg" alt="shadow-color02" width="656" height="480" srcset="/uploads-archive/2016/03/shadow-color02.jpg 656w, /uploads-archive/2016/03/shadow-color02-300x220.jpg 300w, /uploads-archive/2016/03/shadow-color02-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
こちらのような立方体があった場合、 
一つ一つの面が一色で構成されていると見ることができます。
しかし、実際には下のイラストのように床からの反射光で、側面はグラデーションになっています。
<a href="/uploads-archive/2016/03/shadow-color02_2-1.jpg" rel="attachment wp-att-9802"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9802" src="/uploads-archive/2016/03/shadow-color02_2-1.jpg" alt="shadow-color02_2" width="656" height="480" srcset="/uploads-archive/2016/03/shadow-color02_2-1.jpg 656w, /uploads-archive/2016/03/shadow-color02_2-1-300x220.jpg 300w, /uploads-archive/2016/03/shadow-color02_2-1-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
しかし、脳はこの反射光を省いた状態を計算して、 
一面が一色になっていると認識します。
日常で生活する場合、 
この脳の働きが、色や影の実際の状態を知る手助けになりますが、
デザインをしたり絵を描いたりする場合は、 
脳が省いた情報を再現することが、質感を高める場合が多くなります。
こちらのことを意識することで、 
作品の作り込みやアイディアを増やすヒントにしていきたいです。
&nbsp;
<h2>参考文献</h2>
<a class="link" href="http://www.amazon.co.jp/dp/4862461530" target="_blank">カラー&amp;ライト ~リアリズムのための色彩と光の描き方 2012/1/30 ジェームス・ガーニー(James Gurney) (著)</a>

目が見る色と頭が見る色

<a href="http://usepanda.com/">Panda</a>  is the fastest way to get your daily design inspiration and news. This website (or Chrome extension, as you prefer) helps you keep up with industry news and inspiration from a variety of sources in one interface. From the moment you installed it, Panda is going to appear every time you open a new tab.
It can likely fit well with Web Workers of all stripes, but it is probably more oriented to front-end designers.
&nbsp;
<a href="/uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.10.28.png"><img decoding="async" loading="lazy" class="alignnone wp-image-5899 " src="/uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.10.28-1024x549.png" alt="Panda" width="621" height="333" srcset="/uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.10.28-1024x549.png 1024w, /uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.10.28-300x160.png 300w, /uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.10.28-228x122.png 228w" sizes="(max-width: 621px) 100vw, 621px" /></a>
On the left hand side of the interface we have Panda’s news feeds playing the latest and most popular info from Hacker News, Designers News, Growth Hackers among others (classified by popular or latest).
On the right you can get some visual inspiration, featuring acclaimed sites like : <a href="http://www.awwwards.com/">Awwwards</a> , <a href="https://dribbble.com/">Dribbble</a> and <a href="https://www.behance.net/">Behance</a> .
<a href="/uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.54.43.png"><img decoding="async" loading="lazy" class="alignnone wp-image-5903 " src="/uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.54.43-1024x546.png" alt="Panda" width="619" height="330" srcset="/uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.54.43-1024x546.png 1024w, /uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.54.43-300x160.png 300w, /uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.54.43-228x121.png 228w" sizes="(max-width: 619px) 100vw, 619px" /></a>
&nbsp;
The overall goal is to filter the content from around the web and present it nicely, without having to click around to countless websites. Never miss anything, again.
&nbsp;
Panda doesn’t allow users to submit their own sources. Instead, co-founder William Channer, explains that the focus is on quality not customization. By sourcing sites where the community has already voted on what’s on trend.
&nbsp;
Panda is nicely done and is probably worth a bookmark.
&nbsp;

PANDA: Relaxed Buzzfeed for Web Design

I have gathered together some interesting tools, that i found out to be really useful when it comes to get an overview of the style guide of other great websites.
<a href="http://www.wirify.com">Wirify</a>
<a href="/uploads-archive/2014/08/Wirify.png"><img decoding="async" loading="lazy" class="alignnone wp-image-5408" alt="Wirify" src="/uploads-archive/2014/08/Wirify-300x173.png" width="400" height="273" /></a>
The first tool will help you to see the internal structure of a website, to get inspired by the layouts of other well designed sites, turning any website you like to a wireframe, with just one click.
I would recommend to wait until the whole page is completely loaded before you attempt to “wirify” it. To return to the original page simply click anywhere on the wireframe.
The best way to keep the wireframe and use it afterwards is to save the whole page as an image, using a browser add-on or extension, like the following ones:
<ul>
<li><a title="Download Google Chrome Screen Capture extension by Google" href="https://chrome.google.com/webstore/detail/cpngackimfmofbokmjmljamhdncknpmg"> Screen Capture extension</a> for Google Chrome</li>
</ul>
&nbsp;
<ul>
<li><a title="Download Screengrab Firefox Add-on by Andy M" href="https://addons.mozilla.org/en-US/firefox/addon/1146/"> Screengrab add-on</a> for Firefox.</li>
</ul>
&nbsp;
Check how Wirify works in this video:
<iframe loading="lazy" width="500" height="375" src="http://www.youtube.com/embed/XgzPHFRx-xM?feature=oembed" frameborder="0" allowfullscreen></iframe>
 
<a href="http://stylifyme.com/">Stylifyme</a>
<a href="/uploads-archive/2014/08/Stylifyme.png"><img decoding="async" loading="lazy" class="alignnone wp-image-5409" alt="Stylifyme" src="/uploads-archive/2014/08/Stylifyme-300x186.png" width="400" height="286" /></a>
Stylifyme was created to help designers gain an overview of the style guide of a site, including colours, fonts, sizing and spacing. Just copy the link of any particular site you like, and simply paste it in Stylifyme site and you will get the results in a couple of seconds.
 
<a href="http://lokeshdhakar.com/projects/color-thief/">Color Thief</a> 
<a href="/uploads-archive/2014/08/Color-thief.png"><img decoding="async" loading="lazy" class="alignnone wp-image-5410" alt="Color thief" src="/uploads-archive/2014/08/Color-thief-300x221.png" width="400" height="321" /></a>
This simple tool helps you to grab the colour palette from an image.
Give it a try, scroll down the site and drag an image inside, Colour thief is going to reveal the dominant colour on top and the full colour palette.

Visual tools for web designers

先日、たまたまチケットを頂く機会があり 
熱々！東南アジアの現代美術 
<a href="http://www.yaf.or.jp/yma/jiu/2013/jungle/" target="_blank">http://www.yaf.or.jp/yma/jiu/2013/jungle/</a> 
に行ってきた。
正直特に興味があるわけでもなく、期待せず気まぐれで行ったのだが 
結構良かったので、出品作家のなかで良いなと思った方についてまとめてみた。
<h2>イー・イラン</h3>
<a href="/uploads-archive/2013/05/228871f243f12715ec67c9b2fd751504.jpg"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2280" alt="イー・イラン" src="/uploads-archive/2013/05/228871f243f12715ec67c9b2fd751504.jpg" width="656" height="425" srcset="/uploads-archive/2013/05/228871f243f12715ec67c9b2fd751504.jpg 656w, /uploads-archive/2013/05/228871f243f12715ec67c9b2fd751504-228x148.jpg 228w, /uploads-archive/2013/05/228871f243f12715ec67c9b2fd751504-300x194.jpg 300w" sizes="(max-width: 656px) 100vw, 656px" /></a>
作家のアイデンティティを表現した作品だそう。 
個人的には写実的なシュールレアリスムの延長のような感じがする中 
東南アジア独特の世界観が神秘的な印象を受けた。
<h2>ニェ・レイ</h3>
<a href="/uploads-archive/2013/05/f410d625b22c6b299c079890c5e0b9bb.jpg"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2283" alt="ニェ・レイ" src="/uploads-archive/2013/05/f410d625b22c6b299c079890c5e0b9bb.jpg" width="656" height="1024" srcset="/uploads-archive/2013/05/f410d625b22c6b299c079890c5e0b9bb.jpg 656w, /uploads-archive/2013/05/f410d625b22c6b299c079890c5e0b9bb-228x356.jpg 228w, /uploads-archive/2013/05/f410d625b22c6b299c079890c5e0b9bb-192x300.jpg 192w" sizes="(max-width: 656px) 100vw, 656px" /></a>
自国の混乱と作家の家庭環境を重ねあわせ、作家の心理状況を投影させた作品だそう。 
西洋的で高貴な雰囲気と、東南アジア的な雰囲気が新鮮な印象を受けた。
<h2>ロベルト・フェレオ</h3>
<a href="/uploads-archive/2013/05/ec679311c2ef026e94b92780182377e5.jpg"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2286" alt="ロベルト・フェレオ" src="/uploads-archive/2013/05/ec679311c2ef026e94b92780182377e5.jpg" width="656" height="450" srcset="/uploads-archive/2013/05/ec679311c2ef026e94b92780182377e5.jpg 656w, /uploads-archive/2013/05/ec679311c2ef026e94b92780182377e5-300x206.jpg 300w, /uploads-archive/2013/05/ec679311c2ef026e94b92780182377e5-228x156.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
神話や宗教的な物語を織り交ぜたテーマで構成されている。 
伝統的なモチーフを現代風にアレンジしており、これも単純な欧米的な現代観とは違った雰囲気を持つとても惹かれる作品だった。
<h2>ポクロン・アナディン</h3>
<a href="/uploads-archive/2013/05/7c72e03a78185973e13f529121360c61.jpeg"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2285" alt="ポクロン・アナディン" src="/uploads-archive/2013/05/7c72e03a78185973e13f529121360c61.jpeg" width="656" height="748" srcset="/uploads-archive/2013/05/7c72e03a78185973e13f529121360c61.jpeg 656w, /uploads-archive/2013/05/7c72e03a78185973e13f529121360c61-228x260.jpeg 228w, /uploads-archive/2013/05/7c72e03a78185973e13f529121360c61-263x300.jpeg 263w" sizes="(max-width: 656px) 100vw, 656px" /></a>
シリーズ作品。撮影地の風俗習慣が作品を通して伝わる作品。
<h2>スティーヴ・ティロナ</h3>
<a href="/uploads-archive/2013/05/b34995b4879614efce251e06917a5abb.jpg"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2282" alt="スティーヴ・ティロナ" src="/uploads-archive/2013/05/b34995b4879614efce251e06917a5abb.jpg" width="656" height="333" srcset="/uploads-archive/2013/05/b34995b4879614efce251e06917a5abb.jpg 656w, /uploads-archive/2013/05/b34995b4879614efce251e06917a5abb-228x116.jpg 228w, /uploads-archive/2013/05/b34995b4879614efce251e06917a5abb-300x152.jpg 300w" sizes="(max-width: 656px) 100vw, 656px" /></a>
有名らしい。皮肉感あふれるシリーズだった。 
色彩が豊富でポップアートのようだが風刺絵のように見えてならない。
<h2>シャノン・リー・キャッスルマン、フランク・カリャガン、フランシス・ン</h2>
<a href="/uploads-archive/2013/05/384910f0c19be54e11789393fc3b7d85.jpeg"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2284" alt="フランシス・ン" src="/uploads-archive/2013/05/384910f0c19be54e11789393fc3b7d85.jpeg" width="656" height="226" srcset="/uploads-archive/2013/05/384910f0c19be54e11789393fc3b7d85.jpeg 656w, /uploads-archive/2013/05/384910f0c19be54e11789393fc3b7d85-228x79.jpeg 228w, /uploads-archive/2013/05/384910f0c19be54e11789393fc3b7d85-300x103.jpeg 300w" sizes="(max-width: 656px) 100vw, 656px" /></a>
<a href="/uploads-archive/2013/05/b77f14f1babdbb73ed9385aee6bd83c0.jpg"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2281" alt="シャノン・リー・キャッスルマン" src="/uploads-archive/2013/05/b77f14f1babdbb73ed9385aee6bd83c0.jpg" width="656" height="500" srcset="/uploads-archive/2013/05/b77f14f1babdbb73ed9385aee6bd83c0.jpg 656w, /uploads-archive/2013/05/b77f14f1babdbb73ed9385aee6bd83c0-300x229.jpg 300w, /uploads-archive/2013/05/b77f14f1babdbb73ed9385aee6bd83c0-228x174.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
それぞれ写真の作品。 
急速に発展する東南アジア諸国の陰と陽を美しく切り取っており 
エネルギーが伝わってくる作品。
全体としては、内乱、民族問題、政治問題など、陰な要素と 
熱帯的でトロピカルな陽な部分が混在して独特な雰囲気を醸し出していることと 
東南アジアの伝統とグローバルで現代的な要素が入り混じり、新鮮な印象を受けた。
ほとんどの作家がwikipediaにも載っていないまだまだ知られざる領域だが 
今後も機会があれば注目して行きたいと思う、良い出会いだった。

Blogブログ

Articles

Contact Us