この記事をシェア
「AIっぽい」「魂がない」「量産型」
もし、あなたが手塩にかけてリニューアルした自社のWebサイトに対して、こんな言葉が投げかけられたらどうしますか？
これは、あるB2Bテック企業のWeb担当者・佐藤（仮名）が、屈辱的なフィードバックから立ち上がり、サイトに「人間性」と「熱狂」を取り戻すまでの30日間の逆襲の物語です。
「これ、AIが作ったの?」その一言が、私のすべてを変えた。
～脱・量産型デザイン。Web担当者、起死回生のリブランディング記～
プロローグ:月曜朝の悪夢
「佐藤くん、正直に言っていいかな」
月曜日の定例ミーティング。リニューアルオープンから一週間が経過した自社サイト「Cyber Defense Hub（仮）」のモニターを見つめながら、営業部長が言った。
「なんかさ……怪しいんだよね」
心臓が早鐘を打つ。
「怪しい、とは……?」
「なんていうか、そこに『人』がいない感じ? ほら、この握手してるロボットの画像とか、青い基板の背景とか。最近よく見る『AIで大量生成しました』みたいなサイトに見えるんだよ。内容は立派なのに、見た目で損してる。これじゃ顧客は問い合わせボタンを押さないよ」
言葉が出なかった。
図星だったからだ。
私は効率を重視した。最新のモダンなテンプレートを使い、画像はStock素材サイトで「サイバーセキュリティ」と検索して出てきた高品質なCGを使った。配色は「信頼の青」。テキストは読みやすく整えた。
その結果できあがったのは、「どこにでもある、誰の記憶にも残らない、無機質な箱」だったのだ。
「AIっぽい」という言葉は、現代のクリエイティブにおいて「退屈」「手抜き」と同義になりつつある。私はその夜、PCの前で誓った。
- このサイトに「血」を通わせる。
AIには真似できない「偏愛」と「ノイズ」をぶち込む。- これは、私のエンジニアとしての、そして編集者としての意地だ。
第1章:本体デザインの改革 ～「青い基板」を捨てろ～
まず着手したのは、サイトの顔であるトップページ（本体）だ。
「AIっぽさ」の正体は何か。徹底的に分析した結果、以下の3要素が浮かび上がった。
- 予定調和な「テックブルー」単色の配色
- 実体のない「イメージCG（鍵、盾、基板）」の多用
- 整いすぎたグリッドレイアウト
これらを破壊（ディスラプト）することから始めた。
1. 色彩への「毒」の注入
信頼感＝青。この固定観念が思考停止の元凶だった。
私はベースのダークモードの中に、わずか5%だけ、強烈なアクセントカラーを混ぜることにした。
選んだのは「ネオンライム（#ccff00）」。
サイバーセキュリティは「守り」ではない。「脅威との闘い」だ。警告色でありながら、先進性を感じさせる鋭い緑。
ボタンのボーダー、見出しの下線、マウスストーカー。これらに蛍光色が入るだけで、画面が突然、緊張感を帯び始めた。「企業のパンフレット」から「ハッカーのコンソール画面」へと空気が変わった瞬間だった。
2. 脱・フリー素材宣言
「握手するビジネスマン」「空飛ぶ南京錠」。これらをフォルダからすべて削除した。
代わりに採用したのは、「タイポグラフィ（文字）」だ。
ヒーローエリア（FV）には、画像を使わない。
代わりに、画面からはみ出るほどの巨大なサンセリフ体でキャッチコピーを配置した。背景には、のっぺりとした単色ではなく、微かな「ノイズ（粒子）」テクスチャをCSSで重ねた。
ツルツルしたAI生成画像とは違う、ザラつきのある質感。
フィルムカメラのような「物質感」が、モニター越しに伝わるように設計した。
動的な演出も、「ふわっと表示」する安易なフェードインはやめた。代わりに、文字がパラパラとランダムに切り替わって確定するデコード演出や、ホバー時に枠線が走査線のように走るマイクロインタラクションを実装した。
「整っている」のではない。「エンジニアリングされている」。その感覚を目指した。
第2章:ブログ記事の改革 ～「テキストの羅列」から「雑誌」へ～
次にメスを入れたのは、SEOの要である「ブログ・分析レポート」セクションだ。
ここもまた、AI生成記事の温床に見えていた。淡々と続くテキスト、文脈に関係なく挿入されるフリー素材のPC画像。
「読まれている気がしない」
それは当然だ。編集者の「意志」が見えないからだ。
1. アイキャッチの「ルール化」と「脱・写真」
私は決断した。「今後、記事のアイキャッチに写真は一切使わない」。
代わりに、記事タイトルを大胆にレイアウトし、背景をデュオトーン（2色分解）で処理したグラフィックパターンで統一した。
これにより、記事一覧ページが「素材集のカタログ」から、統一感のある「テック系マガジン」のような見た目に変貌した。写真の質に左右されず、ブランドカラーが強烈に刷り込まれる。
2. データを「グラフィック」として扱う
「2025年の市場規模は2,726億ドルで…」というテキストを、ただの文章の中に埋もれさせない。
雑誌のエディトリアルデザインのように、数字だけを極大サイズで表示するCSSクラス <div class="big-number"> を作った。
スクロールすると、数字がカウントアップして表示される。
「ここを読んでくれ!」という叫びが聞こえるようなデザイン。これがAIの出力にはない「強調（Emphasize）」だ。
3. 執筆者の「顔」を出す
記事の最後にある「この記事を書いた人」。ここをアイコン画像でお茶を濁すのをやめた。
執筆担当のエンジニアやアナリストに頼み込み、モノクロのかっこいいポートレート写真を撮影した。そして、ただの経歴だけでなく、「なぜこの記事を書いたか」という一言コメント（Editor's Voice）を添えた。
「AIが書いた記事」ではない。「情熱を持った人間が、汗をかいて分析したレポート」であること。それを証明するのは、最終的には「人の顔」なのだ。
第3章:ニュースエリアの改革 ～「リスト」から「コックピット」へ～
最後はニュースセクションだ。
「日付とタイトルだけのリスト」。これは管理しやすく、見やすい。だが、あまりに事務的で、サイトの活気を殺していた。
私はここを「インテリジェンス・ダッシュボード（計器）」に変えることにした。
1. 情報の「密度」を上げる
あえて余白を詰め、情報を凝縮した。
各ニュースには必ず「タグ」をつける。
「脆弱性（Red）」「規制（Green）」「市場（Blue）」。
色とりどりのタグが並ぶことで、一覧画面がカラフルな計器類のように見える。
2. モノスペースフォントの採用
日付やタグのフォントを、プログラミング用フォント（等幅フォント）に変更した。
2025-12-24
ただの日付が、システムログのように見える。
「最新の情報が、リアルタイムでここに集まっている」というライブ感。
ニュースはただの「お知らせ」ではない。プロにとっては「判断材料」だ。その重みをデザインで表現した。
エピローグ:逆襲の果てに
リニューアルから一ヶ月後の月曜日。
再び定例ミーティングが開かれた。
アクセス解析の画面が表示される。
直帰率は改善し、何よりページ滞在時間が倍増していた。
営業部長が、少し照れくさそうに口を開いた。
「実はさ、昨日クライアントから言われたんだよ。『御社のサイト、なんかすごいことになってますね。本気度が違うっていうか……信頼できそうです』って」
私は小さくガッツポーズをした。
「AIっぽい」と言われたサイトは、もうそこにはなかった。
そこにあったのは、ザラついたノイズと、目に痛いほどのネオンカラーと、画面の向こうにいる「人間」の熱量が渦巻く、唯一無二のメディアだった。
編集後記:これからサイトを作るあなたへ
今、AIを使えば、誰でも「80点」のサイトが数秒で作れる時代です。
綺麗な画像、破綻のない文章、整ったレイアウト。
しかし、だからこそ「不完全さ」や「偏愛」が価値を持ちます。
- 予定調和な色を、一色だけ壊してみる。
- 綺麗な写真を捨てて、文字の力強さで勝負してみる。
- 情報を整理しすぎず、熱量をそのままぶつけてみる。
「AIっぽい」からの脱却。
それは、技術の問題ではありません。
「誰に、何を、どう感じてほしいか」という、作り手の「エゴ」を取り戻す戦いなのです。
あなたのサイトには、あなたの「体温」がありますか?
もし「No」なら、今すぐその青い基板の画像をゴミ箱に捨てるところから始めましょう。
大逆転劇は、そこから始まります。
