AIに伝わるWebデザインのプロンプト集

AI時代のウェブデザインをまとめた日英バイリンガルのパターン集。各デザインに、Claude Codeやv0などのAIコーディング支援にそのまま渡せるプロンプトを添えて収録しています。Hero・LP・Pricing・フォームなど部位別、ミニマル・サイバー・ラグジュアリーなどスタイル別に探せます。

最新のデザイン

極太タイポで押し切るヒーロー

画面いっぱいの極太見出しとアクセントカラー一色で勝負するスタートアップ向けヒーロー。文字を装飾ではなく主役にし、CTAとの視線動線を1本に絞ることで滞在3秒で価値を伝えるランディング設計。

ヒーローボールドスタートアップ

ターミナル風サイバーなログイン

黒背景・ネオンの発光文字・モノスペースフォントで構成したサイバーパンク調のログイン画面。Web3・開発者ツール・ハッカー向けSaaSのオンボーディングに世界観を付ける。

ログインサイバーダーク

大小マスで機能を見せるベントー

大小異なるマスで6機能を見せるダーク背景のベントーグリッド。KPI/バッジ/小さなビジュアルを混在させ、1スクロール内でプロダクトの主役と脇役を視覚的に差別化するSaaS向けのFeature節。

機能紹介ベントーSaaS

浮遊するグラスモーフィズム・ナビ

パステルの背景を透過するすりガラス風のカプセル型追従ナビ。スクロール追従・backdrop-filter・柔らかい影だけで構成し、モダンなSaaS/プロダクトサイトのトーンを一行で決めるヘッダー設計。

ナビゲーショングラスモーフィズムソフト

余白を主役にした静かなヒーロー

余白・一本化したCTA・二段構成の見出しだけで構成するヒーローセクション。SaaSと個人開発プロダクトのLP最上部に最適で、要素を削るほど訴求が立つ設計。

ヒーローミニマルSaaS

カテゴリから探す（部位）

ランディングページ最上部のメインビジュアル。

料金プラン・比較表のデザイン。

ナビゲーション

ヘッダー・グローバルナビ・モバイルメニュー。

サイト下部のフッターブロック。

行動喚起セクション（Call to Action）。

問い合わせ・登録・検索フォーム。

情報を単位化するカード型UI。

プロダクトの機能を並べるセクション。

お客様の声

レビュー・推薦文セクション。

よくある質問のセクション。

ログイン・サインアップ画面。

ダッシュボード

管理画面・データ可視化。

ランディング

1ページで完結するLP全体。

記事一覧・記事詳細ページ。

ポートフォリオ

作品集・ケーススタディ。

モーダル・ダイアログ。

存在しないURL用の404ページ。

スタイルから探す（雰囲気）

要素を削ぎ落とした静けさの設計。

スイス様式

グリッドと無装飾サンセリフの古典。

エディトリアル

雑誌・新聞のような版面設計。

単色または白黒で統一されたトーン。

ネオン・グリッチ・近未来のテクノ感。

ヴェイパーウェーブ

ピンク×紫×古代ギリシャの美学。

2000年前後のメタリック・透明感。

ズレ・ノイズ・崩壊を意匠化。

暗背景×発光カラー。

ラグジュアリー

余白・金色・セリフで格を出す。

エレガント

上品で控えめな洗練。

ファッション

写真主役・大胆な版面。

グラデーション

鮮やかな多色グラデを主役に。

古さを意匠化した温度。

初期Web・MS Paint・GIF。

ドット絵UI。

大見出し・段組み・セリフ。

グラスモーフィズム

半透明すりガラスの重なり。

ニューモーフィズム

押し出し・へこみで造形。

クレイモーフィズム

ふわっとした3D粘土。

ブルータリスト

生々しい、装飾を拒むラディカルさ。

大小のマスで情報を整理するグリッド。

ハンドクラフト

手書き線・不揃いな温度。

紙の質感とインクの滲み。

3Dオブジェクトの立体感。

粘土のような丸みの造形。

コーポレート

企業向け・信頼感優先。

スタートアップ

勢いのあるLP。

エージェンシー

制作会社のセンス見せ。

SaaSらしい機能ファースト。

個人開発の人格を感じる構成。

クリエイター

個人クリエイターのプロフィール。

プレイフル

遊び心・アニメーション多め。

黒背景ベースの夜のトーン。

パステル・丸み・優しさ。

大見出し・極太タイポ。

オレンジ・赤・茶の暖色系。

青・シアン・紫の寒色系。

情報量を抑えた静謐さ。