MATEREATE CONTENTS

メニューアイコンや、Webアイコンフォントを使用しデザインしたWeb素材のソースコードを置いてあります。ダウンロードは全て無料!!アイコンは閲覧ユーザーにシンプルにわかりやすく情報を伝えられるメリットがございます。限られたスペースにちょっとしたアクセントのあるアイコン設置することができます。

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

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

素材反映のご依頼

MATEREATE CONTENTS

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

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

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


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