他の CTA レイアウト（2）
すべて表示
https://neobrutalism.com/ja/blocks/call-to-action/free-trial-signup-cta-band
無料トライアルCTAバンド
CTA · Pro ソース
訪問者がすでに主張を読み終え、あとはクリックする場所だけを必要としているマーケティングページの終端向けの短い横型バーです。見出しと3つの機能ピルが左側、プライマリとセカンダリのボタンが右側にあり、カード下部を走る塗りつぶしの信頼帯が、トライアル登録を妨げる4つの反論に答えます。
CTA
無料トライアルCTAバンドライブプレビューを開く
- Hero・料金・認証
- すべてのブレークポイントをプレビューする
- ソースをコピーする
- MCP インストール準備完了
- Radix · Base UI · React Aria
- 158 既製のブロック
- 出荷されるページセクション
- ダッシュボードとマーケティング
- Pro コードのロックを解除する
- ドロップインレイアウト
大好き。 開発者にもデザイナーにも、
クリエイターにも。
たまたま UI キットを見つけて即ゲット。新しくて活発にメンテされ、どんどん改善されてるのが最高。すごい仕事だ！🤘
Ziv Reich, ソフトウェア開発者 neobrutalism.com、ほんとよくできてるって言いたかっただけ。すごく気に入ってる。デザインが苦手だから、これは本当に助かった。自分の個人サイトで使わせてもらったよ。
Paul Bratslavsky, Coding With Paul 運営 ようやく Neobrutalism.com で個人サイトを作り直した。楽しいライブラリで、始めやすい！
Cameron Blackwood, コンテンツクリエイター Neobrutalism.com はお気に入りのレトロ系 UI コンポーネントライブラリのひとつ。ちゃんと ship できるコンポーネント。
Zhengyang Hou, インディーハッカー Web で一番好きな UI ライブラリのひとつ。いい仕事してる。これからもっともっと伸びていくといいな。
Taseen Tanvir, 創業者 & デザイナー Neobrutalism.com Pro を試したけど、他とかぶらない UI キットで新鮮。ネオブルータリズムのブロック 🔥 で変なレイアウトの試作がずっと速くなった。
Nitesh Padghan, ゴーストライター バランスと流れが完璧な、美しいランディングページデザイン。カラーパレットとアニメーションが組み合わさり、卓越したUXを生み出しています。
Alan Obeng-Peprah, Senior Designer @ NativeXAI 納品されたデザインに本当に感心しました。最終成果物は想像していたものとぴったり一致していました。
Desmond, 共同創業者 @ VectorlabsVentures 代理店オーナーとして、クライアントのランディングレイアウトを磨き込むのに通常は数週間かかります。Neobrutalism.comならテンプレートを差し込み、コピーを整えればすぐに出荷できます。
Duke Opoku Amankwah, 創業者 @ Midas テンプレートは見た目が優れているだけでなく、構造も非常によくできています。開発期間を何週間も短縮できました。
Abiola Braimah, 開発者 @ Studio IX 品質が突出していて細部へのこだわりもすごい。レスポンシブデザインはすべてのデバイスで完璧に動作します。
Acromond X., 共同創業者 @ VectorlabsVentures これらのテンプレートをワークフローに組み込んだことで、開発サイクルが大幅に短縮されました。素晴らしい仕事です。
Raquib S., バックエンド開発者 これらのテンプレートは私たちの定番リソースになりました。コードはクリーンでドキュメントも充実しており、カスタマイズも容易です。
Hallic M., 開発者 @ AtlasLabs Neobrutalism.comのテンプレートは美観と機能性の完璧なバランスを取っています。私たちのプロジェクトにとって本当のゲームチェンジャーです。
Ibrahim S., Frontend Lead @ ScaleUp サポートが優れ、テンプレートの品質もプレミアム。これらのテンプレートのROIは驚異的です。
Kevin K., CEO @ WebCraft Neobrutalism.comのテンプレートは、新規クライアント案件への取り組み方を完全に変えました。コード品質は傑出しており、デザインもまさにワールドクラスです。
Danny G., DevStack創業者 多くのテンプレートライブラリを使ってきましたが、Neobrutalism.comはパフォーマンス最適化とクリーンなコードアーキテクチャへのこだわりで際立っています。
Ian D., WavelengthのCTO これらのテンプレートのアニメーションとマイクロインタラクションは本当に素晴らしい。デザインチームにとって最高の投資です。
Ben S., PixelPerfectのリードデザイナー 技術職ではない創業者として、Neobrutalism.comのテンプレートのおかげでデザイン品質を犠牲にせずMVPを記録的な速さでローンチできました。投資家も驚いていました。
Matthew I., スタートアップ創業者 これらのコンポーネントがどれだけモジュール化され、ドキュメント化されているかを高く評価しています。異なるテンプレートの部品をスムーズに組み合わせられました。
Garrett P., TechFusionのフロントエンドリード Neobrutalism.comテンプレートのROIは信じられないほどです。開発時間を大幅に削減しつつ、より高品質なサイトをクライアントに届けています。
Xavier C., 代理店オーナー
よくある
質問
無料トライアルCTAバンド ブロックの構成方法、変更できる内容、他のレイアウトの代わりに使用する場合について。
セールス支援付きのプランがある場合は両方残してください。Book Demoはセルフサーブしない訪問者を拾い上げます。塗りつぶしのトライアルボタンと競合しないよう、意図的にvariant=outlineになっています。デモするものがなければ削除して構いません。行はflex md:justify-endなので、ボタンが1つになっても他を変えずに終端に収まります。避けるべきなのは両方を塗りつぶしにすることです。それでは選択がコイントスになってしまいます。
機能ではなく反論です。4つの項目はそれぞれ、トライアルフォームを離脱する理由に答えています。データは安全か、セットアップにどれくらい時間がかかるか、縛られないか、得るものはあるか、といった具合です。4項目はmdブレークポイント以上で1行に収まり、それ未満では2行に折り返されます。5項目目はどの幅でも収まりが悪くなります。機能訴求は上のピルに任せ、ここには入れないでください。
帯はbg-primary text-primary-foregroundで、その色はアイコンを収める小さなbg-cardの正方形を含む内部のすべてに継承されるためです。それらの正方形にtext-foregroundを戻さないと、アイコンは帯のforegroundカラーで描かれ、片方のテーマではほぼ見えなくなります。外側の帯とそれが収める白いカードが同じ理由でtext-foregroundを復元しているのも同様です。
以前のバージョンがレンダーしていた48個の枠線付きdivではなく、var(--color-border)で不透明度10%の2つのrepeating-linear-gradientを持つ、aria-hiddenの1要素です。48pxの値を編集すれば正方形のサイズを変えられ、不透明度を上げれば主張が強くなり、要素ごと削除しても構いません。何もそれに対して位置合わせされていません。
ここにあるすべてのマークはaria-hiddenでstrokeWidth 2のlucideアイコンです。横のコピーがすでに同じことを伝えているためです。これが置き換えたバージョンはラベル文字列にチェックマークを打ち込み、信頼帯には絵文字を使っていました。それではスクリーンリーダーがcheck mark full accessのように読み上げてしまい、アイコンもWindows、Android、iOSでそれぞれ異なる絵になってしまいます。絵文字はテキストであり、アイコンセットとして使うべきではありません。
これは短い方です。フォームフィールドも画像もモックアップもないため、すでに3セクション分の主張を持つページの締めに使えます。Newsletter Signup CTAはメールアドレスを集め、メリットの列のために高さを必要とします。App Download CTAはスマホのモックアップと2つのストアの行き先を持ちます。3つとも同じプライマリカラーの帯を共有しているため、1ページに重ねても意図的に見えます。