最初の提案と、それを覆した理由
サイトのデザインの進め方を相談したとき、AIの提案は「参考サイトを人間が選び、デザインツールでモックを作る」でした。手堅い進め方ですが、これでは人間の好みをAIが清書するだけになります。
代表の判断は逆でした。AIっぽく見えないデザインの作り方そのものをAIに調べさせ、候補を出させる。調べて、組み合わせて、確かめる過程そのものが、Solbがお客様に提供している仕事の見本になるからです。
AIっぽいデザインとは何か
AIに何も指定せずに画面を作らせると、毎回よく似たものが出てきます。紫から青へのグラデーション、どこにでもある書体、中央揃えの見出しの下に同じ形のカードが3枚。学習したデータの平均に寄るためです。
厄介なのは、その避け方にも平均があることです。紫を避けるよう指示すると、今度はクリーム色の背景に明朝体の見出し、テラコッタ色の差し色という「上品なAI」に寄ります。調べた道具の多くが、この二段目の型をはっきり名指ししていました。
調べて、使った道具
候補を調べ、ライセンスと更新状況、使える部分を比べました。詳しい比較は社内の調査メモに残しています。
- Impeccable：デザインの判断基準と点検の手順をまとめた道具です。機械的に検出できる61種類のルールがあり、これをCIに組み込みました。
- avoid-ai-design：AIっぽさの兆候を67種類に分類したカタログと、検出スクリプトがあります。二段目の型を名指しで検出できる点を採用の決め手にしました。
- anti-ai-slop：複数の案を作るとき、案どうしが似てしまうことを防ぐ規則があります。3案の作り分けに使いました。
- GSAP：動きを付ける道具です。動きはファーストビューに絞り、動きを減らす設定の端末では止めています。
AIに美しさを任せると、どうなるか
Hugging Face には、Webデザインの生成に特化したモデルもあります。そのひとつ AesCoder-4B のモデルカードには、よい結果を得るための推奨プロンプトとして「グラデーション、影、なめらかなアニメーションといった今どきのWebデザインを取り入れる」「やわらかい影、角丸、すっきりした文字組み、控えめなグラデーション」と書かれています。
美しいページを作るために学習したモデルが、AIっぽさの典型そのものを指示している。AIに美しさを任せると、学習データの平均に寄るという例です。Solbでは、このモデルは生成に使わないことにしました。
一方で、画面の写真から「デザインの質」を採点する UIClip というモデルは、参考値として使いました。ただし UIClip が測るのは「よく整っているか」で、「AIっぽくないか」ではありません。最終的な判断は、点検の道具と人間が持ちます。
最初の3案の考え方
最初の3案は、地の色、見出しの書体、差し色、組み方の方向がそれぞれ重ならないように作りました。どれも、Solbという会社の中身から形を決めています。
- 朱入れ：校正紙の上で、AIの原稿に人間が赤を入れる。メインコピーが決まった経緯を、そのまま見せる案です。
- 藍：細い字の「AIには無理」と、太い字の「人間のこだわり」。字の太さの対比でコピーを組む案です。
- 縦組み：日本語の組版の伝統である縦書きでコピーを組み、業務の手順書や帳簿の罫線で全体を整える案です。
検出ルールに引っかかったこと
3案それぞれに、Impeccable と avoid-ai-design の検出ルールをかけました。最初は3案合わせて17件の指摘が出ました。
- 一覧を包む要素に罫線を引いていたため、「文字が罫に接している」と判定された
- 欄外の書き込みに付けた赤い縦線が、「カードの縁に色の線を引く」というAIによくある飾りと判定された
- 見出しの一部だけを細い字にした組み方が、「一語だけ強調する」型と判定された
前の2つは直しました。3つ目は、コピーの2つのカギ括弧を対比させるという指示そのものなので、理由を書いたうえで検出の対象から外しています。道具の判定をそのまま受け入れるのではなく、どれを直し、どれを残すかを決めるのも人間の仕事です。
道具の側の癖も見つかりました。たとえば、余白の指定の書き方によっては、余白が無いものとして採点されます。こうした癖は、道具を実際に使ってみないと分かりません。
道具が通した案を、人間が却下した
最初の3案は、どれも2つの検出ルールを通過していました。それでも代表は、藍色の案を見て「AIっぽい」と却下しました。あわせて「全体にフラットだ」とも指摘しました。
興味深いのは、画面の写真から「デザインの質」を採点する UIClip では、この藍色の案が3案の中で最も高い点を取っていたことです。整った平均的なページほど高く出る採点は、「AIっぽくない」とは逆の方向に働くことがあります。道具の点数と人間の目が食い違ったとき、決めるのは人間です。
この指摘を受けて、構成から作り直した3案を足しました。紙の束のように段を重ねる案、机の上に原稿と付箋を置く案、仕事の流れを図にする案です。作り直しの途中では、方眼紙の背景が「AIが生成したページによくある背景」として検出され、やめました。
引き算の道具では、人間らしさは足せない
紙の束、机の上、図解。構成を変えた3案も、代表は「理路整然と並びすぎている」と見ました。画像も図もなく、文字だけで組んでいたことも原因でした。
検出ルールは、AIによくある型を見つけて消すための道具です。型が消えても、人間が作ったような揺らぎが生まれるわけではありません。そこで、文字の大きさに極端な差を付ける、要素を重ねて傾ける、画像を画面の端まで断ち落とす、文字だけの段を続けない、という決まりを足しました。
素材には、自分たちで作って動かしているものの画面を使うことにしました。ただし、集めてみると、そのままでは載せられないものが多くありました。他者の作品名が並ぶ画面や、内部用の情報が映った管理画面です。載せられる形に伏せる作業も含めて、実物を使うには手間がかかります。その手間こそが、AIが平均から作れない部分だと考えています。
採用したのは、漫画のコマ割り
11案を並べて、代表が選んだのは漫画のコマ割りで組む案でした。しかも、サイト全体をコマ割りにする、という判断です。
AIの推奨は別の案でした。先行調査でも、コマ割りは「1区画だけ使う」ことを勧めていました。全部をコマにすると、長い文章が読みにくくなり、検索やAIにも内容が伝わりにくくなるからです。
代表の理由は3つでした。漫画が好きなこと。自社で漫画に関わるサービスを運営していること。日本の企業サイトで、コマ割りを骨格にした例が見つからなかったこと。好きなものと、自分たちの仕事と、ほかにないこと。どれも、学習データの平均からは出てこない理由です。
懸念には決まりで答えました。コマに入れるのは見せ場だけ。AIの案を人間が覆す場面、事例の山場、コピーが決まった経緯です。本文・要約・よくある質問・フォームはコマの外に普通の文章として置き、吹き出しの台詞も画像ではなく文字で書きます。
「AIで絵を作らない」も、覆った
もう一つ覆ったのが、絵の作り方です。AIっぽさを消そうとするあまり、AIは「AIで絵を生成しない」方針を立てていました。代表の答えは「AIで作ってよい。問題は画像がないこと」。
AIっぽさを消すことと、AIを使わないことを、取り違えていました。その結果、画像のない、文字だけの案ばかりになっていたのです。
絵はAIで作ります。ただし、登場人物はSolbのオリジナルにして、既存の漫画やアニメの人物に似せないことを決まりにしました。生成した候補から人間が選び、直し、何を選んで何を直したかを記録します。その記録が、「主語は人間のこだわり。AIは手段」の証拠になると考えています。