1px（いちぴくせる）の美学

・・・ってほどでもないのですが…。
こんにちは。歯科デザイン総合研究所、歯科ホームページ制作・ナビゲーターのミッキーです。

先週までお送りしていました「やりすぎ3部作」いかがだったでしょうか。今日はバナー画像を手直しする講座の最終回です。

先週までドロップシャドウ（影効果）と角丸と書体（フォント）を修正しましたが、今度は医院名と英表記の中央にある区切り線がちょっと太いかなと…。そこで・・・

どうでしょうか。区切り線を極力細くして少し凹んだような効果を出してみました。この医院名の中央の線はただの線でもいいですし、全く無くてもいいかと思います。しかし、ちょっとオシャレしたいなぁということで･･･

実は、そんなに難しいことをしているわけではありません。背景より少し濃い目の1pxの線と白い1pxの線を引いているだけ！拡大を戻して100％の表示にしてみるとあーら不思議、オシャレな凹みに変化！

バナーだけではなく、ボタンの区切り、ヘッダーやフッターの区切りと色々使用してみるとホームページがすっきりします。何だかプロっぽくも感じとれますね。

あとは以下のように文字の色やキャッチコピーを調整して完成！
最初のバナー画像と比べると「劇的！」…ではないかもしれませんがある程度スッキリしたかと思います。写真なんかを飾っても映えるのではないかと思います。

少しのこだわりで印象が変わる例としてご紹介しました。またこういう企画の記事をやりたいと思います。

歯科ホームページ制作・ナビゲーターのミッキーでした。