Variantが引き受けるのは「はじめの一歩」
AIデザインツールの多くは、まず要件を言葉にすることを求めます。どんなスタイルで、どんな配色で、誰に向けたものなのか。ところがアイデアが生まれた直後には、そのどれも口に出せません。Variantはその空白のキャンバスを、下へスクロールし続けられる視覚の流れに置き換えます。「旅行アプリ」あるいは「ポッドキャストのサイト」と一言入れて、あとはスクロールするだけ。止まった位置ごとに別の解釈、別の視覚言語が現れます。
開発したのはBen South。PostmatesでVPを務めたのち、SonarとBoldを立ち上げた人物です。彼の見立ては明快で、デザインで難しいのは方向を決めることであって、仕上げではありません。多くの人は直し方が分からないのではなく、どこへ向かって直せばいいのかが分からないのです。
使い方
覚えることはほとんどありません。隅にある入力欄にプロンプトを入れれば、生成は一度で終わらず延々と続きます。どこかで「これだ」と思ったら手を止めるだけです。同じプロンプトでも結果は大きく振れます。たとえば同じ謎解きゲームのアプリでも、鮮やかな赤橙に一つ目のマスコットと太い黒文字を合わせたものもあれば、深いハンターグリーンにランキング表とイタリア風セリフを組んだものもあり、白一色に大きなディスプレイセリフを置いたものもあります。構造は同じなのに、印象はまるで別物です。
プロンプトを書き重ねるより、スクロールしながら探すほうがずっと速く進みます。その代わり、大量の結果の中から選ぶ判断は自分ですることになります。
Style Dropperとそのほかの機能
- Style Dropper：デザイン版のスポイトです。生成されたどの案にでも狙いを定めると、その配色、タイポグラフィのリズム、余白の密度といった視覚的なDNAを吸い取り、いま作業している案に移します。レイアウトもそれに合わせて組み直されます。Ben South自身が「馬鹿げているのに、なぜか効く」と評した機能です。
- Shuffle Layout / Remix Colors / Vary Strong·Subtle：すでに出た結果の一部だけを振り直す機能です。レイアウトや配色を変えたり、強弱の違うバリエーションを作ったりできます。
- エクスポート：どのデザインもHTMLとして書き出せます。Reactコードが必要な場合はそれにも対応し、視覚的な探索からそのまま動くプロトタイプへ進めます。
- コミュニティギャラリー：ほかの人がどこまで作り込んでいるかを見られます。ベルリンのテクノパーティーのフライヤーを思わせるドットスクリーンのモノクロ組から、ブルータリズムのポートフォリオ、黒地に緑文字のSFターミナル画面までさまざまです。
料金と弱点
第三者のレビューをまとめると、Variantはfreemiumです。無料枠は月およそ300デザイン程度、Proは月20ドル前後、チーム向けは個別見積もりとされています。具体的な金額や上限は公式サイトで確認してください。正式な料金はワークスペースに入らないと表示されません。
弱点もはっきりしています。「方向をたくさん出す」のは得意ですが、「正確に直す」のは苦手です。要素の重なりや余白のずれといった問題に対して、公式に用意されているのは振り直しであって、その場でつまんで調整する操作ではありません。完成品にしたいなら、最終的にはFigmaに持ち込むか、書き出したコードを直接編集することになります。
どんな人に向くか
プロジェクトのごく初期、まだスタイルが決まっておらず、十数通りの可能性を一目で見比べたいときに向いています。デモや社内の合意づくりにも便利で、「もう少し上質な感じ」と説明するよりリンクを一つ送るほうが早く伝わります。逆に、デザインガイドラインが固まっていて、あとはピクセルを詰めるだけという場面には向きません。
