FASTCODING BLOG

こんにちは！株式会社ファストコーディングの働くおかんです。

先日、子どもの誕生日ケーキを手作りしたんです。味は悪くないはずなのに、見た目がどうにも「手作り感」全開で。隣に並べたお店のケーキと比べると、同じイチゴでも盛り付けの余白とか、クリームの塗り方の均一さで印象がまるで違いました。

Webサイトでも似たことが起きるんですよね。デザインカンプ自体はちゃんとしているのに、コーディングした実装を見ると「なんか安っぽい」「素人っぽい」と言われることがあります。色もフォントもデザイン通りなのに、なぜか洗練されて見えない。

この「安っぽさ」の正体は、影・余白・色・角丸・動きの”微差”なんです。デザイナーが意図した繊細なニュアンスが、コーディングの段階で潰れてしまっている。今回は、CSSの設定を少し変えるだけで実装の印象が変わる5つの技法を紹介します。

技法1：box-shadowを1層から3層にする

安っぽく見えるサイトの特徴の一つが、影が「ベタッ」としていることです。

/* Before：1層の影 → ベタッとした印象 */
.card-before {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* After：3層の影 → 自然で奥行きのある印象 */
.card-after {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 8px rgba(0, 0, 0, 0.04),
    0 12px 24px rgba(0, 0, 0, 0.06);
}

現実世界の影は1つではないんですよね。光源からの距離に応じて、近い影（シャープ）、中間の影、遠い影（ぼんやり）が重なっています。CSSでも3層に分けることで、自然な奥行き感が出ます。

ポイントは各層の透明度を抑えることです。1層で0.15にするのではなく、3層に分けてそれぞれ0.04〜0.06にする。合計の暗さは同じくらいなんですが、見た目の印象がまったく違います。

ある案件でカードコンポーネントの影を1層→3層に変えたところ、クライアントから「高級感が出た」と言ってもらえました！変えたのはbox-shadowだけです。

技法2：純黒(#000)を使わない

テキストやボーダーに#000000（純黒）を使うと、コントラストが強すぎてギラつきます。ディスプレイ上の純黒は、現実世界にはない「不自然な黒」です。

/* Before：純黒 → ギラつく */
.text-before {
  color: #000000;
}

.border-before {
  border: 1px solid #000000;
}

/* After：ニュアンスのある暗色 → 落ち着いた印象 */
.text-after {
  color: #1a1a2e; /* 暗い紺 */
}

.border-after {
  border: 1px solid #e2e4e9; /* グレー系 */
}

テキストには#1a1a2e（暗い紺）や#111827（暗いグレー）のような、わずかに色味が入った暗色を使います。純黒と比べると柔らかく、でもコントラストは十分なんです。高級なブランドサイトのテキストは、ほぼ純黒ではないんですよね。

補助テキストには#6b7280あたりのグレーを使い、ボーダーには#e2e4e9や#e5e7ebのような薄いグレー。色の階調を意識するだけで、全体の印象がぐっと落ち着きます。

/* 色の階調をCSS変数で管理する */
:root {
  --color-text-primary: #111827;
  --color-text-secondary: #4b5563;
  --color-text-muted: #9ca3af;
  --color-border: #e5e7eb;
  --color-bg-subtle: #f9fafb;
}

技法3：letter-spacingとline-heightの微調整

日本語サイトでフォントの設定をデフォルトのまま使うと、文字が詰まった印象になります。

/* Before：デフォルト → 詰まった印象 */
.heading-before {
  font-size: 32px;
  /* letter-spacing, line-height未設定 */
}

/* After：微調整 → 余裕のある印象 */
.heading-after {
  font-size: 32px;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.body-text {
  font-size: 16px;
  letter-spacing: 0.02em;
  line-height: 1.8;
}

日本語の見出しにはletter-spacing: 0.04em（文字サイズの4%）を入れると、一気に読みやすくなります！本文は0.02em程度。英語サイトでは不要なことが多いですが、日本語では文字間の調整が印象を大きく左右するんです。

line-heightも同様です。見出しは1.3〜1.4、本文は1.7〜1.8がバランスが良いとされています。デフォルトの1.2やnormalのままだと窮屈に見えるんですよね。

夜、子どもが寝た後に同じページでletter-spacingだけを変えてスクリーンショットを撮って比較したことがあるんですが、文字の間に「空気」が入るだけで、まったく違うサイトに見えました。

技法4：border-radiusの一貫性

サイト全体で角丸の値がバラバラだと、統一感がなく安っぽく見えます。

/* Before：場所ごとにバラバラ */
.button { border-radius: 8px; }
.card { border-radius: 12px; }
.input { border-radius: 4px; }
.badge { border-radius: 16px; }
.modal { border-radius: 6px; }

/* After：トークン化して統一 */
:root {
  --radius-sm: 6px;   /* ボタン、バッジ、入力欄 */
  --radius-md: 12px;  /* カード、モーダル */
  --radius-lg: 16px;  /* 大きなパネル */
  --radius-full: 9999px; /* ピル型ボタン */
}

.button { border-radius: var(--radius-sm); }
.card { border-radius: var(--radius-md); }
.input { border-radius: var(--radius-sm); }
.badge { border-radius: var(--radius-full); }
.modal { border-radius: var(--radius-md); }

角丸を3〜4段階のトークンに統一するだけで、サイト全体の一貫性が出ます。「なんかバラバラ」という印象の正体は、こういう細かい数値の不統一であることが多いんですよね。

技法5：transitionに時間差をつける

ホバーエフェクトで複数のプロパティが同時に変わると、機械的で安っぽく見えます。

/* Before：全プロパティ同時変化 → 機械的 */
.link-before {
  color: #3b82f6;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
}

.link-before:hover {
  color: #1d4ed8;
  border-bottom-color: #1d4ed8;
}

/* After：プロパティごとに時間差 → 自然な動き */
.link-after {
  color: #3b82f6;
  border-bottom: 1px solid transparent;
  transition:
    color 0.15s ease,
    border-bottom-color 0.3s ease 0.05s;
}

.link-after:hover {
  color: #1d4ed8;
  border-bottom-color: #1d4ed8;
}

色が先に変わり（0.15秒）、少し遅れてボーダーが現れる（0.05秒遅延 + 0.3秒）。この微妙な時間差が「自然さ」を生むんです。transition: allは便利ですが、高級感を出したいときはプロパティごとに個別指定するのがおすすめです。

ボタンにも同じ考え方が使えます。

.button-premium {
  background-color: #3b82f6;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transform: translateY(0);
  transition:
    background-color 0.15s ease,
    box-shadow 0.25s ease,
    transform 0.2s ease;
}

.button-premium:hover {
  background-color: #2563eb;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 8px rgba(0, 0, 0, 0.04),
    0 8px 16px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

背景色が最初に変わり、影がゆっくり広がり、位置がふわっと上がる。この3段階の変化が、ボタンひとつに「品格」を与えます。