saas サイト デザイン 信頼感キット、クリーンなセクション9選

以下は、その原則で実際に作った原ページです。Stripe や Linear のようなあの画面を、名前が分からず保存していた人のために、そのまま置いています。ナビからフッターまでスクロールしながら、本当に色が青一色しかないかを数えてみてください。

上の画面を構成する9つの部品を一つずつ切り離し、グリッドに並べ直しました。訪問者が画面を開いたときに目が動く順番 — 目を引く・見て回る・機能を確認する・料金を確認する・信頼する・行動する — その順番のままです。キット全体で使う色は青一色だけで、それ以外はすべて白・オフホワイト・グレーです。

自動再生 · タイルを押すとその項目へ · すべて1つのzip

• 01 ソフトグリッドのヒーロー
• 02 アンダーラインナビ
• 03 アイコンカードグリッド
• 04 チェック機能リスト
• 05 シンプル料金プラン
• 06 ロゴ信頼のレビュー
• 07 ソリッドCTA帯
• 08 ミニマル4カラムフッター
• 09 クリーンなボタン・入力欄

このキットの色は8つで終わります。ブランドカラーを小さな本文の文字色に直接使わないことが、読みやすい信頼感の条件です。

役割	色	使う場所
オフホワイト	#f7f9fc	ページ全体の背景
ブルーティント	#eaf1ff	カードグリッドの舞台・アイコン背景
グレーティント	#f1f5f9	ナビ・ロゴ帯の舞台
ミントティント	#eaf6f1	チェックアイコン・入力欄の舞台
ブランドブルー	#2f6df6	ボタン・アイコン・枠線・強調
ブルーディープ	#1d4ed8	CTA帯の背景・ボタンの押し込み
スレート	#475569	補助文字
インク	#17141a	見出し・本文の文字

01ソフトグリッドのヒーロー

オフホワイトの背景にごく薄いドットグリッドを敷き、手前の白いカードがゆっくりと上下に浮かびます。強調は小さな青いバッジひとつだけで、影はすべて中立なグレーで浅く保っています。

<section class="dotgrid relative overflow-hidden rounded-card py-20">
  <div class="relative mx-auto flex max-w-xl flex-col items-start gap-4
              rounded-card bg-white p-10 shadow-soft">
    <p class="text-xs font-bold uppercase tracking-widest text-brand">Trusted by teams</p>
    <h1 class="text-4xl font-bold leading-tight">もっと速く、もっと安全に</h1>
    <button class="rounded-pill bg-brand px-6 py-3 text-sm font-bold text-white shadow-brand">無料で始める</button>
  </div>
</section>

02アンダーラインナビ

メニュー文字の下で青いアンダーラインがアクティブなタブへなめらかに移動します。実際のデモでは、線と同じ拍子で薄い青のハイライトブロックも一緒に動きます — 3pxの線一本だけでは、動き自体がほとんど見えなかったためです。

<nav class="mx-auto flex max-w-5xl items-center gap-6 rounded-pill bg-white px-5 py-3 shadow-soft-sm">
  <span class="relative whitespace-nowrap text-xs font-semibold pb-1
               after:absolute after:-bottom-[13px] after:left-0
               after:h-[3px] after:w-full after:rounded-control after:bg-brand">ホーム</span>
  <span class="whitespace-nowrap text-xs font-semibold text-slate">機能</span>
</nav>

03アイコンカードグリッド

白いカード4枚がごく薄いグレーの影だけをまとってグリッドに並び、アイコンを収めた青い円は開始時刻をずらしながら順番に少し拡大して濃くなります。色はすべて同じ青一色です。

<div class="flex flex-col items-start gap-3 rounded-card bg-white p-5 shadow-soft-sm">
  <span class="grid h-9 w-9 place-items-center rounded-full bg-bluetint text-brand">
    <svg><!-- ph:shield-check-duotone --></svg>
  </span>
  <p class="text-sm font-bold">セキュリティ</p>
</div>

04チェック機能リスト

各行は薄いミントの円の中に青いチェックが描かれ、リストは上から順に滑るように現れては消えることを繰り返します。チェックは手描きの図形ではなく、Phosphor Duotoneセットの実物のアイコンです。

<li class="flex items-center gap-3 rounded-pill bg-white px-5 py-3 shadow-soft-sm">
  <span class="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-mint text-brand">
    <svg><!-- ph:check-duotone --></svg>
  </span>
  <span class="text-sm font-semibold">チームメンバー無制限</span>
</li>

05シンプル料金プラン

3つのプランはすべて同じ白いカードですが、おすすめのプランだけに細い青枠とやや深い影を付けて区別します。派手な背景色ではなく、枠線の太さと影の深さだけで序列を作るのがこのスタイルの核心です。

<div class="relative flex-1 max-w-[240px] rounded-card border-2 border-brand
            bg-white p-6 text-center shadow-brand">
  <span class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-pill
               bg-brand px-3 py-1 text-[11px] font-bold text-white">おすすめ</span>
  <p class="text-sm font-bold">プロ</p>
</div>

06ロゴ信頼のレビュー

レビューカードの上でグレーのロゴチップ6個が、元の並びと複製した並びをつなげて-50%だけ動かすことで、継ぎ目なく無限に横へ流れます。ホバーしたチップだけ青色に戻ります。

<div class="track flex w-max" style="animation: scrollLogos 6s linear infinite">
  <span class="mr-3 shrink-0 rounded-pill bg-white px-5 py-2 text-xs
               font-bold text-slate shadow-soft-sm">Nimbus</span>
  <!-- 同じ6個のチップをもう一度そのまま続けて並べる -->
</div>

07ソリッドCTA帯

帯はグラデーションなしのブランドブルー単色で塗り、中の白いボタンだけが押し込まれては浮き上がる動きを繰り返します。色を一色に絞ることがこのスタイルの節度です。

<div class="rounded-card bg-brand-deep px-10 py-14 shadow-brand-deep text-center">
  <h2 class="text-3xl font-bold text-white">今すぐ無料で始める</h2>
  <button class="mt-4 rounded-pill bg-white px-8 py-3 text-sm font-bold text-brand-deep">デモを申し込む</button>
</div>

08ミニマル4カラムフッター

薄いグレーの区切り線を1本引いた上にカラムのリンクを並べ、ソーシャルアイコンの円はホバーで(デモでは自動で順番に)青く塗られながら少し大きくなります。装飾はこの線1本だけです。

<div class="grid h-9 w-9 place-items-center rounded-full bg-graytint text-slate
            transition hover:bg-brand hover:text-white">
  <svg><!-- ph:twitter-logo-duotone --></svg>
</div>

09クリーンなボタン・入力欄

ボタンはホバーで背景がわずかに濃くなり1px浮き上がり、入力欄は薄いグレーの枠がフォーカスで青い二重リングへ滑らかに変わります。このキット全体の手触りをひとつの組み合わせにまとめた項目です。

<input class="w-full rounded-control border border-border bg-white px-4 py-3
              text-sm outline-none focus:border-brand
              focus:ring-4 focus:ring-brand/20" placeholder="[email protected]">
<button class="rounded-control bg-brand px-6 py-3 text-sm font-bold text-white
               shadow-brand hover:bg-brand-deep hover:-translate-y-px">続ける</button>

tailwind.config カスタム

背景2色とブランドブルー1色、影4種(グレーのshadow-soft・shadow-soft-smが2つ、ブランドブルーを帯びたshadow-brand・shadow-brand-deepが2つ)をこの1ファイルにまとめておくと、原ページと9つの部品すべてが同じ節度を保てます。ヒーローのCTA・プロプランのカード・CTA帯・ボタンなど強調が必要な場所だけブランドの影を使い、それ以外はグレーの影のままにします。

theme: {
  extend: {
    colors: {
      offwhite: "#f7f9fc", bluetint: "#eaf1ff", graytint: "#f1f5f9", mint: "#eaf6f1",
      ink: "#17141a", slate: "#475569", brand: "#2f6df6", "brand-deep": "#1d4ed8",
      border: "#e2e8f0",
    },
    borderRadius: { card: "16px", control: "12px", pill: "999px" },
    boxShadow: {
      soft: "0 14px 28px rgba(23,20,26,.08)",
      "soft-sm": "0 8px 16px rgba(23,20,26,.07)",
      brand: "0 10px 22px rgba(47,109,246,.28)",
      "brand-deep": "0 16px 30px rgba(29,78,216,.32)",
    },
  },
},

バイブコーディング プロンプト

configをプロジェクトに入れた後、Claude CodeやCursorに渡す指示は以下がすべてです。ルールが10行あるのは、キャンディやシトラス系とは逆に「何を使わないか」まで明記する必要があるからです。指示文の全文はzipのprompt.mdに入っています。

背景は白とoffwhite(#f7f9fc)の2トーンだけを使う。ブランドカラーはbrand(#2f6df6)一色のみで、
カードはすべて白のままにする。影はグレー系(shadow-soft)で浅くだけ使い、色付きの影は使わない。
文字は常にinkかslateで、brandは使わない。序列は枠線と影の深さで作り、カードの背景色は変えない。

この指示文を実際にpage/index.htmlへ適用し、1280px幅で画面全体を撮影したのが下の画像です。

どこで壊れるか — 落とし穴

最初につまずいたのはナビインジケーターの動きでした。最初は3pxのアンダーライン1本だけを動かしていましたが、書き出したgifを見ると480×300の舞台でも動き自体が弱く、「動いているのか分からない」印象でした。実測すると線1本だけでは変化した面積が小さすぎ、タブの幅と同じ薄い青のハイライトブロックを線と同じ拍子で一緒に動かして、ようやく動きが目に入るようになりました。

2つ目は画面幅です。最初はナビのタブ3つをそれぞれ108pxにして左右の余白を足したところ、全体の幅が332pxになり、320pxのスマホ幅の基準を12pxも超えていました。タブ幅を92pxに縮め、全体を284pxに収めてから、320×200のレンダーで横のはみ出しが消えました。3つ目は料金プランの「エンタープライズ」という言葉でした — 92px幅のカードの中で単語の途中で改行されてしまい、「法人向け」という短い言葉に変えてからようやく1行に収まりました。この3つを直した完成版は、パスワード8h4q5uurのかかったzipを開けばそのまま確認できます。

9個のデモすべてがMDNのprefers-reduced-motionメディアクエリを検知すると動きを止め、各要素を静止状態(カードは浮く前の位置、リストの行は全部表示された状態、フォーカスリングは消えた状態)に固定します。動きを減らしたい訪問者には、カードの浮き沈みやロゴの流れは見えなくなりますが、カード・ボタン・入力欄そのものの情報は残ります。

アクセシビリティ

このスタイルがパステルやキャンディ系よりコントラストの面で有利なのは、背景がほぼ常に白かオフホワイトで、計算が単純になるからです。実際に計算すると、インク(#17141a)の文字は白背景で18.24:1、補助文字に使うスレート(#475569)は7.58:1と、どちらもWCAG 2.1の最低コントラスト基準である本文4.5:1を十分に超えています。一方、ブランドブルー(#2f6df6)を白背景の上に文字としてそのまま使うと4.53:1と基準線ぎりぎりになるため、このコードではブランドブルーを本文の文字色には使わず、面積や太さのあるボタン・アイコン・枠線だけに使っています。CTA帯のように青を背景に使う場面では、より濃いブルーディープ(#1d4ed8)に切り替え、白文字で6.70:1を確保しました。影はMDNのbox-shadow構文に沿って不透明度を0.07〜0.32に抑え、枠線の代わりにならないようにし、キーボードフォーカスは:focus-visibleのアウトラインと二重の青いリングで別途描いています。

信頼感のあるSaaS以外のホームページトレンドが気になる方はデザイントレンドカテゴリーをご覧いただき、このブログ全体が何を扱っているかは紹介ページにまとめてあります。

FAQ

明るいトーンなのに、なぜパステルキャンディのようには見えないのですか？

明るさの由来が違うからです。パステルキャンディ系はピンク・レモン・ミント・ラベンダーのように、カードごとに違う色を使うことで明るく可愛く見えます。このキットは背景を中立な2トーンに固定し、ブランドカラーを1色だけ足すことで、色数を最小限に抑えたまま明るさを出しています。色が多いほどカジュアルに、少ないほど真面目に見えます。

青の代わりに別のブランドカラーを使ってもいいですか？

使えますが、白背景の上の文字として使うなら4.5:1のコントラストを自分で計算する必要があります。このキットの青(#2f6df6)は4.53:1と基準線ぎりぎりのため本文には使っていません。同じ明るさの緑や紫では基準を下回ることもあるので、計算せずにそのまま置き換えてはいけません。

カードごとに薄い色の背景を入れてもこのスタイルと言えますか？

カード自体の表面を色で塗った時点で、このスタイルからは外れます。このキットではカードは常に白のままで、薄い色は背景の広い部分やアイコンの円のような小さな強調にだけ使います。カードの背景まで色づけると、キャンディやフルーツ系の「かわいい明るさ」に近づいてしまいます。