【コピペOK】おしゃれな検索ボックスデザイン10選【HTML・CSS】

おしゃれな検索ボックスデザイン10選 検索ボックス

サイト内の情報を探しやすくするために欠かせない、検索ボックス。

検索しやすいことはもちろん、サイトの雰囲気に合ったデザインを選ぶことで、ページ全体にも自然になじみます。

この記事では、HTMLとCSSをコピーして使える、おしゃれな検索ボックスデザインを10種類紹介します。

シンプルな枠線タイプや丸みのあるデザイン、アイコン付き、影を付けたデザインなどをまとめました。

色やサイズを変更しながら、サイトに合った検索ボックスを取り入れてみてください。

検索機能について

このページで紹介するのは、検索ボックスの見た目を整えるHTML・CSSです。WordPressでは、掲載しているコードを貼り付けることでサイト内検索として使用できます。
WordPress以外で使用する場合は、検索機能を別途用意する必要があります。

シンプルで使いやすい検索ボックスデザイン

まずは、さまざまなサイトになじみやすい、シンプルな検索ボックスデザインを紹介します。
枠線や丸み、アイコンの位置などが異なる6種類から、サイトの雰囲気に合うものを選んでみてください。

DESIGN 01

ベーシックな検索ボックス


入力欄と検索ボタンを横に並べた、シンプルで使いやすい検索ボックスです。
装飾が控えめなため、ブログやコーポレートサイトなど、さまざまなページに取り入れやすいデザインです。

<form class="search-design-01" action="/" method="get">

  <input
    type="search"
    name="s"
    placeholder="キーワードを入力"
    aria-label="サイト内検索"
  >

  <button type="submit" aria-label="検索する">

    <svg
      viewBox="0 0 24 24"
      aria-hidden="true"
    >

      <circle
        cx="10.5"
        cy="10.5"
        r="6.5"
      ></circle>

      <line
        x1="15.5"
        y1="15.5"
        x2="21"
        y2="21"
      ></line>

    </svg>

  </button>

</form>
色の変更： CSS内の「#c98792」は検索ボタン、「#b9c3d1」は枠線の色です。お好みのカラーコードへ変更してください。
入力案内の変更： HTML内の「キーワードを入力」を、表示したい文字へ書き換えてください。
検索先について： WordPressのサイト内検索では、そのまま使用できます。WordPress以外で使う場合は、サイトの検索機能に合わせてHTML内の「action」と「name」を変更してください。
DESIGN 02

丸みのある検索ボックス


丸みのある入力欄に、円形の検索ボタンを組み合わせたデザインです。
やわらかく親しみやすい印象があり、ブログやサービスサイトなど、幅広いページに取り入れやすくなっています。

<form class="search-design-02" action="/" method="get">

  <input
    type="search"
    name="s"
    placeholder="キーワードを入力"
    aria-label="サイト内検索"
  >

  <button type="submit" aria-label="検索する">

    <svg
      viewBox="0 0 24 24"
      aria-hidden="true"
    >

      <circle
        cx="10.5"
        cy="10.5"
        r="6.5"
      ></circle>

      <line
        x1="15.5"
        y1="15.5"
        x2="21"
        y2="21"
      ></line>

    </svg>

  </button>

</form>
色の変更： CSS内の「#c98792」は検索ボタン、「#b9c3d1」は枠線の色です。お好みのカラーコードへ変更してください。
入力案内の変更： HTML内の「キーワードを入力」を、表示したい文字へ書き換えてください。
検索先について： WordPressのサイト内検索では、そのまま使用できます。WordPress以外で使う場合は、サイトの検索機能に合わせてHTML内の「action」と「name」を変更してください。
DESIGN 03

下線だけの検索ボックス


枠線を使わず、入力欄の下に細い線だけを入れた検索ボックスです。
装飾が控えめですっきりしているため、シンプルなサイトや、ページ内で検索ボックスを目立たせすぎたくない場合に使いやすいデザインです。

<form class="search-design-03" action="/" method="get">

  <input
    type="search"
    name="s"
    placeholder="キーワードを入力"
    aria-label="サイト内検索"
  >

  <button type="submit" aria-label="検索する">

    <svg
      viewBox="0 0 24 24"
      aria-hidden="true"
    >

      <circle
        cx="10.5"
        cy="10.5"
        r="6.5"
      ></circle>

      <line
        x1="15.5"
        y1="15.5"
        x2="21"
        y2="21"
      ></line>

    </svg>

  </button>

</form>
色の変更： CSS内の「#c98792」を、お好みのカラーコードへ変更してください。下線と検索アイコンの色が変わります。
入力案内の変更： HTML内の「キーワードを入力」を、表示したい文字へ書き換えてください。
検索先について： WordPressのサイト内検索では、そのまま使用できます。WordPress以外で使う場合は、サイトの検索機能に合わせてHTML内の「action」と「name」を変更してください。
DESIGN 04

背景色を付けた検索ボックス


入力欄全体に淡い背景色を付けた、やわらかな印象の検索ボックスです。
枠線を使わず背景色で範囲を示しているため、ページになじみやすく、やさしい雰囲気のブログやWebサイトに取り入れやすいデザインです。

<form class="search-design-04" action="/" method="get">

  <input
    type="search"
    name="s"
    placeholder="キーワードを入力"
    aria-label="サイト内検索"
  >

  <button type="submit" aria-label="検索する">

    <svg
      viewBox="0 0 24 24"
      aria-hidden="true"
    >

      <circle
        cx="10.5"
        cy="10.5"
        r="6.5"
      ></circle>

      <line
        x1="15.5"
        y1="15.5"
        x2="21"
        y2="21"
      ></line>

    </svg>

  </button>

</form>
色の変更： CSS内の「#f8edef」は背景、「#c98792」は検索アイコンの色です。お好みのカラーコードへ変更してください。
入力案内の変更： HTML内の「キーワードを入力」を、表示したい文字へ書き換えてください。
検索先について： WordPressのサイト内検索では、そのまま使用できます。WordPress以外で使う場合は、サイトの検索機能に合わせてHTML内の「action」と「name」を変更してください。
DESIGN 05

左側にアイコンを置いた検索ボックス


検索アイコンを入力欄の左側に配置した、分かりやすく使いやすい検索ボックスです。
入力前にアイコンが目に入るため、検索欄であることが伝わりやすく、ヘッダーやサイドバーなどにも取り入れやすいデザインです。

<form class="search-design-05" action="/" method="get">

  <button type="submit" aria-label="検索する">

    <svg
      viewBox="0 0 24 24"
      aria-hidden="true"
    >

      <circle
        cx="10.5"
        cy="10.5"
        r="6.5"
      ></circle>

      <line
        x1="15.5"
        y1="15.5"
        x2="21"
        y2="21"
      ></line>

    </svg>

  </button>

  <input
    type="search"
    name="s"
    placeholder="キーワードを入力"
    aria-label="サイト内検索"
  >

</form>
色の変更： CSS内の「#c98792」は検索アイコン、「#b9c3d1」は枠線の色です。お好みのカラーコードへ変更してください。
入力案内の変更： HTML内の「キーワードを入力」を、表示したい文字へ書き換えてください。
検索先について： WordPressのサイト内検索では、そのまま使用できます。WordPress以外で使う場合は、サイトの検索機能に合わせてHTML内の「action」と「name」を変更してください。
DESIGN 06

文字ボタン付き検索ボックス


検索アイコンの代わりに、「検索」と書かれたボタンを配置したデザインです。
ボタンの役割が文字で伝わるため、アイコンだけでは操作が分かりにくい場合や、使いやすさを重視したいサイトに適しています。

<form class="search-design-06" action="/" method="get">

  <input
    type="search"
    name="s"
    placeholder="キーワードを入力"
    aria-label="サイト内検索"
  >

  <button type="submit">
    検索
  </button>

</form>
色の変更： CSS内の「#c98792」は検索ボタン、「#b9c3d1」は枠線の色です。お好みのカラーコードへ変更してください。
文字の変更： HTML内の「キーワードを入力」と「検索」を、表示したい文字へ書き換えてください。
検索先について： WordPressのサイト内検索では、そのまま使用できます。WordPress以外で使う場合は、サイトの検索機能に合わせてHTML内の「action」と「name」を変更してください。

装飾で変化を付けた検索ボックスデザイン

背景色や影、ボタンの配置などに変化を付けた検索ボックスを紹介します。
シンプルな形をベースにしながら、ページのアクセントとしても使いやすいデザインをまとめました。

DESIGN 07

2色を組み合わせた検索ボックス


入力欄と検索ボタンに異なる背景色を使った、2色の検索ボックスです。
色の組み合わせによって検索ボタンの位置が分かりやすく、サイトの配色に合わせて雰囲気を変えられます。

<form class="search-design-07" action="/" method="get">

  <input
    type="search"
    name="s"
    placeholder="キーワードを入力"
    aria-label="サイト内検索"
  >

  <button type="submit" aria-label="検索する">

    <svg
      viewBox="0 0 24 24"
      aria-hidden="true"
    >

      <circle
        cx="10.5"
        cy="10.5"
        r="6.5"
      ></circle>

      <line
        x1="15.5"
        y1="15.5"
        x2="21"
        y2="21"
      ></line>

    </svg>

  </button>

</form>
色の変更： CSS内の「#e9f5fb」は入力欄、「#c98792」は検索ボタンの背景色です。お好みのカラーコードへ変更してください。
入力案内の変更： HTML内の「キーワードを入力」を、表示したい文字へ書き換えてください。
検索先について： WordPressのサイト内検索では、そのまま使用できます。WordPress以外で使う場合は、サイトの検索機能に合わせてHTML内の「action」と「name」を変更してください。
DESIGN 08

検索ボタンを分けた検索ボックス


入力欄と検索ボタンの間に余白を設け、それぞれを独立させた検索ボックスです。
ボタンの位置がはっきり分かるため操作しやすく、余白のあるすっきりとしたレイアウトに合わせやすいデザインです。

<form class="search-design-08" action="/" method="get">

  <input
    type="search"
    name="s"
    placeholder="キーワードを入力"
    aria-label="サイト内検索"
  >

  <button type="submit" aria-label="検索する">

    <svg
      viewBox="0 0 24 24"
      aria-hidden="true"
    >

      <circle
        cx="10.5"
        cy="10.5"
        r="6.5"
      ></circle>

      <line
        x1="15.5"
        y1="15.5"
        x2="21"
        y2="21"
      ></line>

    </svg>

  </button>

</form>
色の変更： CSS内の「#c98792」は検索ボタン、「#b9c3d1」は入力欄の枠線の色です。お好みのカラーコードへ変更してください。
入力案内の変更： HTML内の「キーワードを入力」を、表示したい文字へ書き換えてください。
検索先について： WordPressのサイト内検索では、そのまま使用できます。WordPress以外で使う場合は、サイトの検索機能に合わせてHTML内の「action」と「name」を変更してください。
DESIGN 09

影を付けた検索ボックス


枠線を使わず、検索ボックスの周囲にやわらかな影を付けたデザインです。
背景から少し浮き上がったように見えるため、シンプルさを保ちながら、検索欄の存在を自然に目立たせられます。

<form class="search-design-09" action="/" method="get">

  <input
    type="search"
    name="s"
    placeholder="キーワードを入力"
    aria-label="サイト内検索"
  >

  <button type="submit" aria-label="検索する">

    <svg
      viewBox="0 0 24 24"
      aria-hidden="true"
    >

      <circle
        cx="10.5"
        cy="10.5"
        r="6.5"
      ></circle>

      <line
        x1="15.5"
        y1="15.5"
        x2="21"
        y2="21"
      ></line>

    </svg>

  </button>

</form>
色の変更： CSS内の「#c98792」を、お好みのカラーコードへ変更してください。検索アイコンの色が変わります。
入力案内の変更： HTML内の「キーワードを入力」を、表示したい文字へ書き換えてください。
検索先について： WordPressのサイト内検索では、そのまま使用できます。WordPress以外で使う場合は、サイトの検索機能に合わせてHTML内の「action」と「name」を変更してください。
DESIGN 10

角を切り取った検索ボックス


左右の角を斜めに切り取った、シャープな印象の検索ボックスです。
一般的な四角形や丸みのある形とは異なるため、シンプルな構成のまま、検索欄に少し個性を加えられます。

<form class="search-design-10" action="/" method="get">

  <input
    type="search"
    name="s"
    placeholder="キーワードを入力"
    aria-label="サイト内検索"
  >

  <button type="submit" aria-label="検索する">

    <svg
      viewBox="0 0 24 24"
      aria-hidden="true"
    >

      <circle
        cx="10.5"
        cy="10.5"
        r="6.5"
      ></circle>

      <line
        x1="15.5"
        y1="15.5"
        x2="21"
        y2="21"
      ></line>

    </svg>

  </button>

</form>
色の変更： CSS内の「#9ed8f5」は枠線、「#c98792」は検索アイコンの色です。お好みのカラーコードへ変更してください。
入力案内の変更： HTML内の「キーワードを入力」を、表示したい文字へ書き換えてください。
検索先について： WordPressのサイト内検索では、そのまま使用できます。WordPress以外で使う場合は、サイトの検索機能に合わせてHTML内の「action」と「name」を変更してください。

まとめ

今回は、HTMLとCSSをコピーして使える、おしゃれな検索ボックスデザインを10種類紹介しました。

シンプルな枠線タイプから、丸みのあるデザイン、アイコン付き、背景色や影を使ったデザインまで、さまざまな検索ボックスをまとめています。

色やサイズを変更しながら、サイトの雰囲気や設置する場所に合ったデザインを選んでみてください。

検索ボックス以外の導線も整えたい場合は、ボタンデザインやテキストリンクデザインもあわせてご覧ください。

お気に入りのデザインを取り入れて、情報を探しやすく、使いやすいページ作りに役立ててみてください。