BLOGスタッフブログ

2014.12.01 デザイン

フラットデザイン風ボタン

デザイナーの小島です。
寒くなってきてそろそろ今年のバス釣り(早朝)も厳しくなってきました。
(出来ればもう一回くらいは行きたいけど)

これからの季節どんどん寒くなり、しまいには野池などは凍ってしまいます。
全面氷で真っ平らです。フラットです。

フラットデザイン
iPhoneなどが取り入れて当たり前のように見かけますが
逆にボタンに見えなくて押しにくい等の声を良く聞きます。

そんな中で海外のサイトで見かけるようになってきた言葉が「flat design 2.0」
何年か前にWeb2.0という言葉がはやりましたがその流れでしょうか。
平坦で押しにくい印象のフラットデザインにちょっと効果を加えて立体感や動きを見せる方法です。

実際はフラットデザインという言葉が出来て少したったころから存在はしていて
ロングシャドウなどが有名でした。
あとはポリゴンデザインなどもありますが
これはWebサイトのテーマなどにマッチした場合は良い感じだと思います。

今回はそんなフラットデザインのアレンジを考えたいと思います。

201412kojima01
真っ平らフラットデザインです。
Webサイトによっては効果的だったりもしますが
手抜きと思われる可能性大です。
201412kojima02
ロングシャドウを付けてみました。
でもとりあえず付けた感満載です。
201412kojima03
ボタンにグラデーションを付けてみました。
ちょっとおしゃれっぽくなりました。
201412kojima04
文字に影を付けてみました。
わかりにくいですがある無いとでは大違い。
さりげないおしゃれです。
201412kojima05
ボタンに影を付けてみました。
一気にボタンっぽくなりました。
201412kojima06
文字をアイコンにしてみました。
印象が良くなった気がします。
201412kojima07
あかるくしてみました。
最近のiPhoneのボタンのイメージです。
201412kojima08
丸くしてみました。
丸ボタンはミニマル系デザインだと良くみかけます。
201412kojima09
アイコンを写真にしてみました。
モンサンミッシェルにしてみました。
昔よく見た感じになりました。
201412kojima10
分かりにくいので文字を乗せてみました。
文字で分かりやすさは出ましたがバランスは大切です。
201412kojima11
文字を取るついでに
この際モンサンミッシェルだけにしてしまいました。
201412kojima12
色補正しました。
201412kojima13
大きくしてみました。
最近のPhotoshopは便利です。
クイック選択ツール→境界線を調整でこれくらいは出来てしまいます。

そんな訳で最近流行のフラットデザインですが
やらな過ぎもやり過ぎも良く無いのがわかりました。
絶妙なところを探して行くのもデザインの楽しいところでもありますね。

小島 和剛が書いた他の記事

見積もり・ご依頼など、
お気軽にご相談ください

本サイトはユーザーエクスペリエンスの向上などを目的に、Cookieを使用しています。
右記のバナーで「同意する」をクリックする、または本サイトを利用することにより、
お客様は弊社のCookieポリシーに同意したことになります。

同意します