TOP  >  アニメーション

Tag : アニメーション

2019年01月03日

マイクロインタラクションに使えそうなCSSアニメーション「WickedCSS animations」

WEBサイトのアニメーションはとても重要で印象的なアニメーションをそのサイトの価値を大きく向上させてくれます。大きく派手な動きも大切ですが、細かなアニメーションもクオリティを向上させるためには大切な要素の一つです。今日紹介するのはマイクロインタラクションに使えそうなCSSアクセントアニメーション「WickedCSS animations」です。

wickedCSS

floater(ふわふわ浮く)、barreRoll(クルっと一回転)、RollerRight(回転しながら出現)、heartbeat(鼓動のように膨らむ)、shake(細かく揺れる)など、かなりの数のアニメーションがCSSのみで再現されています。

詳しく以下

(続きを読む…)

続きを読む
posted 07:50  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加
2018年12月03日

雑誌のようにめくって閲覧できるアニメーションテンプレート「Page Flip Layout」

コンテンツをクリエイティブにデザインするために、アニメーションを用いたレイアウトを取り入れることはとても効果的です。今回は雑誌を読むようにページをめくって閲覧できるアニメーションテンプレート「Page Flip Layout」をご紹介します。

gazou2

ファッション雑誌のように美しく写真をレイアウトすることができ、アニメーション効果でデザインをリッチにすることができます。

詳しくは以下

(続きを読む…)

続きを読む
このエントリーをはてなブックマークに追加
2018年01月20日

シンプルで美しい動きが魅力のローディングアニメーションセット「Epic Spinners」

webサイトにアクセスする時や、重いデータを読み込む際などに利用するローディングアニメーション。案外、いつも同じものになってしまいがちです。今回はそんな時に参考にしたい「Epic Spinners」を紹介したいと思います。

loading0120

シンプルで美しい動きが魅力のローディングアニメーションがセットになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:45  |  
Category: javascript , WebDesign   
このエントリーをはてなブックマークに追加
2017年12月18日

クリスマスなWebデザインのアクセントに!グラフィカルなトグルボタン「CodePen – Bauble Toggle」

クリスマスまであと数日。デザインのちょっとした部分にもクリスマス感を取り入れることで、より気分を高めることができるのではないでしょうか。そんな中今回ご紹介するのは、クリスマス気分を盛り上げてくれるグラフィカルなトグルボタン「CodePen – Bauble Toggle」です。

codepen-bauble-toggle1
CodePen – Bauble Toggle

クリスマスのオーナメントをイメージさせるイラストがボタンになった、可愛らしいトグルボタンです。

詳しくは以下

(続きを読む…)

続きを読む
このエントリーをはてなブックマークに追加
2017年12月17日

Javascriptで描く表現のパーティクルアニメーション「D Particle Explorations」

流行のwebサイトなどでよく見かけるパーティクルアニメーション。ゆらゆら、ぐるぐると動き回る不思議なグラフィックは見る人を引き込み、虜にします。今回はそんなパーティクルアニメーション3DをJavascriptで描いた「D Particle Explorations」を紹介したいと思います。

animation3

8パターンの種類の違うパーティクルアニメーションをデモサンプルで確認することができます。

詳しくは以下

(続きを読む…)

続きを読む
このエントリーをはてなブックマークに追加
2017年09月24日

直感的な操作で簡単にアニメーションを作成することができるCSSアニメーションツール「Stylie – A Free CSS Web Animation Builder」

WEBサイトならではのアクション要素の一つ、アニメーション。取り入れることができれば個性的でインパクトのあるサイトを制作できますが、アニメーションの作成はハードルが高いと感じる方も多いのではないでしょうか。そんな方におすすめできるCSSアニメーションツール「Stylie – A Free CSS Web Animation Builder」を今回はご紹介します。

stylie-css-animation_top

使い方が難しそうと思われる方も多いかもしれませんが、汎用性の高い便利なツールとなっています。使用方法をわかりやすく説明してくれている動画が紹介されていますので、まずは下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:00  |  
Category: Tool   
このエントリーをはてなブックマークに追加

過去の記事からランダムで表示

2014年12月06日

制作をよりスムーズかつハイクオリティなものにしてくれる フリーpsdテンプレート集「25 New and Free PSD Web Templates」

制作時間やコストがない時に活躍してくれるフリー素材。特にpsd形式のテンプレートは活用しやすく、重宝する存在ではないでしょうか?今回はそんなフリーpsdテンプレートを集めた「25 New and Free PSD Web Templates」を紹介したいと思います。

freepsd1206_1
Dribbble – [FREEBIE] Spirit8 – Digital agency one page template by Robert Berki

制作をよりスムーズかつハイクオリティなものにしてくれるpsd素材がたくさんまとめられています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2008年10月29日

多彩でクリエイティブなイラストレーターブラシセット「45 Excellent Sets of Adobe Illustrator Brushes」

イラストレーターの表現をさらに広げてくれるブラシ。今日紹介するのは様々なジャンルのブラシセットをまとめたエントリー「45 Excellent Sets of Adobe Illustrator Brushes」です。


45 Excellent Sets of Adobe Illustrator Brushes

筆や水彩ブラシから、花のようなグラフィック感のあるブラシまで幅広く揃っています。今日は紹介されているブラシの中からいくつか紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 08:58  |  
Category: Design , vector   
2017年06月11日

Webデザイナーやデベロッパーの大きな手助けになるCSS3チュートリアル集「10 Pure CSS3 Tutorials And Examples」

CSSはWebサイト構築の上で非常に便利なものですが、今回は様々な機能でデザインを形にしてくれる、CSS3をマスターするために便利なチュートリアル「10 Pure CSS3 Tutorials And Examples」を紹介したいと思います。

CSS3tutorials_top
How to Code a Homepage Template with HTML5 and CSS3 | Medialoot

最新のCSS3を使ったチュートリアルがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: WebDesign   
2008年06月14日

世界地図のベクターデータ集「Free Vector World Maps Collection」

全部だったり、一部だったりと何かとデザインに使うことが多い世界地図。ベクターデータで持っているとちょっと使いたい時に便利です。今日紹介する「Free Vector World Maps Collection」は世界地図のベクターデータが集められたエントリーです。

面だけだったり、線画だったりドットで作られていたりと様々な世界地図が集められています。ここまでバリエーションがあれば、制作しているデザインに応じて使い分けることもできるので便利ですね。公開されている物の中から、いくつか下記に貼り付けておきます。

詳しくは以下

(続きを読む…)

続きを読む
posted 07:53  |  
Category: Design , vector   
tag: Design vector
2015年07月20日

シンプルさを追求したデザインにおすすめなアウトラインアイコン「Linea: Free Outline Iconset」

アイコンにはさまざまな種類がありますが、比較的シンプル・ミニマルなデザインが主流の今、癖の少ないデザイン性の素材が求められることが多いのではないでしょうか?そんな今回は、シンプルさを追求したデザインにおすすめなアウトラインアイコン「Linea: Free Outline Iconset」です。

lineicon3

いろいろなテーマのラインアイコンがテーマ別に730個収録された、便利に活用できるアイコンセットとなっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 01:56  |  
Category: Design   
2016年06月07日

WEBGLで実現するリッチアニメーションスライダー「WebGL image slider transition」

WEBのコンテンツの見せ方の定番中の定番のギミック、スライダー。数多くのスライダーがリリースされており、どれも目を引くための工夫が施されていますが、今日紹介するのはWEBGLで実現するリッチアニメーションスライダー「WebGL image slider transition」です。

sl01

このスライダーはjavascriptとWebGLの技術を使い、画像が崩壊し、再構築しながら画像を切り替わるという今までのWEBでは動画レベルでしか表現できなったアクションが実装されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:58  |  
Category: javascript , WebDesign   
2018年09月10日

リアルタイムにデザインを編集できるWordPressプラグイン「The Divi Builder」

世界中で利用されているCMSの一つWordpress。国内でも多くのユーザーが利用しており、法人・個人問わず利用されていますが、今回紹介するのは、リアルタイムにデザインを編集できるWordpressプラグイン「The Divi Builder」です。

The-Divi-Builder

通常テーマはいくつかのファイルによって構成されており、テンプレートの修正やカスタマイズするとなると、多くの場合、コードを書いて修正しなければなりませんでした。この「Divi」はブラウザ上で自由にデザインカスタマイズやテンプレート側の修正が行えるというものです。実際の操作しているシーンを交えた、プロモーション動画が公開されていましたので以下からご覧ください。

動画は以下から

(続きを読む…)

続きを読む
posted 09:30  |  
Category: plugin , WordPress   
2017年12月13日

個性的な色使いとデザインが目を惹くパターン素材「Mint & Lavender Vector Patterns」

最近では様々な素材データが無料でダウンロードできるようになり便利になりました。そんな中今回紹介するのは、個性的な色使いとデザインが目を惹くパターン素材「Mint & Lavender Vector Patterns」です。

freebie01

フランスのデザイナーが手がけたインパクトのあるパターンデザインです。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:00  |  
Category: Design   
2012年04月17日

インフォグラフィックデザインに使いやすいデザイン素材まとめ「UI Kits and Other Free PSD Resources for Building Infographics」

難しい説明をデザインの力で誰にでも分かりやすく伝えるインフォグラフィックが注目を集め、そのようなデザイン制作の依頼も増えているのではないでしょうか?そこで今回紹介するのが、インフォグラフィックデザインに使いやすいデザイン素材まとめ「UI Kits and Other Free PSD Resources for Building Infographics」です。


Free Vector Infographic Kit | MediaLoot

表やグラフをはじめとした統計データを見やすく表現できる素材や、アイコンなどのユーザーインターフェースを意識した素材が紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
2011年03月02日

デザインにすぐに使える photoshopブラシまとめ「Best Photoshop Brushes for February 2011: 18 Free Sets」

デザイン力を更に高くするために重宝するphotoshopブラシ。使い方次第で、デザインに奥行きを足すことができるので、グラフィカルな表現を強めたいときに特に役立ちます。そんな中今回紹介するのは、デザインにすぐに使えるphotoshopブラシまとめ「Best Photoshop Brushes for February 2011: 18 Free Sets」です。


Sparkly Heart Frames – Photoshop Brushes – BrushLovers.com

可愛さ溢れる女性らしいブラシタイプから手書き風のタイプまで、ユニークなphotoshopブラシが収録されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。
VR・ウェアラブル・センシングなど様々な技術が一般化され、手に届く範囲で製品化が進んでいます。VR MEDIAは拡張する現実から未来を探るBLOGです。
Template deisgn by iDEACLOUD inc.
トップに戻る