TOP  >  ユーザーインターフェイス

Tag : ユーザーインターフェイス

2019年01月07日

様々なサービスのUIサウンドを集めた「UI Sounds」

エラー・許可・着信などなど、優れたユーザーインターフェイスは視覚だけではなくて、直感的にわかりやすい音があり、表示されるユーザーインターフェイスに組み合わせることで、ユーザーがどのようなことをしたかの理解を早めてくれます。今日紹介するのはそんなユーザーインターフェイスの音を、様々なサービス別に集めたWEBサイト「UI Sounds」です。

uisound01

今までユーザーインターフェイスをまとめて紹介するサイトは多数ありましたが、こうして音に注目したサイトは珍しいと思います。

詳しくは以下

(続きを読む…)

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

フリックやグリッド生成など様々なUIが簡単に実現できるjsライブラリ「egjs」

数多くの情報を整理し分かりやすく表現するために様々なユーザーインターフェイスが開発されてきましたが、今回紹介するのはフリックやグリッド生成など様々なUIが簡単に実現できるjsライブラリ「egjs」です。

egjs01

実現できるユーザーインターフェイスは全部で4つ。タッチアクションから座標位置を取得するeg.MovableCoord、シンプルなフリックeg.Flicking、要素がビューポート内に存在するかを確認できるeg.Visible、グリッドスタイルをループで生成するeg.infiniteGridとなっています。

詳しくは以下

(続きを読む…)

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

現在のナビゲーションのトレンドを多方面から分析した「Up and Coming Navigation Trends」

Webサイトを制作する上で、ナビゲーションの設計はユーザーが最も触る部分だけに非常に重要な要素の一つであるといえます。同じWebサイトであっても、ナビゲーションの設計が上手く出来ているかどうかでユーザビリティはかなり変わってくるのではないでしょうか。そこで今回は、ナビゲーションのトレンドを多方面から分析した「Up and Coming Navigation Trends」を紹介します。

uacnt_0
Lack of navigation – Socket Studios 2013

ナビゲーションを取り払ってしまった例や、コンテンツを見せるために最小限に抑えたもの、全体的な閲覧の流れを作るなど、さまざまに工夫されたナビゲーションの事例が紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。

(続きを読む…)

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

2014年に消えていくであろうWebトレンド「Web Design Trends That Will Disappear in 2014」

リッチからフラットへとデザインのトレンドが変わってきているように、Webにおいても時代のトレンドや利便性の向上を目指して、新たなトレンドが生まれると共に古いトレンドが消えていく、そういった進化の道を歩んでいます。今回紹介するのは2014年のWebでは見なくなるであろう古いトレンドたち「Web Design Trends That Will Disappear in 2014」です。

wdttwdi_0

昔はよく見たけれど最近はあまり見かけなくなってきた、そんなトレンドたちが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。

(続きを読む…)

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

キーワードからUI事例や素材を検索できるWebサービス「UI Cloud」

UI(ユーザーインターフェース)とは、ユーザーがコンピュータを操作する際の画面表示やナビゲーション、全体的な操作感のことを示し、これはWebサイトを不便なく閲覧する上で非常に多くのなウェイトを占めています。今回紹介するのはそんなUIに絞って事例や素材を検索できるWebサービス「UI Cloud」です。

uicloud_0

これは入力したキーワードを基にUIを検索して、表示された結果から各種素材データがダウンロード出来るというもので、クリエイター向けのサービスとなっています。

(続きを読む…)

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

新しいユーザーインターフェイスを利用できる「10 Free UI Kits」

インターフェイスは日々進化しており、デザインの流行り廃りデバイスの進化などを含めて多様化そして変化してきています。今日紹介するのは、最近リリースされているユーザーインターフェイスをセットにして利用できるインターフェイスキットを集めたエントリー「10 Free UI Kits」です。

css_ui_kit_02
Pure

最近流行りのフラットデザインからスタンダードなものまで、様々なユーザーインターフェイスキットが紹介されていますが、いくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

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

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

2017年11月13日

音楽・ゲーム関係のデザインに最適なフリーアイコンパック「EXCLUSIVE: FREE GEEK TECH ILLUSTRATIONS PACK」

音楽系のデザインをする際、楽器などのアイコンは多くありますが、少しマニアックなものとなるとなかなか見つからないもの。そんな中、今回ご紹介するアイコンパック「EXCLUSIVE: FREE GEEK TECH ILLUSTRATIONS PACK」は、音楽関連に特化したものとなっています。

GEEK_TECH_ILLUSTRATIONS_PACK01

くすんだレトロな色合いが可愛らしいアイコンがセットでダウンロードできるようになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:08  |  
Category: Design , WebDesign   
2015年03月12日

さまざまな種類のフリー紙テクスチャ素材まとめ「A Collection Of Awesome And Free Paper Bag Textures」

テクスチャの中でも、特によく利用する種類として挙げられる紙素材。いろいろな場面で便利に活用することができます。今回はそんな紙テクスチャをまとめた「A Collection Of Awesome And Free Paper Bag Textures」を紹介したいと思います。

pepartx1
Whitewashed Paper Bag by FelixMendoza on DeviantArt

ブラウンカラーをベースとした紙がテーマのテクスチャ素材が紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

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

WEB上で雪の結晶を生成できるスノーフレークジェネレータ「Snowflaker」

この季節になると必ず1度は利用するデザイン素材、雪の結晶。素材を探したり、自分で創ったりとありふれた素材なので、それほど難しいものではありませんが、思い通りのものを見つけようとすると時間がかかります。今日紹介するのはWEB上で雪の結晶を生成できるスノーフレークジェネレータ「Snowflaker」です。

snowflaker01

このスノーフレークジェネレータ「Snowflaker」では、雪の結晶の線幅や結晶の複雑さを任意で設定し、svgフォーマットで生成・ダウンロードができるというものです。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:30  |  
Category: Design , vector , WebDesign   
2008年06月16日

クールな3Dフォトギャラリージェネレーター「FotoViewr」

写真を綺麗にクールに見せたい。そんな要望は良く聞きますが、なかなかフルオリジナルで作ると高くついてしまったり、自分で作る場合も時間がかかってしまったりまします。そこで今回紹介するのはクールな写真ギャラリーが簡単に生成できるサービス「FotoViewr」。

写真はFlickrからの読み出しになりますが、簡単に3Dフォトギャラリーを生成できます。

詳しくは以下

(続きを読む…)

続きを読む
posted 06:17  |  
Category: WebDesign   
2018年03月25日

デザインをもっと魅力的にするハイレベルなテキストエフェクトチュートリアルまとめ「New Free Text Effect Photoshop Tutorials (30 Tuts) 」

テキストをリッチに装飾して印象的に見せてくれるテキストエフェクト。エフェクトによってがらりと全体の印象が変わるので、重宝します。今回ご紹介するのは、そんなテキストエフェクトを制作する際に役立つ、ハイクオリティなチュートリアルまとめ「New Free Text Effect Photoshop Tutorials (30 Tuts) 」です。

new-free-text-effect-photoshop-tutorials1
New York text effect photoshop tutorial on Behance

レトロな雰囲気のエフェクトから、ポップな雰囲気のエフェクトまで多数のテイストのテキストエフェクトが30種類揃っています。

詳しくは以下
(続きを読む…)

続きを読む
2009年11月28日

WEBのモックデザインを作る時、便利な素材集「A Collection of Useful Web Design Wireframing Resources」

WEBデザインのモックを制作する時に、クライアントにもっとアップ時の雰囲気を分かってもらう時に必要なのがブラウザ枠などをはじめとしたインターフェイスのデザインです。今日紹介する「A Collection of Useful Web Design Wireframing Resources」はそんなインターフェイスの素材をあつめたモックデザインを作る時、便利な素材集です。

wirefram01
Photoshop Browser Templates from joel laumans

上記は解像度別のブラウザのpsdデータ。PSDで制作を進めている方には便利な素材だと思います。その他にも様々なデータがまとめられていましたので、下記に貼付けておきます。

詳しくは以下

(続きを読む…)

続きを読む
posted 03:32  |  
Category: Design , Photoshop , vector   
2015年01月22日

webデザイン・構築をもっと手軽に フリーHTMLテンプレート集「20 Fresh & Free HTML Templates」

webサイトの制作時に、フリーで使用できるHTMLテンプレートがあると非常に作業効率がよくなり、さらに手軽にデザインクオリティも高めることができます。今回はそんなフリーHTMLテンプレート集「20 Fresh & Free HTML Templates」を紹介したいと思います。

html0122_1
Portfolio Template

シンプルテイストなデザインを中心に、現在のwebトレンドをしっかりと抑えたデザイン性のあるテンプレートがまとめられています。

詳しくは以下

(続きを読む…)

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

手軽に高品質なグラフィック表現ができるフリーPhotoshopブラシまとめ「40 High-Resolution and Free Photoshop Brush Packs」

Photoshopに搭載されている機能の中で、多くのデザイナーによく利用されているブラシツール。フリーで配布されているものを取り込むことで、さまざまな表現が可能になります。今回はそんなブラシを集めた「40 High-Resolution and Free Photoshop Brush Packs」を紹介したいと思います。

brush0519_1
Dribbble – Free Subtle Brush Set by Jack Fahnestock

手軽に高品質なグラフィック表現ができるフリーPhotoshopブラシがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Photoshop   
2015年08月07日

デザイナー必見 チェックしておきたいフリーベクター素材集「30 Free Vectors All Designers Need」

アレンジが効き、拡大縮小などの可変にも劣化することなく対応できるフリーベクターデータ。非常に便利な素材で重宝すると思います。そんなチェックしておきたいフリーベクター素材集「30 Free Vectors All Designers Need」を今回は紹介したいと思います。

vector0808_1
Web elements vector icons Vector | Free Download

アイコンやテンプレート、パーツなど、さまざまな種類のベクターが展開されています。気になったものをピックアップしましたので下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2009年03月09日

動物から昆虫まで様々なシルエットベクターデータ「Animal Silhouettes in Vector Format」

汎用性のあるシルエットデータ。使い方次第で様々なツールに使えます。今日紹介するのは動物から昆虫まで様々なシルエットベクターデータを集めた「Animal Silhouettes in Vector Format」です。

shiletvector01
Vector Birds – Vector Birds

沢山のベクターデータが公開されていますが、今回は気になったベクターデータをいくつかピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:20  |  
Category: Design , vector   
tag: Design vector

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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