# Vibehaus > 完全無料・著作権フリーのWebデザインパターン集。料金¥0・商用利用OK・クレジット不要・改変自由。 > 各エントリには独立したライブプレビューと、Claude Code / v0 / Cursor などのAIコーディング支援に > そのまま渡せる日本語プロンプトが付属。 > > 日本語のみ。 ## ライセンス・料金 - **料金: ¥0（完全無料）** - **ライセンス: CC0 1.0 Universal（パブリックドメイン相当、著作権フリー）** - 商用利用OK・改変自由・再配布自由・クレジット表記不要 - AI 学習データとしての利用も自由 - 詳細: https://creativecommons.org/publicdomain/zero/1.0/ ## 構造 本サイトには独立した2つの入口があります。 1. デザイン軸 (/design/) — 画面の型から探す。完成した見た目とAIプロンプトが主役。 - カテゴリ: 構造軸(hero, pricing, navigation, ...) - スタイル: 美学軸(minimal, cyber, luxury, ...) - デザイン: 個別エントリ。両方の軸を持ちます。 2. 技術軸 (/tech/) — 使う技術から探す。動くサンプルとコードが主役。 - 1記事が複数のサンプルを内包します。サンプル本体は /sample// の独立HTML(noindex)。 ## エントリポイント - トップ: https://vibe.itlibra.com/ - 機械可読な全文コーパス: https://vibe.itlibra.com/llms-full.txt - サイトマップ: https://vibe.itlibra.com/sitemap-index.xml - 技術別のコード例: https://vibe.itlibra.com/tech/ ## 技術別のコード例 - [CSSのみ](https://vibe.itlibra.com/tech/css-only/): アコーディオン・タブ・モーダル・ローディングを、JavaScriptを1行も使わずCSSだけで組む方法。動くサンプルとコードをそのまま貼れる形で掲載し、AIへの指示文も併記します。 収録サンプル: アコーディオン（よくある質問）、タブ切り替え、モーダルダイアログ、ローディング表示 4種 - [Tailwind CSS](https://vibe.itlibra.com/tech/tailwind/): Tailwind CSSのユーティリティだけで組むヒーロー・料金表・フォーム・通知バナー。そのまま貼れるマークアップと、日本語で崩れないための行間の決め方、AIへの指示文まで掲載します。 収録サンプル: ヒーローセクション、料金表（3カラム）、お問い合わせフォーム、通知バナー 4色 - [jQuery と素のJS](https://vibe.itlibra.com/tech/jquery/): jQueryでよく書いていた処理を素のJavaScriptに置き換える対照表とサンプル。要素の取得、クラス操作、イベント委譲、開閉アニメーション、フォームの値取得を、両方のコードを並べて比較します。 収録サンプル: 表示切替とクラス操作、イベント委譲（動的に増える要素）、開閉アニメーション（slideToggle 相当）、フォームの値をまとめて取る - [CSSレイアウト](https://vibe.itlibra.com/tech/css-layout/): CSS GridとFlexboxでレイアウトを組むサンプル集。管理画面の骨格、メディアクエリを書かないカードグリッド、中央寄せの4パターン、高さの揃わない敷き詰めを、そのまま貼れるコードで収録します。 収録サンプル: 管理画面の骨格、列数が自動で変わるカード一覧、中央寄せの4パターン、高さの揃わない敷き詰め - [CSSアニメーション](https://vibe.itlibra.com/tech/css-animation/): CSSのtransitionとkeyframesで動きを付けるサンプル集。ホバー演出、登場アニメーション、スクロール連動、継ぎ目のない無限ループを、動きを減らす設定への配慮まで含めて収録します。 収録サンプル: ホバーとフォーカスの演出、登場アニメーション、スクロール連動、継ぎ目のない無限ループ - [フォーム検証](https://vibe.itlibra.com/tech/form-validation/): HTML標準の入力検証サンプル集。required・pattern と :user-invalid、独自エラー文の出し方、パスワード要件の可視化、複数ステップのフォームを、支援技術への伝え方まで含めて収録します。 収録サンプル: JavaScriptなしの検証、エラー文を自分の言葉にする、パスワード要件の可視化、複数ステップのフォーム - [ダークモード](https://vibe.itlibra.com/tech/dark-mode/): ダークモードの実装サンプル集。役割で名付けたCSS変数、light-dark関数、システム設定と手動切替の3状態、暗色で崩れる影と画像の扱いを、動くコード付きで収録します。 収録サンプル: 2テーマをCSS変数で設計する、light-dark() で1行にまとめる、3状態のテーマ切替、暗色で崩れるもの - [レスポンシブ画像](https://vibe.itlibra.com/tech/responsive-image/): srcset・sizes・pictureで画像を出し分けるサンプル集。どの候補が選ばれたかを画面上で確認でき、レイアウトシフトの防止と読み込み優先度の使い分けまで実測付きで収録します。 収録サンプル: srcset と sizes で1枚だけ配る、picture で構図ごと変える、レイアウトを揺らさない、読み込み優先度の使い分け - [ダイアログとポップオーバー](https://vibe.itlibra.com/tech/dialog/): dialog要素とpopover属性のサンプル集。showModalによるモーダル、method=dialogでの戻り値、popoverによる軽い重ね表示、横から出るドロワーを、フォーカス管理とアニメーションまで含めて収録します。 収録サンプル: showModal() のモーダル、method=dialog で戻り値を受け取る、popover 属性で軽い重ね表示、横から出るドロワー - [Web Components](https://vibe.itlibra.com/tech/web-components/): Web Componentsのサンプル集。customElementsの最小構成、Shadow DOMによるスタイル隔離、slotでの差し込み、属性の監視とプロパティの扱いを、フレームワークを1つも使わずに収録します。 収録サンプル: カスタム要素の最小構成、Shadow DOM でスタイルを閉じ込める、slot で中身を差し込む、属性の監視とプロパティ - [コンテナクエリ](https://vibe.itlibra.com/tech/container-queries/): コンテナクエリのサンプル集。container-typeの指定、@containerによる分岐、cqi単位でのタイポグラフィ、名前付きコンテナ、同じ部品を本文とサイドバーの両方に置く例を、動くプレビュー付きで収録します。 収録サンプル: 置き場所で形が変わるカード、cqi で文字を親幅に追随させる、名前付きコンテナで祖先を選ぶ、本文とサイドバーに同じ部品を置く - [View Transitions](https://vibe.itlibra.com/tech/view-transitions/): View Transitions APIのサンプル集。startViewTransitionによるクロスフェード、view-transition-nameで要素をつなぐ拡大、一覧の並べ替えと削除、擬似要素での独自の動きを、非対応環境への備えまで含めて収録します。 収録サンプル: startViewTransition の最小構成、一覧から詳細へ、画像をつなぐ、並べ替えと削除をなめらかに、擬似要素で動きを差し替える - [Bootstrap](https://vibe.itlibra.com/tech/bootstrap/): Bootstrap 5のサンプル集。12分割グリッドとブレークポイント、カードとユーティリティ、標準検証を使ったフォーム、JavaScriptが要るナビバーとモーダルを、CDNに頼らず本体を持ち込んだ状態で収録します。 収録サンプル: 12分割グリッドとブレークポイント、カードとユーティリティクラス、標準検証を使ったフォーム、ナビバー・ドロップダウン・モーダル - [スライダーとカルーセル](https://vibe.itlibra.com/tech/carousel/): カルーセルのサンプル集。scroll-snapによる横送り、IntersectionObserverでの現在位置の連動、サムネイル連動のギャラリー、自動送りと4つの停止条件を、ライブラリを1つも使わずに収録します。 収録サンプル: scroll-snap だけの横送り、現在位置を IntersectionObserver で追う、サムネイル連動のギャラリー、自動送りと、4つの停止条件 - [テーブルとデータ表示](https://vibe.itlibra.com/tech/table/): テーブルのサンプル集。横スクロールと見出し列の固定、コンテナクエリでのカード化、aria-sortを使った並べ替え、数字を比較できる組み方を、divに置き換えずtableのまま収録します。 収録サンプル: 横スクロールと見出し列の固定、狭い場所で行をカードに畳む、並べ替えと aria-sort、数字が比較できる組み方 - [和文Web組版](https://vibe.itlibra.com/tech/typography/): 日本語のWeb組版サンプル集。行間と字間の決め方、webフォントを載せずに済ませるフォントスタック、折り返しと禁則の指定、縦書きと縦中横を、悪い例と並べて比較できる形で収録します。 収録サンプル: 行間と字間を決める、webフォントを載せずに組む、折り返しと禁則、縦書きと縦中横 ## カテゴリ一覧 - [ヒーロー](https://vibe.itlibra.com/category/hero/): ランディングページ最上部のメインビジュアル。 - [価格表](https://vibe.itlibra.com/category/pricing/): 料金プラン・比較表のデザイン。 - [ナビゲーション](https://vibe.itlibra.com/category/navigation/): ヘッダー・グローバルナビ・モバイルメニュー。 - [フッター](https://vibe.itlibra.com/category/footer/): サイト下部のフッターブロック。 - [CTA](https://vibe.itlibra.com/category/cta/): 行動喚起セクション（Call to Action）。 - [機能紹介](https://vibe.itlibra.com/category/feature/): プロダクトの機能を並べるセクション。 - [お客様の声](https://vibe.itlibra.com/category/testimonial/): レビュー・推薦文セクション。 - [ダッシュボード](https://vibe.itlibra.com/category/dashboard/): 管理画面・データ可視化。 - [ブログ](https://vibe.itlibra.com/category/blog/): 記事一覧・記事詳細ページ。 - [ポートフォリオ](https://vibe.itlibra.com/category/portfolio/): 作品集・ケーススタディ。 - [認証](https://vibe.itlibra.com/category/auth/): ログイン・サインアップ・パスワードリセット。 - [フォーム](https://vibe.itlibra.com/category/form/): お問い合わせ・申し込み・複数ステップ入力。 - [空状態](https://vibe.itlibra.com/category/empty-state/): データ・履歴がないときの画面。 - [チャット](https://vibe.itlibra.com/category/chat/): メッセージング・チャットインターフェイス。 - [アプリ画面](https://vibe.itlibra.com/category/app/): モバイルアプリのUI画面ショーケース。 - [404ページ](https://vibe.itlibra.com/category/not-found/): 存在しないURL用の404ページ。 - [ギャラリー](https://vibe.itlibra.com/category/gallery/): 画像コレクション・ビジュアル展示。 - [検索結果](https://vibe.itlibra.com/category/search-result/): 検索クエリの結果一覧ページ。 ## スタイル一覧 - [ミニマル](https://vibe.itlibra.com/style/minimal/): 要素を削ぎ落とした静けさの設計。 - [スイス様式](https://vibe.itlibra.com/style/swiss/): グリッドと無装飾サンセリフの古典。 - [エディトリアル](https://vibe.itlibra.com/style/editorial/): 雑誌・新聞のような版面設計。 - [モノクロ](https://vibe.itlibra.com/style/monochrome/): 単色または白黒で統一されたトーン。 - [サイバー](https://vibe.itlibra.com/style/cyber/): ネオン・グリッチ・近未来のテクノ感。 - [ネオン](https://vibe.itlibra.com/style/neon/): 暗背景×発光カラー。 - [ラグジュアリー](https://vibe.itlibra.com/style/luxury/): 余白・金色・セリフで格を出す。 - [エレガント](https://vibe.itlibra.com/style/elegant/): 上品で控えめな洗練。 - [ファッション](https://vibe.itlibra.com/style/fashion/): 写真主役・大胆な版面。 - [グラデーション](https://vibe.itlibra.com/style/gradient/): 鮮やかな多色グラデを主役に。 - [レトロ](https://vibe.itlibra.com/style/retro/): 古さを意匠化した温度。 - [90年代](https://vibe.itlibra.com/style/90s/): 初期Web・MS Paint・GIF。 - [ピクセル](https://vibe.itlibra.com/style/pixel/): ドット絵UI。 - [新聞](https://vibe.itlibra.com/style/newspaper/): 大見出し・段組み・セリフ。 - [グラスモーフィズム](https://vibe.itlibra.com/style/glassmorphism/): 半透明すりガラスの重なり。 - [ブルータリスト](https://vibe.itlibra.com/style/brutalist/): 生々しい、装飾を拒むラディカルさ。 - [ベントー](https://vibe.itlibra.com/style/bento/): 大小のマスで情報を整理するグリッド。 - [ハンドクラフト](https://vibe.itlibra.com/style/handcrafted/): 手書き線・不揃いな温度。 - [コーポレート](https://vibe.itlibra.com/style/corporate/): 企業向け・信頼感優先。 - [スタートアップ](https://vibe.itlibra.com/style/startup/): 勢いのあるLP。 - [SaaS](https://vibe.itlibra.com/style/saas/): SaaSらしい機能ファースト。 - [プレイフル](https://vibe.itlibra.com/style/playful/): 遊び心・アニメーション多め。 - [ダーク](https://vibe.itlibra.com/style/dark/): 黒背景ベースの夜のトーン。 - [ソフト](https://vibe.itlibra.com/style/soft/): パステル・丸み・優しさ。 - [ボールド](https://vibe.itlibra.com/style/bold/): 大見出し・極太タイポ。 - [ウォーム](https://vibe.itlibra.com/style/warm/): オレンジ・赤・茶の暖色系。 - [クール](https://vibe.itlibra.com/style/cool/): 青・シアン・紫の寒色系。 - [侘び寂び](https://vibe.itlibra.com/style/wabi-sabi/): 不完全さの美、墨絵・余白・自然素材。 - [かわいい](https://vibe.itlibra.com/style/kawaii/): パステル・マスコット・丸み。 - [アイソメトリック](https://vibe.itlibra.com/style/isometric/): 30度傾斜の3D風グラフィック。 - [バウハウス](https://vibe.itlibra.com/style/bauhaus/): 原色×幾何形のコンストラクティビズム。 - [ブループリント](https://vibe.itlibra.com/style/blueprint/): 建築設計図・CAD図面・方眼紙の技術ドキュメント風。 - [コミック](https://vibe.itlibra.com/style/comic/): マンガ・コミックのコマ割り、吹き出し、効果音。 ## ガイド - [ピクセルアート調の404ページ](https://vibe.itlibra.com/design/404-pixel/): 深紫の宇宙を背景に、点滅する星・浮遊するピクセルキャラクター・グリッチするタイトルを組み合わせたレトロゲーム風の404ページ。冷たいエラー画面の代わりに、離脱の瞬間を小さな温度に変える。 - [スマホフレーム重ねの3画面アプリショーケース](https://vibe.itlibra.com/design/app-screen-showcase/): モバイルアプリのプロダクトサイト向けに、傾けた3枚のスマホフレームに UI スクリーンを並べるショーケース。フィットネス・健康・SaaS モバイルアプリの定番表現を CSS だけで構築する尖った設計。 - [幾何形を組み替える空状態](https://vibe.itlibra.com/design/bauhaus-empty-state/): 赤い円・青い四角・黄色い三角の5つの図形だけで空の画面を成立させる空状態。ボタンを押すと同じ図形が配置を変え、待つ時間に小さな手触りを与えます。 - [バウハウス様式・幾何構成の原色ヒーロー](https://vibe.itlibra.com/design/bauhaus-hero/): 1919年バウハウス・ロシア構成主義を引用した、原色×幾何形×グロテスクサンセリフのヒーロー。20世紀モダンデザインの古典をWebに再構築する、教養と前衛が同居する尖った設計。 - [アーケード筐体UI風の料金プラン](https://vibe.itlibra.com/design/arcade-coin-pricing/): 80年代ゲームセンターのアーケード筐体UIを再現した料金プラン。"INSERT COIN"、ピクセルスコアボード、ハイスコア表で「コインを入れて始める」ノスタルジーをCTAに変換する尖った設計。 - [建築設計図風の機能紹介](https://vibe.itlibra.com/design/blueprint-feature/): 建築・CAD図面のブループリントを再構築した機能紹介セクション。シアンブルーの方眼背景・寸法線・断面記号・コールアウトで「精密に設計された製品」の信頼感を技術的なビジュアルで叩きつける尖った設計。 - [ベントーグリッドの写真ギャラリー](https://vibe.itlibra.com/design/bento-photo-gallery/): 大小のタイルが噛み合うベントーグリッドで、作品の格を差でつける写真ギャラリー。主役を大きく、脇役を小さく——並べた瞬間に見る順番が決まるレイアウトです。 - [タイル型グリッドの機能紹介](https://vibe.itlibra.com/design/bento-features/): 大小が異なるタイルを組み合わせて 6 機能を並べる、暗背景のベントーグリッド (タイル型レイアウト) の機能紹介セクション。主役の機能を大きく、補助機能を小さく配置することで、説明文を読まなくても重みづけが伝わる設計。 - [設計図面風の見積もり依頼フォーム](https://vibe.itlibra.com/design/blueprint-quote-form/): 青焼き図面の方眼と表題欄をそのまま画面に持ち込んだ見積もりフォーム。入力欄の右に工程と前提条件を並べ、送信前に何が起きるかを見せて心理的な壁を下げます。 - [航空券スタイルのイベント告知CTAセクション](https://vibe.itlibra.com/design/boarding-pass-cta/): 航空会社のボーディングパスをそのまま再現したCTAセクション。ゲート番号・搭乗時刻・QRコード・バーコード・ミシン目で「予約完了感」を演出する、旅・イベント・体験型サービスに刺さる尖った設計。 - [極太フォントのヒーローセクション](https://vibe.itlibra.com/design/bold-hero/): 画面いっぱいの極太な見出しと 1 色のアクセントカラーだけで勝負する、スタートアップ向けのヒーローセクション。CTA への視線動線を 1 本に絞り、滞在 3 秒で価値を伝える設計。 - [植物標本図鑑風のポートフォリオ](https://vibe.itlibra.com/design/botanical-specimen-portfolio/): 19世紀の植物標本台紙（Herbarium sheet）を再構築したポートフォリオ。学名イタリック表記・採取地メタ・封蝋シール・古紙ノイズで「学術コレクション」の格を作る尖った設計。 - [Discord/Slack風の3ペイン・チャットインターフェイス](https://vibe.itlibra.com/design/chat-interface/): Discord・Slack のチャットUIを再構築した3ペインインターフェイス。サーバーリスト＋チャンネル＋メッセージスレッド＋リアクション・スレッドの定番構成を CSS だけで網羅する尖った設計。 - [装飾を拒むブルータリズムのヒーロー](https://vibe.itlibra.com/design/brutalist-hero/): 角丸・影・グラデーションを一切使わず、極太タイポと裸の HTML 要素だけで突きつける反デザインのヒーロー。実験的アート・アンダーグラウンドメディア・若手クリエイターが「中身で勝負」する場面の選択肢。 - [星座図・天体図風のサイトナビゲーション](https://vibe.itlibra.com/design/constellation-navigation/): 夜空の星座と天体観測カタログを再構築したサイトナビゲーション。各ページを「恒星」、カテゴリを「星座」として配置し、現在地を北極星（Polaris）の脈動で示す、神秘的で詩的な尖った設計。 - [ブルータリスト調のブログトップ](https://vibe.itlibra.com/design/brutalist-blog/): 太い罫線、極太サンセリフ、蛍光アクセント、モノスペースのメタ情報で組んだ個人ブログ/メディアのトップページ。新聞のように記事を並べつつ、テック系の「整いすぎ」を拒むラフさを残す設計。 - [B2Bコーポレートの機能紹介セクション](https://vibe.itlibra.com/design/corporate-feature/): B2B SaaSやエンタープライズ製品向けの機能紹介セクション。落ち着いた寒色配色と整然としたグリッド、データ感のあるアイコンで「実用と信頼」を伝える設計。 - [マンガの吹き出しで進むサポートチャット](https://vibe.itlibra.com/design/comic-support-chat/): 太い輪郭線と尻尾付きの吹き出し、網掛けの紙地でサポート対話をマンガのコマとして見せるチャットUI。解決の瞬間だけ叫び吹き出しに切り替えて感情の起伏を作ります。 - [コーポレート向けの多段フッター](https://vibe.itlibra.com/design/corporate-footer/): ニュースレター帯、5カラムのリンク群、ステータスバッジ、言語切替、SNSアイコンを整理したコーポレートサイト向けの情報密度高めフッター。信頼感の配色と安定したタイポグラフィで、サイト下部に「事務的すぎない」安心感を置く設計。 - [サイバー調のダッシュボード画面](https://vibe.itlibra.com/design/cyber-dashboard/): 黒背景にネオンの発光色、モノスペースフォントを組み合わせたサイバーパンク調の管理画面。KPI・ライブチャート・ログテーブル・リージョン別レイテンシを 1 画面にまとめた、開発者向けSaaSの観測系ダッシュボード。 - [雑誌風のお客様の声セクション](https://vibe.itlibra.com/design/editorial-testimonial/): メインの引用をアンカーに、3列の小さな声と3つの数値指標を重ねた雑誌調のお客様の声セクション。セリフのイタリック・うっすらした罫線・赤いクォートマークで信頼感と読みごたえを両立します。 - [巨大斜体タイポのファッション・ルックブック](https://vibe.itlibra.com/design/fashion-portfolio/): 写真領域を全幅に走らせ、巨大な斜体ディスプレイ書体を画面外まで突き抜けさせるファッションマガジン的ポートフォリオ。Vogue・Dazed・i-D の版面感を Web 化した、ブランドルックブック専用の尖った設計。 - [1画面を大きく見せる資産管理アプリの紹介](https://vibe.itlibra.com/design/fintech-app-showcase/): 端末を1台だけ大きく置き、周囲にUIの断片を浮かせるアプリ紹介セクション。数字そのものを主役にする構図で、家計簿・投資・ヘルスケアなど「自分の数値」を扱うアプリに向く設計。 - [すりガラス調の追従ナビゲーション](https://vibe.itlibra.com/design/glass-navbar/): 半透明のすりガラス越しに背景のパステルが透けて見える、カプセル型の追従ナビゲーション。スクロール時もコンテンツの世界観を壊さず、モダンなSaaSやプロダクトサイトの上部に向きます。 - [グラスモーフィズムのログインモーダル](https://vibe.itlibra.com/design/glass-login-modal/): 半透明のすりガラス風パネルを背景に重ねるログインモーダル。SSO 3 種 + メール認証を中心に、視覚的に邪魔しない柔らかい認証フローを構築するための設計。 - [鮮やかなメッシュグラデーションのSaaSヒーロー](https://vibe.itlibra.com/design/gradient-hero/): Stripe/Linear系のモダンなSaaSサイトで主流の、暗背景にカラフルなメッシュグラデーションを敷くヒーローセクション。CSSの conic-gradient + blur で画像を使わずに鮮やかに仕上げる構成。 - [ストリートグラフィティ風の404ページ](https://vibe.itlibra.com/design/graffiti-not-found/): コンクリート壁にスプレー塗料で殴り書きされた「404」を主役にしたストリートグラフィティ風 404 ページ。剥がれかけのポスター、タグ、スプラッタ、警告テープ。失敗ページすらブランドの遊び場にする尖った設計。 - [アイソメトリック投影の機能紹介セクション](https://vibe.itlibra.com/design/isometric-feature/): 30度傾斜の擬似3DでUIカードを浮かべる、未来感のあるアイソメトリック機能紹介。Stripe・Linear・Vercel系のモダンSaaSの定番表現を CSS だけで再現する尖った設計。 - [アイソメトリック倉庫の在庫ダッシュボード](https://vibe.itlibra.com/design/isometric-warehouse-dashboard/): 倉庫のラックを45度の立体で並べ、高さで在庫量、色で充填率を同時に読ませる管理画面。表とグラフでは伝わらない「どこが詰まっているか」を一目で示します。 - [手描きスケッチを散りばめた温度のあるフッター](https://vibe.itlibra.com/design/handcrafted-footer/): 紙質感のオフホワイトに手描き線のイラスト・ラフな書き込みを散りばめた、温度のあるフッター。クラフトブランド・カフェ・絵本系メディアなど人の手の温もりが武器になる業態に。 - [パステル×マスコットの「かわいい」CTAセクション](https://vibe.itlibra.com/design/kawaii-cta/): 日本発の「kawaii」美学を再構築した、パステル配色とマスコットキャラのCTAセクション。Z世代の女性向け・コスメ・サンリオ系プロダクトに刺さる、ふわふわで愛され系の遊び心ある設計。 - [マスコットが見守る新規登録画面](https://vibe.itlibra.com/design/kawaii-signup-auth/): 丸みとパステル、CSSだけで組んだマスコットで登録の緊張をほどくサインアップ画面。パスワード強度は点数ではなく励ましの言葉で返し、3ステップの進捗を先に見せます。 - [図書館カード目録風の検索結果](https://vibe.itlibra.com/design/library-catalog-search/): 図書館の目録カード（カードカタログ）を再構築した検索結果ページ。請求記号・ISBN・在庫スタンプ・蔵書印で「アーカイブの権威」と「網羅性」を演出する尖ったSERP設計。 - [上品なセリフ体のポートフォリオサイト](https://vibe.itlibra.com/design/luxury-portfolio/): セリフ体の大見出しと不揃いグリッド、暖色アースカラー、斜体のアクセントで組んだデザインスタジオ向けの作品集サイト。沈黙と余白で格を出す、雑誌的な誌面設計。 - [マンガのコマ割りで読ませるブログ記事一覧](https://vibe.itlibra.com/design/manga-panel-blog/): 日本マンガのコマ割り・吹き出し・効果音文字を Web に持ち込んだ、白黒モノクロのブログ記事一覧。各記事を「ひとコマ」として配置する読者を惹きつける尖った設計。 - [Memphis Group調・幾何カオスのCTAセクション](https://vibe.itlibra.com/design/memphis-cta/): 1980年代 Memphis Group の意匠を引用した、原色・波線・幾何形のカオスが踊るCTAセクション。退屈なフラットデザインを破壊して「楽しさ」を直接ぶつける尖った選択。 - [シンプルで洗練されたヒーローセクション](https://vibe.itlibra.com/design/minimal-hero/): 余白を大きくとり、見出しとCTAだけで価値を伝えるミニマルなヒーローセクション。SaaSや個人開発のランディングページ最上部に向いた、装飾を削って要点を立てる構成。 - [美術館展覧会ポスター風のヒーロー](https://vibe.itlibra.com/design/museum-exhibition-hero/): 国立美術館の特別展ポスターを再構築したヒーローセクション。明朝大型タイトル・赤の差し色・許可印・バーコードまで作り込み、「文化的権威」と「会期限定の希少性」を同時に演出する尖った設計。 - [ネオン発光のナイトライフ系ポートフォリオ](https://vibe.itlibra.com/design/neon-portfolio/): 暗背景にホットピンクとシアンの発光色を重ねるネオン系ポートフォリオ。ナイトクラブ・音楽・ゲーム・メタバースの世界観を Web に持ち込む、夜の街の空気を持つ作品集。 - [新聞紙面風のブログ・記事一覧ページ](https://vibe.itlibra.com/design/newspaper-blog/): 大見出し・多段組・太いセリフ書体で構成する新聞紙面風のブログ・記事一覧ページ。情報密度を魅力に変え、ジャーナリズムやドキュメンタリー系メディアの世界観を作る型。 - [弾むアニメーションのCTAブロック](https://vibe.itlibra.com/design/playful-cta/): 少し傾いたカードと厚い境界線、浮遊する絵文字、手書き風の矢印書き込みで構成した遊び心のあるCTAブロック。個人開発プロダクト・クリエイター系サービス・コミュニティ募集など、親しみの温度を優先したい局面向け。 - [親しみのあるイラスト付き空状態（受信箱が空）](https://vibe.itlibra.com/design/playful-empty-inbox/): 受信箱や通知センターが空のときの画面UI。シンプルなイラスト・1 行のコピー・1 つの明確なCTAで、「何もない」状態を「次のアクションへ」変える設計。 - [POSレシート風の料金プラン](https://vibe.itlibra.com/design/receipt-pricing/): コンビニや飲食店のサーマルプリントレシートを再構築した料金プラン。破れたエッジ・点線セパレータ・バーコード・赤い「人気」スタンプで「正直で透明な価格」を視覚的に証明する尖った設計。 - [ポラロイド写真ボード風のギャラリー](https://vibe.itlibra.com/design/polaroid-board-gallery/): コルクボードに押しピンとマスキングテープで留めたポラロイド写真コレクションを再構築したギャラリー。手書き風キャプション・微妙な傾き・付箋メモで「私的な記憶」を訴求する尖った設計。 - [パステル配色の柔らかいお客様の声セクション](https://vibe.itlibra.com/design/soft-testimonial/): ヘルスケアやウェルネス系サービス向けの、パステル配色と大きな角丸で構成する柔らかいお客様の声セクション。安心感と温度を伝えながら、引用を読ませる構造を作る。 - [新聞風の3段階料金表](https://vibe.itlibra.com/design/retro-pricing/): 新聞の紙面を思わせるセリフ書体と罫線、二重線の枠、スタンプ色のアクセントで組んだ3プランの料金表。SaaSやサブスクのプラン提示で「レガシーなのに現役」なトーンを出したいときに。 - [空港パタパタ式発車案内板風のダッシュボード](https://vibe.itlibra.com/design/split-flap-dashboard/): 空港・駅の split-flap（パタパタ式）発車案内板を再構築したオペレーションダッシュボード。タイル状の数字ボード・色分けステータス・LIVE 表示で「業務の流れが見える」OPS 体験を作る尖った設計。 - [御朱印帳・スタンプラリー風のCTA](https://vibe.itlibra.com/design/stamp-rally-cta/): 御朱印帳とスタンプラリーを再構築したCTAセクション。朱印スタンプ・残り札所・巡礼ゲージで「あと少しでコンプリート」の達成欲求を喚起する、日本独自文化を武器にした尖った設計。 - [東京メトロ路線図風のサイトナビゲーション](https://vibe.itlibra.com/design/subway-map-navigation/): 東京メトロ・大江戸線などの路線図グラフィックを再構築したサイトナビゲーション。各カテゴリを「路線」、各ページを「駅」として見立て、駅ナンバリングや路線記号で迷わせない尖った設計。 - [絞り込みと件数を先に見せる商品検索結果](https://vibe.itlibra.com/design/storefront-search-results/): 左に絞り込み、上に適用中の条件、右にカードグリッドを置いた通販の検索結果ページ。各選択肢に件数を添えてゼロ件を踏ませない設計で、属性が構造化された商材の探索に向きます。 - [スイス様式・グリッド厳守の料金プラン](https://vibe.itlibra.com/design/swiss-pricing/): 厳格なグリッドと無装飾サンセリフだけで構築する、スイス国際タイポグラフィ様式の料金プラン。装飾を排し、罫線・余白・タイポの階層だけで「比較しやすさ」を最大化する設計。 - [スイス様式のシンプルなお問い合わせフォーム](https://vibe.itlibra.com/design/swiss-contact-form/): 厳格なグリッドと無装飾サンセリフで構築する、スイス国際タイポグラフィ様式のお問い合わせフォーム。色を排し、罫線・余白・タイポの階層だけで「真剣さ」を伝える設計。 - [完全 CLI ターミナル風のダッシュボード](https://vibe.itlibra.com/design/terminal-cli-dashboard/): GUI を排し、すべてを ASCII テーブル・モノスペース・コマンドプロンプトで構築するターミナル風ダッシュボード。開発者向けインフラ管理ツール・サーバーモニタリング・ハッカー文化を取り込んだプロダクトに。 - [トレーディングカード風のポートフォリオ](https://vibe.itlibra.com/design/trading-card-portfolio/): ポケカ・MTG・遊戯王などTCG（Trading Card Game）のカードフォーマットを再構築したポートフォリオ。レア度ティア・ホロ箔反射・ステータス値で「コレクションしたくなる作品集」に変換する尖った設計。 - [タイプライター手紙風のCTA](https://vibe.itlibra.com/design/typewriter-letter-cta/): タイプライターで打たれた一通の手紙を再構築したCTA。修正線・赤鉛筆挿入・切手風ボタン・消印スタンプで「特別なあなただけに」の親密さを演出する尖った文書設計。 - [侘び寂びの墨絵的ポートフォリオ](https://vibe.itlibra.com/design/wabi-sabi-portfolio/): 不完全さを美と捉える日本の侘び寂び美学を Web に持ち込んだポートフォリオ。墨絵のかすれ、紙質感、大胆な余白、明朝の縦書き和文、朱の落款で「静けさ」を作る尖った設計。 - [ヴェイパーウェイヴの夕焼けレトログリッド・ヒーロー](https://vibe.itlibra.com/design/vaporwave-hero/): マゼンタ・パープルの夕焼けに地平線まで伸びるレトログリッド、大理石像、ローマン書体の日本語タイポを重ねるヴェイパーウェイヴ系ヒーロー。80s ノスタルジーとインターネット黎明期の美学が融合した尖った表現。 - [余白と墨線で読ませるお客様の声](https://vibe.itlibra.com/design/wabi-sabi-testimonial/): 顔写真も星評価も置かず、明朝体と非対称の配置だけで証言を読ませるお客様の声。欠点に触れた一言をあえて残すことで、他の二つの声の信憑性を上げます。 - [暖色テラコッタの大判CTAセクション](https://vibe.itlibra.com/design/warm-cta/): 暖色（テラコッタ・赤・砂色）でまとめた、人肌の温度を持つ大判CTAセクション。飲食・ライフスタイル・小売など、信頼より親しみで選ばれるブランドのコンバージョン直前に効く設計。 - [Y2Kクロームベベルとオーブの料金プラン](https://vibe.itlibra.com/design/y2k-pricing/): 2000年代初頭の Frutiger Aero / Mac OS X Aqua / 透明クロームを再構築した Y2K 風料金プラン。鏡面ベベル・色付き光沢オーブ・虹色グラデで「ソフトウェアパッケージ」感を演出する。