2020/01/22SHAREツイートシェアはてブGoogle+PocketLINE「なんかこのデザインダサいけど、何がダサいかわからない」となる前に、ダサいデザインとは何かを具体的に言語化して知りましょう。配色のデザインがダサい色を使いすぎるデザイン基本的には3色程度が理想だと言われています。メインカラーやアクセントカラーに濃い色を、ベースカラーに薄い色を使い、60-30-10ルールを守りましょう。60%ベースカラー(背景)脇役的な色で、背景など。メイン・アクセントカラーの妨げにならない色を使いましょう。30%メインカラーサイトの印象を決定づける主役の色。ロゴ、バナー、メインコンテンツに使います。可読性の問題から、濃い色が使用しやすいです。申し込みボタンなど強調箇所に使います。全体の5%と少ない使用量ながら一番目立つ色です。目を引く色を選びましょう。#redや#blueなど原色や、蛍光色を使う現代のwebデザインでこれらの色を使っているサイトはかなりレアなので、90年代のデザインっぽくなってしまいます。色のメリハリがない使う色が濃い色ばかり、反対に薄い色ばかりだとメリハリがなくなってしまい、うまく情報を得にくくなってしまいます。目的やイメージに合わない色を使う赤:目を引く色。エネルギーを表す商品、バーゲンセールの広告に使われることが多い。青:爽やかさ誠実なイメージを与える。緑:衛生的なイメージを与える。病院や薬局の色に使われることが多い灰色:どの色にも馴染む、上品で落ち着いたイメージがある。教育系や士業系の企業に使われることが多い他には例えば赤やオレンジ、黄といった暖色系は強調する色、青や紫など寒色系はそうではないと覚えておきましょう。グラデーションの使い方を誤るグラデーションを多用する、デザイン中に何箇所もグラデーションが使われていると、目が疲れてしまうデザインになります。階調の変化が激しくなる色の組み合わせは避けましょう。文字のデザインがダサいフォントがイメージや目的に合っていない丸みのあるフォントは親みやすいイメージなど、フォントの特徴に合わせましょう。その他、長文には明朝体、タイトルには太いゴシック体を使うのが基本と言われているなど、重要なポイントに合わせてインパクトの大きいフォントを使いましょう。文字が読みづらい例えば以下が挙げられます。小さい文字はシンプルな書体にして見やすくしましょう。文字と背景の色が似ている行間が狭い文字の縦横比率を変えている余白が少ないフォントの種類が多いフォントは多くとも4-5種類までと言われています。ないと読みにくくなってしまいます。タイトルが長すぎるタイトルが長いと頭に入ってきません。短く簡潔にあらわしましょう。文字に動きをつけすぎる、影を使いすぎるこれもごちゃごちゃして読みにくくなる原因です。線がダサいデザイン枠線や下線をつけすぎる仕切るために枠線や下線をつけすぎると、ごちゃごちゃしてダサくなります。余白を生かし必要最低限の線のみ使いましょう。比率がダサいデザイン画像や文字の比率を変える画像や文字の比率を変えて潰してしまうことで、コンテンツが見にくくなってしまいます。配置のデザインがダサい余白がなく、要素を詰めて配置するときに起こりがちです。テキストの周りには必ず余白を入れるなど、配置に気を配りましょう。優先順位をつけられていないデザイン重要なものがパっとみて何かわからないデザインどれも目立っていない、バラバラでまとまらないという現象を防ぎましょう。伝えたいものの要素や文字を大きくする伝えたいものの色を濃くする伝えたいもののデザインを変えるデザインコンセプトは一つにするデザインのコンセプトに色々な要素を詰め込みたくなるかもしれませんが、一番大事なものを一つ決めましょう。ないと、色々なコンセプトが入り交じり、結局何が言いたいのかよくわからないデザインになってしまいます。デザインルールが統一されていない見出し、ボックスなど要素一つ一つのデザインに何種類も用意する必要はありません。ルールが統一されていないとユーザーが見慣れていないデザインを見る回数が多くなり、学習コストがかかって疲れてしまいます。見せようと配置する写真は大事な部分が大きく見えるように配置しましょう。写真全体を見せようして配置すると、重要な部分が小さく見えてしまいメッセージ性の低いデザインになってしまうことがあります自分が良いと思っても相手になんかダサいと思われるデザイン上記のチェックリストを満たせば、ダサいデザインにならないようある程度防ぐことはできると思います。自分が良いと思っても相手に「ダサい、違うな」と思われるデザインがあります。本格的なデザインに入る前に顧客と目的・内容・イメージのすり合わせを最大限行うことが鍵です。コンテンツマップ、ワイヤーフレームですり合わせるサイトの全体像と構成、ページ間の関係性や遷移を明確にする統一して使う要素を指定し、要素のレイアウトや関係性、幅などを示す色をすり合わせるサイトの印象につながるメインカラー、背景のに用いるースカラー、目をひくアクセントカラーの3色を決めてクライアントのイメージに合うか確認しましょう。オススメは以下のような方法で、ボタンや背景色のみにつけて確認することです。デザイン全体に色をつけるのは少々時間がかかるので、完成度30%の候補を出していき徐々にfixしていきましょう。💡完成度30%の候補を、色/構成/背景別に出して選んでもらい徐々にfix。顧客に参考サイトを選んでもらっても、どの部分を良いと言っているかわからない場合があるからです。かわいいイメージは「手書き・手作り感のあるもの」、スタイリッシュなイメージは細めのフォントや線のものなど、あらかじめ言語化して押さえておくと、選ぶのに迷わないでしょう。賑やか」等イメージヒアリング2⃣回答を元に2軸を設定しマトリックス作成。嫌いなデザインや色を聞いておくデザインを作った後に、目的やイメージは合うがクライアントの好みに合わないデザインになってしまい手戻りが発生するケースがあるようです。その場合、お互い良いことが一つもないのであらかじめ聞いておきましょう。短期集中1ヶ月!webデザイン講座のオススメまとめ【無料体験3選】英語を1週間無料で話しまくって上達させる関連記事webデザイナーが向いてない?→勉強が間違ってるだけ。7ふるフリーランスでUIUXデザイン/コーディング/Webマーケをしています。慶應法法→IBM→2018年独立後に海外放浪。reserved.【短期集中1ヶ月】webデザイン講座オススメまとめ。