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

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

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


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

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

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

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

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

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

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

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

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

クリックで画面左からスライドして現れるサイドメニュー

必要な時に応じて画面に呼び出せるサイドメニュー素材です。メニューアイコンをクリックすると、画面左からメニュー項目が現れます。ホバーエフェクト等のアニメーションは加えておらずとてもシンプルな素材となっております。

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

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

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

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

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

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

infoボックス素材の全ての端末でのデザインイメージ
レイアウト

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

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

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

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

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

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

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

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

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

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

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

背景が変わるボタンの全てのデザインイメージ
ボタン

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

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

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

素材反映のご依頼

MATEREATE CONTENTS

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

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

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


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