TOP  >  UX

Tag : UX

2016年12月06日

クリエイティブなホバーアクションを簡単に実装する「Tilt Hover Effects」

PCで見るWEBサイトの印象を大きく左右するアクションの一つホバーアクション。主にWEB上のユーザー導線上に配されるものだけに、小さいながらも、このアクションが心地よいかでサイトのクオリティを左右するものですが、今日紹介するのはクリエイティブなホバーアクションを実装できる「Tilt Hover Effects」です。

TiltHoverEffects_800x600

一般的に色が変わる、透明度が上がる、画像が切り替わるなどといったものでは無く、複数の画像がズレたり、アニメーションが加わったりマウス座標の位置で見た目が変わったりと、多彩なホバーアクションが簡単に実装できるようになっています。

詳しくは以下

(続きを読む…)

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

UIデザインのベースにできるシンプルなUIフリーサンプル「Ease UI Component Free Sample」

WEBデザインのトレンドの推移は早く、年々あらたなトレンドが生まれては消えていきますが、今日紹介するのはUIデザインのベースにできるシンプルなUIフリーサンプル「Ease UI Component Free Sample」です。

Ease-UI-Component-Free-Sample-prev02

非常にシンプルでスタイリッシュなデザインでブログ、メディア、フォーム、Eコマース、ベースパーツなどなど様々なユーザーインターフェースのパーツが収録されています。

詳しくは以下

(続きを読む…)

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

チャットの開発やデザインのためのUIキット「Chat UI Design Kit」

国内でもスタンダードなコミュニケーションツールの一つチャット。様々なWEBサービスやコミュニティで導入されています。今日紹介するのはそんなチャットの開発やデザインのためのUIキット「Chat UI Design Kit」です。

chatui

「Chat UI Design Kit」ではチャットに必要な様々なユーザーインターフェイスがまとめられています。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:11  |  
Category: Design , vector , WebDesign   
このエントリーをはてなブックマークに追加
2016年07月17日

WEBやアプリの最新のアニメーション事例をまとめた「20 Animated Interfaces: New Ways to Present a Concept」

UI/UXを豊かにそして直感的にしてくれるアニメーション。上手く利用すればWEBサイトやアプリケーションを劇的にブラッシュアップしてくれますが、取り入れるのはなかなか難しいものです。今日紹介するのはWEBやアプリの最新のアニメーション事例をまとめたエントリー「20 Animated Interfaces: New Ways to Present a Concept」です。

city-intro
City intro animation by Vasjen Katro – Dribbble

アプリケーションからスマートウォッチまで全部で20ものアニメーションが纏められていますが、今日はその中から特に気になったものを幾つかピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

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

質の高いUXを与えるためのjQueryプラグイン集「9 jQuery Plugins for Improving Website Navigation」

WEBにとってUXはとても重要な要素の一つ。隅々までサイトを見ていただくためにはここがダメだと利便性が悪く、多くのユーザーに不快な思いを与えてしまいます。今日紹介するのはjQueryで質の高いUXを実現するためのjQueryプラグインを集めたエントリー「9 jQuery Plugins for Improving Website Navigation」です。

jquery05
Intro.js

jQueryを利用した様々な仕組みが紹介されています。クリエイティブであれば良いというものではありませんが、斬新な動きだったり、仕組みだったり、工夫を凝らしたプラグインが集められています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

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

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

2009年07月20日

商用可!砂浜の背景素材を集めた「25 High-Res Beach & Sand Texture Shots (Part 1)」

季節はもうすっかり夏で毎日暑い日が続いていますが、今日紹介するテクスチャは夏らしい季節感を与えてくれるテクスチャ「25 High-Res Beach & Sand Texture Shots (Part 1)」です。

picforpostsand02

タイヤの後が付いたもの、粗いものからさらさらした感じがするものまで、様々なビーチや砂のテクスチャがまとめられています。実際収録されている画像のサンプルが公開されていましたので下記に貼付けておきます。

詳しくは以下

(続きを読む…)

続きを読む
posted 05:57  |  
Category: Design , Photoshop   
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   
2015年03月18日

女性のリップを描くフリーブラシまとめ「An Amazing Set Of Lips Brushes For Free」

ファッションやコスメなどのデザインを手がける際には、女性をイメージさせるグラフィックを使用することも多いと思います。今回はそんなシーンに活用したい、女性のリップを描くフリーブラシまとめ「An Amazing Set Of Lips Brushes For Free」を紹介したいと思います。

kiss3
BRUSHES LIPS by sandralmeyda on DeviantArt

いろいろな表情のリップを描き出せるブラシがまとめて紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:56  |  
Category: Design   
2011年06月16日

手軽にHTML Emailを作成できるフリーテンプレート集「25 Free HTML Email Templates」

読んでもらえる、魅せるメールマガジンを目指すため、HTMLを利用したテンプレートを利用している方も多いはず。しかしHTML Emailを作成するには、時間と手間が掛かります。そこで今回紹介するのは、効率的にHTML Emailを作成するためのHTML Emailテンプレートを集めた「25 Free HTML Email Templates」です。


100+ free HTML email templates | Campaign Monitor

シンプルなレイアウトから、イラストを利用したポップなテイストまで、さまざまなテンプレートが豊富に紹介されています。中でも特に気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:24  |  
Category: Design   
2015年10月31日

1000個もの豊富な種類が揃ったアイコンセット「1000 Icons for Web」

特にwebデザイン制作に便利なアイコン。種類が豊富に揃っているほどデザイン表現の幅は広がっていくと思います。そんな中今回紹介するのは、1000個もの豊富な種類が揃ったアイコンセット「1000 Icons for Web」です。

tinyicon

ミニマルなテイストのアイコンが1000個セットになってダウンロードできるようになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2012年10月17日

秋のさまざままな雰囲気を表現できるテクスチャ&パターンまとめ「150+ Fall Backgrounds: Textures and Patterns」

朝晩の肌寒さを感じるようになり、一気に秋の気配を感じられるようになってきました。そんな中今回紹介するのが、秋のさまざままな雰囲気を表現できるテクスチャ&パターンをまとめた「150+ Fall Backgrounds: Textures and Patterns」です。


Free Texture Grab: Soft Grunge Autumn Textures | inSight Designs’ Blog

イメージ的なパターンから落ち葉や紅葉等の風景テクスチャまで、さまざまな素材が紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:16  |  
Category: WebService   
2010年06月10日

CSS3のみで実現する先進的なフォトギャラリー集「10 Pure CSS3 Image Galleries and Sliders」

角丸、ドロップシャドウ、グラデーションなど今までは画像と組み合わせたり、様々な工夫を用いて表現してた手法が簡単に実装できるCSS3。対応ブラウザも増えてきて、すでに利用されていると言う方も多いと思いますが、今日紹介するのはCSS3のみで実現する先進的なフォトギャラリー集「10 Pure CSS3 Image Galleries and Sliders」です。

css3g01
Turn Your Images Into Polaroids with CSS3

FLASHのような派手なアクションなどはありませんが、CSSだけでここまで表現できる、CSS3の良さを感じることができます。全部で10個のCSS3ギャラリーが公開されていますが、今日はその中から幾つか気になったものを紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:20  |  
Category: WebDesign   
2011年08月03日

web制作に活用したいpsdテンプレート集「25 Free PSD Website Templates」

webを制作する時にさまざまなサイトを参考にする事も多いかと思いますが、デザインのクオリティをアップさせたい、制作時間を少しでも短縮したいという時に役立つpsdテンプレート集「25 Free PSD Website Templates」を今回は紹介したいと思います。


RetroPlate – Free Web Template | Free CSS Templates

テイストや構成などのバリエーション豊かに、実制作に活用できるテンプレートが25種類紹介されています。気になったデザインをまとめましたので、以下よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
2008年03月25日

ロゴマークの素材になりそうなPSDを100個集めた素材集「75 PSD Logos」

簡単にロゴマークを作ってくれ、ロゴマークのアイデアのインスピレーションを得たい。そんな時におすすめなのが、今回紹介する素材集「75 PSD Logos」です。こちらはロゴマークになりそうなモチーフが75個集められて配布されています。

psd-logos.jpg

配布されているPSDのデザインは全体的に少しゴッテリとしったデザインが多いように見受けられます。使えるとするとIT系、WEB系などそっち方面には良く合うデザインだと思います。タイトルには75とありますが配布されているzipには100個のPSDが同封されていました。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:40  |  
Category: Design , Photoshop   
2008年02月02日

Firefoxのタブツールバーにスクロールバーを表示する拡張機能「Tab Overflow Scrollbar」

Firefoxではタブでページを表示することが可能ですが、多くなってくると、ページ送りされてしまいスクロールは小さなボタンで行わないといけないため非常に使い勝手が悪いです。このインターフェイスの悪さを解決してくれるのが、今回紹介するFirefoxアドオン「Tab Overflow Scrollbar」です。

firefoxscroll.jpg

上記の問題を回避するには様々な方法があるとはおもいますが、今回紹介する拡張機能ではタブツールバーにスクロールバーを表示させることで解決しています。ほんの少しのことですが、タブを大量に開いて閲覧する人には非常に便利な拡張機能だと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:12  |  
Category: firefox , Tool   
tag: 

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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