TOP  >  webdesign

Tag : webdesign

2019年01月03日

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

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

wickedCSS

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

詳しく以下

(さらに…)

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

2019年のWEBデザインのトレンドは?「20 web design trends for 2019」

2018年も今日で最後となりました。沢山のWEBサイトが今年もリリースされ様々な印象的なデザインや表現手法が生まれました。今回紹介するのは来年2019年の主流になりそうな、WEBデザイントレンドを紹介したエントリー「20 web design trends for 2019」。

webtrednd

2019年以降に来ると言われているデザイントレンドの中から、国内でも同じようにトレンドになりそうなものを、いくつかピックアップして紹介したいと思います。

(さらに…)

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

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

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

gazou2

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

詳しくは以下

(さらに…)

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

自然の風景を表現したコードスニペットまとめ「10 Beautiful Nature Inspired Code Snippets」

デザインの主役となるコンテンツを考えるとき、簡単に取り入れることができるコードスニペットがあると便利ですよね。今回は、デザインをカスタマイズするときに役立つコードスニペットまとめ「10 Beautiful Nature Inspired Code Snippets」を紹介します。

gazou1
Pure CSS Jellyfish

自然の風景をテーマにHTMLやCSS、JavaScriptで作られたコードスニペットがまとめられています。気になったものをいくつかピックアップしましたので、下記からご覧ください。

詳しくは以下
(さらに…)

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

ボヘミアンスタイルの素材まとめ「Incorporate Bohemian Style Into Your Designs FEATURED」

デザインテーマにはさまざまな種類があり、テーマに合った素材を上手に選定することはとても重要な要素の一つ。そんな中今回紹介するのは、ボヘミアンスタイルのデザイン素材をまとめた「Incorporate Bohemian Style Into Your Designs FEATURED」です。

gazou1
Yulia.Podlinnova/1341159-Boho-Bordo-Watercolor-Flowers

ボヘミアンスタイルを象徴する様々なモチーフが、水彩画や手書風のタッチでデザインされています。気になるものをいくつかピックアップしましたので、下記からご覧ください。

詳しくは以下

(さらに…)

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

「学校」をテーマにした50種類の無料でつかえるアイコンセット「50 Free back to school icons」

希望のテーマに合ったアイコンセットを使うことで、デザインに個性と統一感を与えることができます。今回は「学校」をテーマにしたイラストアイコンセット「50 Free back to school icons」を紹介します。

gazou1

ノートやリュック、ペンや定規など、「学校」をテーマにした50種類のかわいらしいデザインを無料で利用することができます。

詳しくは以下

(さらに…)

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

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

2011年11月30日

デザイン性の高いイベント告知サイトまとめ「32 Nice Event Websites」

企業やショップなどを紹介する常設のサイトと、スペシャルコンテンツ・イベントなど短期間のみ利用するサイトと、webサイトにはまったく主旨の異なる2タイプのジャンルが存在しています。そんな中から今回紹介するのは、イベント告知用に設置された趣向性の強いデザインをまとめた「32 Nice Event Websites」です。


Full Frontal 2011- JavaScript Conference

イベント内容を単刀直入に伝えるデザインから、イベントの雰囲気をイメージ的に伝えるデザインまで、さまざまなテイストのwebサイトが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
2013年12月03日

日常の道具をテーマにした可愛いアイコン集「ictograms Giveaway Reloaded」

日常に溢れるさまざな道具は生活で役に立つと同時に、デザインに取り入れられる機会も多いのではないでしょうか。今回紹介するのはそんな、日常で利用される道具をテーマにしたアイコン集「Pictograms Giveaway Reloaded」です。

igr_0

パソコンや文房具、ゲーム機や家電、カメラやスマートフォンなど、70種類もの多種多様なアイコンが取り揃えられています。

(さらに…)

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

ローカルHDDの様に使える1GBオンラインストレージ「OpenDrive」

いままでいくつかのオンラインストレージを紹介してきましたが、今回紹介する「OpenDrive」は少し変わっていて、まるでローカルで管理しているハードディスクのように扱えるオンラインストレージです。

上記のようにエクスプローラの上にドライブが追加され、Windowsのエクスプローラからオンラインストレージが利用できるというものです。もちろん容量の確認したり、URLのパスなんかもデスクトップ上で確認できます。 XPとビスタで使用しているスクリーンキャストがyoutube上にアップされていましたので、下記からご覧ください。

動画は以下から

(さらに…)

続きを読む
posted 04:46  |  
Category: WebService   
2009年12月27日

ベストフリーテクスチャセット2009「The Best Free Texture Packs of 2009」

制作する上で雰囲気づくりに便利なテクスチャ。様々なテクスチャを今年、Designdevelopでも紹介してきましたが、今日紹介するのは海外のブログWDLが発表している2009年のベストテクスチャセットを集めたエントリー「The Best Free Texture Packs of 2009」です。

texture01
Grungy Textures by ~env1ro on deviantART

グランジ、ビンテージ、ウッドなどなど、テクスチャの種類毎に様々なタイプのテクスチャセットが公開されています。今日はその中からいくつか気になったものを紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 02:21  |  
Category: Design , Photoshop   
2008年03月12日

優雅なWEB制作のためのJavaScript「yuga.js」

派手なアクションや演出はありませんが、WEBサイト構築において、ちょっとした気の利いた所を押さえているjavascriptが今回紹介するJavaScript「yuga.js」です。

yugajs.jpg

簡単に導入できる上に「jQuery」を使って様々な事が簡単なコードで実現可能です。優雅なWeb制作のためのJS サンプルと銘打っているだけあって実相もシンプルでわかりやすいJavaScriptになっています。

詳しくは以下

(さらに…)

続きを読む
posted 06:48  |  
Category: WebDesign   
2013年03月15日

Photoshopの写真エフェクトに強くなるチュートリアルまとめ「33 Amazing Photoshop Photo Effect Tutorials」

デジカメで画質の奇麗な写真が手軽に撮影できるようになってきていますが、撮影した写真に雰囲気をプラスするには、レタッチのための技術が必要になります。そんな中今回紹介するのが、Photoshopの写真エフェクトに強くなるチュートリアルまとめ「33 Amazing Photoshop Photo Effect Tutorials」です。


HDR Photography With Photoshop CS5 | Psdtuts+

レトロテイストな加工ができるチュートリアルから、肌の質感を美しくレタッチできるチュートリアルまで、さまざまな技術が紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
2011年02月09日

WEBデザイナー、開発者が使えるWEBツール集「8 Useful Online Tools for Web Designers and Developers」

多くの業務が必要となるWEB構築、できることなら少しでも時間を短縮したい物。今日はWEBを構築する上で便利なツールを集めたエントリー「8 Useful Online Tools for Web Designers and Developers」を紹介したいと思います。


0 to 255

設計の部分から、デザインの部分、パーツの生成など様々なオンラインツールがまとめられていました。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 01:38  |  
Category: WebService   
2012年07月09日

虹色の7色を利用した素材まとめ「65 Great Rainbow Textures, Patterns and Backgrounds」

夏が近づくと、より明るくカラフルなイメージのデザインも増えてくるのではないでしょうか?そこで今回紹介するのが、虹色の7色を利用したテクスチャ、パターン、背景素材をまとめた「65 Great Rainbow Textures, Patterns and Backgrounds」です。


Colorful Whirlpool Vector Background | Flickr – Photo Sharing!

カラフルで楽しい気分になれそうな素材が豊富に紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 08:21  |  
Category: Design   
2009年03月08日

計器やインターフェイスなどデジタル系のphotoshopブラシセット「850+ Super Cool Tech Brushes」

WEB上では様々なphotoshopブラシが公開されていますが、今日紹介するのはサイバー、デジタル系のイメージのブラシを集めたまとめエントリー「850+ Super Cool Tech Brushes」を紹介したいと思います。

degitaldephoto01
200 Tech Brushes

デジタル系と言っても様々なモチーフが公開されています。今日はその中からいくつかピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 02:22  |  
Category: Design , Photoshop   
2013年10月04日

美しいフラットデザインのWordPressフリーテーマまとめ「25 Beautiful Flat and Free WordPress Themes」

オープンソースのCMSとして最もポピュラーなWordPress。フリーのテーマも数多くリリースされていて、すでにさまざまなシーンで活用されています。そんな中今回紹介するのは、フラットデザインのWordPressテーマをまとめた「25 Beautiful Flat and Free WordPress Themes」です。

25bfafwt_0
WordPress › Pitch « Free WordPress Themes

シンプルなものから機能的なものまで、テーマによってさまざま見せ方を演出することができるテーマが揃っています。中でも気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: WordPress   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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

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