商品写真1枚から広告画像を作る、MUSE AIのランディングページを作って。
こんにちは。うみです！
AIにサイトを作ってもらうと、結果がどこか似て見えてしまう。そんなことはありませんか？ 今回は同じMUSE AIを4つのデザイン基準で作り、画面がどう変わるのかを実際に比べてみました。
デザインスキルって？
プロンプトが「何を作るか」を伝えるなら、デザインスキルはレイアウト・文字・色・余白・動きをどんな基準で決めるかを伝えるデザインの参考書に近いものです。
何を先に見せるか、どれだけ余白をとるか、どこを強調するか、画面をどう動かすか。
なぜ大事？内容が同じでも、伝わる雰囲気や信頼感は画面の優先順位で変わるからです。
同じMUSE AI、
実画面はこう変わりました。
4つとも「商品写真1枚から広告画像を作る」同じサービスです。下の画像はそれぞれの実際の確認画面です。
01 · 通常のCodex
まずは機能を、早く
機能とセクションを、見慣れた順番で整理した基本のランディングページです。
- インストールなしで開始
- 素早いたたき台向き
- まず構成を見たい時
02 · Taste
静かに、整えて
余白と情報の強弱を整え、読みやすいプロダクト画面にしたバージョンです。
- 低彩度と広い余白
- プロダクト・ツールUI向き
- やりすぎ感を抑えたい時
03 · Huashu
スクロールがひとつの演出
大きな文字と画像、画面ごとの大胆な切り替えで、キャンペーンのように見せるバージョンです。
- 強いファーストビュー
- スクロールで構成が変わる
- ブランド・告知向き
04 · Baoyu Design
エディトリアルなアートディレクション
大きなタイポグラフィと非対称グリッドで、ブランドビジュアルのように組んだバージョンです。
- 強い文字とコントラスト
- 個性のある編集レイアウト
- クリエイティブブランド向き
選ぶなら、こんな時です。
入れて、同じ依頼で比べてみよう。
下のコマンドはターミナルで実行します。最初は1つずつ入れて、同じ依頼文で比べるのが一番わかりやすいです。
通常のCodex
追加インストールなし
サービスの目的と必要な機能を書いて、そのまま制作を頼みます。
Taste
静かなプロダクトUI
レイアウト・タイポグラフィ・余白を、もっと整った基準で考えたい時に。
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
Taste GitHub ↗Huashu
強い演出とモーション
1画面ではなく、スクロールに合わせて展開する体験を作りたい時に。
npx skills add alchaincyf/huashu-design
Huashu GitHub ↗Baoyu Design
完成度の高いHTMLデザイン案
ブランドの性格を反映した画面構成と、見た目の実験がほしい時に。
npx skills add JimLiu/baoyu-design
Baoyu GitHub ↗そのままコピーして試せます。
まず下の依頼を実行して、最後の1行に入れるスキル名だけ変えてみてください。
商品写真を1枚アップすると、ブランド用の広告画像を複数作れるMUSE AIのランディングページを作って。主な機能、生成例、使い方、料金、FAQを入れて、スマホでも読みやすくして。
［ここに適用するデザインスキル名］を使って作って。
最後のヒント
1. 内容を先に固定する。 サービス説明や必要なセクションまで変えると、デザインの差なのか内容の差なのか比べにくくなります。
2. 一度に変えるのは1つ。 モデルやプロンプトまで一緒に変えると、何が効いたのかわかりにくくなります。
3. スマホ画面も必ず見る。 最初の画面がきれいなことより、実際に読みやすく押しやすいことの方が大切です。