MATEREATE CONTENTS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ナビ素材の全ての端末でのデザインイメージ
グローバルナビ

背景の色がパタパタとカラフルに変化するナビゲーション

3Dアニメーションとホバーエフェクトを使用したナビゲーション素材です。マウスHover時に項目の背景がパタパタと変化します。色んなカラーを組み合わせて、オシャレなデザインのナビゲーションを作ることができます。

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

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

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

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

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

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

素材反映のご依頼

MATEREATE CONTENTS

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

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

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


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