なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
ウェブサイトはコンテンツなのか、アプリケーションなのか。 | six1ブログ
私が最近、ウェブデザインに関して思っていることは、ウェブデザインというのは、無意識的に紙メディアの文脈から逃れられないんだなということです。 例えば、ウェブサイトをつくるときに、「画面上部のスペースは大事」という意識だったり、「視点の移動」といった意識がありますが、この意識こそが、紙メディアのコンテキストに囚われている証拠です。 そのような状態では、重要な情報を目立たせようと思ったら以下のような方法論をとることが多いと思います。 1) 価値あるスペースに配置する。(左上とか？？上のほう) 2) 目立たせる。(色を明るくする。大きくする。) これらは新聞で記事を目立たせる方法論とほぼ同じです。 一方で、最近人気のソーシャルゲームをみていると、情報に注目を集める方法論が全く異なり。 最近流行っているのかな。スクエアのガーディアンクルスだとこんな感じ。 すごくシンプルにいえば、ウィンドウが表示さ
【インタビュー】クックパッドのUIデザイナー：「エンジニアの仕事が０を１にする仕事なら、デザインは1を100にする仕事 」 | Startup Dating
Startup Datingでインタビュー連載を始めてみることになりました。さて連載の初回は、2011年に新卒としてクックパッドに入社し、現在UIデザイナーとして活躍する片山育美さん（@monja415）。片山さんが現職に就くまでの道のりや、クックパッドのUIに関する考え方、片山さんが手がけた具体的なUI改善の事例やヒントなどをたっぷりお伝えします。 美術大学で勉強、もともと職人になりたかった もともと絵を描くのが好きだし得意、高校のときから職人になりたいと思っていたと話す片山さん。美術大学に進学し、ファイン系とデザイン系でデザイン系を学ぶことを選択。ファイン系とは、絵画や彫刻などいかにも“アート”というもの。ファイン系が芸術だから、どこか自分の中で完結してしまうところがある。でも、職人って誰かのために技術を使える人なんじゃないか、と。情報デザイン学科を専攻し、サービスデザインやUXと言わ
IKEAの家具紹介画像っぽくイメージに注釈を入れるjQueryチュートリアル:phpspot開発日誌
Making an Interactive Picture with jQuery | Build Internet IKEAの家具紹介画像っぽくイメージに注釈を入れるjQueryチュートリアル 室内のいい感じの写真をベースに家具を紹介するあのIKEAサイトのUIをjQueryを使ってクールに再現しているチュートリアルです。 単純な商品の紹介よりも、より商品を魅力的にみせることに成功していると思うのですが、これを自分でもやりたいという時に参考にできます デモページはこちら ECサイトを構築する際等に、いい仕事ができるかもしれませんね。 関連エントリ オシャレなECサイト構築用のWordPressテーマ３０ PR: 全部入りECサイトを安価に構築できる「Live Commerce」が素晴らしい！ Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ
[JS]広告やプロモーションを邪魔にならないように表示するスクリプト -Meerkat
広告やプロモーション、スプラッシュコンテンツを掲載したパネルをアニメーションでスライド表示させるスクリプトをJarod Taylorから紹介します。 Meerkat demo 2 パネルはブラウザの上部や下部から表示され、上のキャプチャは下部からアニメーションでスライド表示されたものです。 スプラッシュページのように全面に表示することもできます。 demo 3 スクリプトのオプションでは、ロード時の状態、パネルの表示位置、アニメーション（スライドorフェード）、アニメーションのスピードなどが調整できます。 MeerkatはjQueryのプラグインのため実装にはjquery.jsが必要です。 実装する際のサンプルコードの掲載もあります。 How-To Use Meerkat
Datepicker | jQuery UI
The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.
「行列のできる入力フォーム」、ポイントは4つのおもてなし
入力フォームに対してもっと企業は「おもてなし精神」を持つべきだ――と言いたい。せっかくカッコいいWebサイトでも入力フォームがそっけなければ客は離脱してしまう。デルのサイトを参考に、行列のできる入力フォームを考えてみよう。 わたしの会社では、いくつかWebマーケティングの改善サービスを行っている。中でも「フォームアシスト」と呼ばれる入力フォームの改善サービスは、国内でいち早くスタートしたこともあり、ライセンス数350を超える主力商品だ。 フォームアシストは今どきのSaaSというかASP型の期間レンタルサービスで、顧客の持っている資料請求ページや購入ページの離脱を改善することを目的にした商品である。当社のコンサル曰く、「平均で9.45％の離脱改善効果が出ている」というのだから、理論上は集客が増えなくても売上10％向上につながる費用対効果抜群のサービスだ（ちょっと自画自賛しすぎかも）。 ちなみ
アイトラッキングから検証した、使いやすいフォームの10のポイント
Google Mail、Hotmail、Yahoo! Mail、eBayの各サインアップのフォームを使用して、22～33才までの平均27才のユーザー8人を被験者にしたアイトラッキングから検証した、使いやすいフォームの10のポイントをcxpartnersから紹介します。 Web forms design guidelines an eyetracking study 以下、10のガイドラインからポイントのピックアップです。 1. Vertical, not horizontal 水平ではなく、垂直に フォームのレイアウトは、水平方向の配置やそれが混在したものではなく、単純に垂直方向に配置したものが効果的です。 可能であれば、各ラベルも垂直方向に揃えて配置してください。 2. Left-aligned labels are clearer (anecdotally) ラベルは左寄せにすると、よ
[JS]滑らかにスライドするナビゲーションを実装するチュートリアル
滑らかにスライドするアニメーションが軽快なナビゲーションを実装するチュートリアルをSoh Tanakaから紹介します。 Animated Navigation with CSS & jQuery demo デモでは背景の有無の2パターンで、どちらも滑らかにスライドするアニメーションが面白い効果を生み出しています。 ナビゲーションはリスト要素で実装されており、「overflow:hidden;」でマスクし、マウスのホバーでスライド表示させています。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="topnav"> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li
ブラックベースの暗いウェブデザインで気をつけたいポイント
ブラックベースの暗いデザインのウェブサイトを制作する際に、取り入れたいポイントや注意すべきポイントをWeb Designer Depotから紹介します。 The Do's and Don'ts of Dark Web Design 下記は、その意訳です。 はじめに 1. ホワイトスペースの活用 2. テキストのホワイトスペース 3. テキストのコントラスト 4. フォントの取り扱い 5. カラースキームは最小に 6. スタイルスイッチャー 7. 暗いデザインがはまるサイトとは 8. エレガントな暗いデザイン 9. クリエイティブな暗いデザイン 終わりに はじめに ブラックベースのウェブデザインは人気が高く、エレガントでクリエイティブな魅力があります。しかし全てのウェブサイトに適したものという訳ではなく、適切であるときだけ使用されるべきデザインです。 ブラックベースのデザインを使用すると印象
[JS]画像に見出しとキャプションをスライド表示させるチュートリアル
jQueryを使用して、画像に半透明の見出しとキャプションをスライド表示させるチュートリアルをQuenessから紹介します。 Create a Thumbnail Gallery with Slick Heading and Caption Effect with jQuery demo デモでは画像にマウスをホバーすると、上から見出し、下からキャプションをスライド表示させます。 見出しとキャプションは画像の前後にdiv要素で実装されています。 HTML <textarea name="code" class="html" cols="60" rows="5"> <div class="photo"> <div class="heading"><span>Telephoto Lens</span></div> <img src="images/fall.jpg" width="350" h
[JS]jQueryのプラグイン33+1選 -2009年8月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 slideView 動きが面白い画像のスライドショー。 Mop Slider コンテンツのスライダー。バージョンアップ。 simpl
これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」:phpspot開発日誌
これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」 2009年05月28日- jQuery Ribbon - Home これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」。 利用すれば、コントロールのグルーピングや、ドロップダウンメニュー、階層リストなどのリッチなコンポーネントが実装できるみたい。 jQuery Ribbonを使ったリッチなＵＩ。Windows7っぽいデザインのＵＩがJavaScriptで。 アイコン付きのかっこいいメニュー 表示しているＵＩのテーマを選べる アイコンつきリスト アイテムのグルーピング ドロップダウンメニュー ちょっとこれは素晴らしいですね・・・。jQueryの優位性がますます高くなってしまいましたね。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイ
Zoomii.com
Koko303 adalah tempat paling menarik untuk memainkan game secara daring. Disinilah Anda bisa mencoba berbagai macam games yang dilengkapi dengan informasi RTP dan provider yang menarik. Itulah kenapa jumlah member game yang bergabung bersama kami sangat banyak. Pondasi Main Slot Online Maxwin RTP Koko303 Hari Ini 1. Ada Internet Supaya bisa sukses saat main slot di link alternatif Koko303, maka po
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
一夜にして世界中を席巻したiPhoneアプリ「Clear」の裏側
[JS]jQueryのアニメーション機能をよりスムーズにするプラグイン -hoverFlow
[JS]ページの目次を自動生成するスクリプト -Automatically generate TOC
[CSS]パネルの情報を整理したドロップダウンを実装するスタイルシート
Yahoo!ラボ - Rerank
JQuery Cycle Plugin - Metadata v2 Demo