Common Tics
「AI感」の正体
AIにLP制作を任せると、モデルが変わっても同じ手癖が出る。装飾の好みというより、学習データの中央値へ寄っていった結果だ。10個のクセをCSSの用語で並べる。
01
紫→ピンクのグラデーション
#667eea→#764ba2の組み合わせを、ヒーロー背景からボタンまで塗りたくる。
02
絵文字の丸アイコン
🚀📋⏰のような絵文字を円形の色付き背景に載せて、機能アイコン代わりにする。
03
均等3カラムのカード＋ふわっと影
内容の重みを無視して3分割し、box-shadowの柔らかい影を敷いて浮かせる。
04
blobがふわふわ漂うヒーロー
border-radius:50%の色面をぼかして、ヒーロー背後でゆっくり動かす。
05
glassmorphismヘッダー
backdrop-filter:blur()と半透明の白背景で、ヘッダーを浮遊させる。
06
border-radius:999pxのボタン
角を全部丸めて、薬のカプセルのような形のボタンに揃える。
07
hoverでtranslateY(-8px)
カードにもボタンにも、マウスが乗るたび同じ8px前後の浮き上がりを付ける。
08
フォントはInter一択
見出しも本文も欧文はInterで固定し、和文フォントは後から辻褄合わせで足す。
09
中央揃えのsection-title
セクション見出しをtext-align:centerで統一し、下に一文添えるだけで終える。
10
「✨🚀」で締めるCTA
最後のボタンの文言に絵文字を足して、勢いだけで押し切ろうとする。
この10個は、次のCASE 01で実際にまとめて踏んでいる。何も指示しないとどうなるかを先に見ておくと、02以降との差分がわかりやすい。
Thirty Cases
同じLPを30通りの指示で作る
コピーは固定したまま、作り方の指示だけを9つのアプローチに分けた。カテゴリが違えば、渡しているものの種類も違う。
ベースライン
指示を足す前の状態。ここからどれだけ変わるかが、残り25ケースを見るときの基準になる。
デザインシステムを移植する
自分でゼロから決めず、既にあるトークン一式に従わせる。角丸・配色・余白の値をまるごと借りてくる。
スキルで判断力を与える
トークンではなく判断基準そのものを渡す。何を選んではいけないかのルールを持たせるやり方。CASE 27〜30は、スキル配布サイト tasteskill.dev の4スキルを同条件で当てた追試。
CASE 04
Hallmarkスキル（テーマ: Lumen）
「AIっぽさ」を57のゲートで拒否するスキル。深夜の工房×真鍮の発光。
CASE 05
emilkowalski/skills
Linear Design Engineerの判断力。モノクロ＋見えないマイクロインタラクション。
CASE 27
tasteskill.dev / taste-skill（v2）
1,206行の禁止パターン集。眉ラベル配給制・センター寄せ禁止・実画像必須の旗艦スキル。
CASE 28
tasteskill.dev / soft-skill
「$150k級エージェンシー」を強制するペルソナ。OLED黒×二重ベゼル×ガラスのピルnav。
CASE 29
tasteskill.dev / minimalist-skill
Notion的ドキュメント様式。1px罫線固定・影ほぼ禁止・退色パステルの静かな顔。
CASE 30
tasteskill.dev / brutalist-skill
軍用端末×スイス組版。走査線・ASCII装飾・gap:1pxの区画線で組むCRTモード。
順番と参照先を変える
実装から始めない、あるいは実在するものを先に観察する。工程の順番自体を変える2ケース。
技術の流儀に乗る
特定の技術コミュニティの見た目と作法に寄せる。開発者文化の顔、状態を持つUIの顔、二度と同じ絵にならない顔。
様式と質感を指定する
美術や印刷の様式、素材の質感を指定する。禁止事項が多い様式ほど、AIの手癖が入り込む隙間は減る。
動きで魅せる
時間が来たら勝手に揺れるだけの装飾ではなく、操作・物理・スクロールに反応する動きを組む。テンプレの文法には、そもそも動きの語彙自体が無い。
CASE 16
Three.jsスクロール駆動3D
スクロール量に連動して3Dの積み木が組み上がる。読者の手の速度で動くscrollytelling。
CASE 17
GSAPモーションタイポグラフィ
行マスクのstagger・無限マーキー・磁気ボタン・カスタムカーソル。動きの語彙を総入れ替え。
CASE 18
Matter.js物理エンジン
積み木が重力で落ちて積み上がり、掴んで投げられる。毎回結果が違う非決定的な動き。
CASE 19
p5.jsジェネラティブアート
フローフィールドが開くたびに違う絵を描く。マウスで場が乱れ、REGENERATEで描き直せる一点物。
CASE 20
D3.jsデータ駆動
タスクの円がforce simulationでクラスタに集まり、チャートがスクロールで描画される。データが主役のLP。
写真と動画で実在感を出す
実写の写真と動画を主役に据える。実写の光と被写界深度はCSSでは合成できないので、そこにあるだけでテンプレの絵から離れる。写真はgpt-image-2で生成し、動画はffmpegでループ加工した。
CASE 21
実写フルブリード写真
全セクションの背景と図版を実写に置き換え。スクリムと白文字で写真を主役にする。
CASE 22
背景ループ動画ヒーロー
3カットのリールがヒーローで回り続けるシネマティックダーク。機能紹介にもループ動画。
CASE 23
エディトリアル写真コラージュ
雑誌の見開きのように大小の写真を非対称に散らす。明朝と余白で読ませる。
CASE 24
スクロールで語る写真ストーリー
stickyの写真ステージがスクロールで切り替わる。チームの1日を読者の手の速度で追体験させる。
CASE 25
ショーリール型（動画多用）
白いギャラリーの中でループ動画が回り続ける。静止した瞬間がないLP。
集大成 — 全部を効かせる
29ケースのうち手ごたえのあった4つ——自社ブルーDS（15）・p5.jsのフローフィールド（19）・sticky写真ストーリー（24）・ブルータリズムの区画設計（30）——を、1つの世界観に溶かした最終回答。
Cheat Sheet
使い分け早見表
30手法を、渡すもの・効くポイント・手間の3軸で並べた。次に何を試すか迷ったら、ここから選べばいい。
| CASE | 渡すもの | 効くポイント | 手間 |
|---|---|---|---|
| 01 | 指示なし | 比較のためのベースライン | なし |
| 02 | IBM Carbonのトークン | 角丸・配色・グリッドを業務システムの型にはめる | 低 |
| 03 | デジタル庁DSの公開md | フォーム設計とアクセシビリティの基準 | 低 |
| 08 | 自社デザインシステム（RealAIzeセミナー版） | 色数を4色に縛り、直角と黒枠で自社らしさを再現 | 低（一度作れば使い回せる） |
| 15 | 自社ブルーDSのトークン一式 | 非対称角丸と黄色マーカーという「社の癖」 | 低 |
| 04 | Hallmarkスキル（57ゲート） | 「AIっぽい」選択肢自体を拒否する判断ルール | 中（スキル導入） |
| 05 | emilkowalski/skillsの判断力 | モノクロ配色と繊細なマイクロインタラクション | 中 |
| 27 | tasteskill.dev / taste-skill（v2） | Design Read宣言と3ダイヤルで、AIの既定値を数十個の禁止パターンごと封じる | 中（スキル導入） |
| 28 | tasteskill.dev / soft-skill | 二重ベゼルとButton-in-Buttonで「高い仕事」の質感を強制 | 中 |
| 29 | tasteskill.dev / minimalist-skill | 1px罫線・影禁止・退色パステルの数値縛りでドキュメントの顔にする | 中 |
| 30 | tasteskill.dev / brutalist-skill | CRT走査線とASCII装飾。テンプレに無い語彙で組む | 中 |
| 06 | Figmaで先に決めた設計 | 実装前にレイアウト・書体・配色を確定する順番 | 高（工程が1つ増える） |
| 07 | 実在サイト3つの観察結果 | 余白・構成比・ボタンの実測値 | 高（調査が必要） |
| 09 | Next.js/Vercelの開発者向けUI | 影とグラデーションを1pxボーダーに置き換える | 低 |
| 10 | Vue.jsで動く実装 | 静止画でなく状態を持つUI（トグル・ミニデモ） | 高（実装工数） |
| 11 | WebGLフラグメントシェーダー | 二度と同じ絵にならない背景の生成 | 高（シェーダー記述） |
| 12 | スイス・タイポグラフィ様式の禁止事項 | 非対称グリッドと単色運用 | 中 |
| 13 | ネオブルータリズムの質感規定 | ぼかしゼロの影と原色で、AIが選ばない粗さを出す | 中 |
| 14 | 紙とインクの手仕事の質感 | 傾きとノイズで、人の手の痕跡を作る | 中 |
| 16 | Three.jsとスクロール→状態のマッピング | 読者の操作と映像の同期 | 高 |
| 17 | GSAP＋動きの設計値 | 動きの語彙をテンプレの外に出す | 高 |
| 18 | Matter.jsの物理パラメータ | 触れる・壊せる・毎回違う | 高 |
| 19 | p5.jsと描画ルール（noiseの場） | 開くたびに違う一点物の絵 | 高 |
| 20 | D3.jsとデータ・スケール設計 | 軸と目盛を持つ本物のチャート＋動く配置計算 | 高 |
| 21 | 生成写真12点（gpt-image-2） | 実写の光と質感が装飾グラデーションを置き換える | 中（素材生成） |
| 22 | 写真から作ったループ動画（ffmpeg） | 動き続けるヒーローの実在感 | 中 |
| 23 | 写真＋誌面の組版ルール | 非対称グリッドと級数の対比で雑誌の顔にする | 中 |
| 24 | 連作写真とスクロール設計 | 全部並べず、時間軸で1枚ずつ見せる | 高 |
| 25 | ループ動画7本＋再生制御 | 画面のどこかが常に動いている | 高 |
| 26 | 効いた要素6種の統合設計 | トークンを1つに統一した上で動き・実写・様式を重ねる | 最高 |
AI感の正体は、モデルの画力ではなく判断の丸投げにある。デザインシステムでも様式でも実在サイトでも、参照先を一つ渡した瞬間にLPの顔は変わる。どれを選ぶかより、何も渡さないまま丸投げしないことの方が効く。