デザインをやったことある人ならわかると思うのですが、
「自分の思うようにやってみたらすごいのが出来てしまった。。」
って事ありましたよね？

こういったことで悩んでいる方の参考になったらうれしいなと思って、
自分が最初に勤めたWeb制作会社で教えてもらった素人っぽいデザインから脱却するポイントをまとめてみました。

ダメなデザインの例

今回はこれをキレイにしていきましょうね！

さてさて、
早速ですがコレをみてどう思いますか？

なんて思ったりするのではないでしょうか？
ではどうしたらそれを解消できるのか？

Photoshopを学び始めると色々な機能があって、
それを使いたくなるんですよねｗ
私もそうでした。
そしてその機能を分かりやすく目立つレベルで使ってしまうんですｗ
それがイケテナイデザインの原因です！

では上記のイケテナイポイントを直していきましょうか！

改善ポイント「色が多くてギラギラ、極端なグラデ」

病院のサイトなのにこれはおかしいですよね！
デザインを凝ろうとして逆にダメになってしまっているパターンです。
それにグラデを使っているのをあからさまにアピールしすぎです。

今回は清潔感、信頼感を与えるように
淡い緑のうっすらグラデーションに変更です！

改善ポイント「影が強くて、向きもおかしい」

最初の頃は、ドロップシャドウも濃くしてしまいがち。
これもあんまりよろしくないです。
あと光源を意識して影の向きをそろえないと、
さらに違和感を上乗せしてしまいます。

今回はタイトル背景の枠のドロップシャドウを削除。
テキストに、色#000、不透明度30%、距離1px、サイズ1px、のドロップシャドウを指定し、
文字を軽く浮き上がらせ、可読性を上げています。

なんでドロップシャドウが必要なのか、
それを考えないで「使いたいから」、「なんとなく」でドロップシャドウをかけると
デザインがブレてしまいますよ。

光源を意識する

また、ドロップシャドウなどで意識してほしいのが、光源です。
内側のシャドウやベベルエンボスでも出てきますが。
要は、要素の影の向きをそろえるってことです。

光源の位置は左上か真上に考えてデザインすることが多いので、影は右下か真下に来ることが多いです！
今回は分かりやすいように強めの影をおいてますが、
実際にやるときは控えめにしたほうが良いです。

影の向きは包括光源にチェックを入れておけばそろえることができます！

それで出来たのがこちら！

これだけである程度見れるデザインにはなると思います。

あとはサイトの方向性、テイストなどを考慮して、
･テクスチャ
･アイコン
･マージン
･アクセントカラー
･写真
･イラスト
･図説（インフォグラフィックス）
なんかを入れると、さらに素人っぽさからは脱却できると思いますよ。

これによってめっちゃ成果を出せるサイトに変身するかといったら、
それはまた別のお話ｗ
デザインはむつかしいですよｗ

同じシリーズとして、
コンテンツのグルーピングみたいのを、がんばって書いてみたいと思います！