2013年9月15日日曜日

フラットデザインの作り方

こんにちは、しゅんです。・ω・。最近は主にモバイル端末向けのOSでフラットデザインが流行っていますね。

それを受けて、僕も私もフラットデザインというものを使ってみたい!と思った方もいるはず。

そこで、今回は僕なりに、フラットデザインのアイコン等を作る際のポイントをまとめてみたいと思います。
(初めに断っておきますが、あくまでも僕個人の考え方なので、中には「それは違う!」などの意見がある方もいらっしゃるかもしれませんが、そこは大目に見てもらえたらなぁ、と思うのです。)


では早速本題に入りましょう。



まずはフラットデザインのものを作るにあたって、いくつかのポイントを挙げておきます。

・使う物と形
     これはアイコンなどの時、何を選ぶか、どういう形にするかということ

・使う色
     これは意外と重要、シンプルなデザインなだけに、どんな色を使うかによって印象が大きく変わる

・配置
     ただテキトーに並べただけではなんだかぐちゃぐちゃしたものになってしまう

・視認性
     フラットなデザインにしたはいいものの、見づらくなってしまっては元も子もない


以上の点に留意せねばなりません。フラットデザインはシンプルだから簡単でしょ〜?と思っていたあなた、それは間違いです。え、僕だけ?


それでは実際に作ってみましょう。
まずは作るアイコンに、何の図形(絵)を使うかです。なるべく端的に表したいものを表現できるものが望ましい。


この記事では、てっちゃん氏の「VolumeKeyLauncher」というアプリのアイコンを作ります。

このアプリは、ボリュームキーの押し方の組み合わせであらかじめ設定しておいたアプリが起動できる、というもの。
これをなるべくシンプルに表せるアイコンを考えます。ボリュームキーの組み合わせですから、+-のアイコンがわかりやすいですね。

まずはデザインの概形を考えます。
先ほど述べたポイントの、"使う物と形"・"配置"のところですね。

なるべくシンプルな形(円や正方形等)を使う。複雑な図形はNG。



こんな感じで。(色はまだ適当です)
ボタンをイメージした円に、ボリュームキーの+と-。

真ん中のところが空いてると落ち着かないので、とりあえず埋めておきます。(仮)

次に、ただ丸の中に+-だけでは味気ないし物足りないので、よりボタンぽく、押したくなるようなボタンボタンした感じにします。
具体的に言いますと、ボタンの輪郭みたいなものを追加します。


ボタンぽくなりましたね。

あと残るポイントは"使う色"と"視認性"。
ここ結構重要です。使う色をうまく選ばないとなんかコレジャナイ感が出てきます。
悪い例。


これはわざとやってるのでさすがにここまでオエッな色を選ぶ人はいないと思いますが、でも色は重要ということがわかってもらえたでしょうか。

はい、では色の選び方に入ります。
まず、原色やコントラストの高い色の組み合わせは基本的に避けるべきです。場合によってはうまくできることもあるかもしれませんが、リスクは避けるべきなのです!
グレーに柔らかい色を混ぜたような色、が個人的にはベスト。

実際に塗ってみます。


こういう柔らかい色を選ぶとうまくいきやすいです。

そして、ちょっとした仕上げをして…

(真ん中の部分に影のようなエフェクトを追加)
完成!!


どう?美しいでしょう?

この記事が少しでもフラットデザインのアイコン等を作る人の手助けになればいいなと思っています。


最後に、この記事を書くに当たり、アイコンの作成を依頼してくれた てっちゃん(@tetsu31415) に感謝。
このアプリ、「VolumeKeyLauncher」はこちら(GooglePlayストア)からダウンロードできます。(Androidのみ)
便利なのでオススメです!(アイコンも素敵ですし)

0 件のコメント:

コメントを投稿