読者です 読者をやめる 読者になる 読者になる

現役アプリデザイナーによるデザインTips

日々習得したデザインTipsや社会情勢に関する気付きを綴ります。

効果的にデザインをブラッシュアップする為の6つのチェックポイント【デザインTips】

f:id:kai1986:20130512152723j:plain

こんにちは。デザイナーのKaiです。

この記事を読んでいただいているデザイナーの皆様
下記のような問題でお困りではないですか?

f:id:kai1986:20130512152911j:plain 流行りの“フォトリアル”(写実的なデザイン)についていけない

f:id:kai1986:20130512152911j:plain なぜか垢抜けない印象のデザインになってしまう。

f:id:kai1986:20130512152911j:plain “高級感のあるデザイン“てなに?

f:id:kai1986:20130512152911j:plain ブラッシュアップの仕方がわからない

これらは実は、どれも私自身が悩んでいた内容です。
どうすれば高級感のあるデザイン、クオリティの高いデザインが
作れるのだろうと、日々模索していました。

そんな中、

美しいデザインにはルールがある。

ということに気付き、実践することで、
最近では以前よりもずっと高級感のあるデザインが
作れるようになってきました。

そこで今回は、私がブラッシュアップを行なう際に
検討するポイントをお見せしたいと思います。

この画像を
f:id:kai1986:20130512153539j:plain

ここまで持っていく過程をお見せします。
f:id:kai1986:20130512153528j:plain

では、見ていきましょう!

1. スペーシング(余白)に気をつける

最初の状態です。酷いですね。
f:id:kai1986:20130512153539j:plain
頭揃え、真ん中揃えが出来ておらず、画像幅などが統一されていない状態です。

f:id:kai1986:20130512153530p:plain
ガイドに合わせて、余白を均一にさせていきます。

f:id:kai1986:20130512153531j:plain
どうでしょうか?少し安定感が出てきましたね。

2.テクスチャにこだわる

次に、背景をブラッシュアップしていきます。
f:id:kai1986:20130512153532j:plain
質感を加えました。
これに更に、グラデーションを加えていきます。

3.微細なグラデーションにこだわる

f:id:kai1986:20130512153534j:plain
どうでしょうか?グッと高級感が増した感じがしませんか?

4.1pxの線にこだわる

f:id:kai1986:20130512153535j:plain
上の画像と見比べて、どこが変わったかお分かりですか?
f:id:kai1986:20130512153538j:plain
ここです。帯の上と下に、1pxの白と黒(不透明度20%)の線を加えました。
ぱっと見では気付かないレベルの線ですが、後から効いてきます。

帯にも微細なグラデーションを加えておきましょう。
ついでに、書体も雰囲気に合わせて変更。
menuが全部で5つ並ぶことを想定して、レイアウトを調整していきます。
f:id:kai1986:20130512153519j:plain

f:id:kai1986:20130512153523j:plain
ここは、何が変わったか、もうお分かりですね。

f:id:kai1986:20130512153522j:plain
そうです。1pxの縦のラインを追加しました。

更に手を加えましょう。
f:id:kai1986:20130512153523j:plain
分かるでしょうか。帯にドロップシャドウを追加しています。
画面に奥行きが出ますね。
あくまでもさりげなく入れるのがポイントです。

5. 内光彩(インナーシャドウ)にこだわる

f:id:kai1986:20130512153525j:plain
画像部分が締まりました。

6. 照明(光のあて方)にこだわる

f:id:kai1986:20130512153528j:plain
白い円をぼかして、上から差し込む光を表現してみました。
同時に写真部分にリフレクションも入れ、ツヤを出しています。

いかがでしたでしょうか?

やれと言われればいくらでも手を加えられてしまうのがデザイン。
一方で、“良いデザイン”を見分ける目を持つまでは、
どこをどうチェックすればブラッシュアップの糸口が見つかるのかが分からず、
やみくもに手を加え過ぎて迷走してしまう、ということがあるかと思います。

私の場合、ブラッシュアップにはまず、上記の項目を検討してみる。
そして、迷った時にはコンセプトに立ち戻り、
この要素がデザインに必要かどうか?を問うことにしています。

私もまだまだ駆け出しデザイナーではありますが、
私よりももっと駆け出しデザイナーの皆様のお役にはたてるかなと(笑)

下記リンクは、検討項目だけを簡単にまとめたNAVERのページです。
合わせてご覧頂ければ幸いです。


▼【簡単かつ効果的】にデザインクオリティを上げる8の方法【デザインTips】
http://matome.naver.jp/odai/2136825284370529301