TOP  >  animation

Tag : animation

2018年12月03日

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

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

gazou2

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

詳しくは以下

(さらに…)

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

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

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

codepen-bauble-toggle1
CodePen – Bauble Toggle

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

詳しくは以下

(さらに…)

続きを読む
このエントリーをはてなブックマークに追加
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   
このエントリーをはてなブックマークに追加
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種類のデモを公開しています。

詳しくは以下

(さらに…)

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

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

2016年05月15日

豊富なデザインバリエーションが揃ったフリーアイコンセットまとめ「900+ Free Icons for Web, iOS and Android UI Design」

特にwebデザインなどで多用するアイコン素材。フリーで配布されているものも多数存在しており、常にチェックされているというデザイナーの方も多いかと思います。そんな中今回は、豊富なデザインバリエーションが揃ったフリーアイコンセットまとめ「900+ Free Icons for Web, iOS and Android UI Design」を紹介したいと思います。

icon0513_1
97 free business icons – Freebie Jar

さまざまなテーマで構成された、魅力的なアイコンセットがフリーでダウンロードできるようになっています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Design   
2017年09月10日

フリーで使用できる ブラウザフレームPSDテンプレート「30 Free Web Browser Frame PSD Templates」

クライアントやユーザーの目線に立って試行錯誤し制作したデザインを、クライアントにプレゼンテーションをする際には、実際に使用するシーンを想像させることも大切。そんな時に活用したい、フリーで使用できる ブラウザフレームPSDテンプレート「30 Free Web Browser Frame PSD Templates」を今回は紹介したいと思います。

frame-free01
Flat Vector Chrome Frame by Jeffrey Kam – Dribbble

タイプの違う30種類のテンプレートが集約されています。気になる種類をいくつかピックアップ致しましたので以下よりご覧下さい。

詳しくは以下

(さらに…)

続きを読む
posted 09:00  |  
Category: Tool , WebDesign   
2013年02月07日

音楽を連想できるパターンまとめ「40 Noteworthy Musical Patterns For Free」

スマートフォンやミュージックプレーヤーで音楽を持ち歩く方も多く、音楽は生活の必需品ともなっているのではないでしょうか?今回はそんな音楽を連想できるパターンをまとめた「40 Noteworthy Musical Patterns For Free」を紹介したいと思います。


Pattern / Queen’s music :: COLOURlovers

ポップな雰囲気のイラスト素材から、五線ノートをモチーフにした素材まで、さまざまなパターンが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 08:07  |  
Category: Design   
2018年08月26日

食イメージをポップに彩るアイコンセット「Food & Drinks Icon Set」

素材として使用するアイコンは、ほしいときにほしいものがすぐ取り出せるように、できるだけ多くの種類をストックしておきたいもの。そんな中今回紹介するのは、食イメージをポップに彩るアイコンセット「Food & Drinks Icon Set」です。

capitalist1

ポップで明るい印象の、パステル調のカラーリングで統一されたフードやドリンクのイメージアイコンがセットになっています。

詳しくは以下

(さらに…)

続きを読む
posted 09:00  |  
Category: Design   
2008年02月22日

ベクターデータ、photoshopブラシなどクリエイティブな素材を集めた「Pixlpusher」

先日「様々なベクターデータやデザインに役立つ素材を配布する「Dezignus.com」」という記事で、様々なベクターデータ、photoshopブラシなどクリエイティブな素材を扱っているブログを紹介しましたが、今日紹介するのもそんな素材を配布してくれているブログ「Pixlpusher」です。

ベクターデータ

まだ数は少ないのですが、様々な素材を公開されています。今日はその中からいくつかピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 12:01  |  
Category: Design , Photoshop , vector   
tag: Design vector
2012年03月12日

スタイリッシュなデザインが豊富な有料WordPressテーマまとめ「25 Sleek Blogfolio WordPress Themes」

ページの更新やカスタマイズの自由な操作性が人気のWordPressは、個人のブログやwebページにはもちろん、プロのデザインワークの中でも利用されている方が多いのではないでしょうか?そこで今回紹介するのが、機能性にすぐれた有料のWordPressテーマをまとめた「25 Sleek Blogfolio WordPress Themes」です。


ThemeMin

スタイリッシュなデザイン性はもちろん、iPhone・iPadへの最適化や、有料ならではのきめ細かい機能をもったテーマばかりが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
2014年03月03日

クリエイティブな動きがデザインが実装できる フリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」

魅力的なwebサイトを実現させるためには、他にはないデザインや動きを取り入れることで、より理想に近づけることができます。今回はそんな魅力的な動きを実装できるフリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」を紹介したいと思います。

jqu1403_1
Drop

そのまま利用しても、自分のデザインと組み合わせて使っても、クリエイティブなwebサイトを作り出せるプラグインがまとめられています。

詳しくは以下

(さらに…)

続きを読む
posted 04:35  |  
Category: plugin   
2014年07月30日

敷き詰めて使える花柄パターンまとめ「Create Pretty Designs With Free Seamless Flower Patterns」

パターン素材の中で、比較的定番の部類に入るであろう花柄。女性らしいデザインなどによく利用されます。今回はそんな花柄のシームレスパターンをまとめた「Create Pretty Designs With Free Seamless Flower Patterns」を紹介したいと思います。

flowertex1
seamless vintage rose pattern by dengwei1361159 on deviantART

華やかな印象をあたえてくれる華柄パターンが厳選されまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Design   
2007年10月27日

YouTubeの貼付タグをXHTML 1.0に最適化するGreasemonkeyスクリプト

ブログを運営していたり、WEBを運営したりしているとYouTubeの貼付けタグにお世話になる機会も多いかと思います。WordPressやMovabletypeを始めとする多くのブログツールは「XHTML 1.0」が利用されていますが、実はYouTubeの貼付けタグは「XHTML 1.0」準拠していないそうでW3Cを気にされている方にとっては以前からちょっと話題になっていました。

現状のYouTube貼付タグで「XHTML 1.0」に準拠していない所は以下の通り

* `&rel` は不明な実体参照です。
* 空要素タグは <param /> と書くようにしましょう
* <embed> は Mozilla、MSIE または doti 用のタグです。
* </embed> は Mozilla または MSIE 用のタグです。
* <object> には等価な内容を書くようにしましょう。

手動でも修正できますが、YouTubeを利用するたびに書き直すのは非常に面倒。そこで今回紹介するのはその貼付けタグを自動的に最適化し、XHTML validの状態にしてくれるGreasemonkeyスクリプト「YouTube better embed」です。

変換等の面倒な作業は必要なくインストールするだけで、自動的に変換してくれるのでとても便利です。「XHTML 1.0」準拠にこだわってブログを書いている方はとても便利なスクリプトだと思います。

※このツールを使用するにはfirefoxにGreasemonkeyがインストールされている必要があります。

YouTube better embed – Userscripts.org

続きを読む
posted 03:31  |  
Category: Greasemonkey , Tool   
tag: Tool
2009年11月29日

氷をイメージさせる PhotoShopパターンセット 「WebTreats ETC」

パターンを使ってさまざまな素材感や背景を表現することはデザイナーの方にとって一度は経験したことがあると思います。今回は氷を思わせるようなブルーのパターンセット 「WebTreats ETC」を紹介したいと思います。

ao01

テクスチャの大きさは1024×1024pxとなっており、またパターンはphotoshopのパターンファイル.patで制作されているため簡単に敷き詰めることが可能になっています。いくつかのファイルが公開されていましたので下記に紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 04:26  |  
Category: Design , Photoshop   
tag: 

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。

【ご注意】「Designworks」の旧ホームページドメインを利用したWEBサイトにご注意ください
Template deisgn by iDEACLOUD inc.
トップに戻る