「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント

毛の生えた私からツルツルの私へのダメだし

Webデザイナーなりたてのころ、デザインのチェックをしてもらったとき、
「んーーーなんかこのへん素人っぽいね」と言われた事があります。

素人っぽい。。。？？？ヘ(゜◇、゜)ノ

そのときは何だろう、どんなのが素人っぽいんだろうとわかりませんでした。
就職はできたものの、技術は完全ど素人なので。

今も素人にちょびっっっとだけ毛が生えた程度ですが、
少しだけわかるようになりました。

「素人っぽい」の意味が。

毎日、たっくさんのWebサイトを見ますが、プロのデザイナーが作ったと思われる、構成もデザインもしっかりしたサイトもあれば、お店の人が一生懸命手作りしてそうなサイト、色々あります。

たぶん、知らず知らずのうちに「こういうのが素人っぽい」ってのをなんとなく感覚で持ってるようで、だから瞬時に「手作りっぽいな」ってわかってしまうわけですが、自分のデザインスキルアップのためにもその「なぜ素人っぽいか」そして、その改善点をちゃんとよく考えてみることにしました。
Webデザイナーではないけど、ホームページを作りたい、って方の参考にもなればいいかなぁと思ってます。

で、こちら、「素人デザイン」としての見本。
恥ずかしさ満点の私の処女作ととその次に作ったサイトです。
5年前、スクールに通ってたころに初めて勉強のため自分で作ったやつです。
ひどいデザインですが、つっこみどころ満載で、すごく「素人っぽさ」が出てるので、今回いい材料になりましたf^^;

美容室サイト
「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント

「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント

お花屋さんサイト
「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント

ヤジはやめてください。私、打たれ弱いんで||*｀Д´*)ﾉ

ちょっと素人に毛が生えた私から、ど素人の昔の私へ、つっこんでいきたいと思います。
つっこめるってことは、ちょっとは成長したってことですよねｗ

ユーザビリティを無視した配置
エフェクトをかけすぎる！
色を使いすぎる
文字がみにくい！
余白や行間がバラバラ！

ユーザビリティを無視した配置

3カラム、2カラム、左ナビや上部に横に並んでるナビ、など色々ありますが、
Webサイトにはなんとなく決められている配置っていうのがあります。
例えば、ほとんどのWebサイトは、ロゴが左上にあります。

iKESAi.comさんを参考に。
「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント

私の作った美容室サイトはロゴ(?)がなんだか中途半端な右よりにあります。

「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント

ほんとにもう無意識になってると思いますが、普段、Webサイトを見ていて、
「TOPページに戻りたい」って思ったとき、ユーザーはなんとなく「ロゴ」をポチッとクリックすると思います。
基本的にWebサイトのロゴにはTOPページへのリンクが張ってあって、ユーザーもそのことを知っているからです。

ユーザーが行きたいページへ行くために、ロゴはこっそり（？）重要な役割を果たしているわけです。
そのロゴが、「いつもあるべき位置に無い」っていうのはユーザビリティ的にいまいちです。

デザインをしていると、
「デザイン的にすっぽりはまった！」とか「ここが気持ちいい！」など、
ただのパーツをはまるとこにうまいことはめる事に夢中になりがちです。
どうしたらユーザーにとって快適なページになるか、というのがおろそかになってきてしまって、自己満デザインになってしまいます。

「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント

この「ロゴの配置」以外でも、Webデザインをする上で考慮するべき点がたくさんあると思います。
よく、見かけるホームページビルダーで作っているような「手作り」Webサイトでは、
1カラムで文字、中央寄せの羅列、なんて見かけますね。

「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント

目の移動量が多いので、文字を追うのが疲れてしまう感じ。
素敵なプロのデザイナーさんは、的確な幅ですごく読みやすいレイアウトを意識しています。

改善策⇒Webレイアウトを理解する

こういった状況を改善するためには、とにかくたくさん色んなWebサイトを、配置を気にして見続けること、また、ユーザビリティを考えたWebレイアウトについて学ぶことだと思います。

Webサイトはデザインもとっても大事ですが、ユーザーに見てもらわなければ意味がありません。
当たり前のことですが、常にユーザーの視点に立って見やすい、操作しやすいWebサイトを心がけることが大事だと思います。

ユーザビリティと自分のデザインのこだわりはほんとに葛藤するとこです(> <)
日々悩んでデザインしています…

エフェクトをかけすぎる！

私の作ったパーツの、この不自然なエフェクト。。。(>_<)
「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント

「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント

あぁーーーー恥ずかしい。・・・

IllustratorやPhotoshopをさわりはじめると、ドロップシャドウやらベベルにエンボス、便利な機能がいっぱいです。
楽しくて楽しくて、ついやりすぎてしまいます。

私が「素人っぽい」と指摘されたのもやはり強すぎるドロップシャドウが原因でした。
素敵なプロのデザイナーさんは、あるかどうかわからないくらいのエフェクトがうっすらかかっています。

改善策⇒やりすぎなエフェクトは我慢

改善策としては素敵なデザインのサイトのパーツを完全にマネっこして練習することじゃないかなーと思います。

こちら、資生堂のサイト。
「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント

その1パーツを使って、「このくらいのドロップシャドウはこのくらいの値かぁ～」っていうのを考えながらマネっこ練習します。

「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント

そうすると、だんだん「自然なエフェクトのかけ方」が身についてきて、いざ、自分のデザイン制作するとき「素人っぽさ」のなくなったナュラルな感じが作れると思います。

色を使いすぎる

あと、一番ありがちなのが、「色の統一感」がないこと。
彩度・明度・色相を考えながら配色するとプロっぽい、素敵デザインに近づけるかもしれません。

彩度⇒鮮やかさの度合いのこと
明度⇒その色の明暗の度合いのこと
色相⇒赤や黄色といった色味の違いのこと

例えばこちら、

青・白・緑・黄・ピンクを並べているのですが、
下の配色は明度と彩度がバラバラで、この配色で同じサイト内に色が散らばっていると、統一感がありません。

改善策⇒使用する色から決めてみる。

改善策としては配色サイトを参考に、配色を決めてしまうこと。
配色サイトkuler。
こういったサイトで、サイトのコンセプトにあった色の組み合わせを選んでいくのも手だと思います。

また、「素人っぽい」の要素のひとつとして、強引なグラデーションっていうのもあると思います。

「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント

①は、いきなり何があったんだと思わせる、不自然なグラデーション。
②は、なんとなく立体感があるような質感のものに見えると思います。

自然なグラデーションを作る方法は、パレットでちょちょいと適当な色を持ってくるのではなく、スライダーで少しずついい感じに調節していくこと。

「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント

あと、一概には言えませんが、グラーデーション具合もサイト内で統一しないと、「えらく、もっこりグラデがかかってるパーツ」と「うっすらグラデっぽいパーツ」など統一感がないと、ガチャガチャして見えます。
（申し込みボタンなど、どっかり目立たせたいものはもっこりと！！ってことはもちろんあると思います！）

色だけでなく、フォントもそうですが、統一感を考えて使うと、プロっぽいデザインに近づけるんじゃないかと思います。

文字がみにくい！

今でも一番苦労するのが文字周りの処理です。
後ろに画像が入っていたり、背景の色によっては文字が見えにくくなってしまって何書いてんのか、わからなくなってしまいます。

「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント

これなんか、フォントもちょっとわかりにくいし、後ろにお花入れたりなんかしてナビなのに何のページに行くのかよくわからないですよねｗ

バナーなんか制作すると、小さいエリアの中に文字やら写真やらを見やすく配置しなきゃなんで結構苦労します。。。

改善策⇒グローやシャドウ、小技を使う

「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント

こんな感じで文字周りを見やすくなるように処理したり、背景の写真にマスクをかけたりなどなど、たくさん方法はあると思います。
この小技をたくさんもっていて、ちゃちゃっと見やすく処理できるとちょっとプロっぽい感じがします！

でもこのときもやっぱりやりすぎに注意ですね(>_<)

余白や行間がバラバラ！

見てください、この気持ち悪い感じっっ！！(+_+)

「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント

余白がバラバラ(T_T)

この気持ち悪い、私のデザインをよく見てみたところ、デザイン起こした時点で、まず余白がバラバラで気持ち悪いし、コーディングしてさらにずれてるんですね。
コーディング技術が低くて、うまいこと組めないので、デザインどおりになってないんです(T_T)

仕事になると「デザインと1pxずれてます」なんて当然のように指摘されます。

また、こちらも気持ち悪い。

「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント

「2007」の「7」だけなんでこんな変てこりんな事になってるのかわからないのですが、文字詰めが変ですよね。
なんかとにかくバラバラ、ガチャガチャ感があります。

改善策⇒余白は均等に、ツラは絶対あわせる

もしも今この配置をいじれるのであれば、、、
「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント

こんな感じでしょうか。
左右の余白、上下の余白、文字のツラをあわせる。
また、当たり前ですが、この通りにコーディングできる技術を持つことですよね。

デザイン制作時にガイドを利用して、そろえる所はしっかりそろえなきゃです。

まとめ

前にペンションを経営されてる方が、「手作り感を出してアットホームな親しみやすさを出したサイトにしたいので、プロには頼まず自分たちで作りたいんです」、という話を聞いたことがあります。

なるほど、そういうコンセプトのサイトもあるのかもしれませんが、Webサイトの「デザイン」って言うのはただ単に、パーツを作りこんだり配色していくだけではなく、見易さ、情報の整理のされ方、ユーザーが目的ページにいかに簡単に到達でき、豊富な情報量で的確にまとめられているか、そこまで考えるのが「Webデザイン」だと思います。

そして、そのスキルつけるためにはやっぱり、たくさんのWebサイトを見ることだと思います。
ありがたいことに、デザインサンプルがいっぱい見れるようなまとめサイト、たくさんあります。

こういったWebデザインまとめサイトでたくさんの素敵デザインにふれるのが一番かと思うので、私は日々新しく追加されたサイトを見ては「へぇ～、ここはこうなってるのかぁ～」と見るように心がけてます。

素人に毛の生えた私、いつかはぼぉーぼぉーになるといいですが。。。

他にも「こんなことに気をつけるとプロっぽい素敵デザインに近づくよ！！」ってのがあれば、ぜひぜひ教えていただきたいです^^