TOP  >  アニメーション

Tag : アニメーション

2017年06月29日

多種多様なテキストアニメーションの表現できる CSS&javascriptまとめ「10 Amazing CSS & JavaScript Text Animation Snippets」

テキストに動きをつけることが可能なWeb。昨今のWebデザインにおいて欠かせない要素の一つとなっています。テキストが流れるように動くだけで強いインパクトを与えることができるでしょう。そんな動きの例をまとめた「10 Amazing CSS & JavaScript Text Animation Snippets」を今回はご紹介していきます。

10-Amazing-CSS-top
Title Text Animation

効果的なアニメーション演出を実現できるCSS&javascriptがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

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

サイトを彩る、フリーのボタンアクションアニメーションまとめ「Floating Action Buttons: 20 Free Animations for Web Developers」

最早Webデザインに欠かせない存在となってきたアニメーション。デザインに動きをつけることで、より見やすく魅力的なサイトへとクオリティアップすることも可能な魅力的なツールです。今回はそんなWebアニメーションからフローティングアクションボタンのみをまとめた「Floating Action Buttons: 20 Free Animations for Web Developers」をご紹介します。

Floating Action Buttons0507_00
Floating Action Buttons: 20 Free Animations for Web Developers

検索窓から何かと利用シーンの多いプラスボタンのアニメーションまで、全部で20種類ものアニメーションが集められています。その中から数点ピックアップしてご紹介しますのでご覧下さい。

詳しくは以下
(続きを読む…)

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

スクロールで変化する、美しいWebGLを実装する為のソース「WebGL Scroll Spiral」

WEB上で3Dアニメーションやオブジェクトを表示できる技術WebGL。今回ご紹介するのはそんなWebGLを使った、美しいマウススクロールアニメーションをまとめた「WebGL Scroll Spiral」です。

WebGLScrollSpiral_1

万華鏡のような美しいデザインから、抽象的なモーショングラフィックまで多様なデザイン、全8種類のデモを公開しています。

詳しくは以下

(続きを読む…)

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

プレビューで簡単!CSSアニメーションがブラウザ上で作れる「animista」

Webデザインを彩るCSSアニメーション。実装時にはデザインのイメージに合わせて、細かな調整を加えたり、なかなかに手間がかかる箇所でもあります。そんな手間がかかる調整工程を省ける、ブラウザ上でアニメーションが作れるツール「animista」を今回は紹介したいと思います。

IvvuhLKOlVsmlb12ajwABAssUEEguU9u2CBAgQIAAAQIECBAgQIAAAQIECKy5gEByzRuA3SdAgAABAgQIECBAgAABAgQIECCwTAGB5DK1bYsAAQIECBAgQIAAAQIECBAgQIDAmgsIJNe8Adh9AgQIECBAgAABAgQIECBAgAABAssUEEguU9u2CBAgQIAAAQIECBAgQIAAAQIECKy5gEByzRuA3SdAgAABAgQIECBAgAABAgQIECCwTAGB5

ブラウザ上でプレビューしながら細かな動きを調整して、タグをコピペするだけでCSSアニメーションが実装できる便利なツールです。

詳しくは以下

(続きを読む…)

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

クリエイティブなマウスオーバーアニメーション「Stack Motion Hover Effects」

Webデザインに欠かせない様々なエフェクトやアニメーション。使い方次第でWebサイトを魅力的なものに仕上げてくれますが、今回紹介するのは、クリエイティブなマウスオーバーアニメーション「Stack Motion Hover Effects」です。

StackMotionHoverEffects_800x600

全部で30種類の立体的なマウスオーバーアニメーションがサンプルとして上がっており、サイトの雰囲気や印象に併せて選択することが可能です。

詳しくは以下

(続きを読む…)

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

WEBデザインに最適!WordPress用アニメーションプラグインまとめ「10 Free Plugins for Adding Animation Effects to WordPress」

WEBデザインの仕上げに欠かせないのがアニメーション。ポイントやユーザーの誘導まで幅広い役割をこなす重要な工程です。今回ご紹介するのはWEBデザインに使えるWordPress用のアニメーションプラグインを集めたまとめ「10 Free Plugins for Adding Animation Effects to WordPress」です。

wp-special-effects-01

シンプルなものからアクセントにぴったりな凝ったエフェクトまで、多数のWordPressプラグインが揃います。以下ではまとめの中からおすすめのアニメーションプラグインを3つご紹介します。

詳しくは以下

(続きを読む…)

続きを読む
このエントリーをはてなブックマークに追加

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

2017年07月09日

さまざまなテイストが揃う 医療向けアイコンまとめ「30 Free Medical Icon Sets You Can Download」

医療関係のデザインは、専門的な内容も多いだけに、できるだけわかりやすくユーザーに視覚的に伝えることが重要にもなってきます。そんなときに知っておくと便利なまとめ「30 Free Medical Icon Sets You Can Download」をご紹介していきたいと思います。

circle-medicine-icons_top
Vector Medic – Download Free Vector Art, Stock Graphics & Images

医療向けのアイコンに特化してさまざまな種類・テイストのものがまとめられています。以下にいくつかピックアップいたしましたので、ご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:00  |  
Category: WebDesign   
2011年06月20日

特徴的なデザインのECwebサイト集「25 Ecommerce Web Design Inspiration」

多くの製品がインターネット上で購入できるようになっており、ネットショッピングを利用したことがあるという方も多いと思います。ECサイトデザインの原則の一つとして、アイテムの見やすさと購入のしやすさが求められますが、今回がデザイン性も重視したECwebサイト集「25 Ecommerce Web Design Inspiration」です。


Custom Plastic Bags & Reusable Bags – Custom Bags HQ

ファッションを扱うデザイン力の高さを感じるサイトから、個性溢れるオンラインギャラリーサイトまで、さまざまなECサイトが紹介されています。中でも気になったサイトをいくつかピックアップしましたので以下からご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 07:26  |  
Category: WebDesign   
tag: 
2015年11月26日

ぜひダウンロードしたい クオリティの高さが魅力のモックアップ&テンプレート集「12 Fresh PSD Mockup Templates For Creative Works」

モックアップやテンプレートは、完成度の高いクオリティの高いものが数多く配布されており、常にチェックされている方も多いのではないでしょうか?そんな中今回は、ぜひダウンロードしておきたい、モックアップ&テンプレート集「12 Fresh PSD Mockup Templates For Creative Works」を紹介したいと思います。

moc1126_2
Branding / Identity MockUp Vol.15 | GraphicBurger

webや紙媒体などで使用できるテンプレートが12種、ピックアップされ紹介されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:14  |  
Category: Design   
2009年01月08日

Designの考え方から、プロセスまで「デザインする」をまとめた「[Beta] How do you design?」

皆様はデザインをする時、何を思い、どのような手順でデザインwお行っているでしょうか?今日紹介するのはデザインの考え方やプロセスなどを分かりやすく図説で解説してくれる「[Beta] How do you design?」です。

デザインといってもその意味は広く、ジャンルは多岐にわたりますが、この「[Beta] How do you design?」では様々なジャンルのデザインプロセスがまとめられています。現在PDFで全ページ閲覧できるようになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 05:33  |  
Category: Design   
tag: Design
2013年09月18日

デザインクオリティを手軽にアップできる 20の便利な無料PSDテンプレート「20 New Useful Free PSD Templates for Designers」

デザインをしていて「こんな素材があれば…」と、誰もが1度は悩んだ経験をがあるかと思います。そんな中今回紹介するのは、フリーのPSDテンプレートをまとめた「20 New Useful Free PSD Templates for Designers」です。

psd_0
Twitter Nav UI – 365psd

さまざまなUIや扱いやすいアイコン、オブジェクト郡が揃っていて、すぐに使えそうなものばかりです。中でも気になるものをピックアップしたので下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:34  |  
Category: Design   
2009年05月03日

音楽、画像、テキストなどクリエイティブコモンズライセンスで使えるメディアファイル配布サイトのまとめ

日本でもライセンスの一つとして認知されてきている、創造的な作品に柔軟な著作権を定義するライセンスシステム「Creative Commons」。定めた規定にもよりますが、ライセンスによっては、ルールの上で利用したり、作品に使ったりする事ができます。今日紹介するのはクリエイティブを行なう上で、素材となりうるクリエイティブコモンズライセンスで使える様々なメディアファイルを配布するサイトをまとめたエントリー「30+ Places To Find Creative Commons Media」です。

cclicence01
photo by A. Diez Herrero

メディアのジャンル別にサイトが紹介されています。今日はその中からジャンル別にいくつか紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:17  |  
Category: Design , WebDesign   
tag: Design photo
2011年10月24日

アナログテイストなフリーグランジフォント集「20 Useful Grunge Free Fonts for Web Designers」

制作の際に必ず必要になるフォントにもさまざまな種類がありますが、デザインに華を添えたい時には、個性のあるタイプを選びたいものです。そんなシーンにおすすめの、手づくり感のあるグランジフォントばかりを集めた「20 Useful Grunge Free Fonts for Web Designers」を、今回は紹介したいと思います。


Hee Haw Font | dafont.com

荒っぽさの残る手書き風のデザインから、スタンプなどアナログ感のあるデザインまで、さまざまなフォントが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:51  |  
Category: Design , Font   
2015年05月27日

WordPress構築のサイト制作時に参考にしたい フリーWordPressテーマ20種「20 Fresh and Free WordPress Themes: May 2015」

フリーでたくさんのテーマが配布されているWordPress。非常にクオリティの高いものも多く、活用されている方も多いと思います。そんな中今回は、フリーWordPressテーマ20種「20 Fresh and Free WordPress Themes: May 2015」を紹介したいと思います。

word0527_0
Tiles, free masonry style colorful WordPress theme | Viva Themes

20種の厳選されたWordPressテーマが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: WordPress   
2011年07月23日

CSS3のWEBデザインを簡易化してくれるUIフレームワーク「CSS3 Button UI」

まだまだ対応ブラウザの問題から、コーポレートサイトなどでは導入が難しいCSSですが、スマートフォンなど環境が整ってきたこともあり、利用し始めているという方も多いと思います。今日紹介するのは、角アール、シャドウなどCSS3を利用した表現を簡単に実装できるCSS UIフレームワーク「CSS3 Button UI」です。

予め、CSSが設定されており、簡単なクラスを割り当てるだけで、CSS3をのボタンを再現することができます。

詳しくは以下

コードの呼び出し例は以下のとおり。

上記は画像で貼り付けてありますが、マウスオーバーの処理もセットされていて、実用的に利用できそうです。その他にも角アールのものや文字の前に画像を表示させるものなどがセットされています。その他のデモは配布元の「CSS3 Button UI」からご覧ください。ボタンはCSS3でとお考えの方は是非どうぞ。

CSS3 Button UI

続きを読む
posted 03:20  |  
Category: WebDesign   
2007年12月01日

フリーで使えるphotoshopカスタムシェイプ集「Foliage Shapes (Huge master set)」

標準でphotoshopには音符だったり、吹き出しだったりと、いくつかのカスタムシェイプが登録されていますが、正直ありきたりな物が多く、実用性がありそうで以外と使えなかったりします。そこで今回紹介するのが完全にフリーで使えるフリーカスタムシェイプ集「Foliage Shapes (Huge master set)」です。

customshap.gif

毎月一回の更新で、100ロイヤリティーフリーの物だけを集めて公開されていますので。かなり有用なカスタムシェイプ集です。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:16  |  
Category: Design , Photoshop   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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