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種類のデモを公開しています。

詳しくは以下

(さらに…)

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

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

2009年07月25日

最新のwordpressのフリーテーマ10選「10 Wonderful WordPress Templates 」

国内外で多く利用されているCMSの一つwordpress。バリエーション豊かなテーマが数多く配布されていると言うのもその魅力の一つです。今日紹介するのは最新の最新のwordpressのフリーテーマを集めたエントリー「10 Wonderful WordPress Templates That are Setting Trends」です。

anewword01
Stylish Grey

全部で10個のテーマが紹介されていますが、今日はその中からいくつか気になったテーマをピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 12:06  |  
Category: WordPress   
tag: WordPress
2018年01月20日

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

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

loading0120

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

詳しくは以下

(さらに…)

続きを読む
posted 09:45  |  
Category: javascript , WebDesign   
2011年11月11日

神秘的な世界を作り上げられるPhotoshopチュートリアル集「30 Creative Photoshop Tutorials To Create Fantastic Art」

写真加工から合成までさまざまな世界を表現できるPhotoshopは、クリエイティブ業界には必須のソフトですが、利用方法や技術はさまざまで、常に勉強が必要なソフトでもあります。そこで今回は、技術を学べるさまざまなPhotoshopチュートリアルの中から、ファンタジックな世界を作り上げられるチュートリアルを集めた「30 Creative Photoshop Tutorials To Create Fantastic Art」を紹介したいと思います。


Create a Pop Art Style Poster with Urban City Background in Photoshop – PSD Vault

絵画のような世界から、リアルな世界観を表現できるチュートリアルまで、さまざまなチュートリアルが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
2010年12月08日

クリエイティブコモンズ、パブリックドメインのピクトグラム素材をsvgで配布する「The Noun Project」

何かをシンプルに伝えるときに非常に便利なピクトグラムアイコン。見た目で直感的になにをあらわしているのか分かる非常に便利なサインですが、今回紹介するのはクリエイティブコモンズ、パブリックドメインのピクトグラム素材をsvgで配布する「The Noun Project」。

現在かなりの数のピクトグラムアイコンが配布されており、種類も豊富ですんどえ、このサイトだけでピクトグラムは事足りるのではないでしょうか?全てではありませんが途中まで読み込んだスクリーンショットを下記に貼り付けておきますのでご覧ください。

詳しくは以下

(さらに…)

続きを読む
2015年11月11日

カナダ・トロントをインスピレーションに 多彩な種類のアイコンが揃う「City Icons」

いろいろな種類のアイコンが配布されていますが、やはり1つのセットで種類が豊富なものは、1つのデザイン制作の中での使い道のバリエーションが増えることもあり、何かと便利なもの。そんな中今回紹介するのは、多彩な種類のアイコンが揃う「City Icons」です。

ctyicon

カナダ・トロントをインスピレーションにデザインされたアイコンがセットでダウンロードできるようになっています。

詳しくは以下

(さらに…)

続きを読む
posted 09:35  |  
Category: Design   
2017年11月20日

カラフルながらもアーティスティックな演出がスタイリッシュな印象を与えるPhotoshopアクションまとめ「Toxic Potion Glitch Actions」

デザインを行っていく上で、素材として非常に重要な役割を果たす写真。写真一つでデザインは大きく左右されます。そんな中今回は、クールで洗練された印象のある画像加工をしたいと思っている方におすすめのPhotoshopアクション「Toxic Potion Glitch Actions」をご紹介していきたいと思います。

Toxic_PotionGlitchActions_top
Toxic Potion Glitch Actions — discover Pixelbuddha Plus design resources library

モノクロ写真はそれだけでクールな印象を与えてくれますが、更にスタイリッシュさを加えることが可能になっています。

詳しくは以下

(さらに…)

続きを読む
posted 09:00  |  
Category: Design , WebDesign   
2009年05月20日

便利に使えるフリーイラストレーターブラシセットのまとめ「30 Sets of High-Quality Adobe Illustrator Brushes」

加工が便利なので、非常に使いやすいillustratorのブラシ。Designdevelopでも以前「illustratorで使えるベクターフリーブラシ「A Huge Compilation of 60 Free Illustrator Brushes」」や「230本収録!マーカーのベクターデータ集「230 Marker Illustrator Brushes」」といくつか紹介していましたが、今日紹介するのもフリーで使えるillustratorのブラシセットをまとめたエントリー「30 Sets of High-Quality Adobe Illustrator Brushes」です。

illburashi01
Celtic Border Brush

水彩系からデジタル系まで幅広いジャンルのブラシが集められています。今日はその中からいくつ描きになった物をピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 11:02  |  
Category: Design , vector   
2015年09月07日

チョークで書いたようなラフな質感が特徴のフォント集「20+ Awesome Chalk Fonts to Download」

デザインにラフな質感をプラスするために、選ぶフォントを手書き風のものにすることで効果が高まることも。今回はそんな質感を手軽に表現できる、チョークで書いたようなラフな質感が特徴のフォント集「20+ Awesome Chalk Fonts to Download」を紹介したいと思います。

chookfont3
Sketch College Font | dafont.com

厳選された、さまざまな質感の手書きフォントが紹介されており、どれも実際に使ってみたくなるものばかりが集められています。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Font   
2013年06月07日

Photoshopをより手軽に利用できるカスタムシェイプセットまとめ「25 Useful Free Photoshop Custom Shape Sets」

デザイン制作にPhotoshopを利用している方も多いと思いますが、アイコンやさまざまなアイテムを制作する際には、Illustratorなどのペイントツールと組み合せて制作することも多いと思います。忙しい業務の中できるだけ制作時間は短縮していきたいもの。そんな中今回紹介するのが、Photoshopをより手軽に利用できるカスタムシェイプセットをまとめた「25 Useful Free Photoshop Custom Shape Sets」です。

dd_shape_01
Banner + Scrolls Custom Shapes by ~redheadstock on deviantART

手書き風のイラストからアイコンまで、さまざまなカスタムシェイプツールが紹介されてみます。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 07:43  |  
Category: Photoshop   
2011年01月31日

奥行きを感じるwebデザインのまとめ「Showcase of Depth and Perspective in Web Design」

基本的には平面でデザインをすることが多いwebサイトのデザインですが、今回は立体的に作り上げられ奥行きを感じることができるwebデザインのまとめ「Showcase of Depth and Perspective in Web Design」を紹介します。


Cupcakes sucrés, salés, pour tous les goûts…

そこにまるで一つの世界があるかのように、独特の空間を見事に表現しています。きになったものをピックアップしましたので、以下よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 10:31  |  
Category: Design , WebDesign   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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

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