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

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

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

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

詳しくは以下

(続きを読む…)

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

クリエイティブで洗練されたユーザーインターフェイスを実現できる「Square UI Free」

ユーザーの印象を決定づける一つの大きな要素としてインターフェイスがあります。ここの部分が一貫したテーマをもって制作されているとサイトやサービスのデザイン性は一気に高まり、世界観を構築してくれるものです。今日紹介するのはクリエイティブで洗練されたユーザーインターフェイスを実現できる「Square UI Free」です。

少し落ち着いたトーンの洗練されたユーザーインターフェイスの素材がまとめてダウンロードできます。

詳しくは以下

(続きを読む…)

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

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

2010年01月01日

ページの真横からスライドで表示されるサブページを実現する「jQuery pageSlide」

軽量なjavascriptライブラリjQuery、かなり高機能で、様々な表現ができますが、今回紹介するのはjQueryを利用して、ページの真横からスライドで表示されるサブページを実現する「jQuery pageSlide」です。

jquery-pageslide-screenshot

上記のようにメインコンテンツエリアを、ヨコにスライドして、サブページが表示されます。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:48  |  
Category: WebDesign   
2017年09月12日

フリーの手描きフォントまとめ「20 Amazing Free Handwriting Fonts For Your Next Project」

お店の看板やショップカード、ロゴなど、最近では手描き風のフォントが使用されているのをよく目にします。手描きフォントは女性らしい表現から大胆な表現まで、幅広い表現が可能な優れもの。今回はそんな、フリーの手描きフォントまとめ「20 Amazing Free Handwriting Fonts For Your Next Project」を紹介します。

tegaki_font01
Mightype Script – Free Handlettered Font on Behance

タイプの違う手書きフォント20種類がまとめて紹介されています。気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:35  |  
Category: Font   
2009年07月11日

素晴らしいWordPressのフッターデザイン集「20 great WordPress Footer Designs for Inspiration」

WEBのインターフェイスで重要な要素の一つフッターその使い方は様々で単純にコピーライトをいれる場合もあればナビゲーションとして有効活用されている場合もあります。今日紹介するのはwordpressで作られた上手くフッターを活用している例を集めたエントリー「20 great WordPress Footer Designs for Inspiration」を紹介したいと思います。

footwp01
Web Development & Design Tutorials – Nettuts+

主にナビゲーションに使われている例が多いのですが、その見せ方も様々です。今日はその中からいくつか気になったものを紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 01:52  |  
Category: WebDesign , WordPress   
2010年10月01日

ヴィンテージ&レトロな雰囲気をワンクリックで加工するphotoshopアクション集「40+ Vintage and Retro Photoshop Actions」

デザインにもう一つ質感を加えるときに、一つの手として、写真を古びた雰囲気に加工して、世界観を演出したり、現実味をなくしたりしますが、今回紹介するのはそんな補正を一瞬でかなえてくれる、ヴィンテージ&レトロな雰囲気をワンクリックで加工するphotoshopアクション集「40+ Vintage and Retro Photoshop Actions」です。


photoshop actions – 139 (8 actions)

ヴィンテージ、レトロといっても様々な表現があり、明るめのものから単色によったもの、色あせたものなどのアクションがまとめられています。今日はその中から幾つか紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 08:57  |  
Category: WebService   
2009年10月06日

WEBで使える1000のフリーミニアイコンセット「Free Farm-Fresh Web Icons」

WEBを制作する際に非常に便利なのがアイコン。細部のクオリティを高めてくれたりユーザーインターフェイスを補完してくれたりと様々な役割を担っていますが、今回紹介するのはWEBで使えそうなミニアイコンを1000個セットにしたアイコンセット「Free Farm-Fresh Web Icons」です。

free1000icon01

システム的なアイコンから、ユーザーサイドなものまで様々なアイコンがセットで公開されています。アイコンの配布サイズは16×16px、または32×32pxで個別もしくは1000個セットでダウンロードすることができます。下記に収録されているアイコンの一部を紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:29  |  
Category: WebDesign   
2014年11月13日

デザイン性を求めるサイトにおすすめ フリーフォームデザインまとめ「14 Free Creative Form Designs」

名前やメールアドレスなどのユーザー情報を入力する際に利用するフォーム。基本シンプルなデザインのものが多い印象ですが、今回紹介するのはクリエイティブなデザインが特徴のフリーフォームデザインまとめ「14 Free Creative Form Designs」です。

form1112_2
Contact Form – Rock Background – Form Templates

デザイン性を求めるサイトにおすすめな、14種のフォームデザインテンプレートが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

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

web・モバイルサイト制作に活躍するアイコンセットをまとめた「30 Free Web and Mobile Icon Sets from 2014」

インターネットやスマートフォン・タブレットなどの各種媒体のデザインにおいて、欠かすことのできない存在となっているアイコン。限られたスペースであっても、イラストによって手軽に意味を表現できる存在として重宝されています。そんな中今回紹介するのは、web・モバイルサイト制作に活躍するアイコンセットをまとめた「30 Free Web and Mobile Icon Sets from 2014」です。

icon140624_1
Download 100 Free Line-Style Icons | Elegant Themes Blog

たくさんの種類のアイコンが紹介されており、ストックしておくことで便利に利用することができるようになっています。

詳しくは以下

(続きを読む…)

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

システムアイコンからアプリアイコンまで170のアイコンを収録したアイコンセット「170 dock icons」

いまいちディフォルトのアプリケーションのアイコンにピンときていないという方におすすめなのが、今回紹介するアイコンセット「170 dock icons」です。

全部で170のアイコンが収録されていて、ワードやエクセルといったアプリケーションアイコンから、Finderやwifiなどのシステムアイコンやが収録されています。

詳しくは以下

(続きを読む…)

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

Illustratorのスキルを磨くのに役立つ「25 Cool Adobe Illustrator Tutorials」

Illustratorが使えるようになっても、いろいろなグラフィック表現を実際に制作するのは難しいもの。そこで今回は、Illustratorのスキルを磨くのに役立つ「25 Cool Adobe Illustrator Tutorials」を紹介したいと思います。


Create a Badass Gas Mask in Illustrator | Abduzeedo | Graphic Design Inspiration and Photoshop Tutorials

25種類のベクターデータのイラストの作り方が、親切にわかりやすく紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
2012年08月26日

注意や案内を促すためのNotificationを実現するjQueryのまとめ「20 Useful jQuery Notification Plugins and Tutorials」

多様化するWEBサイトの中で、様々なユーザーが迷わないような工夫が施されていますが、今回紹介するのはその中でも、注意や案内を促すためのNotificationを実現するjQueryをまとめたエントリー「20 Useful jQuery Notification Plugins and Tutorials」です。


jQuery “growl-like” notification plugin

Notificationといっても、アラート的なものから、メッセージの数を知らせるものなど様々ですが、今日は紹介されているものの中からいくつかピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

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

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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