古いデザインのサイトが生む「これじゃない感」をなくす
- hi ko
- 7月15日
- 読了時間: 4分
更新日：7 日前
内容は良いのに、見た瞬間に“古い”と感じる。
それは機能の問題ではなく、見た目の規格がいまに合っていないサイン。古いデザインのサイトは、信頼・可読性・操作感の3点で損をします。
なぜ「これじゃない感」は見た目から生まれる？
本文タイポグラフィのズレ／余白と密度のズレ／色と質感のズレ。
古いデザインのサイトではこの3つが同時に起きがちです。
まず「読みやすさ＞装飾」。文字→余白→色の順で整えましょう
古いデザインのサイト ダサ見え“あるある” 8パターン
1｜小さすぎる本文（12px前後）→ 本文16〜18px、行間1.8前後、段落間に余白。
欧文は和文よりやや小さめでバランス調整
2｜平成感の強いボタン：角丸なし・強いグラデ・濃い影
→ 角丸8〜12px、影は薄く短く、フラット＋ホバーで差を付ける。
3｜スライダー／自動アニメ過多→ ヒーローは静止画＋短いコピー。
モーションは要所に0.2〜0.3秒で。
4｜写真の温度差：色がバラバラ・縦横比が混在
→ 画像は横1200px・16:9・WebPに統一、同じトーンで色味を寄せる。
シャープネスより“余白”を優先
5｜アイコンの統一感なし：線幅や角の丸みが混在
→ 線アイコンに寄せ、線幅と角の丸みを全ページで統一。
6｜コントラスト不足：薄グレーに薄グレー
→ 本文は**#111〜#222級の濃さ、補足は薄めグレーに。リンクは下線 or 明確な色差**。
7｜過剰な飾り線・ドロップキャップ
→ 見出しは太字＋下余白でメリハリ。飾りは章頭だけに抑える。
8｜テーブルレイアウトの名残：固定幅でスマホ拡大必須）
→ グリッドはCSSの列で再設計。1カラム主体で読み筋を作る。
非WebP画像・固定幅レイアウトは“即ダサ化”。まず置き換えを
ビジュアルの骨格：タイポ×余白×色を“いま”に寄せる
タイポ：階層を作る
H1：28〜34px／太字
H2：22〜26px／太字（下余白を広めに）
本文：16〜18px／行間1.8／段落間余白
強調＝太字、補足は【薄めグレー】、注意は【赤：一点だけ】
余白：呼吸を作る
セクション上下は本文2〜3行分
カード内側16〜24pxで統一
リストは行間＋4〜8px
色（3色＋αで十分）
ベース／テキスト（濃）／アクセント1色
サブで【薄めグレー】。状態色はアクセントとケンカしない範囲で。
写真と図の“いま”を入れる：安っぽさ回避のコツ
1画面1要素を意識（人物／道具／余白のどれかを主役に）
写真が弱ければ図表で置き換え（工程3段／比較2列）
文字乗せは12〜16字×2行まで。背景は薄マスクでコントラスト確保。
古いデザインのサイトでも、写真差し替え＋図表化だけで印象は激変】
UIの現代化：触って“心地よい”を足す
ボタンのヒット領域は高さ44px以上、横幅は8割目安
フォーカスリングは消さない（キーボード操作の見失い防止）
フォームは必須3項目から。エラーは日本語で具体的に
ナビは5〜7項目に厳選、下層はフッターで補完操作の“音量”を下げる＝落ち着いたUIに見える
「ブランドの体温」を合わせる（見た目×言葉）
写真は距離感を合わせる（近景が多いと親密、遠景が多いと硬質）
見出しは名詞止め＋動詞混ぜで硬さを緩和
CTA文言はベネフィット＋所要時間（例：3分で読める資料）
見た目だけでなくトーンを合わせると“これじゃない感”が消える
5分セルフチェック
本文16〜18px？ 行間1.8程度？
H1/H2の差と下余白は十分？
画像は1200px・16:9・WebP？ 色味は寄っている？
ボタンは角丸8〜12px、影は薄い？ ホバーはある？
ナビは5〜7項目？ スライダーは止めた？
コントラストは十分？ 補足は【薄めグレー】？
フォームは必須3項目？ エラー文は分かりやすい？
1つでも“×”なら、そこから。古いデザインのサイトの印象は“数カ所の差し替え”で変わる
やらないリスト（“古く見える”を増幅させる罠）
強いグラデ／光沢ボタン／濃い長影
見出し上下に太い飾り線を多用
スライダーを3枚以上回す
文中リンクを大量にばら撒く（段落末は次に読む1本に絞る）
画像の縦横比バラバラ／PNG重め／保存先や命名が毎回違う
この5つをやめるだけで“平成感”は大幅に後退
まとめ：見た目は“規格”で整えると、一気に今っぽい
文字→余白→色→写真→UIの順に直す順序が決まると、古いデザインのサイトでも小工数で“今の標準”に寄せられます。センスよりも、規格化と減らす設計です。
――
差し替え中心で止めずに見た目を今に寄せたいときは、COMFORT NOVA（コンフォートノヴァ）へ。ライト診断で“ダサ見え要因”を洗い、文字・余白・色・写真・UIの順で最短の改善案を並走します。
無理なく、しかも早く。
