← ブログに戻る
Ai読了目安 12 分

AIが作ったと分かるページは出荷しない——Hallmarkというデザインスキル

公開日 2026年11月1日
AIが作ったと分かるページは出荷しない——Hallmarkというデザインスキル

AIが作ったランディングページは4秒で見分けられる。しかも、たいていは文章が原因ではない。すべての見出しの上にちょこんと座っている、あの小さな緑のアイブロウラベルだ。「FEATURES」と字間を開けた大文字で書かれたセクションラベル。見出しの中の1つだけ色が付いた単語——いつも同じインディゴ。空の枠だけが並ぶ推薦の壁。購読するものが何もないページの底にあるニュースレターボックス。

Hallmarkは、そういうものを拒否するために作られたデザインスキルだ。Together AI製で、Claude Code、Codex、Cursor、OpenCode向けに提供され、トレンド入りした最初の1カ月で約14,400スターを集めた。売り文句は露骨だ。機械が作ったように見えるページは出荷しない。

何が違うのか

「いい感じにして」というプロンプトの大半は、退屈な理由で失敗する。感情を描写し、モデルはその感情を毎回同じ11個の視覚的クリシェに翻訳する。Hallmarkのアプローチはその逆だ。センスを発揮しろと頼む代わりに、少量の素材と、やってはいけないことのリストを渡す。

素材は50のテーマ。それぞれ1ファイル、8KBまでで、紙の質感、タイプスケール、色、表面処理、コンポーネントが入っている。各テーマには完成ページの画像も付いていて、モデルは「完成」がどんなものかを見られる。大事なのは、テーマがテンプレートではなく素材だという点だ。ページに何をどの順で載せるかは書かれていない。同じテーマで2つのプロンプトを流せば、2つの違うページが出てくる。

Printed layout sheets with column guides on a light table

ゲートこそが製品

Hallmarkはプロンプトではなく、実際のブラウザでチェックを走らせる。この一文は見た目以上に重い。「ヒーローがビューポートに収まるように」と言われたモデルは、それでも1366×768のノートPCで溢れるヒーローを作る。何もレンダリングしていないからだ。Hallmarkはページを開き、見て、ビルドを落とす。

ゲートは3段階に分かれていて、この段階分けが設計上もっとも賢い部分だ。

Floorゲートは絶対に出荷させない。コントラストの失敗、フォーカス状態の欠落、reduced-motion対応の不在、壊れたスマホレイアウト、そして——これは予想外だった——捏造された事実。最後のゲートは、幻覚的な主張をコンテンツの問題ではなくデザインの欠陥として扱う。ページに「4,000チームが利用」と書いてあり、ブリーフに根拠がなければ、ビルドは止まる。

Reflexゲートは、モデルが陥りがちなデフォルトを捕まえる。覆すことはできるが、記録が要る。ビルドが理由を明記しなければならない。これは微妙な設計だ。AIっぽい手を禁じるのではなく、正当化させる。実際にはこれで大半が消える。

Finishチェックは職人の細部——余白のリズム、光学的な整列、シニアデザイナーが最後の10分で直す類のもの。出荷は止めない。

最後に、まっさらなコンテキストのレビュアーが最終判断を下す。これはうまい仕掛けだ。同じコンテキストで自分の出力をレビューするモデルは、自分の選択を擁護する。冷たい目でページを見るモデルは擁護しない。

使い方

コマンドは3つ。この分け方が、誰向けなのかを語っている。

/hallmarkはプロンプトからページを組み立てる。/hallmark redesign <path>は既存ページを、コンテンツと配線を保ったまま作り直す。フォームは送信でき、リンクはどこかへ飛ぶ。/hallmark audit <path>は報告だけを行う。誰かのページがすでに公開されていて、なぜ微妙なのかだけ知りたいとき——まさにそういうときに欲しいものだ。

URLや開発サーバー、稼働中のアプリを指定して自分でスクリーンショットを撮ることもできるので、想像上の製品ではなく実際の製品に合わせてデザインする。写真も本物だ。755点のオープンライセンス写真を主題で選び、ページにクレジットを載せる。ノートPCを抱えて微笑む人物の生成ヒーロー画像は出てこない。

なぜ今これが必要か

面白いのはタイミングだ。1年前、AI生成インターフェースへの不満は「壊れている」だった。今は有能だが、依然として間違っている。こちらのほうが厄介で、有能さが明らかな失敗のシグナルを消してしまう。バグを指させない。指せるのは「人間が作った感じがしない」という感覚だけで、感覚はバグトラッカーに書きにくい。

Hallmarkの答えは、その感覚をチェックリストに変えることだ。すべての見出しの上のアイブロウ。字間を開けた大文字。色の付いた1語。コンテンツの代わりに置かれた空の枠。画面からはみ出すヒーロー。どのページの末尾にもある登録フォーム。どこにも送信しない「ありがとう」画面。どれも具体的でテスト可能なパターンであり、どれもモデルが学習データで1万回見たからやる動作だ。

この捉え直しこそが本当の貢献だ。「AIスロップ」はスタイルの問題ではなく、仕様の問題である。モデルが学習セットの平均を出すのは、何をしてはいけないかを誰も教えておらず、パイプラインのどこもチェックできなかったからだ。

当然の反論

50テーマは、やはり50テーマでしかない。Hallmarkが普及すれば、Tailwindのテンプレートを見分けるのと同じようにHallmarkのページも見分けられるようになり、いたちごっこが振り出しに戻る。チームもそれは分かっているようで、だからテーマはレイアウトではなく素材であり、プロンプトだけから同じゲートの下で設計するカスタムモードがある。

第二の反論は、ゲートが誰かの趣味をコード化しているというもの。字間を開けたラベルが本質的に悪いわけではない。ニュースレターボックスが本当に必要なページもある。段階分けはこれに部分的に答えている——理由を書けばReflexゲートは覆せる——が、それでもハウススタイルであり、ハウススタイルは古びる。

だからといって無用にはならない。「予約を取る、商品を売る、メールアドレスをもらう」という1つの目的のために存在する80%のページにとって、良いデフォルトになる。そういうページの失敗は凡庸さではなく、ウェブサイトを使ったことのない機械が作ったような、不気味な有能さだ。

何を持ち帰るか

コーディングエージェントで作るなら、持ち帰るべきは50のテーマではない。構造だ。少量の素材、出荷できないものの固い下限、正当化を要求する中間層、議論の記憶を持たないレビュアー。このパターンはウェブページよりずっと広く効く。人間が4秒で判断し、理由を言葉にできないものをモデルが作る場所ならどこでも。

そして、午前3時に生成されたランディングページに見えないランディングページが欲しいだけなら、スキルを入れてコマンド3つ。ハードルは十分低く、1万4,000スターもうなずける。

関連記事