お使いのブラウザは、バージョンが古すぎます。

このサイトは、Internet Explore8・Internet Explore9には対応しておりません。
恐れ入りますが、お使いのブラウザをバージョンアップしていただきますよう宜しくお願いいたします。

「やりすぎデザイン」を改めて、脱・素人臭を目指そう

どうもこんにちはJBです。
「年末にPCフォルダの整理でもしようかね」となりまして、昔のデザイン練習ファイルとかがまあ発掘されたのですが…
「だっさ…」と軽くおののく様なレベルでした。アレを人に見せていたと思うと叫びながら走り出したくなりますよ、マジで。

走り出したい気持ちを抑えて「だっさいわー」というデザインを見直してみたところ、共通していたことがありました。それは、

これ、やりすぎだったな…

ということ。
そんなわけで、デザイン初期にありがちな「やりすぎデザイン」を今一度見直したいと思います。
今はあの頃に比べて、多少良くなっているはず。そう思いたい。

デザインの仕事をしてなくても、パワポとか資料作成のときにちょっと意識するといい感じになるかもしれないし、ならないかもしれないです。
めざせ!脱・素人臭!それでは行ってみましょう!

ありがち①:やりすぎグラデーション

何となく寂しいときに、よく使ってしまうグラデーション。
立体感や質感を出すにはお手軽な方法ですが…
「この程度じゃ分かんないかなー」とかいってキツめにかけると、途端に「残念感」が漂う危険が…!

昔は上の方みたいにギラギラしてました。

昔は上の方みたいにギラギラしてました。

慣れないうちは、わずかにかけよう

よくやってしまうのが「白なら何でも合うだろう」と思って、白×(結構派手な)カラーのグラデーションをにしてしまうこと。
実はコレ、コントラストが高すぎて違和感がすごいんですよね…ボタンみたいな狭い範囲でのグラデーションは特に!
ボタンの中に文字なんか入れた日にはもう、文字よりグラデーションが目立つっていう…
white_gradient

白とのグラデーションは、ごくごく淡い色をお勧めします。

もうひとつありがちなのが、
立体感→影だろ→影=黒(っぽい色)×カラーのグラデーション
というパターン。これも汚くなりがちです。
black_gradient
ちょっと濃いくらいの色とか、ちょっと鈍めの色にしてあげた方がベターですよ!

ボタンに限らず、背景とかでもハイコントラストなグラデーションはリスクが高いです。初心者もしくは非デザイナーさんは、最初は避けた方が無難かもしれません。
正直「このくらいじゃ分からないかも」ぐらいの方が、自然に近くてキレイなのかもしれないですね!
特にフラットデザイン全盛の今は、もうコレ自己満足なんじゃないかくらいの微妙なグラデーションでもいいと思います。

グラデーションに関しては、こちらの記事でめちゃくちゃ分かりやすく解説してくださっています!ぜひともご一読を!
[デザイン]グラデーションを使う理由、不自然なグラデーションについて徹底的に分析した:WEBCRE8.jp

ありがち②:やりすぎドロップシャドウ

textshadow_3
ドロップシャドウも使ってしまいがちです。
だって「やってる感」が出るんですもの。文字が埋まってしまうのを回避したりするときに使ったりもしますよね。便利。

デフォルト設定のまま使うと

でも…

Photoshopのデフォルトだと、斜め左上から黒75%の濃さでドロップシャドウされます。
textshadow_1
どうですかね。この場合、濃すぎやしないかと。
何なら文字と同じくらいの存在感。
太文字とかならまあいいですが、細文字は見にくいですよね。
主役(文字)を喰うような影はいらない!ということで、グッと抑えると質感も出て見やすくなると思います。
textshadow_2

現実に近づけて、違和感を減らそう

また、現実世界での影は、光の向きや強さ、影が映る対象物の距離とかで変わりますよね。
光が強いと影は濃く、輪郭がはっきりします。光が弱まると逆ですね。
影が映る対象との距離が近い場合も影が濃くなります。加えてシャドウの位置が近くなりますね。反対に距離が遠くなると影は薄く、位置も遠くなります(光源の位置にもよりますが…)。
dropshadow
こんな感じのことを意識すると、より違和感が少なく、見やすくなると思います。

「うるせぇそんな細かいこと気にしてられるかぁぁああぁあ!」という方は、
文字のドロップシャドウに関しては、あまり考えないで「気持ち影あるかな?」レベルにすると、比較的上品になると思います。
その際は、文字の色と影の色が近すぎると、滲んで汚い感じに見えることもあるので注意してください。

何となくぼんやりした感じ

何となくぼんやりした感じ

ありがち③:謎の装飾

「デザインしないと」とか思うと、色々飾らなきゃ精神がでるというか…
それでやり過ぎると素人臭がこんにちはしてきます。化粧と同じですよ。チーク塗り過ぎておてもやんみたいな。
too_much
後から見ると、ココこんなにする必要あったかね?
とか思うことがあるんですよねー…
上の画像は過去に私が作ったものですが(確か何かの設定画面だったはず)、

  • ボタンギラギラさせ過ぎ。設定画面なのに何この世界観。
  • 文字が載るところがギラッと反射した感じの背景って…見にくいだろうに…
  • なんでインデックスの形を場所とりそうな形にしたのかしら

とかまあ他にもツッコミどころ満載なのですよ。
当時ツッコまれても、おそらく「ぐぬぬ…」みたいな反応しか出来なかったと思われます。
ココで声を大にして言いたいのが、

  • 説明できない飾りは、多分いらない
  • 主役を引き立たせない飾りは、多分邪魔なだけ

ということ。言われなくても分かっちゃいるんですが、貧乏性のせいか、ついやってしまうっていうね…
特にUIデザインは使い勝手を重視したいので、よけいな飾りは慎みたいですよねー。

まとめ

他にも色の選び方が痛かったなーとかあるんですが、恥ずかしくなってきたので勘弁してください。

何かしないと手を抜いているように見えるんじゃ…という危惧から、ついつい色々足してしまう初心者時代。でも振り返ってみて、「やりすぎはイタい」ということをものすごく感じました。

とりあえずグラデーションやドロップシャドウは、自然にあるものを観察して、なるべく近づけるようにすれば、ある程度違和感を回避できるんではないの?と思います。
あとは、本当に見せたいものがしっかり目立つように、きちんとバランスを見る必要がありますね!一晩寝てもう一回見てみると「アレ?」って気づくことって結構あるので、少し寝かせてから冷静になってみて見ることをお勧めしますよ!

「何か素人臭いな…」と思ったら、やりすぎてないかどうか見直してみてください。
ちょっといじってみたら改善するかもしれないですよ!それではー!

コメントをどうぞ

メールアドレスは公開されません。* が付いている欄は必須項目です。


お気軽にお問い合わせください。

日本VTR実験室では、お仕事のご依頼、ブログ・コラムのご感想などを受け付けております。
アプリ開発・コンテンツ制作でお困りでしたら、お気軽にご相談ください。
ご連絡お待ちしております。

お問い合わせはこちらから

03-3541-1230

info@nvtrlab.jp

電話受付対応時間:平日AM9:30〜PM6:00