MATEREATE CONTENTS

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

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

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


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

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

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

LAYOUT

MATEREATE CONTENTS

料金プランやお知らせのアーカイブといったサイトのコンテンツ内容をエフェクトやアニメーションを駆使し美しく表示。

思わずアクセスしたくなる…!?

そんなおしゃれで閲覧しやすいレイアウト素材

エフェクトプランボックスのデザイン
プラン表

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

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

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

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

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

ひっくり返るinfoボックスのデザイン
お知らせ欄

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

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

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

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

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

プランボックスの全てのデザインイメージ
プラン表

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

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

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

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

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

プランボックスの全てのデザインイメージ
プラン表

項目ホバー時に左右からバーが出るプラン表デザイン

全てCSSのみでデザインしたプランボックスの素材でございます。画像を一切使用してないため、WebパフォーマンスにもSEOにも優しいWeb素材となっております。項目のホバー時には、左右からバーが現れ、アクセントの効いた演出を行います。

infoボックス素材の全ての端末でのデザインイメージ
お知らせ欄

ホバーするとサムネイル画像がズームするお知らせ欄

サイトのお知らせやブログ記事の新着情報などで使えるボックスデザイン素材です。サムネイル画像と記事のタイトル、記事の抜粋(または本文)を表示しています。ボックスをマウスホバーすると、サムネイル画像がズームされます。またタブレット端末以下では、デザインが少し変わって表示されます。

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にも優しい素材となっております。アクセントの効いたスライドショーを実装したい方はぜひご利用ください。

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

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

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

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つのドットが×に変化するアイコン

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

TEXT

MATEREATE CONTENTS

様々なアニメーションやエフェクトを使用し、テキストに動きを表現!!

ページの見出しやタイトル等、テキストもオシャレに演出したい!

そういった魅力が溢れ、注目されるようなテキスト素材

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

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

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

バウンドテキストのデザイン
アニメーションテキスト

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

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

浮かび上がるテキストのデザイン
エフェクトテキスト

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Usability

MATEREATE CONTENTS

シンプルなデザインから多彩なアニメーションを使用したデザインまで様々な素材をご用意!!

Webサイトをさらに便利に!!

ページネーションや検索ボックス等、Webサイトを利用しやすくかつ閲覧しやすくする、あると便利なUsability素材

検索ボックスのデザインイメージ
検索ボックス

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

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

ページネーション素材の通常時とホバー時のデザイン
ページネーション

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

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

素材反映のご依頼

MATEREATE CONTENTS

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

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

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


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