---

name: non-ai-web-design
description: >-
「AIっぽい／AI生成っぽい」ウェブサイトの見た目を避け、具体的な価値・証拠・実写・
明快な導線で信頼を作るデザイン方針とコード実装のガイド。日本語のコーポレート／
サービスサイトやランディングページの新規制作・リデザイン・デザインレビューで使う。
ユーザーが「AIっぽくないサイトにしたい」「未来感/発光グラデを減らしたい」「ヒーローや
コピーが薄い」「信頼される見た目にしたい」「LP をレビューしてほしい」などと言った時は、
明示的に "skill" と言われなくても必ずこのスキルを使うこと。AI企業サイト風の抽象コピー・
ストック写真・カード連打・過剰アニメを実務的な代替に置き換え、デザイントークン・
アクセシビリティ・性能・チェックリスト・スタイルガイドまで落とし込む。

非AI風ウェブデザイン (Non-AI Web Design)

このスキルの狙い

「AIっぽい」見た目を避ける最短ルートは、抽象的な未来感を削り、現実の価値・現実の証拠・
現実の文脈を前面に出すこと。発光グラデ／曖昧な知能コピー／汎用ストック写真／意味の薄い
カード連打を減らし、具体的なタスク・固有名詞・実写・明快な導線・読める日本語・
控えめで目的のある動きへ寄せる。

重要な前提として、これは「地味にする」ことではない。彩度を下げて余白を増やすこと自体が
目的ではなく、「何をしている組織か」を現実の材料で示すのが本質。Aesop や Patagonia は
静かだが弱くない。逆に手描き風や紙っぽさを表面に貼るだけだと「温かさで実態を隠している」
状態になり、むしろ不信につながる。

そして、本当に AI を含む製品なら AI 表現をゼロにするのも誤り。AI であることを隠すのでは
なく、どこで何を自動化し、何が人の責任範囲で、どう確認できるかを局所的に明示する方が
信用される（IBM Carbon の考え方: AI スタイリングは装飾でなく AI 使用箇所の明示に使う）。

中核の判断原則

最も実用的な原則はこれ一本で切れる:

その表現は、ブランドの現実を説明しているか。それともただ雰囲気を盛っているだけか。

現実を説明しているなら残す。雰囲気だけなら削る。この基準で全要素（コピー・画像・色・
モーション・アイコン・レイアウト）を通す。

補助原則:

1. 具体 > 抽象 — 「frontier intelligence」ではなく「誰向け × 何が × どれだけ楽になるか」を一文で。
2. 証拠 > 演出 — 実写・工程・担当者・サンプル・数値を前に出す。装飾画像に依存しない。
3. 前出し(upfront disclosure) — 適用範囲・対象外・前提を隠さず先に見せる。
4. 意味のある動きだけ — フォーカス・開閉・状態変化のみ。常時浮遊・視差・背景アニメは削る。
5. AI は局所明示 — 全画面AI風にせず、AI が介在する部品にだけラベルと説明入口を付ける。
6. 再現可能な仕様に落とす — 「感じ」で終わらせず、トークン／スタイルガイドとして固定する。

「AIっぽさ」の症状カタログ

すべてが同時にある必要はなく、複数重なると一気に「AIサイト感」が強くなる。

領域	典型的な「AIっぽさ」	そう見える理由
ビジュアル	発光、光彩、オーロラ背景、虹色グラデ、抽象的な光の演出	「未来の知能」の記号として読まれやすい
UX	入力欄・チャットUIをファーストビューの主役にする	現実的な利用文脈が後景化する
コピー	「frontier intelligence」等の抽象スローガン、利用場面が見えない文言	理解コストが上がり中身が曖昧に見える
画像	使い道のない抽象イラスト、意味のない雰囲気画像	装飾画像は無視されやすい
レイアウト	大型ヒーローの下に均質なカードを何段も並べる	何から読むべきかの階層が弱い
色	黒・濃紺ベースにネオン差し色、カラフルなマルチグラデ	既視感のあるテック記号になっている
タイポ	極端に大きい一言見出し、日本語本文の可読性が後回し	欧文SaaS風のリズムは日本語で可読性が落ちる
モーション	背景が常時ゆらぐ、視差が強い、過剰なホバー	演出が情報取得より勝ってしまう
アイコン	きらめき・星・脳・魔法杖など意味よりムードを運ぶ記号	内容理解を助けない装飾になる
ストック写真	genericな笑顔のモデル、現場と無関係な人物写真	無視されやすく信頼を作らない
生成画像アーティファクト	手指・反射・物理整合性の崩れ	細部で「作り物感」が出て信頼を落とす

主要な置き換え

AIっぽい特徴	実務での代替
抽象ヒーローコピー	「対象ユーザー × 行為 × 成果」を一文で言い切る
プロンプト欄を主役にする	導入効果・サンプル・実例・価格の入口を主役に。会話UIは製品ページ以降
発光・虹色グラデ	素材感のある中間色、明確な境界線、落ち着いた配色
雰囲気画像・genericストック人物	実在の製品・工程・チーム・顧客環境・手元の写真
生成画像のヒーロー	作者と由来を説明できる表現。原則は実写
均質なカード連打	課題 → 対応範囲 → 証拠 → 料金 → FAQ の物語順
「こちら」「もっと詳しく」	ページ主題・機能名そのものをリンク文言に
常時アニメーション	状態変化を伝える最小限だけ残す

Before → After の型（要点は「AIらしさを減らす」でなく「現実らしさを増やす」）:

Before	After
「Frontier intelligence for every workflow」	「見積依頼への一次返信を、社内ルールに沿って30分以内に返せるようにする」
「AI-powered workspace for modern teams」	「テンプレート・確認者・禁止表現を先に設定し、初稿だけ自動生成。最終送信は担当者が確認」
抽象グラデ背景＋光る球体	実際の作業風景・対象製品・処理画面・現場の手元写真
「Try AI Now」	「サンプル文面を見る」「導入条件を確認する」
カード12枚で機能を羅列	課題 → 対応範囲 → 証拠 → 料金条件 → FAQ

アクセシビリティと性能の実装基準

観点	実装方針
本文可読性	本文/UI は16px以上、行高1.5以上
余白	8px基準の一貫したスケールで階層を作る
リンク文言	「こちら」「もっと詳しく」を避け、主題が分かる文言にする
タップ領域	24×24 CSS px 以上の最小操作領域（WCAG 2.2）
アイコン	意味があるものには代替テキストか隣接ラベル
モーション	prefers-reduced-motion に対応し、視差・浮遊・常時アニメを切る
画像読み込み	ヒーロー以外は loading="lazy"、主画像は eager + decoding="async"
文字組	text-wrap: balance は見出しのみ、pretty は長文限定（性能コスト注意）

検証は 自動検査（axe DevTools, Lighthouse, PageSpeed Insights）→ 手動検査（NVDA・キーボード操作）
→ 実ユーザー観察（具体的タスクを与えて5人程度で主要問題を拾う） の三層で回す。A/B実験は
CTRだけでなく、サンプル閲覧率・問い合わせ完了率・離脱率・FAQ到達なども併置する。

使い方（ワークフロー）

A. 新規制作・リデザイン

1. 未指定の前提（業種・ブランド資産・主要CV・写真予算・スタック）を確認し、不明なら安全側の初期値で進める。
2. 情報構造を「課題 → 対応範囲 → 証拠 → 料金/条件 → FAQ」の順に組む。
3. 上記の代替パターンを当て、a11y/性能の基準を満たす。
4. 下記チェックリストでセルフレビューする。

B. 既存サイト／LPのレビュー

1. 症状カタログで「AIっぽさ」を棚卸しする。
2. 各症状に代替を対応づけ、優先度（第一印象→画像→コピー→CTA）を付ける。
3. 「その表現はブランドの現実を説明しているか」で全要素を判定し、具体的な差分として返す。

C. チーム運用
下記スタイルガイドテンプレートを埋める。曖昧にすると数か月でまた「ありがちなAI風SaaS」に戻る。

再利用チェックリスト

項目	Yes の基準
ファーストビューだけで誰向けの何のサイトか言えるか	主語・対象・成果が1画面で理解できる
ヒーローに抽象的なAI語が多すぎないか	固有の利用場面・具体的成果が入っている
画像は実在の工程・製品・人物を伝えているか	雰囲気画像に依存していない
リンク文言は単独で意味が通るか	「こちら」だけになっていない
CTAは試す前の判断材料を出しているか	サンプル・条件・価格前提・FAQへの入口がある
AI機能がある場合、局所明示しているか	全画面AI風でなく使用箇所と説明入口がある
本文は日本語として読みやすいか	16px以上、行高1.5以上
動きは意味を持っているか	常時浮遊・視差・背景アニメがない
スクリーンリーダーで意味が通るか	代替テキスト・リンク目的・見出し階層が破綻していない

チーム用スタイルガイドテンプレート（推奨初期値）

項目	推奨初期値
ブランドの基調	落ち着き・具体性・手触り・誠実さ
ヒーローコピー	「対象ユーザー × 行為 × 成果」形式
主要CTA	「サンプルを見る」「条件を確認する」
色	中間色背景・濃色本文・明確な境界線
タイポ	本文16px以上・行高1.5以上・Noto Sans JP系
余白スケール	8 / 24 / 64 を中心に3〜5段
角丸	小さめで一貫、過度なピルを避ける
画像方針	製品・工程・手元・担当者・顧客環境。stock/generic人物は避ける
生成画像	原則使わない。使うなら作者・意図・用途を明示
リンク文言	ページ主題や機能名をそのまま使う
モーション	フォーカス・開閉・状態変化のみ
AI表現	AI利用箇所にだけラベル・説明入口

参考になる非AI風の実例

見るポイントは「未来感があるか」でなく「何をしている組織かが最初の数秒で分かるか」。

• GOV.UK（英・公共）: トップで検索と主要タスクを即提示
• デジタル庁デザインシステム（日・公共）: タイポ・余白・リンク文言・a11yが再現可能な仕様として公開
• 無印良品（日・小売）: 約7,000品目の現実の品揃えを商品・カテゴリで見せる
• 土屋鞄製造所（日・D2C）: 「手仕事」を抽象語でなくブランド文脈と商品で支える
• ほぼ日（日・メディア/EC）: 毎日更新・編集設計そのものが個性
• Patagonia（米・小売）: 製品カテゴリとブランド活動が具体的に接続
• Aesop（豪・小売）: 高級感を発光演出でなく素材の近接写真と静かなタイポ・余白で作る

参照優先順位（資料・ツール）

日本語サイトでは日本語の公式設計資料を最優先（デジタル庁デザインシステム、WAIC WCAG 2.2
日本語訳、SmartHR / freee）、次に国際的な公式デザインシステム（GOV.UK、USWDS、IBM Carbon）、
次に一次研究（Nielsen Norman Group）。実装根拠はMDN / web.dev、検証はLighthouse / PageSpeed
Insights / axe DevTools / NVDA。