"型" を AI にそのまま渡す
各デザインに動くプレビューと、Codex / Claude Code / v0 / Cursor にコピペで渡せる日本語プロンプトを併録。バリエーションも標準装備。
PROMPT-NATIVE
Webデザイン × 日本語AIプロンプト
デザインを、解き放て。
見て、触って、ひらめく。
完全無料・著作権フリー。日本語プロンプト付き。
デザイン一覧
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
保存した中から2〜3件を選び、見本・用途・配色・プロンプトを見比べられます。
この条件の見本はありません。条件を解除するか、作る部分・雰囲気を変えてください。
霧の風景ヒーロー
藍色の山と霧の生成背景に、日本語の見出しと淡い緑のボタンを重ねたヒーロー。PCは横長、スマホは縦長の画像に切り替え、暗いグラデーションで文字を読みやすくする。画像入りのHTMLも無料で配布。
透明ボディの90年代ヒーロー
青い透明樹脂の音楽プレーヤーを主役に、暗い背景と黄緑のボタンを組み合わせた製品紹介。90年代の小さなウィンドウ枠と生成画像の質感を使い、商品を見る操作と仕様を読む操作を分ける。
明朝体で組む老舗旅館のフッター
墨色の地に生成りの文字と金の細い罫線で組んだ、老舗旅館のフッター。縦書きの宿の名、季節を感じさせる挨拶文、電話と空室確認の入口、4つの案内の列を明朝体でまとめ、ページの最後まで品のある印象を保つ。
ネオン看板の夜景写真ギャラリー
黒に近い紺の地に、ネオン管のように光る見出しと、縦に詰めて並ぶ夜景写真のギャラリー。撮影地で絞り込めるボタンを付け、写真ごとに看板の色で縁を光らせる。光らせる場所を見出しと選択中の要素に絞り、写真を主役に保つ。
寒色グラデーションのAIツール機能紹介
紺の地に水色から藍色へのグラデーションを重ねた、AI議事録ツールの機能紹介セクション。見出しの一部だけを文字の幅で塗り、大きなカード1枚と小さなカード3枚で「何がどれだけ減るか」を数字と帯の長さで見せる。
白黒と余白で見せる美容室のヒーロー
白黒写真と広い余白、縦組みの一文だけで構成した美容室のファーストビュー。色を使わず、明朝の縦書き・細い罫線・黒1色の予約ボタンで、落ち着いた個人店の空気と予約までの導線を両立させる。
放送終了のカラーバーで迎える404ページ
テレビの放送が終わった後のカラーバーを背景にした404ページ。画像を使わずグラデーションだけで描いたカラーバーに、チャンネル表示と時刻、「このページの放送は終了しました」の案内、検索窓と番組表（サイトマップ）への導線を重ねる。
キリ番と工事中の90年代ホームページ風ブログ
1990年代後半の個人ホームページをブログのトップに再現したデザイン。星柄の壁紙、立体の枠、虹色の見出し、流れる電光掲示板、アクセスカウンタとキリ番、工事中の看板、ウェブリングまでを、見た目だけ借りて中身は現代の組み方で作る。
網点と版ズレの昭和ポスター風ヒーロー
昭和の喫茶店のポスターやマッチ箱をWebの第一画面に持ち込んだヒーロー。生成り色の紙に印刷の網点を敷き、2色刷りの見当ズレを文字の影で再現し、縦書きの店名と同心円の帯、半券付きのボタンで組む。老舗の店舗や地域の催しに向く。
未保存の変更を見失わせないSaaS設定画面
左に節の目次、各節は左に説明・右に入力の2列で組むダークテーマのSaaS設定画面。変更した項目の数を数える未保存バー、役割を選べるメンバー一覧、名前を打ち込むまで押せない削除ボタンまでを備え、設定を触る人の不安を順に潰していく。
数字から読ませるSaaS管理画面
Linear や Vercel の系譜にある、装飾を抑えた実務向けSaaS管理画面の概要ページ。左に件数付きのメニュー、上に指標カード4枚、中央に推移グラフと最近の動き、下に状態を文字でも示す一覧を置き、ログインした人が最初の数秒で状況をつかめる順に並べる。
選択肢で絞り込む右下のサポートチャット
Webサイトの右下に常駐する問い合わせ用のチャットウィジェット。用件を選択肢で絞り込む自動応答、営業時間に応じて約束を変える表示、時間外はメールで引き取る導線、閉じている間の未読数までを備える。
既読と日付区切りのある和製トーク画面
日本のスマホで最も見慣れたトーク画面の文法を再現したチャットUI。青みの地に緑と白の吹き出し、吹き出しの外に置く時刻と既読の人数、日付の札、連投でしっぽと名前を省く組み方までを1枚にまとめる。
流れて出るAIアシスタントのチャット画面
左に会話の履歴、中央に質問と回答を並べるAIアシスタント型のチャット画面。回答が一文字ずつ流れて出る表示、生成の停止、コードのコピー、日本語入力の変換確定で誤送信しない入力欄までを1枚で再現する。
絞り込みと件数を先に見せる商品検索結果
左に絞り込み、上に適用中の条件、右に商品カードを置く検索結果ページ。架空の8商品で検索・価格・容量・ブランド・配送・評価を試せ、0件からの条件解除にも対応します。
1画面を大きく見せる資産管理アプリの紹介
端末を1台だけ大きく置き、周囲にUIの断片を浮かせるアプリ紹介セクション。数字そのものを主役にする構図で、家計簿・投資・ヘルスケアなど「自分の数値」を扱うアプリに向く設計。
余白と墨線で読ませるお客様の声
顔写真も星評価も置かず、明朝体と非対称の配置だけで証言を読ませるお客様の声。欠点に触れた一言をあえて残すことで、他の二つの声の信憑性を上げます。
マンガの吹き出しで進むサポートチャット
太い輪郭線と尻尾付きの吹き出し、網掛けの紙地でサポート対話をマンガのコマとして見せるチャットUI。解決の瞬間だけ叫び吹き出しに切り替えて感情の起伏を作ります。
幾何形を組み替える空状態
赤い円・青い四角・黄色い三角の5つの図形だけで空の画面を成立させる空状態。ボタンを押すと同じ図形が配置を変え、待つ時間に小さな手触りを与えます。
アイソメトリック倉庫の在庫ダッシュボード
倉庫のラックを45度の立体で並べ、高さで在庫量、色で充填率を同時に読ませる管理画面。表とグラフでは伝わらない「どこが詰まっているか」を一目で示します。
マスコットが見守る新規登録画面
丸みとパステル、CSSのマスコットを組み合わせた新規登録画面。必須項目・メール形式・同意を確認し、文字数と文字種をメーターに表示。3ステップのうち入力段階を試せる見本です。
設計図面風の見積もり依頼フォーム
青焼き図面の方眼と表題欄をそのまま画面に持ち込んだ見積もりフォーム。入力欄の右に工程と前提条件を並べ、送信前に何が起きるかを見せて心理的な壁を下げます。
ベントーグリッドの写真ギャラリー
大小のタイルが噛み合うベントーグリッドで、作品の格を差でつける写真ギャラリー。主役を大きく、脇役を小さく——並べた瞬間に見る順番が決まるレイアウトです。
植物標本図鑑風のポートフォリオ
19世紀の植物標本台紙（Herbarium sheet）を再構築したポートフォリオ。学名イタリック表記・採取地メタ・封蝋シール・古紙ノイズで「学術コレクション」の格を作る尖った設計。
タイプライター手紙風のCTA
タイプライターで打たれた一通の手紙を再構築したCTA。修正線・赤鉛筆挿入・切手風ボタン・消印スタンプで「特別なあなただけに」の親密さを演出する尖った文書設計。
空港パタパタ式発車案内板風のダッシュボード
空港・駅の split-flap（パタパタ式）発車案内板を再構築したオペレーションダッシュボード。タイル状の数字ボード・色分けステータス・LIVE 表示で「業務の流れが見える」OPS 体験を作る尖った設計。
図書館カード目録風の検索結果
紙の目録カードを重ねた検索結果ページ。請求記号・ISBN・在庫スタンプ・蔵書印を配置し、架空の5件で検索・分類・在庫の絞り込み、並び替えとページ送りを試せます。
ポラロイド写真ボード風のギャラリー
コルクボードに押しピンとマスキングテープで留めたポラロイド写真コレクションを再構築したギャラリー。手書き風キャプション・微妙な傾き・付箋メモで「私的な記憶」を訴求する尖った設計。
星座図・天体図風のサイトナビゲーション
夜空の星座と天体観測カタログを再構築したサイトナビゲーション。各ページを「恒星」、カテゴリを「星座」として配置し、現在地を北極星（Polaris）の脈動で示す、神秘的で詩的な尖った設計。
トレーディングカード風のポートフォリオ
ポケカ・MTG・遊戯王などTCG（Trading Card Game）のカードフォーマットを再構築したポートフォリオ。レア度ティア・ホロ箔反射・ステータス値で「コレクションしたくなる作品集」に変換する尖った設計。
御朱印帳・スタンプラリー風のCTA
御朱印帳とスタンプラリーを再構築したCTAセクション。朱印スタンプ・残り札所・巡礼ゲージで「あと少しでコンプリート」の達成欲求を喚起する、日本独自文化を武器にした尖った設計。
POSレシート風の料金プラン
コンビニや飲食店のサーマルプリントレシートを再構築した料金プラン。破れたエッジ・点線セパレータ・バーコード・赤い「人気」スタンプで「正直で透明な価格」を視覚的に証明する尖った設計。
建築設計図風の機能紹介
建築・CAD図面のブループリントを再構築した機能紹介セクション。シアンブルーの方眼背景・寸法線・断面記号・コールアウトで「精密に設計された製品」の信頼感を技術的なビジュアルで叩きつける尖った設計。
美術館展覧会ポスター風のヒーロー
国立美術館の特別展ポスターを再構築したヒーローセクション。明朝大型タイトル・赤の差し色・許可印・バーコードまで作り込み、「文化的権威」と「会期限定の希少性」を同時に演出する尖った設計。
東京メトロ路線図風のサイトナビゲーション
東京メトロ・大江戸線などの路線図グラフィックを再構築したサイトナビゲーション。各カテゴリを「路線」、各ページを「駅」として見立て、駅ナンバリングや路線記号で迷わせない尖った設計。
航空券スタイルのイベント告知CTAセクション
航空会社のボーディングパスをそのまま再現したCTAセクション。ゲート番号・搭乗時刻・QRコード・バーコード・ミシン目で「予約完了感」を演出する、旅・イベント・体験型サービスに刺さる尖った設計。
Discord/Slack風の3ペイン・チャット画面
Discord・Slack のチャットUIを再構築した3ペインインターフェイス。サーバーリスト＋チャンネル＋メッセージスレッド＋リアクション・スレッドの定番構成を CSS だけで網羅する尖った設計。
マンガのコマ割りで読ませるブログ記事一覧
日本マンガのコマ割り・吹き出し・効果音文字を Web に持ち込んだ、白黒モノクロのブログ記事一覧。各記事を「ひとコマ」として配置する読者を惹きつける尖った設計。
アーケード筐体UI風の料金プラン
80年代ゲームセンターのアーケード筐体UIを再現した料金プラン。"INSERT COIN"、ピクセルスコアボード、ハイスコア表で「コインを入れて始める」ノスタルジーをCTAに変換する尖った設計。
3画面を重ねるアプリUI
モバイルアプリのプロダクトサイト向けに、傾けた3枚のスマホフレームに UI スクリーンを並べるショーケース。フィットネス・健康・SaaS モバイルアプリの定番表現を CSS だけで構築する尖った設計。
バウハウス様式・幾何構成の原色ヒーロー
1919年バウハウス・ロシア構成主義を引用した、原色×幾何形×グロテスクサンセリフのヒーロー。20世紀モダンデザインの古典をWebに再構築する、教養と前衛が同居する尖った設計。
アイソメトリック投影の機能紹介セクション
30度傾斜の擬似3DでUIカードを浮かべる、未来感のあるアイソメトリック機能紹介。Stripe・Linear・Vercel系のモダンSaaSの定番表現を CSS だけで再現する尖った設計。
パステル×マスコットの「かわいい」CTAセクション
日本発の「kawaii」美学を再構築した、パステル配色とマスコットキャラのCTAセクション。Z世代の女性向け・コスメ・サンリオ系プロダクトに刺さる、ふわふわで愛され系の遊び心ある設計。
侘び寂びの墨絵的ポートフォリオ
不完全さを美と捉える日本の侘び寂び美学を Web に持ち込んだポートフォリオ。墨絵のかすれ、紙質感、大胆な余白、明朝の縦書き和文、朱の落款で「静けさ」を作る尖った設計。
ストリートグラフィティ風の404ページ
コンクリート壁にスプレー塗料で殴り書きされた「404」を主役にしたストリートグラフィティ風 404 ページ。剥がれかけのポスター、タグ、スプラッタ、警告テープ。失敗ページすらブランドの遊び場にする尖った設計。
巨大斜体のファッション作品集
写真領域を全幅に走らせ、巨大な斜体ディスプレイ書体を画面外まで突き抜けさせるファッションマガジン的ポートフォリオ。Vogue・Dazed・i-D の版面感を Web 化した、ブランドルックブック専用の尖った設計。
Memphis Group調・幾何カオスのCTAセクション
1980年代 Memphis Group の意匠を引用した、原色・波線・幾何形のカオスが踊るCTAセクション。退屈なフラットデザインを破壊して「楽しさ」を直接ぶつける尖った選択。
完全 CLI ターミナル風のダッシュボード
GUI を排し、すべてを ASCII テーブル・モノスペース・コマンドプロンプトで構築するターミナル風ダッシュボード。開発者向けインフラ管理ツール・サーバーモニタリング・ハッカー文化を取り込んだプロダクトに。
ヴェイパーウェイヴの夕焼けグリッド
マゼンタ・パープルの夕焼けに地平線まで伸びるレトログリッド、大理石像、ローマン書体の日本語タイポを重ねるヴェイパーウェイヴ系ヒーロー。80s ノスタルジーとインターネット黎明期の美学が融合した尖った表現。
Y2Kクロームベベルとオーブの料金プラン
2000年代初頭の Frutiger Aero / Mac OS X Aqua / 透明クロームを再構築した Y2K 風料金プラン。鏡面ベベル・色付き光沢オーブ・虹色グラデで「ソフトウェアパッケージ」感を演出する。
ネオン発光のナイトライフ系ポートフォリオ
暗背景にホットピンクとシアンの発光色を重ねるネオン系ポートフォリオ。ナイトクラブ・音楽・ゲーム・メタバースの世界観を Web に持ち込む、夜の街の空気を持つ作品集。
装飾を拒むブルータリズムのヒーロー
角丸・影・グラデーションを一切使わず、極太タイポと裸の HTML 要素だけで突きつける反デザインのヒーロー。実験的アート・アンダーグラウンドメディア・若手クリエイターが「中身で勝負」する場面の選択肢。
親しみのあるイラスト付き空状態（受信箱が空）
受信箱や通知センターが空のときの画面UI。シンプルなイラスト・1 行のコピー・1 つの明確なCTAで、「何もない」状態を「次のアクションへ」変える設計。
スイス様式のシンプルなお問い合わせフォーム
厳格なグリッドと無装飾サンセリフで構築する、スイス国際タイポグラフィ様式のお問い合わせフォーム。色を排し、罫線・余白・タイポの階層だけで「真剣さ」を伝える設計。
グラスモーフィズムのログインモーダル
半透明のすりガラス風パネルを背景に重ねるログインモーダル。外部認証3種のボタンとメール入力を配置。開閉・Escape・フォーカス復帰、入力条件の確認を試せる見本です。
暖色テラコッタの大判CTAセクション
暖色（テラコッタ・赤・砂色）でまとめた、人肌の温度を持つ大判CTAセクション。飲食・ライフスタイル・小売など、信頼より親しみで選ばれるブランドのコンバージョン直前に効く設計。
手描きスケッチを散りばめた温度のあるフッター
紙質感のオフホワイトに手描き線のイラスト・ラフな書き込みを散りばめた、温度のあるフッター。クラフトブランド・カフェ・絵本系メディアなど人の手の温もりが武器になる業態に。
B2Bコーポレートの機能紹介セクション
B2B SaaSやエンタープライズ製品向けの機能紹介セクション。落ち着いた寒色配色と整然としたグリッド、データ感のあるアイコンで「実用と信頼」を伝える設計。
新聞紙面風のブログ・記事一覧ページ
大見出し・多段組・太いセリフ書体で構成する新聞紙面風のブログ・記事一覧ページ。情報密度を魅力に変え、ジャーナリズムやドキュメンタリー系メディアの世界観を作る型。
パステル配色の柔らかいお客様の声セクション
ヘルスケアやウェルネス系サービス向けの、パステル配色と大きな角丸で構成する柔らかいお客様の声セクション。安心感と温度を伝えながら、引用を読ませる構造を作る。
スイス様式・グリッド厳守の料金プラン
厳格なグリッドと無装飾サンセリフだけで構築する、スイス国際タイポグラフィ様式の料金プラン。装飾を排し、罫線・余白・タイポの階層だけで「比較しやすさ」を最大化する設計。
鮮やかなメッシュグラデーションのSaaSヒーロー
Stripe/Linear系のモダンなSaaSサイトで主流の、暗背景にカラフルなメッシュグラデーションを敷くヒーローセクション。CSSの conic-gradient + blur で画像を使わずに鮮やかに仕上げる構成。
ピクセルアート調の404ページ
深紫の宇宙を背景に、点滅する星・浮遊するピクセルキャラクター・グリッチするタイトルを組み合わせたレトロゲーム風の404ページ。冷たいエラー画面の代わりに、離脱の瞬間を小さな温度に変える。
タイル型グリッドの機能紹介
大小が異なるタイルを組み合わせて 6 機能を並べる、暗背景のベントーグリッド (タイル型レイアウト) の機能紹介セクション。主役の機能を大きく、補助機能を小さく配置することで、説明文を読まなくても重みづけが伝わる設計。
極太フォントのヒーローセクション
画面いっぱいの極太な見出しと 1 色のアクセントカラーだけで勝負する、スタートアップ向けのヒーローセクション。CTA への視線動線を 1 本に絞り、滞在 3 秒で価値を伝える設計。
ブルータリスト調のブログトップ
太い罫線、極太サンセリフ、蛍光アクセント、モノスペースのメタ情報で組んだ個人ブログ/メディアのトップページ。新聞のように記事を並べつつ、テック系の「整いすぎ」を拒むラフさを残す設計。
コーポレート向けの多段フッター
ニュースレター帯、5カラムのリンク群、ステータスバッジ、言語切替、SNSアイコンを整理したコーポレートサイト向けの情報密度高めフッター。信頼感の配色と安定したタイポグラフィで、サイト下部に「事務的すぎない」安心感を置く設計。
サイバー調のダッシュボード画面
黒背景にネオンの発光色、モノスペースフォントを組み合わせたサイバーパンク調の管理画面。KPI・ライブチャート・ログテーブル・リージョン別レイテンシを 1 画面にまとめた、開発者向けSaaSの観測系ダッシュボード。
雑誌風のお客様の声セクション
メインの引用をアンカーに、3列の小さな声と3つの数値指標を重ねた雑誌調のお客様の声セクション。セリフのイタリック・うっすらした罫線・赤いクォートマークで信頼感と読みごたえを両立します。
すりガラス調の追従ナビゲーション
半透明のすりガラス越しに背景のパステルが透けて見える、カプセル型の追従ナビゲーション。スクロール時もコンテンツの世界観を壊さず、モダンなSaaSやプロダクトサイトの上部に向きます。
上品なセリフ体のポートフォリオサイト
セリフ体の大見出しと不揃いグリッド、暖色アースカラー、斜体のアクセントで組んだデザインスタジオ向けの作品集サイト。沈黙と余白で格を出す、雑誌的な誌面設計。
弾むアニメーションのCTAブロック
少し傾いたカードと厚い境界線、浮遊する絵文字、手書き風の矢印書き込みで構成した遊び心のあるCTAブロック。個人開発プロダクト・クリエイター系サービス・コミュニティ募集など、親しみの温度を優先したい局面向け。
新聞風の3段階料金表
新聞の紙面を思わせるセリフ書体と罫線、二重線の枠、スタンプ色のアクセントで組んだ3プランの料金表。SaaSやサブスクのプラン提示で「レガシーなのに現役」なトーンを出したいときに。
シンプルで洗練されたヒーローセクション
余白を大きくとり、見出しとCTAだけで価値を伝えるミニマルなヒーローセクション。SaaSや個人開発のランディングページ最上部に向いた、装飾を削って要点を立てる構成。
幾何形を組み替える空状態
赤い円・青い四角・黄色い三角の5つの図形だけで空の画面を成立させる空状態。ボタンを押すと同じ図形が配置を変え、待つ時間に小さな手触りを与えます。
マスコットが見守る新規登録画面
丸みとパステル、CSSのマスコットを組み合わせた新規登録画面。必須項目・メール形式・同意を確認し、文字数と文字種をメーターに表示。3ステップのうち入力段階を試せる見本です。
図書館カード目録風の検索結果
紙の目録カードを重ねた検索結果ページ。請求記号・ISBN・在庫スタンプ・蔵書印を配置し、架空の5件で検索・分類・在庫の絞り込み、並び替えとページ送りを試せます。
ポラロイド写真ボード風のギャラリー
コルクボードに押しピンとマスキングテープで留めたポラロイド写真コレクションを再構築したギャラリー。手書き風キャプション・微妙な傾き・付箋メモで「私的な記憶」を訴求する尖った設計。
星座図・天体図風のサイトナビゲーション
夜空の星座と天体観測カタログを再構築したサイトナビゲーション。各ページを「恒星」、カテゴリを「星座」として配置し、現在地を北極星（Polaris）の脈動で示す、神秘的で詩的な尖った設計。
航空券スタイルのイベント告知CTAセクション
航空会社のボーディングパスをそのまま再現したCTAセクション。ゲート番号・搭乗時刻・QRコード・バーコード・ミシン目で「予約完了感」を演出する、旅・イベント・体験型サービスに刺さる尖った設計。
Discord/Slack風の3ペイン・チャット画面
Discord・Slack のチャットUIを再構築した3ペインインターフェイス。サーバーリスト＋チャンネル＋メッセージスレッド＋リアクション・スレッドの定番構成を CSS だけで網羅する尖った設計。
マンガのコマ割りで読ませるブログ記事一覧
日本マンガのコマ割り・吹き出し・効果音文字を Web に持ち込んだ、白黒モノクロのブログ記事一覧。各記事を「ひとコマ」として配置する読者を惹きつける尖った設計。
3画面を重ねるアプリUI
モバイルアプリのプロダクトサイト向けに、傾けた3枚のスマホフレームに UI スクリーンを並べるショーケース。フィットネス・健康・SaaS モバイルアプリの定番表現を CSS だけで構築する尖った設計。
侘び寂びの墨絵的ポートフォリオ
不完全さを美と捉える日本の侘び寂び美学を Web に持ち込んだポートフォリオ。墨絵のかすれ、紙質感、大胆な余白、明朝の縦書き和文、朱の落款で「静けさ」を作る尖った設計。
完全 CLI ターミナル風のダッシュボード
GUI を排し、すべてを ASCII テーブル・モノスペース・コマンドプロンプトで構築するターミナル風ダッシュボード。開発者向けインフラ管理ツール・サーバーモニタリング・ハッカー文化を取り込んだプロダクトに。
スイス様式のシンプルなお問い合わせフォーム
厳格なグリッドと無装飾サンセリフで構築する、スイス国際タイポグラフィ様式のお問い合わせフォーム。色を排し、罫線・余白・タイポの階層だけで「真剣さ」を伝える設計。
手描きスケッチを散りばめた温度のあるフッター
紙質感のオフホワイトに手描き線のイラスト・ラフな書き込みを散りばめた、温度のあるフッター。クラフトブランド・カフェ・絵本系メディアなど人の手の温もりが武器になる業態に。
パステル配色の柔らかいお客様の声セクション
ヘルスケアやウェルネス系サービス向けの、パステル配色と大きな角丸で構成する柔らかいお客様の声セクション。安心感と温度を伝えながら、引用を読ませる構造を作る。
スイス様式・グリッド厳守の料金プラン
厳格なグリッドと無装飾サンセリフだけで構築する、スイス国際タイポグラフィ様式の料金プラン。装飾を排し、罫線・余白・タイポの階層だけで「比較しやすさ」を最大化する設計。
ピクセルアート調の404ページ
深紫の宇宙を背景に、点滅する星・浮遊するピクセルキャラクター・グリッチするタイトルを組み合わせたレトロゲーム風の404ページ。冷たいエラー画面の代わりに、離脱の瞬間を小さな温度に変える。
タイル型グリッドの機能紹介
大小が異なるタイルを組み合わせて 6 機能を並べる、暗背景のベントーグリッド (タイル型レイアウト) の機能紹介セクション。主役の機能を大きく、補助機能を小さく配置することで、説明文を読まなくても重みづけが伝わる設計。
シンプルで洗練されたヒーローセクション
余白を大きくとり、見出しとCTAだけで価値を伝えるミニマルなヒーローセクション。SaaSや個人開発のランディングページ最上部に向いた、装飾を削って要点を立てる構成。
収録数の多いカテゴリ
カテゴリで絞り込む
スタイルで絞り込む
このカタログについて
完全無料・著作権フリーのWebデザインパターン集。Hero・LP・ダッシュボードなどに、Codex・Claude Code・v0・Cursor へそのまま渡せるAIプロンプトを併録。 UI を文章で指示する時代のどう書けば伝わるかを、料金¥0でコピペして使えるカタチで蓄積していきます。
2軸で素早く探せる
カテゴリ（どこに置くか — ヒーロー・価格表・フッター…）とスタイル（どう見せるか — ミニマル・サイバー・Y2K…）の二軸検索。1デザインに複数スタイルOK。
DUAL-AXIS · 18 × 33
完全無料・著作権フリー
掲載のすべては料金¥0・著作権フリー（CC0、パブリックドメイン相当）。クレジット表記不要、商用利用OK、改変・再配布も全部自由。コピペしてそのまま使えます。
¥0 · CC0 · NO ATTRIBUTION
技術から探すこともできます
このページはヒーローや料金表といった画面の型から探す入口です。もう一つ、使う技術から探す入口も用意しています。Tailwind CSSのユーティリティで組む書き方、JavaScriptを使わずCSSだけで動かす方法、jQueryを素のJavaScriptに置き換える対照表。どれも動くサンプルとコードをそのまま載せています。