Bento Grid Layout

プレビュー

NEW FEATURE

Create without limits

Our new AI-powered creation engine gives you the tools to build faster and smarter than ever before.

Lightning Fast

Optimized for speed. Experience sub-second load times.

Analytics

Track your progress with real-time insights.

Secure Environment

Enterprise-grade security built directly into the core of your application.

Jane Doe

Lead Designer

ユースケースと特徴

Bento（弁当箱）グリッドレイアウトは、大小様々なコンポーネントをパズルのように綺麗に敷き詰めたデザインパターンです。

機能紹介（Features）: ランディングページでプロダクトの複数の特徴を視覚的にアピールする際に最適です。
ダッシュボード: 異なるサイズのウィジェットを整理して配置することで、情報の優先順位を明確にできます。
ポートフォリオ: プロジェクト、スキル、プロフィールなどを魅力的に一覧表示するのに役立ちます。

特徴として、各カードが独立した意味を持ちながらも、全体として一つのまとまり（弁当箱）を感じさせるため、情報の密度が高くてもユーザーに圧迫感を与えません。

デザインとUXのポイント

視線の誘導: 2x2のような大きなカードを配置することで、一番伝えたいメインメッセージにユーザーの視線を強く引きつけることができます。
ホバーエフェクト: 各カードに微小なスケールアップやシャドウの変化、内部要素のアニメーションを取り入れることで、インタラクティブでモダンな印象を与えます。
丸みのある角（Radius）: 角丸（rounded-[2rem]など）を大きめに設定することで、柔らかく親しみやすい「Bento」らしさが強調されます。
レスポンシブデザイン: モバイル（スマートフォン）では1カラムにフォールバックし、タブレット以上で複雑なグリッド構成へと変化するように構築されています。

カスタマイズ方法

グリッドサイズの変更: 親コンテナの md:grid-cols-4 や md:grid-rows-3 を変更し、子要素の col-span や row-span を調整することで、自由なレイアウトを作成できます。
カラーとグラデーション: 各カードの背景色（例: bg-gradient-to-br from-indigo-500 to-purple-600）をブランドカラーに合わせて変更してください。
ダークモード対応: dark:bg-slate-800 や dark:text-white を使用して、ダークモード時の視認性を最適化しています。プロジェクトのテーマに合わせて調整可能です。

実装コード

<div class="grid grid-cols-1 md:grid-cols-4 grid-rows-none md:grid-rows-3 gap-4 md:gap-6 p-4 max-w-5xl mx-auto h-auto md:h-[600px] w-full">
<!-- Large Hero Card (2x2) -->
<div class="col-span-1 md:col-span-2 row-span-1 md:row-span-2 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-[2rem] p-8 text-white shadow-lg shadow-indigo-200/50 dark:shadow-none flex flex-col justify-between overflow-hidden relative group transition-transform duration-300 hover:scale-[1.02]">
  <div class="relative z-10">
    <span class="inline-block py-1 px-3 rounded-full bg-white/20 backdrop-blur-md text-xs font-semibold tracking-wider mb-4 border border-white/10 text-white">NEW FEATURE</span>
    <h3 class="text-3xl md:text-4xl font-bold mb-3 leading-tight">Create without limits</h3>
    <p class="text-indigo-100 text-base md:text-lg max-w-md">Our new AI-powered creation engine gives you the tools to build faster and smarter than ever before.</p>
  </div>
  <div class="mt-8 relative z-10">
    <button class="bg-white text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700 transition-colors px-6 py-3 rounded-full font-semibold shadow-md flex items-center gap-2 w-fit">
      Get Started
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
    </button>
  </div>
  <!-- Decorative elements -->
  <div class="absolute top-0 right-0 -mr-8 -mt-8 w-64 h-64 bg-gradient-to-br from-purple-400/40 to-transparent rounded-full blur-3xl pointer-events-none"></div>
  <div class="absolute -bottom-16 -right-16 w-80 h-80 bg-white/10 rounded-full blur-3xl group-hover:bg-white/20 transition-all duration-700 pointer-events-none"></div>
</div>

<!-- Top Right Card (1x1) -->
<div class="col-span-1 bg-white dark:bg-slate-800/80 backdrop-blur-xl rounded-[2rem] p-6 shadow-sm border border-slate-100 dark:border-slate-700/50 flex flex-col justify-between transition-all hover:shadow-md hover:-translate-y-1 duration-300">
  <div class="w-12 h-12 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-2xl flex items-center justify-center mb-4">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
  </div>
  <div>
    <h4 class="text-xl font-bold text-slate-800 dark:text-white mb-2">Lightning Fast</h4>
    <p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed">Optimized for speed. Experience sub-second load times.</p>
  </div>
</div>

<!-- Tall Card (1x2) -->
<div class="col-span-1 md:row-span-2 bg-gradient-to-b from-rose-400 to-orange-500 rounded-[2rem] p-6 shadow-lg shadow-rose-200/50 dark:shadow-none text-white flex flex-col justify-between overflow-hidden relative group transition-transform duration-300 hover:scale-[1.02]">
  <div class="relative z-10">
     <div class="w-10 h-10 bg-white/20 backdrop-blur-md rounded-xl flex items-center justify-center mb-4 border border-white/10">
       <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
     </div>
     <h4 class="text-xl font-bold mb-2">Analytics</h4>
     <p class="text-rose-100 text-sm">Track your progress with real-time insights.</p>
  </div>
  <div class="mt-8 h-32 w-full flex items-end gap-2 pt-4 relative z-10">
    <div class="w-full bg-white/20 rounded-t-lg h-[30%] group-hover:h-[40%] transition-all duration-500 ease-out"></div>
    <div class="w-full bg-white/30 rounded-t-lg h-[50%] group-hover:h-[70%] transition-all duration-500 ease-out delay-75"></div>
    <div class="w-full bg-white/50 rounded-t-lg h-[70%] group-hover:h-[90%] transition-all duration-500 ease-out delay-100"></div>
    <div class="w-full bg-white/80 rounded-t-lg h-[90%] group-hover:h-[100%] transition-all duration-500 ease-out delay-150"></div>
  </div>
  <!-- Decorative radial gradient -->
  <div class="absolute inset-0 bg-gradient-to-t from-orange-600/50 to-transparent pointer-events-none"></div>
</div>

<!-- Wide Card (2x1) -->
<div class="col-span-1 md:col-span-2 bg-slate-900 rounded-[2rem] p-6 sm:p-8 shadow-xl text-white flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6 overflow-hidden relative group transition-transform duration-300 hover:scale-[1.02]">
  <!-- Dot pattern background -->
  <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMS41IiBjeT0iMS41IiByPSIxLjUiIGZpbGw9IiNmZmZmZmYwZCIvPjwvc3ZnPg==')] opacity-50 group-hover:opacity-70 transition-opacity duration-500"></div>
  
  <div class="relative z-10 flex-1">
    <div class="flex items-center gap-3 mb-2">
      <span class="flex h-3 w-3 relative">
        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
        <span class="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"></span>
      </span>
      <h4 class="text-xl font-bold">Secure Environment</h4>
    </div>
    <p class="text-slate-400 text-sm max-w-sm">Enterprise-grade security built directly into the core of your application.</p>
  </div>
  <div class="relative z-10 w-16 h-16 bg-slate-800/80 backdrop-blur-md rounded-2xl border border-slate-700/50 flex items-center justify-center flex-shrink-0 group-hover:border-emerald-500/30 transition-colors duration-300">
    <svg class="w-8 h-8 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
  </div>
  
  <!-- Glow effect -->
  <div class="absolute top-1/2 right-1/4 -translate-y-1/2 w-32 h-32 bg-emerald-500/10 rounded-full blur-3xl pointer-events-none"></div>
</div>

<!-- Bottom Left Card (1x1) -->
<div class="col-span-1 bg-white dark:bg-slate-800/80 backdrop-blur-xl rounded-[2rem] p-6 shadow-sm border border-slate-100 dark:border-slate-700/50 flex flex-col justify-center items-center text-center transition-all hover:shadow-md hover:-translate-y-1 duration-300 group cursor-pointer">
  <div class="relative w-16 h-16 mb-4">
    <div class="absolute inset-0 bg-gradient-to-tr from-pink-500 to-violet-500 rounded-full animate-spin-slow opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-sm"></div>
    <div class="absolute inset-0 bg-gradient-to-tr from-pink-500 to-violet-500 rounded-full p-[2px] group-hover:scale-105 transition-transform duration-300">
      <div class="w-full h-full bg-white dark:bg-slate-800 rounded-full p-1">
        <img src="https://i.pravatar.cc/150?u=a04258114e29026702d" alt="Avatar" class="w-full h-full rounded-full object-cover" />
      </div>
    </div>
    <div class="absolute -bottom-1 -right-1 w-5 h-5 bg-green-500 border-2 border-white dark:border-slate-800 rounded-full z-10"></div>
  </div>
  <h4 class="text-lg font-bold text-slate-800 dark:text-white mb-0.5">Jane Doe</h4>
  <p class="text-slate-500 dark:text-slate-400 text-xs font-medium">Lead Designer</p>
</div>
</div>

ブラウザ対応状況

CSS GridとTailwind CSSを使用しており、モダンブラウザで幅広くサポートされています。

Chrome: 最新バージョン
Firefox: 最新バージョン
Safari: 最新バージョン
Edge: 最新バージョン
iOS Safari: 最新バージョン
Android Chrome: 最新バージョン