Webレイアウトパターン
+ Claude指示テンプレート集

counter preloaderで、画面中央に0%から100%までカウントアップするローダー。等幅フォント、黒背景に白文字。100%到達後にfade-outして本編表示。

progress bar preloaderで、画面中央に細い線(高さ2px)を配置、左から右に伸びるアニメーション。上に「LOADING」テキスト。完了後にバー全体がslide-upしてfade-out。

spinner preloaderで、画面中央に36pxの回転リング(border-top色だけ濃く)。CSS animationで1秒間に1回転。背景は白、リングはダークグレー。

logo preloaderで、中央にブランドロゴSVGを配置。透明度と少しのscaleで2秒のpulseアニメーションを繰り返し。ロード完了でfade-out。

curtain reveal preloaderで、最初は画面全体が黒オーバーレイ+中央にスピナー。ロード完了後、オーバーレイがscaleY(0)で上方向にwipeして本編表示。easingはcubic-bezier(0.7, 0, 0.3, 1)。

bouncing dots loaderで、3つの円を横並び、順番にスケールが0.6→1にバウンス。各ドットに0.15s ずつdelay、1.2sのループ。

multilingual greeting preloaderで、Hello/안녕/こんにちは/Bonjour/Hola/你好を順次切替。各単語は下からslide-up&fade-in→上にslide-out&fade-out。0.7sずつdelay、最後の単語の後にカーテンreveal。

SVG stroke-draw loaderで、ロゴSVGの各pathにstroke-dasharrayを設定して順番に描かれるアニメーション。描き終わったらfade-outで本編へ。GSAPかCSS animationで実装。

marquee + counter preloaderで、上下にテキストを反対方向にinfinite scroll、中央にカウンター(0→100%)を配置。フォントは等幅、黒背景に白文字。完了でカーテンreveal。

grid layout preloaderで、画面四隅に小さくメタ情報(© 2026, STUDIO, LOADING, タイムスタンプ等)、中央に大きなカウンター(0→100%)、下端に細い進行バー。黒背景白文字、等幅フォント。完了でカーテンreveal。

4-block pulse loaderで、2x2のグリッドの各ブロックが時計回りに順次pulse(scale 0.85→1, opacity 0.2→1)。各ブロックに0.2sのstagger。

equalizer bars loaderで、5本の縦バーが順次height変化(8px→36px)。各バーに0.1sずつstagger、1秒ループ。Spotifyの再生中インジケーター風。

rotating triangle loaderで、CSS borderで作成した三角形が2秒で1回転。回転中にopacityが0.3→1→0.3で脈動。

glitch text preloaderで、「LOADING」テキストに::beforeと::afterで赤と青のレイヤーを重ね、X方向にずらすclip-pathアニメーション。本体は微振動。

morphing shape loaderで、border-radiusを四角→円→不定形と変化させながら回転。3秒ループ、ease-in-out。

rising pixel columnsで、5本の縦柱がheightを0%→70%→0%にアニメーション。各柱に0.15sずつstagger、ease-in-outで滑らかに。

image crossfade preloaderで、3-5枚のサイト主要画像をクロスフェードで切替。左下に「PRELOADING」、右下に「01/05」のカウンター。完了で最後の画像が拡大してそのままヒーローに繋がる。

typo slide-up preloaderで、ブランド名の各文字をで分割、overflow: hiddenの親内で下から60msずつstaggerでslide-up。完了で全文字が一気にslide-upして消える。

sticky scroll split layoutで作って。左に画像をstickyで固定、右側のテキストをスクロールすると左の画像が切り替わる。Apple AirPods Proの製品ページみたいな雰囲気で。

9:16縦長カードのresponsive card gridで。PC4列、タブレット2列、モバイル1列。ホバーで画像ズーム+矢印スライドのインタラクション。

hero sectionを画面いっぱいに、大見出し+サブテキスト+2つのCTAボタン。下に3つのfeatureブロックを並べて。Stripeみたいな洗練された雰囲気。

bento grid layoutで6つのタイルを不揃いサイズで配置。1つは2x2の大タイル、他は1x1や1x2のmix。Linearの公式サイトみたいな雰囲気で、PCは3列、モバイルは1列に。

collapsible sidebar layoutで。左に240pxの折りたたみ可能なナビ、右にメインコンテンツ。Linearの管理画面みたいなダークテーマで。

split screen layoutで画面を左右50:50に分割。左は黒背景に白テキスト、右は白背景に黒テキストで対比を効かせて。ホバーで片側が60:40に拡張。

single column centered layoutで、最大幅680pxで中央寄せ。Substackみたいな読み物向けの構造で、本文はserif、見出しはsans-serifで対比をつけて。

editorial magazine layoutで、メイン記事を左に大きく、右サイドに3つの関連記事を縦並び。NYTみたいなserifフォントで雑誌感を出して。

sticky header layoutで、ナビが上部に固定。スクロール開始後にbackdrop-filter: blur(8px)と微細なshadowが付与される。トランジションは300ms ease-out。

floating action buttonを右下に配置。position: fixedで常駐、ホバーで微パルスアニメーション、box-shadowで浮遊感。クリックでチャットがslide-up。

footer reveal layoutで、メインコンテンツ(position: relative, z-index: 2)の下にfixed positionでフッターを配置。スクロール最下部でメインがフッターを覆っている状態から離れる演出に。

two-tone color block layoutで、画面上半分を黒、下半分をクリーム色に塗り分け。境界部分にコンテンツが両方にまたがるように配置。

three-column layoutで、サービスの3つの特徴を等幅で並べる。各カラムにアイコン、見出し、本文の順で配置。display: grid; grid-template-columns: repeat(3, 1fr)で実装。

zigzag layoutで、機能を3-4個紹介する。1個目は左に画像/右にテキスト、2個目は逆、と交互に配置。flex-direction: row-reverseで奇数行を反転。

F-pattern reading layoutで、見出しを左上に配置、本文は左寄せ、サブヘッダーで区切りを入れる。視線がF字に流れる読みやすい記事レイアウトに。

holy grail layoutで、ヘッダー、左サイドバー(ナビ)、メインコンテンツ、右サイドバー(補足情報)、フッターの5領域を配置。CSS Grid template-areasで実装。

tabbed layoutで、3-4個のタブを上に配置、選択したタブのコンテンツだけ下に表示。アクティブタブは下線&太字で強調、切替時は軽いfade-in。

dashboard layoutで、左にサイドナビ、上にトップバー、メインエリアにKPIカード3-4個を上段、グラフを下段。CSS Gridで領域分割、Linear/Stripeダッシュボード風で。

asymmetric hero layoutで、左60%にテキスト(見出し+説明+CTA)、右40%にビジュアル/プロダクト画像。grid-template-columns: 1.5fr 1fr で非対称分割。

centered container layoutで、画面中央にmax-width 480pxのカードを配置。flexbox justify-content/align-items: center、min-height: 100vhで縦も中央寄せ。

horizontal card stack layoutで、左にサムネ画像(80x80px)、右にタイトル+本文+メタ情報の横長カードを縦並び。flexで横並び、間に12pxギャップ。記事一覧UIに。

centered hero sectionで、画面中央に大見出し+サブテキスト+CTAボタンを縦に配置。要素は順番にfade-in+slide-upでstagger。Vercelみたいなクリーンな雰囲気で。

side-by-side hero layoutで、左50%にテキスト+CTA、右50%に製品スクリーンショット。左は右からslide-in、右は左からslide-inで同時にアニメーション。

full-bleed background heroで、100vh画像を背景、Ken Burns effectでゆっくりズーム。左下にserif大見出し+サブを白で重ね、上から黒のグラデーションで可読性確保。

video background heroで、autoplay/loop/muteのループ動画を全画面に。中央に白文字でテキスト重ね、右上にミュート切替ボタン。動画上に20%の暗いオーバーレイ。

typography-driven heroで、画面いっぱいに巨大なserif見出しを配置(font-size: clamp(80px, 12vw, 200px))。一部の単語をitalicで強調、レター単位で順にfade-in+scale-up。

3D object heroで、中央にThree.jsで回転する図形(球/立方体/トーラス)を配置。マウス位置に追従してパララックス、左下にテキストを重ねる。

letter-by-letter reveal heroで、見出しを文字単位で分割、下から80msずつstaggerでslide-up+fade-in。GSAP SplitTextまたはCSS animation-delayで実装。

split reveal heroで、上下のパネルが画面外から中央に閉じるように現れ、その後テキストがfade-in。ロード時に1回だけ実行。easingはcubic-bezier(0.7, 0, 0.3, 1)で重厚に。

mega menu navigationで、ホバーで全幅のドロップダウンパネルが降下、3〜4列のカテゴリ分類。transform-origin: topからscaleY展開。Apple.comみたいな雰囲気で。

full-screen overlay menuで、ハンバーガークリックで画面全体に黒背景メニューがslide-down。メニュー項目は大きなserifで縦並び、ホバーで微slide-right。

macOS dock-style navigationで、画面下中央に固定。アイコン4-6個、backdrop-filterでガラス感、ホバーで該当アイコンと隣接アイコンがscale拡大(magnify effect)。

breadcrumb navigationを記事タイトルの上に配置。区切りはslashまたはchevron icon、最後の項目だけ太字で現在地を示す。font-size 12px、color: muted。

horizontal scroll cardsで、横並びカードをスムーズスクロール。Netflixみたいに10枚のカードが横にスクロール、ホバーでズーム拡大して詳細表示。

masonry layoutで画像ギャラリー。高さがバラバラのカードをCSS Gridでmasonry状に積む。Pinterest風で、ホバーで画像が暗くなりタイトルが浮き上がる。

parallax scroll effectで奥行き感を演出。背景画像、中景、前景の3レイヤーでスクロール速度を変える。映画のオープニングみたいな雰囲気で。

full screen slider with auto-advanceで、5秒ごとに切り替わる100vh画像スライダー。下にプログレスバー付きインジケーター。各スライドにはセリフ大見出しを左下にレイヤー。

3D coverflow carouselで、中央カードを大きく両側を斜めに傾けて表示。CSS perspectiveで奥行き感、矢印キーで切り替え可能に。

infinite marqueeでブランドキーワードを横に流す。2行を反対方向にスクロール、ホバーで一時停止。大きなserif italicで装飾的に。

scroll-triggered text revealで、スクロールに合わせて1文字ずつテキストが下から現れる。Intersection Observerでトリガー、staggerで時差つけて。

asymmetric broken grid layoutで、要素を意図的にずらして配置、一部を重ねる(overlap)。Pentagramの作品集みたいなエディトリアル感のあるレイアウトで。

custom cursor with followerで、デフォルトカーソルを非表示、代わりに小さなドットと遅延追従する円を表示。ホバー要素で円が拡大、テキスト上で縦線に変化。

magnetic button effectで、CTAボタンがカーソル位置に応じて最大8pxまで引き寄せられる動き。マウス離脱でease-outで戻る。GSAPまたはJSでmousemove計算。

3D tilt card effectで、カードにperspective(1000px)、ホバー時のマウス位置に応じてrotateX/rotateYを最大15deg。VanillaTilt.js使用、シャイン効果付き。

diagonal section divider layoutで、セクション境界をclip-path: polygonで斜めにカット(角度6度)。隣接セクションは異なる背景色で対比。

sticky stacking cards layoutで、複数カードがposition: stickyでtop固定、スクロールで上のカードに次のカードが重なって積み上がる。各カードは少しずつscale縮小してdepth感。

floating label inputで、placeholderの代わりにラベルが入力欄内にあり、focus時に上にslide-upしてsmaller化。CSSの:focusと:not(:placeholder-shown)で制御。

Z-pattern layoutで作って。視線がZ字に流れるよう、左上ロゴ→右上CTA→中央画像→左下情報→右下メインCTAの順に配置。

modal dialogで作って。背景を50%透明の黒でオーバーレイ、中央にcardをポップ。Escキーと背景クリックで閉じる。フェードイン+少しスケールアップのアニメーション。

animated tabsで、アクティブなタブの下にスライドするインジケーター。タブ切替時にコンテンツがフェードイン。3タブで「概要」「詳細」「レビュー」。

FAQ accordionで5項目。クリックで滑らかに高さアニメーション展開、+アイコンが回転して×になる。同時に1項目だけ開く動作で。

vertical timeline layoutで、左に縦線、各イベントに丸いマーカー、右側に年月+説明テキスト。スクロール連動で各項目がfade-in。

horizontal stepperで、3-5ステップを番号付き円とラインで繋ぐ。完了stepはチェックアイコンに変化、現在stepはハイライト、未完stepはmuted color。

3-tier pricing tableで、中央プランを「Most Popular」バッジ+border強調+少しscale拡大。月額/年額切替トグル、機能リストはチェックアイコン付き、各列の最後にCTAボタン。

testimonial wall layoutで、masonry形式でカードを敷き詰める。各カードに大きな引用符、本文、下部に顔写真+名前+役職。スクロールでstaggered fade-in。

animated stats counterで3-4個の数字を横並び、ビューポートに入った瞬間にIntersection Observerで0からターゲット値までカウントアップ(2秒、ease-out)。下にラベル。

logo cloud sectionで、4-6個のクライアントロゴを横並び、デフォルトはgrayscale + opacity 60%、ホバーでフルカラー&opacity 100%。「Trusted by」見出し付き。

feature icon gridで6つの特徴を3x2で配置。各セルにLucideアイコン+小見出し+2行説明。アイコンサイズ24px、上下にspacing。

infinite scroll feedで、Intersection Observerで最下部のsentinel要素を監視、視界に入ったら次のページを取得して追加。loading時は中央にspinner表示。

drawer panelを右からslide-in、半透明オーバーレイで背景を覆う。閉じるボタン+Escキー+オーバーレイクリックで閉じる。transitionは300ms ease-out。

toast notificationで、画面右下/下中央にslide-up+fade-in、4秒後に自動でslide-down消去。アイコン+メッセージ+optional close button。Sonner.js風で。

skeleton screen loaderで、コンテンツ要素の形(circle, rectangle)をグレーで表示、左から右にshimmerグラデーションが流れるアニメーション。1.5sのloop。

dark mode toggleで、CSS変数で全色定義、data-theme属性で切替。OSのprefers-color-scheme検出+ローカル保存。トグルアイコンはsun↔moonでslide切替。

scroll-linked video scrubbingで、video.currentTimeをスクロール位置に同期。GSAP ScrollTriggerで実装、video要素はpreload="auto"&muted&playsInline必須。