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

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

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


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

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

チェンジイメージカードのデザイン
イメージ

マウスを置くと画像が切り替わるイメージカード

画像にマウスを置くと、表示されている画像が別の画像に切り替わるイメージの無料Web素材です。1つの画像表示領域に実質2つの画像を表示することができるので、サイトページのデザインやレイアウトがしやすくなると思います。CSSのみで表現しているため、手軽に実装できるのもこの素材の魅力の1つです。

メニューアイコンアニメーションのイメージ
アイコン

真ん中のバーが消え上下のバーが×になるメニューアイコン

メニューアイコンをクリックでオシャレにデザインが変化するアイコンの無料Web素材です。3つのバーのうち真ん中のバーが消え、残りの上下のバーで「×」となるアニメーションをします。オシャレにデザインが変化するメニューアイコンで、サイトメニューにアクセントを入れることができます。

ひっくり返るinfoボックスのデザイン
レイアウト

ホバーでボックスがひっくり返り内容が見えるお知らせ欄

ホバーエフェクトによりボックスがひっくり返る演出するオシャレなレイアウトの無料Web素材です。表には記事のタイトルとアイキャッチ画像、裏には日付と記事の概要や抜粋を表示するデザインとなっております。たくさんの情報を限られたスペースに一度に表示できるため、サイト閲覧者にも優しいWeb素材となっております。

ナビ素材の全てのデザインイメージ
ナビゲーション

ホバー項目以外の項目がぼやけて表示されるメニュー

メニュー項目にマウスを置くと、それ以外の項目が薄くぼやけるようなエフェクトがかかるナビゲーションの無料Web素材です。CSSのホバーエフェクトを使用し表現しています。ぼんやりと薄くなるエフェクトでサイト訪問者に優しい印象を与えることができます。

フロートテキスト素材のアニメーションイメージ
テキスト

文字が浮いたり沈んだりを繰り返すテキスト

文字が浮いたり沈んだりを繰り返すテキストの無料Web素材です。ゆっくりと上下にアニメーションを繰り返し、サイトのページに動きをもたらします。ページのタイトルやコンテンツの見出しなどに使用すると、訪問者の目を引くことができると思います。

エフェクトボタンの通常時とホバー時のデザイン
ボタン

丸みを帯びた形に変化し文字の間隔が広がるボタン

ボタンにマウスを置くと背景のデザインが変化し、文字と文字の間隔が広がるボタンの無料Web素材です。ボタンは丸みを帯びたデザインに変化し、背景の色も変化します。文字と文字の間隔も広がる印象的な演出をいたします。シンプルながらもアクセントの効いたエフェクトボタン素材となっております。

ギャラリー素材のデザインイメージ
イメージ

束ねた写真をズラすエフェクトで表示するギャラリー

当サイトの「束ねた写真をズラしたように表示するイメージカード」の素材を使用した、オシャレなイメージギャラリーの無料web素材です。アクセントの効いたギャラリーページを作成することができます。またレスポンシブ対応で、画像の並び方が各端末に対応した並びとなります。

コンテンツボックスの全てのデザインイメージ
レイアウト

タイトルが下に移動し内容が見えるコンテンツボックス

ホバーエフェクトでコンテンツ内容をオシャレに表示するボックスレイアウトの無料web素材です。表側のデザインが変形しながら下側に移動し、裏側に記載の内容が見えるようになっております。画像使用一切なしのWebパフォーマンスとSEOに効果的なコンテンツボックス素材となっております。

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

オシャレなアニメーションで出現するサイドメニュー

アイコンをクリックするとオシャレなアニメーションで出現するするサイドメニューの無料Web素材です。左側から単に出現するのではなく、左上部分から斜めにシュッと出現するようなアニメーションとなっております。サイトのメニュー(またはサブメニュー)をオシャレに演出いたします。

スクロールアイコンのデザインのイメージ
アイコン

フェードイン&アウトしながら表示されるスクロールアイコン

フェードイン&アウトのアニメーションを常にしながら表示されるスクロールアイコンの無料Web素材です。画像は使用しておらず、CSSアニメーションのみで表現してあります。オシャレなアニメーションのスクロールアイコンで、ページのスクロール率をあげましょう。

エフェクトテキストのエフェクトイメージ
テキスト

ホバーすると文字と文字の間隔が広がるテキスト

ホバーすると文字と文字の間隔が広がる演出をするテキストの無料Web素材です。シンプルながらもテキストに動きをもたらします。ページのタイトルや項目の見出しにちょっとしたアクセントを加えることができます。

3Dボタンの全てのエフェクトイメージ
ボタン

ホバーすると下からキューブ状に回転するボタン

ホバーすると下からキューブ状に回転し、背景と文字の色が変化するボタンの無料Web素材です。全てCSSアニメーションのみで表現しています。シンプルなデザインながら、立体的にアニメーションするので、ちょっとしたインパクトとアクセントを与えることができるボタン素材でございます。

フルスクリーンナビの全てのデザイン
ナビゲーション

ホバーしている項目が濃く表示されるフルスクリーンナビ

メニュー項目をホバーすると、ホバーしている項目が濃く表示されるナビゲーションの無料Web素材です。CSSのホバーエフェクトのみで表現しています。マウスが乗っていない項目が薄く表示されるため、どの項目を選んでいるのかがわかりやすくなります。フルスクリーン表示の見やすいナビゲーション素材です。

イメージカードの全てのエフェクトイメージ
イメージ

画像が回転し別の画像が表示されるイメージカード

画像の上にマウスを置くと画像が回転し、新たな別の画像が表示されるイメージの無料Web素材です。CSSのホバーエフェクトのみで表現しています。シンプルながらも動きのあるエフェクトで画像や写真をを表示することが可能です。

プランボックスの全てのデザインイメージ
レイアウト

ボックスがズームし背景色が変化するプラン表デザイン

マウスを置くとボックス全体がズームし、背景色が変化するレイアウトの無料Web素材です。ボックス自体がズームされるため、サイト訪問者にどのコンテンツを見ているかをわかりやすく伝えることができます。画像を使用していないためWebパフォーマンスやSEOにも効果的なレイアウト素材となっております。

ボタンの全てのエフェクトのイメージ
ボタン

文字がフェードイン&アウトしながら色が変化するボタン

ボタンの上にマウスを置くと、フェードイン&アウトをしながら新たな文字が表示され、全体の色が変化するボタンの無料Web素材です。マウスを離しても同じような演出で元のボタンに戻ります。シンプルながらもアクセントの効いた演出をするため、サイト訪問者に印象を与えることができます。

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

クルクルと縦軸を中心に回転し裏側が表になるアイコン

アイコンの上にマウスを置くと、アイコンが縦の軸を中心にクルクルと回転し、裏側が表になるユニークなアニメーションのアイコンの無料Web素材です。アイコン部分には 「FontAwesome」 を使用しています。目的に沿ったアイコンで任意のページにアクセスさせることができると思います。

ティッカーテキスト素材のアニメーションイメージ
テキスト

文章が常に右から左へ流れていくティッカーテキスト

文章が右から左へ流れていくティッカーテキストの無料Web素材です。画像は使用しておらず、CSSのみで表現しているので手軽に実装でき、WebパフォーマンスやSEOにも優しい素材となっております。限られたスペースに項目の見出しやページのタイトルを一行で表示することができます。

グローバルナビ素材の全てのデザインイメージ
ナビゲーション

メニュー項目の上下部分にラインが現れるメニュー

メニュー項目をホバーで、項目の上下部分に左右からラインが出現するナビゲーションの無料Web素材です。レスポンシブ対応なので、タブレット、スマホでもご使用可能となっております。シンプルながらもちょっとしたアクセントが欲しい…。そんなナビゲーションのWeb素材となっております。

ギャラリー素材の全てのデザインイメージ
イメージ

サムネイルホバーで画像が表示されるギャラリー

サムネイル画像をホバーすると、メインのイメージボックスにサムネイルの画像が自動で表示されるギャラリーの無料Web素材です。複雑な操作なしにサクッと画像が表示されるので、ストレスなく閲覧しやすくなると思います。製品のイメージ画像を紹介する時や写真のギャラリーサイト等に扱えるWeb素材となっております。

ページネーション素材の通常時とホバー時のデザイン
ユーザビリティ

ホバーで背景の色が変わるシンプルなページネーション

項目をホバーすると、背景の色が変わるシンプルなエフェクトを使用したページネーションのWeb素材です。画像を使用しておらず、CSSのみでシンプルなデザインを表現しております。お知らせやニュースの一覧ページにもちょっとしたアクセントを演出したい時にぜひご活用ください。

レイアウト素材の全てのデザインイメージ
レイアウト

本のように開き中身が見えるコンテンツボックス

画像をホバーすると本のように開き内容が見えるレイアウトボックスのWeb素材です。CSSのみで表現しているので手軽に実装でき、さらにSEOにも優しい素材となっております。本の表紙部分となる画像には、コンテンツのイメージ画像。内容部分にはコンテンツの概要を入れるなど様々な場面で活用できると思います。

ボタン素材の通常時とホバー時のデザイン
ボタン

デザインが変化し横のボーダーが揺れるボタン

インパクトのあるホバーエフェクトとアニメーションを使用したリンクボタン素材です。両サイドに配置された「<>」が180度回転し、四角のボタンが丸みを帯びたボタンに変化します。カラーも「枠→文字の色」、「文字→枠の色」と変化します。その後「><」のバーは横に揺れるアニメーションをします。

エフェクトテキスト素材のアニメーションの流れ
テキスト

アニメーションしながら3色に変化するテキスト

自動で3色に変化するテキストのWeb素材です。ただ3色に変化するのではなく、上から下へ、右から左へと多方向に規則的な動きをしながら色が変化していき、以後その動きを繰り返しアニメーションします。サイトタイトルやページタイトル等にアクセントのあるデザインとして、お役立てください。

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

素材反映のご依頼

MATEREATE CONTENTS

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

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

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


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