Mobile Patterns - UI UX Inspirational Gallery for iOS and AndroidSign In to View Your Boards Inspirational UI UX Patterns That Work Explore Pattern Categories Made with love for designers by designers @Simform & Maitrik Kataria
スマートフォン向けサイトの作り方エントリのまとめ:phpspot開発日誌
スマートフォン向けサイトの作り方エントリのまとめ。 スマートフォン元年といわれる2011年ですが、注目を集めているせいか、サイト作成法についてのエントリも盛り上がりをみせていますね。 個人的にもしっかり覚えておきたかったのでまとめてみました。 基本的には解像度が大きく異なるので、それにあったインタフェースに変えましょうね、という点と、HTML5/CSS3が使えるので駆使して楽にＵＩデザインしましょうという点、ユーザインタフェースがマウスではなくタッチである、という３点以外は、普通のサイト作りと変わりませんが、クセやバグがあったり、テクニックもあるので、しっかり押さえておきたいですね。 基本 スマートフォン向けサイトの作り方｜ユージック サイトの幅、高さ viewportによるズーム指定の方法 便利なJSライブラリ ユーザエージェント シュミレーター 等の有用情報 Androidサイトは横幅
画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」:phpspot開発日誌
画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」 2011年01月31日- Activity Indicator 画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」。 通常こうしたローディングイメージを実装するにはアニメーションgif等で対応しますが、このプラグインを使うと、画像なしに綺麗なアニメーション付きの読み込みエフェクトを実装出来ます。 SVGやVMLを使ってクロスブラウザで動作するように設計されており、なんとIE6等でもＯＫだそう。 背景が何色だって気にする必要もありません。 関連エントリ クリックした位置にそのままローディング画像を出せるjQueryプラグイン「Spinner」 現在ローディング中であることをマウスカーソル近くにちょこんと可愛く出せる「prettyLoade
WEBデザイナー向け☆iPhoneアプリのUIデザイン
どーもキンモクセイぷんぷん香る自由が丘からaoizmです。 秋満開！スマートフォンまっさかり！(強引) KAYACでもiphoneアプリ制作のお仕事が増えてきております。 WEBデザイナーがiphoneアプリのデザインをする際に、やっぱり気になるのがWEBとの違い。 画面サイズが小さく持ち歩けるデバイスiphoneは、デスクトップ上のアプリやWEBサイトとは 使用環境もその操作方法も異なるため、WEBとは違ったインターフェイスが求められます。 その違いを認識した上で、違いを活かしたデザインをするためには？ iPhoneアプリのUIデザインまとめてみました。 WEBサイトとiphoneアプリの違い 状況 持ち歩けるがゆえそのシチュエーションもさまざま 「会議で」「合コンで」「移動時」「就寝時」... 状態 そのときユーザーはなにをしている？ 「歩きながら」「話しながら」「運動しながら」...
Ajax » jQuery plugin » ウィンドウ、モーダル | PHP & JavaScript Room
PHP、JavaScript、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説［JS］jquery.js v1.1.3.2、jquery.colorbox.js ［CSS］colorbox.css、各種カスタム用CSS カスタマイズ性に富んだおしゃれなlightboxを作成できるjQueryプラグイン。 4種類のスタイルが用意されています。 画像のポップアップ表示、画像をグループ化してギャラリー表示したり、Ajaxコンテンツ、Flashムービー、インラインフレームなどのコンテンツを簡単にポップアップ表示することができます。 設置イメージ ColorBoxの設置サンプルサンプルを見る<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3
43 Essential Controls for Web Applications | UX Booth
43 Essential Controls for Web Applications March 6th, 2010 Designing a web application? Familiarize yourself with Rich Internet Application technologies and the best UI controls for creating your application. Rich Internet Application technology has empowered us to create really amazing user experiences. The best RIAs on the web today rely on a discreet set of UI controls to provide a lively and t
Twitterのようにスマートな通知バーを一瞬で実装できるjQueryプラグイン「jQuery Notify bar」:phpspot開発日誌
Twitterのようにスマートな通知バーを一瞬で実装できるjQueryプラグイン「jQuery Notify bar」 2010年01月08日- jQuery 'Notify bar' Twitterのようにスマートな通知バーを一瞬で実装できるjQueryプラグイン「jQuery Notify bar」。 ページの上部にアニメーションされながら表示されるあの通知バーです。 時間がたつとアニメーションしながらスマートに消えてくれます。ページデザインがどんなものであろうと影響を受けません。 色を変えて、エラーモードにしてみたり、成功モードにしてみたり自由にできます。 実装は超簡単で、次のように初期化するだけです。 $(function () { $.notifyBar({ html: "メッセージ", delay: 2000, // 表示するミリ秒数 animationSpeed: "norm
セクシーなボタンでユーザビリティを向上する·Sexy Buttons MOONGIFT
Sexy ButtonsはJavaScript/CSS製のオープンソース・ソフトウェア。Webサイトのユーザビリティを向上する上で考えたいのがアイコンの使い方だ。素っ気ない文字だけの表示に比べて表現力が高くなり、ユーザビリティも大幅に向上する。 アイコン付きの分かりやすいボタン Webサイトにおいて重要なのは最後に実行されるボタンによるアクションだ。そこを分かりやすくすればより多くのレスポンスを得られるようになるはずだ。そこで役立つのがSexy Buttonsだ。画像でボタンを作るよりも簡単にアイコン付きボタンが実現できる。 ボタンは角丸にしたり、色を変更することができる。マウスオーバー時、クリック時にそれぞれ色を変更するのも簡単に実現できる。ボタンは6段階の大きさ変更に対応している。ボタンのラベルはテキストなので、個々のボタンを実現するのはテキストを変更するだけでできてしまう。 大きさの
無料でウェブページ内のユーザーの行動を可視化してヒートマップを見せてくれる「ユーザーヒート」
通常のアクセス解析は単純にどのページがどれだけ見られたかという程度のものですが、実際にユーザーがどこをクリックしているのか、どこから見始めているのか、どこを重点的に見ているのかなどを分析する「ヒートマップ」を無料で作成してくれるのがこの「ユーザーヒート」です。 実際にどのような感じで解析できるのかというサンプルは以下から。 ユーザーローカル、Webページ内の行動を分析する無料アクセス解析ツール「ユーザーヒート」を公開 User Heat : どこが読まれているか見える！無料ヒートマップ・ツール http://userheat.com/ マウスの軌跡・クリックが多い場所・熟読エリアの3パターンの可視化が可能となっており、それぞれ以下のようになります。 マウストラック分析。ページが表示されてから離脱するまでの訪問者のマウスの動き（ページを開いたときのマウス場所や移動箇所、クリックした場所）を表
jQueryやPHPを使った便利な仕組みのチュートリアル集:phpspot開発日誌
9lessons: jQuery and Ajax best 9lessons. jQueryやPHPを使った便利な仕組みのチュートリアル集。 9lessonsというサイトがあって色々便利な仕組みのチュートリアルが公開されています。 Twitter Like More Button with jQuery and Ajax. 「もっと読む」をajaxで実現するサンプル Exactly Twitter like Follow and Remove buttons with jQuery and Ajax Twitter風のフォロー、削除ボタンを実現するサンプル Delete a Record with animation fade-out effect using jQuery and Ajax. 行を削除してフェードアウトアニメーションをさせるサンプル jQuery Username Av
[JS]ドリルダウンやフライアウトなど、アニメーションのエフェクトを持つナビゲーションのスクリプト -fg.menu
iPod風のドリルダウン型、飛び出すエフェクトのフライアウト型、シンプルなドロップダウン型など、アニメーションのエフェクトを持ったナビゲーションのスクリプトをfilament groupから紹介します。 Dropdown, iPod Drilldown, and Flyout styles demo: drilldown 上記のデモでは、クリックした項目のパネルが次々にスライドするドリルダウン型のナビゲーションで、上部にはパンくずが実装されています。 パンくず機能の代わりに、戻る機能の「Back」ボタンが実装されているものもあります。
パンくず詳解 | コリス
パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ（見つけやすさ）を改善するものとなります。 また、ランディングページ（検索などから訪れた最初のページ）にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre
ウェブサイトでやってしまいがちなユーザビリティのミス
ウェブサイトでやってしまいがちなユーザビリティの9つのミスをSmashing Magazineから紹介します。 9 Common Usability Mistakes In Web Design 下記は、その意訳です。 1. クリックできるエリアが小さい リンクのクリックできるエリアが小さいと、ユーザーはクリックするのが非常に困難です。 解決方法 リンク箇所にpaddingなどを設けて、クリックできるエリアを大きくします。 2. 間違った目的のためのページネーション ページネーションは、内容を複数のページに分ける時に使用します。 しかし、最近ページビューを増やす目的でページネーションを設置しているサイトがあります。これには問題点が2つあります。 一つ目は、1つのコンテンツを読むのにページをロードしなくてはならないこと。二つ目は、SEOと関係があります。ページのインデックス付けを行う際、ペー
25 jQuery Plugins for Navigation - DesignM.ag
li > a" data-ddst-label="Navigation Items" data-ddst-no-support="background,border"> li > a" data-ddst-label="Navigation Items" data-ddst-no-support="background,border"> Home Categories Tutorials Resources Inspiration Freelance Interviews Design Freebies About Contact Advertise With Us Write For Us Contact
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Dialog | jQuery UI
ZURB U | Library
Browse screenshots
http://browsersize.googlelabs.com/
http://info.life-x.jp/2009/07/life-x-0a58.html
通販（通信販売）の はぴねすくらぶ オンラインショップ