当サイトの管理人が制作したWeb素材の一覧ページです。

ご利用際は下記の各項目からそれぞれの素材ページにアクセスしていただき、ダウンロードすることでお使いいただけます

ダウンロードに関しては基本的には無料でご利用可能です


皆様のサイト制作のお役に立てればと思います。

気に入った素材があればどんどんご利用ください。

SNSシェアボタンのデザイン&エフェクトイメージ
アイコン

下からアイコンが現れ背景色が変化するSNSシェアボタン

ホバーエフェクトにより、背景色が変化するおしゃれなデザインのSNSアイコンの無料Web素材です。アイコンが上に消え、下から新たに現れながら、背景色がグレー色から各種SNSのメインカラーへと変化します。グレー色から鮮やかに各メインカラーへと変化するおしゃれなSNSアイコン素材となっております。

文字が煙のように消えるテキスト素材のイメージ
テキスト

文字が煙のように消えていくクールなエフェクトのテキスト

文字にマウスを置くと、文字が煙のように消えていくようなエフェクトがかかるテキストの無料Web素材です。CSSのみ使用のエフェクトとなり、気軽に使用できると思います。マウスホバーでふわぁっとゆっくり消えていく印象的なエフェクトのため、とても魅力的なテキスト素材となっております。

スライド表示するギャラリー素材のデザイン
イメージ

上から新たな画像がスライドしながら表示されるギャラリー

サムネイル画像をクリックすると、その画像が上からスライドしながら表示されるイメージギャラリーの無料Web素材です。スッキリとしたデザインのため、イメージ画像の使用頻度が高めのサイトなどに向いていると思います。クリックするだけで画像が閲覧できる便利なギャラリー素材となっております。

SNSシェアボタンのデザインイメージ
アイコン

背景色が変化しアイコンが回転するSNSシェアボタン

マウスを置くとアイコンにエフェクトがかかるおしゃれなSNSアイコンの無料Web素材です。背景色が左側から徐々に変化し、アイコンが縦軸を中心にくるくると回転するエフェクトがかかります。非常にユニークでおしゃれなSNSアイコン素材となっております。

背景色が変化するナビのデザインイメージ
ナビゲーション

左側からバーが現れて背景色が変化するナビゲーション

メニュー項目にマウスを置くと、左側からバーが出現し、背景色が変化するナビゲーションの無料Webデザイン素材です。CSSのみで表現していますので、Webパフォーマンスにも優しいデザイン素材となっております。シンプルながらもおしゃれなエフェクトによりサイト訪問者の目を引くことができると思います。

イメージ素材のエフェクトイメージ
イメージ

ぼやけている画像がはっきり表示されるイメージエフェクト

画像をぼかして表示してあり、マウスを置くことではっきりと表示されるイメージエフェクトの無料Web素材です。イメージ写真を表示するときなど、ちょっとしたエフェクトを加えることで、より印象を与えることができると思います。画像閲覧をちょっとワクワクさせる…。そんなイメージエフェクト素材となっております。

エフェクトサイドナビのデザイン
ナビゲーション

メニュー項目をオシャレに演出するサイドメニュー

クリックでメニュー項目が出現し、ホバーエフェクトでメニュー項目をオシャレに演出するサイドメニューの無料Web素材です。マウスを置くと、メニュー名が少し右に動き、下部分にラインが出現します。選択しようとしている項目が、視覚的に分かりやすくなるため、各ページへのアクセス率を上げることができると思います。

ホバーエフェクトギャラリーのデザイン
イメージ

マウスを置いている画像だけが表示されるギャラリー

ホバーエフェクトにより、マウスが置かれてる画像のみが表示されるイメージギャラリーの無料Web素材です。並んであるイメージ画像を、一つだけ表示することができるので、サイト訪問者に一つ一つ丁寧に見せることができます。エフェクトもアクセントが効いているため、さらに訪問者の目を引くことができると思います。

バウンドテキストのデザイン
テキスト

一文字ずつバウンドし色が変化するアニメーションテキスト

テキストが一文字ずつバウンドし、色が変化するアニメーションをするテキストの無料Web素材です。リズムよく順にバウンドしていくため、ポップなデザインのテキストとなっております。ユニークで目立つアニメーションをするため、サイト閲覧者の目に止まり、インパクトを与えることができると思います。

アコーディオンフルスクリーンナビのデザイン
ナビゲーション

シンプルなアコーディオン形式のフルスクリーンナビ

項目をホバーするとアコーディオン形式でエフェクトがかかるフルスクリーンナビの無料Web素材です。項目のテキストを90度傾けたデザインにし、マウスを置くとホバーエフェクトによりテキストが回転するデザインとなっております。とても印象的なエフェクトでインパクトのあるフルスクリーンナビ素材となっております。

回転するSNSアイコンのデザイン
アイコン

ホバーエフェクトでくるりと回転するSNSシェアボタン

アイコンにマウスを置くと、ホバーエフェクトによりアイコンが縦にくるりと回転するSNSアイコンの無料Web素材です。シンプルなデザインのシェアボタンにちょっとしたアクセントを加えたオシャレなSNSアイコン素材となっております。SNSのシェアボタンとして利用し、シェア率を上げることができると思います。

浮かびながら揺れるイメージカードのデザイン
イメージ

画像が浮かびながらゆっくりと揺れるイメージカード

画像が浮かびながらゆっくりと横に揺れるイメージカードの無料Web素材です。会社のイメージ画像や写真など、サイト制作において使用頻度が多めなイメージ画像を、ユニークなアニメーションで表示します。ゆっくりと揺れて表示される画像は、きっと閲覧者に様々な印象を残すことができると思います。

アニメーションボタンのデザインイメージ
ボタン

ボーダーがアニメーションしながら四隅から現れるボタン

ボタンの四隅からアニメーションしながらボーダーが現れるボタンの無料Web素材です。一定のアニメーションを繰り返すので、サイト閲覧者の目を惹くことができると思います。シンプルなデザインながらも、魅力的な動きのあるアニメーションボタンとなっております。

エフェクトプランボックスのデザイン
レイアウト

詳細リストにエフェクトがかかるプラン表デザイン

プランタイトルや詳細リストをオシャレに演出するプラン表デザインの無料Web素材です。各サイトの料金表、プラン等を華やかに魅せることができると思います。ホバーしている詳細リストごとにエフェクトがかかるため、非常に見やすくなり、閲覧者にも伝わりやすいプラン表のデザイン素材となっております。

キューブ状に回転するメニューのデザイン
ナビゲーション

項目がキューブ状に回転しながら色が変化するメニュー

ホバーエフェクトによりメニュー項目がキューブ状に回転し、背景の色が変化するナビゲーションの無料Web素材です。立体的に回転するオシャレなエフェクトにより、アクセントの効いたナビゲーションとなっております。思わずクリックしたくなるようなナビゲーションでページアクセス率を上げることができると思います。

浮かび上がるテキストのデザイン
テキスト

ホバーすると重なっている文字が浮かび上がるテキスト

ホバーエフェクトにより、重なっている文字が浮かび上がるテキストの無料Web素材です。テキスト部分をマウスホバーすることで、3つの同じ文字が立体的に浮かび上がります。見た目は普通のテキストが、一気にアクセントの効いたデザインへと変化するので、サイト訪問者に印象を与えることができると思います。

フルスクリーンスライドショーのデザイン
イメージ

フルスクリーンで画像が表示されるスライドショー

CSSのみ使用!!常にフルスクリーンで画像を表示するスライドショーの無料Web素材です。パソコン画面では横に長い画像を表示し、スマホ画面では縦に長い画像を表示するようになっております。表示されている画面全ての範囲を使用し、画像をスライド表示させることができるため、サイト閲覧者により印象を与えることができると思います。

リンクアイコンのデザインイメージ
アイコン

背景の色とアイコンの色がオシャレに入れ替わるアイコン

背景の色とアイコンの色がホバーエフェクトにより、オシャレに入れ替わるアイコンの無料Web素材です。アイコン部分には「FontAwesome」を使用しています。シンプルながらもアクセントの効いたエフェクトがかかるため、視覚的に分かりやすいリンクアイコンとして使用することができます。

ドロップダウンメニューのデザインイメージ
ナビゲーション

マウスホバーで背景色が変わるドロップダウンメニュー

マウスホバー時に項目の背景の色が変化し、サブ項目が出現するドロップダウンメニューの無料Web素材です。サブ項目があるメニュー項目には「+」を表示してあります。サブ項目をホバー時にも、同様に背景が変化します。たくさんの項目がある中で、選ぼうとしている項目が分かりやすいナビゲーション素材となっております。

コンタクトフォームのデザインイメージ
レイアウト

入力時に枠の色が変化するシンプルなコンタクトフォーム

文字入力時に入力欄の枠の色が変化するシンプルなデザインのコンタクトフォームの無料Web素材です。入力中の枠の色が変化するため、入力欄が分かりやすく表示されます。シンプルなデザインながらもアクセントのあるコンタクトフォーム素材となっております。

トグルボタンのデザインイメージ
ボタン

スイッチ内の背景が変化するシンプルなトグルボタン

ボタンをクリックすると、スイッチ内の背景の色が変化するトグルボタンの無料Web素材です。CSSのみで作成しているため、気軽に実装できます。クリックする度に背景の色も切り替わるため、ON/OFFの切り替わりが分かりやすいトグルボタン素材となっております。

アウトラインテキストのデザイン
テキスト

縁取りされたアウトライン表示のデザインテキスト

縁取りされたアウトライン表示のようなデザインのテキストの無料Web素材です。画像を使用してデザインしがちな縁取りテキストをCSSのみで表現しています。そのためWebパフォーマンスにも優しく、SEOにも効果的な素材となっております。

ナビゲーションのデザインイメージ
ナビゲーション

フェードインで出現し項目名が変化するメニュー

項目をホバーすると文字がフェードインしながら出現し、項目名が変わるナビゲーションの無料Web素材です。メニュー項目に簡単な説明やキャッチコピーを入れることができ、サイト訪問者のアクセス率をより高めることができると思います。オシャレに出現するため、アクセントを効いているナビゲーション素材となっております。

検索ボックスのデザインイメージ
ユーザビリティ

ホバーで入力欄が出現するオシャレな検索ボックス

アイコンをホバーすると、横に大きく伸びる演出をし、入力欄が出現する検索ボックスの無料Web素材です。デザインをアイコンのみで表示しているためサイト表示の邪魔になりにくく、必要な時に検索欄を呼び出せる便利な素材でございます。ホバーエフェクトにより少しアクセントの効いた検索ボックスとなっております。

またジャンル別で素材を閲覧したい方は、ジャンル一覧ページへアクセスしていただき、ご閲覧ください。

素材反映のご依頼

MATEREATE CONTENTS

ダウンロードして実装したけど、うまく反映しない…

素材を自身のサイトにも実装したいけどWebコーダーが不在のため、実装して欲しい…

そんな方はぜひお気軽にお申し付けください。


無料お見積り後、コードを整理した上で実装・反映いたします。