2013年06月

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

アメリカのスマホアプリの円グラデーション背景ってオシャレだよなーを分析した

スマホサイトのデザインをいろいろ探していて、やっぱりアメリカのアプリとかおしゃれに見えるものがあるなーと思った。

んで、おしゃれに見える要素の1つとして円グラデーションに注目したい。

たとえばKindleのアプリ
写真1
中心が少し薄いグレーで、円形にグラデーションしてて、外側にいくにつれて濃いグレーになる。

リアルにあるものって、よーく見てみると、光の当たり方によって、こういうふうに円形グラデーションになっているケースって多いと思う。

この技を「さりげな円グラデ」と名づけたい。 


今年の夏は、花柄ワンピとさりげな円グラデで決まり!
30代女子のガーリーサマー作戦!cancan7月号


みたいなね。
すいません脱線した。


 
この「さり円グラ」を学ぼうと思って、Fireworksでトレースしてみた。



①グラデーションの距離

06192もっともきれいなのは、中央から始まって、角までめいっぱいグラデーションの距離を伸ばす、というもの。

これよりも短いと、あからさまに円グラデーションなのが目立って、「みえみえ円グラデ」になってしまい、この夏モテない。

 













②グラデーションの色 

結局この色の差をどれくらいにするのかというのが一番大事だろうなと思い、グラデーションのはじっこの色をそれぞれとってみた。

 06191















うすいところが「#2B2B2B」
濃いところが「#535353」

大体これくらいの差が良いということ。

もっとわかりやすくすると、#555と#333くらいの差。
ゾロ目色番号でいえば2つ分くらいの差、と覚えとくと良さそう。





Kindleの例はモノトーンだったので、もう一つ別のパターンを見てみよう。


先日見つけた、完全にオシャレな湿度計アプリ。

320x480-75


このシックな色使い。

完全にオシャレと言わざるをえない。


早速同様にトレースしてみた。


06195


今回は薄いところが#FBFBFBで、濃いところが#E1DACF

ほぼ白の中心から、ベージュ方面にグラデーションしていく。

色(色相?)が変わっていくので判断がしずらいと思って、カラーパレットで2つの色を見てみた。

1633
































右側にある縦棒の部分。

これは確か、明度を表していたと思う。

明度の差は1cmくらい(アバウトだな・・)

この差は、グレースケールでいうと、#EEEEEEと#DDDDDDくらいの差だった。

先程のKindleの時とうってかわって、ゾロ目の色番号で1つぶんの差だ。

暗い色にくらべて、明るい色のほうが差がはっきりするため、色番号的には差が少なくて良いということかもしれない、そうに違いない、絶対だ。


そして、色相は黄色の方面に2mmくらいちょびっと寄せている。
試してみたところ、黄色方面じゃなくても、青でも緑でもそれっぽくかっこよくなった。
ポイントは2mmくらい(超アバウトだな・・)動かすってこと。

彩度とかも見たほうがよいのかもしれないが、ちょっとよくわかんないので、

色番号ゾロ目で1つ分くらいの明度の差をつけて、色相は2mmくらい 動かせばOKと覚えよう。



【結論】

「さりげな円グラデ」の作り方!

◎中心から角までめいっぱいグラデーションの距離をとる!
◎色の差は、ゾロ目色番号にして1つ分、色相はカラーパレットで2mmくらいずらした色!
◎濃い色の時は、ゾロ目色番号で2つ分くらい明度の差をつけてOK!



 

「HTML5の今とこれから」スライドをアップしました

3月に勉強会でHTML5に関する発表をしました。
その発表スライドに文章をつけて、スライドだけで読めるようにしたものを
スライドシェアにアップしました。


記事検索

リモキュー

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

https://twitter.com/tacshock
タグクラウド
QRコード
QRコード
  • ライブドアブログ