MATEREATE CONTENTS

ナビゲーション、アイコン、ボタン、画像、etc…

MATEREATE(マテリエイト)では様々なWeb素材を取り扱っております。

ご利用の際は、下記のカテゴリー別のリンク先から個別の素材ページにいっていただきダウンロードをして使用することができます。


ダウンロードに関しては基本的には無料でご利用いただけます。

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

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

ICON

MATEREATE CONTENTS

多彩なエフェクトやアニメーションで表現する

オシャレな動きをするアイコン素材

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

下のバーが消え残りのバーでバツになるメニューアイコン

jQueryを使用したユニークな動きをするメニューアイコン素材です。ただクリックをしたら、「×」になるのではなく、それぞれのバーが消えたり、回転したりと多彩なアニメーションをします。メニューアイコンにちょっとしたアクセントが欲しいという方はぜひご利用ください。

メニューアイコンの全てのデザインイメージ
メニューアイコン

クリックすると3つのドットが×に変化するアイコン

スマホまたはタブレットでのメニュー項目を表示するのに使えるドットでデザインしたメニューアイコン素材です。クリックすることで、それぞれのドットがアニメーションし、○マークと×マークになります。メニューアイコンをオシャレに表示させたい方はぜひご利用ください。

BUTTON

MATEREATE CONTENTS

目を引くようなアニメーションをし、思わずクリックしたくなるような

シンプルながらインパクトのあるエフェクトをするボタン素材

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ボタン素材の通常時とホバー時のデザイン
アニメーションボタン

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

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

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

ホバーすると上下部分にラインが現れるボタン

シンプルなホバーエフェクトを使用したボタンのWeb素材でございます。ホバーすると、ボタン内部の上下部分にボーダーラインが現れます。シンプルながらもボーダーラインのエフェクトにより、アクセントの効いたデザインとなっております。

背景が変わるボタンの全てのデザインイメージ
3Dアニメーション

上からパタパタと背景の色が変化するアニメーションボタン

ホバーエフェクトと3Dアニメーションを使用したボタン素材です。マウスをHoverすると、上からパタパタと背景が変化するボタンです。色んなカラーを組み合わせて、思わずクリックしたくなるようなオシャレなアニメーションのボタンを作ることができます。

IMAGE

MATEREATE CONTENTS

シンプルだけど多様なエフェクトやアニメーション

様々な場面で活用できるイメージ素材

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

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

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

イメージ素材のエフェクトイメージ
画像表示

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

回転しながらスライドショーをする素材のデザインイメージ
スライドショー

画像が常に3D回転しながら表示されるスライドショー

全てCSSのみで実装!!CSSアニメーションを使用した3D回転しながら、スライドショーをするWeb素材です。jQueryは使用しておらず、WebパフォーマンスにもSEOにも優しい素材となっております。アクセントの効いたスライドショーを実装したい方はぜひご利用ください。

イメージカード素材の全てのデザインイメージ
イメージカード

束ねた写真をズラしたように表示するイメージカード

ホバーエフェクトを使用したイメージ素材です。画像に白い縁を加え、写真のようなデザインで画像を表示します。画像をホバーすると、アニメーションし、束ねた写真をズラしたようなデザインとなります。

素材反映のご依頼

MATEREATE CONTENTS

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

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

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


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