森のコーディング森のコーディング2013年06月マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。6月19アメリカのスマホアプリの円グラデーション背景ってオシャレだよなーを分析したカテゴリ:デザインFireworksスマホサイトのデザインをいろいろ探していて、やっぱりアメリカのアプリとかおしゃれに見えるものがあるなーと思った。おしゃれに見える要素の1つとして円グラデーションに注目したい。Kindleのアプリ中心が少し薄いグレーで、円形にグラデーションしてて、外側にいくにつれて濃いグレーになる。リアルにあるものって、よーく見てみると、光の当たり方によって、こういうふうに円形グラデーションになっているケースって多いと思う。この技を「さりげな円グラデ」と名づけたい。今年の夏は、花柄ワンピとさりげな円グラデで決まり!30代女子のガーリーサマー作戦!cancan7月号みたいなね。この「さり円グラ」を学ぼうと思って、Fireworksでトレースしてみた。1グラデーションの距離もっともきれいなのは、中央から始まって、角までめいっぱいグラデーションの距離を伸ばす、というもの。これよりも短いと、あからさまに円グラデーションなのが目立って、「みえみえ円グラデ」になってしまい、この夏モテない。結局この色の差をどれくらいにするのかというのが一番大事だろうなと思い、グラデーションのはじっこの色をそれぞれとってみた。大体これくらいの差が良いということ。わかりやすくすると、#555と#333くらいの差。ゾロ目色番号でいえば2つ分くらいの差、と覚えとくと良さそう。Kindleの例はモノトーンだったので、もう一つ別のパターンを見てみよう。先日見つけた、完全にオシャレな湿度計アプリ。完全にオシャレと言わざるをえない。同様にトレースしてみた。今回は薄いところが#FBFBFBで、濃いところが#E1DACFほぼ白の中心から、ベージュ方面にグラデーションしていく。色(色相?)が変わっていくので判断がしずらいと思って、カラーパレットで2つの色を見てみた。右側にある縦棒の部分。これは確か、明度を表していたと思う。明度の差は1cmくらい(アバウトだな・・)この差は、グレースケールでいうと、#EEEEEEと#DDDDDDくらいの差だった。先程のKindleの時とうってかわって、ゾロ目の色番号で1つぶんの差だ。暗い色にくらべて、明るい色のほうが差がはっきりするため、色番号的には差が少なくて良いということかもしれない、そうに違いない、絶対だ。色相は黄色の方面に2mmくらいちょびっと寄せている。試してみたところ、黄色方面じゃなくても、青でも緑でもそれっぽくかっこよくなった。ポイントは2mmくらい(超アバウトだな・・)動かすってこと。動かせばOKと覚えよう。「さりげな円グラデ」の作り方!◎中心から角までめいっぱいグラデーションの距離をとる!◎色の差は、ゾロ目色番号にして1つ分、色相はカラーパレットで2mmくらいずらした色!◎濃い色の時は、ゾロ目色番号で2つ分くらい明度の差をつけてOK!2013年06月19日09:45tacshockコメント:0トラックバック:06月4「HTML5の今とこれから」スライドをアップしましたカテゴリ:HTML53月に勉強会でHTML5に関する発表をしました。その発表スライドに文章をつけて、スライドだけで読めるようにしたものをスライドシェアにアップしました。長い英単語をいれるとtableの中をつきぬけちゃうイラレでスライスを速くするスクリプト。bluetoothヘッドセット1時間1円で暖かい。夏のPC仕事のおともに冷えピタ。クールヘッドで脳のスピードがあがります。お仕事のご依頼・お問い合わせはこちらコーディングのお仕事が得意です。