TOP  >  ローディング

Tag : ローディング

2017年01月04日

CSSとテキストで実現するシンプルなローディングアニメーション「text-spinners」

WEBの演出の一つで、UXのストレスを軽減してくれるローディングアニメーション。WEBサイトがだんだんリッチになる中、当たり前の存在になってきていますが、今回紹介するのはCSSとテキストで実現するシンプルなローディングアニメーション「text-spinners」です。

textloading0

通常ローディングアニメーションはいくつかの画像を利用して生成されますが、このアニメーションはCSSとテキストのみで制作されるため非常に軽量です。

詳しくは以下

(続きを読む…)

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

CSSのみで実現するカラフルポップなローディングアニメ「CSS PIN」

WEBサイトに欠かせないUI/UXの一つローディング。この小さなアニメーションで多くのストレスが軽減でき、かつ世界観を表現できます。ローディングアニメーションには様々な作り方がありますが、今回紹介するのはCSSのみで実現するカラフルポップなローディングアニメ「CSS PIN」です。

csspin

全部で10個のローディングアニメーションが公開されており、どれもクリエイティブでポップな印象を受けます。

詳しくは以下

(続きを読む…)

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

CSSのみで制作されたローディングアニメーションセット「CSS Loader」

CSSのみで制作されるアニメーションは軽量でシンプルで非常に使い勝手も良く、国内でもブラウザの制限が商業レベルでも外れてきた今、数多く活用されはじめてきていますが、今日紹介するのはCSSのみで制作されたローディングアニメーションセット「CSS Loader」です。

cssloder

ローディングアニメーションはWEB制作の現場でも比較的利用頻度が高く、最近の画像中心のWEBサイトでは必ずと言っていいほど実装するためCSSのみで利用できるのは非常に魅力的です。

詳しくは以下

(続きを読む…)

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

webサイトなどの読み込み・待機中に利用したい フリーのローディング&プログレスバー13種「13 Free PSD Loading & Progress Bar Designs」

webサイトにアクセスした時や、重たいデータを読み込みする際に使用するローディング&プログレスバー。シンプルなデザインのものが多いですが、しっかりとデザインされたものが配置されていると、サイトクオリティをより高めることができます。今回はそんな時に参考にしたい、フリーのローディング&プログレスバー13種「13 Free PSD Loading & Progress Bar Designs」を紹介したいと思います。

loading1
Dribbble – Round Progress Meter (PSD Freebie) by Marco Moreno

デザイン的に非常に優れ、なおかつフリーで使用できるものが厳選され紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
このエントリーをはてなブックマークに追加
2013年09月23日

クリエイティブなローディングが簡単に実装できるjs「Creative Loading Effects」

回線環境も機器も整ってきて、快適な環境であればほぼストレス無くWEBを閲覧できますが、本当に大きなデータを読み込ませたり、通信環境も考慮すると必要になってくるのがローディングです。ユーザーの待ち時間のストレスを緩和してくれるものですが、今日紹介するのはクリエイティブなローディングが簡単に実装できるjs「Creative Loading Effects」です。

CreativeLoadingEffects

幾つかのエフェクトが予めセットされており、それぞれのエフェクトを指定することで、簡単にローディングを実装することが可能です。幾つかエフェクトの種類についてキャプチャがありますので下記からご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:30  |  
Category: WebService   
このエントリーをはてなブックマークに追加
2013年01月29日

インターフェースを整えるために欠かせないPSD素材まとめ「110 Free Progress / Loading Bar PSD Designs」

WEBサイトを活性化させるためには、WEBデザインの基本的なインターフェースを整えるのはもちろんですが、ページの切り替わりやローディング時にパーセンテージを表示したりと細かいところに気遣うことで、ユーザーの滞在時間も大きく変わってくるもの。そんな中今回紹介するのが、インターフェースを整えるために欠かせないローディングバーなどのPSD素材をまとめた「110 Free Progress / Loading Bar PSD Designs」です。


Progress Bars | Best PSD Freebies

シンプルなテイストから、演出にもこだわったPSD素材が多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:41  |  
Category: Design   
このエントリーをはてなブックマークに追加

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

2009年05月09日

WordPressのフリーギャラリーテーマの決定版「Gallery WordPress Theme」

画像や実績を見せるのに適しているギャラリーページ。普通に静的なページで作ると管理が面倒だし、数が増えてくるとメンテナンスも苦労します。そこで今日紹介するのはwordpressで作るフリーギャラリーテーマ「Gallery WordPress Theme」です。

450x450-release

細かな設定が必要な部分はありますが、Wordpressを用いて簡単に良くあるギャラリーページを構築することができます。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:49  |  
Category: WordPress   
2007年11月12日

Flickrと連携して自分だけのphotobookが作れるWEBサービス「bookr」

Flickrと連携して自分だけのphotoスクラップブックが作れるサービスが今回紹介する「bookr」です。FlickrIDやタグで写真を検索して自分の気に入った写真をスクラップしていくような感じでphotobookが制作できます。

bookr

photobookは本にドラッグすれば追加されます。表紙にタイトルをつけたり、写真にコメントをつけたりとちょっとしたカスタマイズもできるようになっています。もちろんページを増やす事も可能です。さらに制作したphotobookは画面の右下の「publish this book!」を押す事でブログなどに貼付る用のタグも生成する事ができます。

詳しくは以下

(続きを読む…)

続きを読む
posted 07:00  |  
Category: WebService   
2016年02月29日

美しいライン使いとイメージが魅力の手書きフォント12選「12 Beautiful Cursive & Handwritten Fonts To Download」

フォントにもいろいろな種類がありますが、中でも手書きフォントはラフな質感と柔らかいデザイン表現ができるため、重宝される存在。今回はそんな手書きフォント12選「12 Beautiful Cursive & Handwritten Fonts To Download」を紹介したいと思います。

font0229_3
Shorelines Script Font | dafont.com

美しいライン使いとイメージが魅力のフォントが紹介されており、12種という厳選された数ですが、どれも魅力的なものばかり。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Font   
2014年03月31日

1,000通り以上の組み合わせが可能なフェイスアイコン「Avatars and Emoticons Vector Set」

アイコンで表現されることも多い人の顔のビジュアル。同じテイストで何種類も描き出すのはとても大変な作業になってしまいます。そんなシーンに是非利用したい、1,000通り以上の組み合わせが可能なフェイスアイコン「Avatars and Emoticons Vector Set」を今回は紹介したいと思います。

emojiicon

いろいろな表情や髪型のフェイスアイコンが簡単に作り出せるパーツがセットになった、とても便利なフリー素材です。

詳しくは以下

(続きを読む…)

続きを読む
posted 04:02  |  
Category: Design   
2011年04月05日

さまざまな種類の砂利テクスチャまとめ「34 Pebble Textures for A Cool Round Up of Design Choices」

自然に存在する石や砂利は一つとして同じものがなく、デザイン上で石や砂利を使いたいときも、イメージにぴったりな石や砂利を探し出すことは難しいのではないでしょうか?今回紹介するのは、自然に存在するさまざまな石や砂利のテクスチャまとめ「34 Pebble Textures for A Cool Round Up of Design Choices」です。


Pebbles by ~bentan220 on deviantART

大きさや石の種類など、さまざまな砂利のテクスチャ素材が34種類も紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 03:39  |  
Category: Design   
tag: 
2015年02月07日

デザインにハイクオリティなテイストを フリーUIキット集「20+ Flat & Free UI Kits」

1からデザインを手がけることが多いweb制作の世界。しかし時にはコスト面や制作時間の関係でなかなかすべてに手をかけられないこともあるのではないでしょうか?そんな時に参考にしたい、フリーUIキット集「20+ Flat & Free UI Kits」を今回は紹介したいと思います。

uikits0607_1
Dribbble – Free Sketch UI Kit by Pausrr

デザインにハイクオリティなテイストをプラスしながら、高品質なサイトを作り上げることができるUIキットが紹介されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2015年01月16日

フラットデザインのデスクトップビジュアルを手に入れられる「Flat Desk Items」

ビジネス系のwebデザインを手がける際に、ビジネスシーンをイメージとして取り入れることも多いと思いますが、1からビジュアルを作り上げようと思うと意外に大変なもの。今回はそんなシーンにぴったりな素材「Flat Desk Items」を紹介したいと思います。

desktop1

フラットデザインのデスクトップビジュアルがセットでダウンロードできるようになっており、いろいろなデザインシーンで活躍してくれそうです。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:30  |  
Category: Design   
2014年08月20日

ベクター形式のグラフィック素材を集めた「33 Free Vector Graphics and Vector Infographics Resources for Designers」

ベクター形式の素材は、加工が容易に可能だったり、汎用性が高いなどといったメリットがあるため、非常に重宝する存在。今回はそんなベクター形式のグラフィック素材を集めた「33 Free Vector Graphics and Vector Infographics Resources for Designers」を紹介したいと思います。

free140820_1
Travel Background Vector Graphic — DryIcons.com

さまざまな種類のベクターグラフィック、そしてインフォグラフィック作成用の素材がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2015年11月04日

デザイナーがチェックしておきたい 最新のフリーリソース集「50+ fresh resources for designers, November 2015」

デザイナーなら常に最新の素材をチェックしておきたいもの。しかし膨大な数の素材から最良のものを探しだすのはなかなか難しいと思います。そんな中今回は、最新のフリーリソース集「50+ fresh resources for designers, November 2015」を紹介したいと思います。

resources1104_1
AristoTheme Flat File Cms Themes – Agron Sketch Theme

使いやすい・デザイン性のあるフリーでダウンロードできるリソースがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:59  |  
Category: Design   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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