藤井こんにちは！Webデザインが得意なマーケターの藤井です！
0．はじめに
最初にはっきり申し上げます。
ご自身ではご自身のダメな点はわかりづらく、第3者からはなかなか指摘してもらえないものです。
- 「ダサい…！」
と影で言われていないか心配になったり、またはご自身で
- 「一生懸命作ったのに、なぜか素人っぽい…」
- 「デザインが垢抜けない…」
と感じている方は、以下の厳選した改善ポイント10個を見直してみてください。少しでもお役に立てたら幸いです。
指摘してもらえるって親切。そう信じてこの記事を書いています。
1. 濃すぎるドロップシャドウ
定番の「ダメなデザイン」です。 デフォルト設定のままドロップシャドウをかけると、昭和の「ワードアート」のような古臭さが出てしまいます。
画面全体が暗く見える原因にもなります。
↓修正例
- 影は「黒」ではなく、背景になじむ色を選びましょう。
- また不透明度を調整したり、ぼかしを大きく広げて調整しましょう。
- 「影があるかないかわからない」くらいが、今のトレンドの抜け感を作るコツです。
2. 派手なグラデーション
続いても殿堂入りのダサいデザインです。緩急が強いグラデーションはNGです。色が濁って見え、安っぽい印象を与えてしまいます。
↓修正例
- グラデーションは同系色でまとめるのが基本です。
- 「水色から青」「オレンジからピンク」など、色相が近い色同士で変化させましょう。
- 色の変化を激しくせず、淡く変化させる微グラデにすると、今っぽい上品な仕上がりになります。
3. とりあえずつけた濃くて太いフチ取り
文字を目立たせたいからといって、太い境界線をつけていませんか？ 過度な境界線は、スーパーの特売チラシのような安売り感が出てしまいます。
デザインの雰囲気を壊す大きな要因です。
↓修正例
文字を読ませたいなら、背景に座布団を敷くか、文字色と背景色の明度差（明るい・暗い）を調整し、境界線なしでも読めるようにしましょう。
4. 余白なし
初心者の方はスペースが空いていると不安になり、要素を枠いっぱいに大きくしてしまいがちです。 枠線のギリギリまで文字や図形が詰まっている状態は、非常に窮屈で、見ている人に息苦しさを与えます。
↓修正例
余白もデザインの一部です。要素同士のスペースを十分確保しましょう。
十分なパディングやマージンを取るだけで、情報は整理され、一気に洗練されたデザインになります。
5. 文字の縦横比を変更する
スペースに入りきらないという理由で、文字を無理やり縦に伸ばしたり、横に縮めたりしていませんか？
フォントは専門のデザイナーが計算し尽くして作った理想の形です。それを歪ませるとバランスが崩れ、見る人に不快感を与えます。
↓修正例
- 文字を変形させると可読性が激減するので基本的に避けましょう。
- スペースに入らない場合は、フォントサイズを小さくするか、文字数を削ってリライトします。
- どうしても収まらない場合はトラッキングを使って字間を調整しましょう。
6. 行間・文字間が詰まりすぎ / 空きすぎ
PCのソフトで文字を打っただけの「ベタ打ち」状態だと、特に日本語フォントは行間が詰まって見えたり、カタカナだけ間延びしたりして読みづらくなります。
↓修正例
読みやすい行間は、文字サイズの1.5〜1.8倍程度です。ここを調整するだけで可読性がぐっと上がります。ただしタイトルなどの大きな文字は広くなりすぎることもあるため、目視で間隔を確認しましょう。
7. 3種類以上のフォントを混ぜる
丸ゴシック体＋明朝体など、意図なく混在させていませんか？ 相性の悪いフォントの組み合わせによって、デザインの世界観が損なわれてしまいます。
↓修正例
使用するフォントは、基本的には「2種類まで」に絞りましょう。
また数字やローマ字に欧文フォントを使用する場合は明朝体＋セリフ体、ゴシック体＋サンセリフ体が鉄則です。
8. 原色をそのまま使う
カラーパレットの右端にあるような、彩度MAXの真っ赤や真っ青をそのまま使うのは避けましょう。デジタル画面では目に刺さるように眩しく、チープな印象（エラー画面のような怖さ）を与えてしまいます。
↓修正例
原色から少しだけ彩度や明度をずらしましょう。
もし自信がない場合は、参考となるサイトから配色をピックアップしてもOKです。
9. 写真の上に文字をそのまま乗せて読めない
背景写真のガチャガチャした部分と文字の色が被ってしまい、何が書いてあるか読めない状態です。これでは情報を伝えるというデザインの役割を果たせません。
↓修正例
文字の下に帯（座布団）を敷く、または被写体が写っていない「余白」の部分に文字を配置すると、
文字はくっきりと読みやすくなります。
10. 「揃え」がガタガタ（整列の無視）
左揃えなのか中央揃えなのかハッキリしないレイアウトや、画像とテキストの端があっていない微妙なズレが、デザイン全体を「雑」に見せる最大の原因です。
↓修正例
「見えない線」を意識して、要素の端を揃えましょう。
定規で測ったように揃っているだけで、情報収集のしやすさも、見た目の印象も変わります。
あわせて読みたい関連記事
まとめ
「ダサいデザイン」になってしまうのは、センスがないからではありません。やってはいけないルールを知らないだけです。
今回紹介した10個のポイントを意識して、「引き算」や「微調整」を行うだけで、あなたもデザインは見違えるほど垢抜けます。ぜひ次回の制作物で試してみてください。
f design officeでは、WebデザインとWebマーケティングを一気通貫で行い、クリック率やCVR（成約率）の改善まで伴走しています。実際の改善事例はこちらの記事で公開しています。
無料特典：実務でそのまま使える「クリック率を下げないデザインチェックリスト（10項目）」
バナーやWebサイトを公開する前に、この10項目を確認するだけで「読みづらい」「クリックされない」デザインを避けられます。
- 現役Webデザイナーが実務で使っているチェック項目をそのまま収録
- 配色・レイアウト・文字の見せ方など、公開前の最終確認に使える
- デザインの知識がなくても、チェックを付けるだけで確認できる
受け取り方法：下のボタンからf design office公式LINEを友だち追加して、「デザインチェックリスト」とメッセージを送ってください。
藤井最後までご覧いただきありがとうございます！
次のブログでお会いしましょう！
