私も少しですがこの「1pxのこだわり」を日頃のデザインで使えるようになってきたので、制作方法とともにちょっとまとめてみました。
引き出しのひとつとして、デザイン勉強中の方、参考にしてもらえるとうれしいです＾＾

デザイン上級者の方々にとっては当然のことだと思うのですが、
最近つくづく思うのが、「1pxで質感が全然変わるよなぁ～」ってとても感じます。

たった1pxでピリッとしまったり、見やすくなったり、しゅっとなったり、、、と、1pxをないがしろにしちゃいけないんですねー…

今回は、私がデザイン制作時よく参考にしている、
デザイン参考集、bookma!さんの中から、色んなサイトを調べてみました。

目次

• 仕切り線の1px
• 文字をキリッと見せるための1px
• 動きのある1px
• 1pxの枠

仕切り線の1px

最近よく見かけるナビゲーションのスタイルなのですが、まずはこちらのサイト。

iPhone&iPad APP COLLECTIONS

キレイですね～(*´ο`*)=3
なんか、「シュッ」てしてます。

このサイトのナビゲーション

ぐーーーーーっとアップにすると、
ナビの上下に白の1pxのボーダーが、そして各ナビゲーションの仕切りに、白1pxとグレー1pxの縦の線が入ってます。

この1pxがあるのと無いのとで全然違うと思うんです。
ナビ自体にしっかりとしたグラデーションがあるのですが、
この白の1pxがあるだけで、ヘッダーとナビの境界が自然に、かつピリッと効いてます。
ナビ同士の区切りのラインも、がっつりと枠で囲っているわけではないのに、自然で立体感のある質感が出てます。
たった1pxだけど、ここをガッツリな色ではなく1pxの薄めのラインで自然な仕切りを入れるのってちょっとかっこいいよなぁーと思うのです。

仕切り線の1px、制作方法。

たぶん、上級者さんの方法はいろいろあるのだと思うのですが、
私のひとつのやり方、という事で見ていただければ。。。(；´∀｀)

ちょっと、色がわかりやすいようにブルーで制作しました。
フッターのイメージで作ってます。

この仕切り線、背景が1色でも、まぁ、へこんでる感じのいい質感がでますが、

こんな感じで背景にグラデを入れると、より立体感がでます。
これはサイトのテイストによってお好みで。

これをぐぐーーーーっとよると、こうなってます。

1本はグラデの一番色の濃い部分、
もう1本はグラデの1番色の薄い部分を、カラーピッカーでとってます。

肝心なのはこの1px×2本の線の色なわけです。

これを、同じブルーでも適当にとんちんかんな色で作ると、

何したいんだか、わけのわからん感じになっちゃいます。
この色のチョイス、立体感出すためには重要です！

いい感じのグラデーションを作ったら、色んな色でやってみてください。

グラデの両端の色、1px×2本を入れるだけで、なんかいい感じに出来上がります＾＾

文字をキリッと見せるための1px

こちらのサイト、おまかせ！フォトブック

このサイトのボタンのスタイル。

これをぐぐっとよってアップでみると、
白い文字の後ろに濃いブルーのふちみたいなのがあるんです。
これ、白の文字の下に、実は濃いブルーの文字が1pxずれて隠れてると思うんです。
（いや、間違ってたらごめんなさい!!ひょっとしたらドロップシャドウか、グローかもしれないのですが…たぶん…）

よく、画像のパーツ作ってるとき、何か、文字がぼやんとしてる、ぴりっとしない、って経験がしばしば。目立たせたいのに…。
そんなとき、ドロップシャドウやグローなどで文字を際立たせるのも手ですが、「文字を重ねる」ってのもいい感じに仕上がります。

文字をキリッと見せるための1px、ただ1pxずらすだけ。

お申し込みボタンを作ってみました。申し込んで欲しいので、これはキリッとキメたいところです。

私の自己満でないことを願いますが、①より②の方が文字がキリッとなってるの、わかりますでしょうか？？

これ、②の方は、濃いピンクの文字が隠れてます。

この濃いピンクを縦1px、横1pxずらした状態で、こっそり白文字の下に敷いてます。
この「濃いピンク」のチョイスは、
「背景のピンクの一番濃いとこより、さらにちょっと濃いピンク」
にしてます。

この後ろの文字色によって、質感というか立体感がだいぶ変わってきます。

これが濃ければ濃いほど主張しすぎちゃいますし、薄いとぼやっとしますので、スライダーでお好みのいい感じに調節してください。
ドロップシャドウやグローほど自己主張することなく、
こっそりと文字をキリッとさせることができます。
なーんかぼやけるなーーーってとき、1pxだけで簡単にキリッとなるので一つの方法として試してみてください♪

最後に、こちらのサイト、50 Examples of Pixel Perfect Button Design。

こちらのサイトに、1pxにこだわったボタンデザインのサンプルがたくさんあるので是非参考にしてみてください。
ぐーーーーっとよってひたすらに、がむしゃらに見てると、すごく勉強になります＾＾

動きのある1px

次はこちらのサイト、(※注意※リンク先、音が出ます!!) HAIR SALON mitsuru。

シンプルだけどかわいらしいサイト。

こちらのグローバルナビなんですが、マウスオーバー時、アイコンが1px右にずれます。

最近のサイトではあんまり見かけないような気もしますが↓のようにオーバー時に動くサイト。

私、こういうマウスオーバーで地味に1px動くサイト大好きですf^ ^;
何度も無駄にオーバーさせて、動かして遊びたくなってしまいます。。。
マウスオーバーでアイコンが動いたり、テキストの位置が変わったり、1pxフォントサイズがでかくなったり…と、1pxだけ、じみーーに動くサイト、好きです。
これって、1pxだけですが、リンクがわかりやすいのはもちろん、なんかさわっててきもちいぃーって思うんです。

あ、これはcssのa:hoverで1pxずらして指定するだけですー。

1pxの枠

次こちらのサイト。ひとり暮らし賃貸Navi

こちらの、ボタンやタイトルバーに注目なのですが、ぐいーーーーとよってくと、

グレーの枠の内側に、白の枠が1pxあります。
見えますか～？？

素敵になるために、この1px、大事！と思うんですが、どうでしょう？f^ ^;

なんか、ちょっとしまる気がしませんか？？

作り方はただ、白い枠のを重ねるだけなんですけどね

100px×40pxのグレー枠の角丸矩形に
98px×38pxの白枠の角丸矩形　を重ねてるだけです。

でもそれだけで、たった1pxだけど、なんかくっきり・しっかりなった感じがするんです。

まとめ

普通のユーザーには絶対に気づかないけど、素敵デザインって、しれっとこうやって1pxのアクセントが効いてたりします。
なくても成立するのですが、あるとよりメリハリがでてよくなる、みたいな。

そして、まだまだ私のレベルでは気づけない1pxの世界があるんだと思います。

よく、「いいデザインはどこがいいんだろーっていうのをよく見て考えてみるといいよ」
って言われますが、まだまだデザインはじめたばっかりのときだと、「確かに、きれいなんだけど、具体的にどこがいいのか、わからない…」ってなります…。

たぶんそういうサイト、練習用に一回まねっこして作ってみるといいかもしれません。
それがまねっこできない、作れないのはその技術がないってことだし、
まねっこはできたけど、これは私はやらんわーーーっていう発想の、コワザが出てくると思います。
そういう、技術やコワザを最初はまねっこして、自分のサイト制作時に発揮できるようになると、ちょっと成長できた感があります！

いいデザインひたすら見てると、
素敵過ぎて自分とのギャップにもどかしくなるときもありますがε= (・c_,・｡A)
がんばってパワーアップしたいと思います^ ^