コンテンツをつかんで横にスクロール つかむ操作が苦手な方には上部の「OPEN MENU」をクリックすると、ナビゲーションから各コンテンツに遷移できます。縦のつかむはマウスのホイールでも同様に動作します。 各コンテンツは個別URLが発行されているので、直接アクセスすることも可能みたいですね。 Blog
コンテンツをつかんで操作する新感覚ウェブサイト -Grip
コンテンツをつかんで横にスクロール つかむ操作が苦手な方には上部の「OPEN MENU」をクリックすると、ナビゲーションから各コンテンツに遷移できます。縦のつかむはマウスのホイールでも同様に動作します。 各コンテンツは個別URLが発行されているので、直接アクセスすることも可能みたいですね。 Blog
ツールチップの機能、デザイン選びたい放題のjQueryのツールチッププラグイン３０まとめ:phpspot開発日誌
ツールチップの機能、デザイン選びたい放題のjQueryのツールチッププラグイン３０まとめ 2010年01月26日- 30 Stylish jQuery Tooltip Plugins ツールチップの機能、デザイン選びたい放題のjQueryのツールチッププラグインが３０種類もまとまったエントリのご紹介です。 jQueryだけでこれだけあるというのは驚きなのですが、ツールチップに迷った時とかのために参考に出来そうです。 個人的には、cssでデザインできてエレメントに属性を振っておくと自動で出てくるタイプのものがいいなぁと思います。あとはアニメーション効果などもカッコいいものがいいですね
MdN Design｜総合情報サイト
第5回「パワフルなCSS/JavaScriptテクニック45」 2010年01月25日 翻訳元サイト：Smashing Magazine http://www.smashingmagazine.com/ 原文：45 Powerful CSS/JavaScript-Techniques http://www.smashingmagazine.com/2010/01/12/45-powerful-css-javascript-techniques/ 著者：Smashing Editorial 翻訳：中野恵美子 ※本記事は「Smashing Magazine」様より許可を得て翻訳、掲載しています CSSやJavaScriptはデザイナーやディベロッパーにとって、極めてパワフルなツールだ。しかし、使いこなすためのアイデアを得るのはなかなか難しい。ただ、デザイナーやディベロッパーはほとんど毎日、新し
ユーザーの進捗を明示する「プログレストラッカー」詳解
オンラインストアでの注文やフォームなどで、ユーザーの進捗を明示するプログレストラッカーの概要や特長、実装例、よくある間違いなどをSmashing Magazineから紹介します。 Progress Trackers in Web Design: Examples and Best Practices 以下はそのポイントを意訳したものです。 1. プログレストラッカーとは？ 2. プログレストラッカーとパンくずの相違点 3. プログレストラッカーの活用 4. プログレストラッカーのベストプラクティス 5. プログレストラッカーの実装 6. プログレストラッカーのよくある間違い 7. プログレストラッカーのショーケース 1. プログレストラッカーとは？ プログレストラッカーとは進捗を明示するもので、複数のステップがあるプロセスを完了するためにユーザーの手助けとなるものです。 オンラインのプロダ
[JS]jQueryのプラグイン33+1選 -2008年5月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Kwicks スムーズに伸び縮み。 Horizontal Accordion 水平方向のアコーディオン。 Accordion Con
滑らかにアニメーション動作してナビゲーションにも使えそうな1KBのアコーディオンＵＩ:phpspot開発日誌
Horizontal JavaScript Accordion 1kb - Web Development Blog 滑らかにアニメーション動作してナビゲーションにも使えそうな1KBのアコーディオンＵＩ 次のように、マウスをあわせると、ホバーした部分がビヨーンとアニメーションしながら伸びるＵＩ実装用のサンプルが公開されています。 設置手順がすごくシンプルです (1) HTMLを定義します <ul id="sm" class="sm"> <li><img src="images/1.gif" alt="" /></li> <li><img src="images/2.gif" alt="" /></li> <li><img src="images/3.gif" alt="" /></li> <li><img src="images/4.gif" alt="" /></li> </ul> (2
タブUI詳解
タブUIの構造や特長、設置の判断、ユーザビリティ、アクセシビリティ、実装のポイントや機能の拡張方法、実装例やスクリプト例をSmashing Magazineから紹介します。 Module Tabs in Web Design 以下、その意訳です。 ※原文では「タブモジュール」となっていますが、タブモジュールやタブUIと記載すると煩雑になるため、「タブ」と略します。 タブのみを指す場合は、「タブ コントロール」としています。 はじめに 1. タブの構造 2. タブはいつ使用するのか 3. タブのユーザビリティとベストプラクティス 4. タブのアクセシビリティ 5. タブの拡張 6. タブの実装集 7. タブを実装するためのチュートリアル集 8. タブを実装するスクリプト集 はじめに タブモジュールは複数のコンテンツを異なるパネルに配置したユーザインターフェースのデザインパターンです。 パネル
優れたユーザインタフェースを設計する際に考慮する8つのポイント
ユーザーにとって有益なユーザインタフェースを設計する際に考慮する8つのポイントをUsability Postから紹介します。 8 Characteristics Of Successful User Interfaces 以下、その意訳です。 ユーザインターフェイスの設計時に、考慮する8つのポイントを紹介します。 Clear Concise Familiar Responsive Consistent Attractive Efficient Forgiving To conclude… 1. Clear 明快 明快であるというのは、最も重量な要素です。 ユーザインターフェイスデザインの目的は、ユーザーに意味と機能を伝え、利用するアプリケーションと相互につきあえるようにすることです。そのアプリケーションがどのように機能するのか、どこに進むべきか理解することができない時は、ユーザーは困惑しが
Animated Scrolling with jQuery 1.2 » Learning jQuery - Tutorials and Information
A few weeks ago I wrote about how to use jQuery and a couple modules from the Interface plugin suite to automatically have same-page links scroll to their target location when clicked (Animated Scrolling for Same-Page Links). Well, now that jQuery 1.2 is out, and I've successfully upgraded this site to it without a hitch, we can do the same thing with jQuery core alone. Update This entry is deprec
[AS]かっこいいUIのフラッシュライブラリ -Movieclip tweening prototypes
Movieclip tweening prototypesは、トゥイーンを使用したユーザーインターフェイスを実装できるフラッシュのライブラリです。 Movieclip tweening prototypes ライブラリには下記のようなサンプルがあり、それぞれflaファイルもダウンロードできます。
広告β:Yahoo!トップページリニューアルを観察する
2008年に、Yahoo!のトップページがリニューアルするようだ。 下記リンク先に、現状α版のサイトが出ている。 西田氏は「グループインタビューやアイトラッキングなどの調査結果を踏まえて、新しいデザインを決定した」と説明。「能動的、受動的どちらのアプローチにも応えられる、必要な情報があるトップページデザインになっている」と新デザインの特徴を語った。（Broadband Watch） 確かに、そういうことだと思う。まだα版のようだが、いくつか検証したい。 個人的に気になるのはこのあたり。 ■トピックス枠の移動 ■広告枠の拡大（リッチ化？） ■広告企画枠の新設（Yahoo!スポットライト） ■タブ式インターフェースの採用 リニューアルにあたっては、メイン顧客である、なんとなくYahoo!層と、 Googleに侵食されつつあるカスタマイズ要求層の折り合いをつけるのに かなり
Pagination Gallery: Examples And Good Practices | Design Showcase | Smashing Magazine
Structure and hierarchy reduce complexity and improve readability. The more organized your articles or web-sites are, the easier it is for users to follow your arguments and get the message you are trying to deliver. On the Web this can be done in a variety of ways. Structure and hierarchy reduce complexity and improve readability. The more organized your articles or web-sites are, the easier it i
UI-patterns.com
User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer. Product Insights at your fingertips. Our confidence-boosting product tools for business growth are practical guides and strategies that will immediately amplify the expertise of you and your team.
Firefox 3の新デザイン案公開 - 大きさの違うナビゲーションボタンが特徴 | ネット | マイコミジャーナル
Firefox 3の外見的特徴になるかもしれないナビゲーションボタン(Faaborg氏のブログから抜粋) Mozillaでユーザエクスペリエンスデザインに携わっているAlex Faaborg氏は15日(米国時間)、自身のブログにおいて次期Firefox 3のナビゲーションバーのデザイン案を公開した。Firefox 3では以前のバージョンよりもライトな見た目でありながらもシンプルでモダン、そして使いやすいデザインが模索されている。作業は現在なお進行中で、現在のデザインがそのまま採用されることになるとは限らない。Mac OS X、Windows Vista、XPの3つのデザイン案はすでにできあがっている。 Mac OS X向けのナビゲーションバーデザイン案(Faaborg氏のブログから抜粋) Windows Vista向けのナビゲーションバーデザイン案(Faaborg氏のブログから抜粋) Wi
使いやすさ日記: 389. POWERボタンの位置が改善されたニンテンドーDS Lite
2007年10月12日 ゲームをプレイしていて「POWERボタンを誤って押してしまい強制終了」 という状況ほど悲しいことはありません。 頑張ってプレイした数時間がすべて消えてしまうのですから…。 ニンテンドーDS（以下、旧DS）ではこのような悲しい過ちを犯してしまいがちでした。 原因はPOWERボタンとSTARTボタンが同じ面に配置されている点にあり、 ボタン形状も似ていることから両者を押し間違えることが何度もあったのです。 以前の機種ではSTARTボタンは筐体上面/POWERボタンは側面に配置され 両者の差別化が図られていたのですが、フタに覆われていない側面にPOWERボタンがあるとカバンの中での誤作動が多く 「いつの間にか電源がONになっていて遊ぼうと思ったら電池切れ…」 という悲しい状況も起こっていました。 その誤作動を起こさせないために旧DSではPOWERボタンが 筐体上面にレイア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
ZURB U | Library
http://www.designwalker.com/2009/08/usability-test.html
http://www.designwalker.com/2009/04/wireframe-2.html
UIパターンいろいろ - DesignWalker