Softonic

SVGディバイダージェネレーター

ステップ 1 / 3
次へ

ランディングページでは、色のついたセクション間にもう硬い水平の継ぎ目はほとんどありません。曲線の波、斜めの傾斜、三角形の列を通して互いに溶け合います。これらはいずれも単純なSVG形状です。ページ幅に合わせたviewBox、次のセクションの背景色で塗りつぶしたポリゴンまたはパス、そして出ていくセクションの下端に固定された形です。このジェネレーターは、必要な幅、高さ、色、上下反転を指定して、その形を5つのスタイル（波、曲線、傾斜、三角形、階段）で組み立てます。

セクションディバイダーを作る方法

  1. 1

    スタイルを選ぶ

    波（S字曲線）、曲線（単一アーチ）、傾斜（斜め）、三角形（ジグザグ）、階段（段状）。

  2. 2

    幅と高さを設定

    幅＝ページ幅（1200〜1920）。高さ＝ディバイダーの高さ（通常50〜200 px）。

  3. 3

    塗りつぶしを選ぶ

    ディバイダーが継ぎ目なく溶け込むよう、次のセクションの背景色を選びます。

  4. 4

    上下反転

    下向きではなく上向きにしたい場合は、flipYを切り替えて形を反転します。

  5. 5

    SVGをコピー

    出ていくセクションの下端、または入ってくるセクションの上端に貼ります。`preserveAspectRatio="none"`（既に含まれています）を使うと、形がビューポートに合わせて伸びます。

5つのスタイルと使いどころ

スタイル 雰囲気 相性が良い場面
波 柔らかく親しみやすい ヒーロー → お客様の声、パステルカラー
曲線 洗練されて上品 機能グリッド → CTA、ミニマルなデザイン
傾斜 モダンで大胆 暗いヒーロー → 明るいコンテンツ、高コントラストのテーマ
三角形 シャープで技術的 開発者向けツール、SaaSダッシュボード
階段 構造的でレトロ 料金表、エディトリアルなレイアウト

マークアップにディバイダーを入れる

セクション下端への典型的な配置。

<section class="hero">
  <!-- hero content -->
  <div class="divider" aria-hidden="true">
    <!-- paste the SVG here -->
  </div>
</section>
<section class="next">…</section>

.hero { position: relative; }
.divider {
  position: absolute; bottom: 0; left: 0; width: 100%; line-height: 0;
}
.divider svg { width: 100%; height: auto; display: block; }

なぜpreserveAspectRatio="none"なのか

既定では、SVGは均一にスケールします。ビューポート全体にまたがるディバイダーでは、形を水平方向に伸ばしたいはずです。ページ中央の小さな波ではなく、端から端までの1つの波です。preserveAspectRatio="none"はレンダラーにアスペクト比を自由にゆがめるよう伝えます。これはまさにディバイダーが必要とするものです。

アクセシビリティとSEO

  • ラッパーにaria-hidden="true"を付け、スクリーンリーダーが装飾的な形を飛ばすようにします。
  • SVGは数キロバイト以内に抑えます。大きなインラインSVGはDOM解析を遅らせます。ここでの出力は1 KBを十分に下回ります。
  • ディバイダーにラスター画像は避けてください。超ワイドモニターやRetinaディスプレイでピクセルが目立ちます。

よくある質問

厳密には不要です。SVGのwidth属性は本来のサイズを設定しますが、preserveAspectRatio="none"とCSSのwidth: 100%があれば、形はどんなコンテナも埋めます。幅を1200のような切りのよい数にすると、パス内の数値が読みやすくなります。

たいていはSVG要素の既定のインラインベースラインです。SVGにdisplay: block（またはvertical-align: bottom）を加えると隙間が消えます。

はい。色と不透明度の異なるディバイダーを2〜3個生成して重ねます。margin-topやCSSのtransformで数ピクセルずつずらすと、パララックスの雰囲気が出ます。

生成されるSVGは静的です。波をアニメーションさせたい場合は、ラッパーにCSSのtransform: translateX()キーフレームを当てるか、2枚を並べてスライドさせます。

いいえ。何も保存されません。SVGは毎回、現在のフォームの値から新たにレンダリングされます。

関連ツール

マテリアルデザイン カラーピッカー

Material Designのカラーパレットを閲覧できます。任意の色調（50からA700）を1タップでHEX、RGB、HSL形式でコピーできます。

方眼紙ジェネレーター

印刷できる方眼紙をオンラインで作成：方眼またはドット罫を選び、間隔をmmで設定し、A4かLetterと好きな線の色を指定して、印刷または鮮明なSVGでダウンロードできます。

旗作成ツール

6種類のレイアウト、色、文字、シンボルで、シンプルな3:2のカスタム旗をブラウザ内でデザインします。SVGまたはPNGをダウンロードするか、ブラウザの印刷ダイアログを開けます。

画像アップスケーラー

AI超解像または従来の補間処理で、低解像度画像を2×、3×、4×に拡大しながら重要なディテールを保ちます。

罫線入り用紙ジェネレーター

印刷できる罫線入り用紙を無料で作成。カレッジ罫、広め罫、狭め罫を選び、行間をmmで設定し、用紙サイズとマージン線を決めて、印刷またはSVGでダウンロードできます。

画像ピクセルレーター

調整可能なブロックサイズで画像全体または選択した領域をピクセル化し、顔、ナンバープレート、またはレトロな8ビットアートの遮蔽に使用できます。

このツールは他の言語でも利用できます