HTML
CSS
デザイン

ダサくないデザインとは


あまりにもダサすぎる、0.5点。

まぁ、確かに、あまりにもこのシステムはダサすぎる…

でも何が原因でダサくて

何を直したらダサくなくなるのか

全然わからん…

じゃぁ色々調べてみよう!


揃えよ

漠然としてるが、これがセンス関係なしにダサくなくなる第一歩。

例えば

・marginを整えて、要素の幅を揃える

・inputの長さはformの中で揃える

とか。

とにかくパッと見でギザギザ感が出てるとダサく見えて

シュッとスマート感が出てるとクールに見える。


色のテーマを決めよ

ヘッダーの背景色は#FFCCCCで

コンテンツの背景色は#CCFFCCで

フッターの背景色は#CCCCFFにしよう!

となるとカラフルな感じには見えるかもしれないが

原宿系というか、そんな奇抜さが見えてしまってダサく見える。

(別に原宿系をディスっている訳ではない、KPPは好きだ。)

簡単な方法は

RGBの中から1つを選んで、一色の強弱でデザインしていくのが良い。

ヘッダーの背景色は#FF8888で

コンテンツの背景色は#FFEEEEで

フッターの背景色は#CC0000にする

と統一感が出てクールに見える。


フラットデザインにせよ

例えば

・ボタンだとわかりやすくするためにborderをoutsetにしたり

するのは昭和のデザインである。

平成も終わるというのに、なんというデザインだ…

現代はスマートフォンが定着し、フラットデザインのデメリットが少ない。

なので

・ボタンはborder-radiusで丸みをつけるだけ

で良い。


編集後記

入社8日目

上司からデザインがゴミすぎる…と指摘を受けたので

デザイナーさんに指導してもらったことをまとめてみました

そんで修正したサイトを見てもらったら5点にレベルアップできました。

デザインって中々意識しなれてないから難しいなぁ…