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年01月23日

美しいphotoshopパターン集50「50 ExtrBeautiful Photoshop Patterns for Elegant Designsemely 」

様々なシーンに利用出来るphotoshopパターン。デザインの完成度を飛躍的に向上させてくれる便利なものですが、今日紹介するのは、ハイクオリティなパターンを集めたエントリー「50 Extremely Beautiful Photoshop Patterns for Elegant Designs」です。


Exotic Polkadots Patterns

様々なデザイン感のパターンが全部で50集められています。今日はその中からいくつか気になったパターンを紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:46  |  
Category: Design , Photoshop   
2008年08月07日

画像の保存をプロテクトするJavaScript「dwProtector」

WEBに掲載する以上、画像をローカルに保存されると言う事は仕方が無い事だと言う認識が主流だとは思いますが、それは避けたい、あまり保存されたくないと思っている方にオススメなのが、今回紹介するJavaScript「dwProtector」です。

dwProtectorは「右クリックによる名前をつけて保存」「ドラッグ&ドロップで保存」「右クリックで名前をつけて背景を保存」「背景画像を表示」からの画像保存をプロテクトしてくれます。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:33  |  
Category: WebDesign   
2008年01月12日

PDFをオンラインでページ構成を編集できる「PDF Hammer」

PDFファイルのページの順番を変え得たい。もしくはページを削除したい場合にWEB上で編集できるのが今回紹介する「PDF Hamme」です。このツールはローカルからPDFファイルをアップロードしてページ構成を編集できるWEBサービスです。

PDFを編集できるオンラインサービス

テキストの編集や高度な編集はできませんが、単純にページを並び替えたり、削除したりする事ができます。出先でどうしてもページ構成を変更したいなんて時には便利なWEBサービスです。

詳しくは以下

(続きを読む…)

続きを読む
posted 05:56  |  
Category: WebService   
2014年06月25日

デザイナーがチェックしておきたい最新フリーフォントまとめ「12 Newest Free Fonts for Designers」

日々新しいものがどんどんと誕生しているデザインフォント。常にチェックされている方も多いのではないでしょうか?そんな中今回紹介するのは、デザイナーがチェックしておきたい最新フリーフォントまとめ「12 Newest Free Fonts for Designers」です。

f0nt140626_1
firsttype.portfoliobox.me

デザイナーとして活躍されている方、デザインを手がけている方なら是非知っておきたいデザインフォントがまとめられています。

詳しくは以下

(続きを読む…)

続きを読む
posted 08:43  |  
Category: Font   
2010年05月18日

2010年のWEBトレンドをまとめた「Web Design Trends for 2010」

WEBデザインにも流行り廃りが合って、デザインのテイストや技術は毎年大きく変わっています。今日紹介するのは2010年のWEBトレンドをまとめたエントリー「Web Design Trends for 2010」です。

newtrend01

去年後半からの流れも大きく反映されているので、今年これからのというよりは、今のトレンドをまとめたというような感じだと思います。今回はまとめられているトレンドの中からデザインの部分を中心にいくつか紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:58  |  
Category: WebDesign   
tag: webdesign
2012年12月09日

【商用可】300個のアイコンをセットにしたフリーアイコンセット「Batch.」

WEBデザインに限らず、その作り込みや分かりやすさでデザインの精度を左右する要素アイコン。アイコンを作りこむにはかなりの時間を要しますが、今回紹介するのはそんなアイコン制作の手間を軽減してくれる、300個のアイコンをセットにしたフリーアイコンセット「Batch.」です。

全部で300以上のアイコンがセットになっており、スタンダードなものから少し変わったものまで、考えられるアイコンは粗方押さえられています。

詳しくは以下

(続きを読む…)

続きを読む
2018年01月19日

バレンタインのデザインに活用できるフリーアイコンセット「Valentine’s Day Icon Set」

間もなくやってくるバレンタイン。すでにイベントなどで活気ついていると思いますが、そんな中今回紹介するのは、バレンタインのデザインに活用できるフリーアイコンセット「Valentine’s Day Icon Set」です。

valentine0119_2

可愛らしい、ピンクやレッドなどのバレンタインを連想させるカラーが印象的なポップなアイコンがセットでダウンロードできるようになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 06:22  |  
Category: Design   
2010年06月15日

IE6〜IE8をCSS3に対応させるスクリプト「Kick-ass CSS3 Support in IE6, 7, and 8」

WEBサイト構築においてもはや常識となったCSS。新たな仕様のCSS3が整備されつつあり、表現の幅をさらに広げてくれるものになっていますが、最新のブラウザのみ対応しており、IE6のようなシェアがある旧世代のブラウザは対応していないというのが現状です。そこで今日紹介するのはIE6〜IE8をCSS3に対応させるスクリプト「Kick-ass CSS3 Support in IE6, 7, and 8」です。

screen-shot-2010-04-23-at-20142-pm-500x150

全てのCSS3のプロパティが適応されるのではなく、角を丸くしたり、ボックスに影を入れたりテキストに影を入れたりといったCSS3の機能をスクリプトにyほって再現するというものです。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:07  |  
Category: WebDesign   
2014年05月10日

多彩な種類のフリー素材をまとめた「50 Freebies for Designers from April 2014」

インターネット上では非常にたくさんのフリー素材が配布されていますが、目的に応じて合った種類を探し出すのは意外に時間がかかってしまったりするもの。今回はそんなシーンを軽減するために知っておきたい、多彩な種類のフリー素材をまとめた「50 Freebies for Designers from April 2014」を紹介したいと思います。

free0509_1
Dribbble – Free Portfolio Template Design (PSD) by Vitaliy Dvoretsky

フォントやアイコン、テクスチャ、UIといった、よく利用される素材がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

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

アレンジ次第でさまざまなデザインに利用可能なフリーコンクリートテクスチャ「9 Free High-Res Concrete textures」

webやグラフィックのデザイン制作に欠かすことができない素材の中でも、使用頻度の高い写真テクスチャ。シンプルなもの程アレンジの幅が広く、非常に重宝するのではないでしょうか?今回はそんなコレクションに是非加えたい、フリーコンクリートテクスチャ「9 Free High-Res Concrete textures」を紹介したいと思います。

concrete3

比較的シンプルなタイプのコンクリートを撮影したテクスチャが9種類収録されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 08:47  |  
Category: Design   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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