最近のUIは、気持ちいいアニメーションが多く取り入れられています。アニメーションはある程度予測できながらも、いい意味で少し期待を裏切るくらいがちょうどいいなと思います。 アニメーションを使ったインタラクションやデザインが素晴らしいナビゲーションの実装例をまとめました。各デモは全て、HTML, CSS, JavaScriptなどをオンラインで編集することができます。
UIの新鮮なアイデアをチェック！デザインやインタラクションの工夫が素晴らしいナビゲーションのまとめ
最近のUIは、気持ちいいアニメーションが多く取り入れられています。アニメーションはある程度予測できながらも、いい意味で少し期待を裏切るくらいがちょうどいいなと思います。 アニメーションを使ったインタラクションやデザインが素晴らしいナビゲーションの実装例をまとめました。各デモは全て、HTML, CSS, JavaScriptなどをオンラインで編集することができます。
KDDI、auスマートパスに"シンプルすぎる"入会・退会ページを追加 （マイナビニュース） - Yahoo!ニュース
KDDI、auスマートパスに"シンプルすぎる"入会・退会ページを追加 マイナビニュース 11月1日(金)12時19分配信 スマートフォン購入時に、auスマートパスなどのオプションになかば強制加入させられると一部で批判を受けていたKDDIが、auスマートパス会員ページに"シンプルすぎる退会画面"を追加した。あまりのシンプルさにネット上では「公式じゃないかと思った」「最高のUIを見た」などの声が出ている。 【もっとほかの写真をみる】 新たに追加した「各種サービス入会・退会」は、各種サービスの「入会」「退会」ボタンが並ぶシンプルなページ。「退会」ボタンを選択すると、各種サービスの退会案内に移動し、案内に従うことで退会手続きを行うことができる。同ページでは「auスマートパス」「ビデオパス」「ブックパス」「うたパス」の入会・退会が案内されている。 この件について同社広報部では、一部で言われているオ
CSS3アニメーションを使ったボタンホバーの12種類のかわいいエフェクト
12 fancy buttons デモはChrome, Safari, Firefoxなどのモダンブラウザでご覧ください。 12種類の中から、特に気に入ったものを下記にピックアップしてみました。 ※各CSSはエフェクトの箇所のみで、ベンダプレフィックスは省略しています。 demo 4 のアニメーション ホバーすると、上からパタッとなります。 .b04_3d_tick { perspective: 500px; perspective-origin: center top; } .b04_3d_tick div { position: absolute; text-align: center; width: 100%; height: 50px; box-sizing: border-box; padding: 10px; border: #000000 solid 1px; } .b04_
透明感が美しい！さまざまな背景にマッチするUIエレメントのPSD素材 -Blugraphic
特にブラーな背景などの繊細で美しい背景に映える、透明感が美しいUIエレメントのPSD素材を紹介します。
最近のインターフェイスデザインから学ぶ、7種類のボタンデザイン
ユーザーのアクションを誘う購入や送信や検索ボタンなど、最近のインターフェイスデザインでよく見かける7種類のボタンデザインを紹介します。 Common elements used in interface button design [ad#ad-2] 下記は各ポイントを意訳したものです。 また、元記事ではそれぞれのボタンを作成するPhotoshopのチュートリアルも掲載されています。 1. テクスチャを使ったボタン 2. パターンを使ったボタン 3. 3Dを使ったボタン 4. 1ピクを使ったボタン 5. 背景をインデントしたボタン 6. グロウを使ったボタン 7. ハイライトを使ったボタン 1. テクスチャを使ったボタン テクスチャはボタンにわずかな奥行きを与え、クリックが可能であることが分かるようにする素晴らしいテクニックです。
スマフォ対応の洗練されたUIエレメントがすぐに実装できるCSSとJSの開発キット -Skeleton
Forms -フォーム [ad#ad-2] Skeletonの特徴 スマフォ対応のグリッド Skeltonでは軽量の960pxのグリッドシステムを採用しています。 ブラウザやタブレット、スマートフォンなどスクリーンのサイズが小さくなると、そのサイズに最適なレイアウトに変更します。 Fast to Start 洗練されたベーシックなUIエレメントをあらかじめ用意してあるので、すばやくサイトの制作が始められます。 Style Agnostic SkeltonはUIのフレームワークではありません。最もベーシックなスタイルを提供していますが、あなたの好きなデザインを適用することができる開発キットです。 Skeltonの対応ブラウザ・デバイス Latest Chrome (Mac/PC) Firefox 4.0, 3.6, 3.5, 3.0 (Mac/PC) Latest Safari IE9, I
ディテールにこだわった、美しいデザインのナビゲーション集
1ピクセルのライン、細かいエレメント、美しいグラデ、繊細なテクスチャなどを使用してディテールにこだわりつつ、主張しすぎない素晴らしいナビゲーションをDribbbleから紹介します。
アイコンやボタン、フォーム、パンくずなどウェブ用のUIがセットになったPSD素材
ウェブのUIでよく利用されるエレメントがセットになった無料のPSD素材をMediaLootから紹介します。 Freebie: Massive Web UI & Button Set UIセットにはコントロールボタンやアロー、ベーシックなシンボルをはじめ、インフォボックス、テキストボックス、パンくずやボタンなどのナビゲーション、ドロップダウン、スピーチバブル、検索フォーム、ローディングエレメントなどが揃っています。 ダウンロードできるPSDファイルは、3つのスタイル、7つのカラーがあらかじめ用意されています。 素材の利用にあたっては個人・商用ともに無料で利用が可能で、再販などは不可とのことです。 詳細はサイトおよび添付のテキストを参照ください。
[JS]Twitterのように残りの文字数をカウント表示するスクリプト -charCount
TwitterのUIのように、入力できるテキストの残りの文字数をカウントして表示するスクリプトをcss globeから紹介します。 Simplest Twitter-like dynamic character count for textareas and input fields デモページ 上記デモページではデフォルト版とカスタム版の二種類があり、デフォルト版は残りの文字数をカウントして表示し、カスタム版は設定した残りの文字数を超えると表示が強調されるようになっています。 スクリプトのオプションでは入力可能な文字数、強調表示する文字数の設定と、カウンターを配置する要素やクラス名やテキストデータを設定できます。 charCountはjQueryのプラグインのため、実装にはjquery.jsが必要です。
[CSS]スタイルシートで実装する、アイデア溢れる画像ギャラリー
まるでFlashやスクリプトを使用したかのようなスライドのエフェクトがスタイリッシュな画像ギャラリーを実装するスタイルシートをCSSplayから紹介します。 Slideshow by numbers demo デモでは画像ギャラリーの領域にマウスをホバーすると、画像に対応した数字が表示され、それぞれの数字のホバー時にはサムネイル画像が表示されます（キャプチャ参照）。 各サムネイル画像をクリックすると、大きな画像とそれに対応したテキストが表示されます。 対応ブラウザはIE6/7/8, Fx, Op, Safari(PC), Chromeで、SafariとChromeは画像の拡大時にマウスをプレスする必要があります。
テーブル周りの素晴らしいjQueryプラグイン30 – creamu
jQuery Wisdomというサイトで、テーブル周りの素晴らしいjQueryプラグインが紹介されています。 ざっといくつかご紹介。 graphTable: graph data from HTML table using flot HTMLのテーブルデータからグラフを作ってくれる tableRowCheckboxToggle jQuery Plugin 行をクリックすることでチェックボックスのオンオフを切り替えられるようにするプラグイン UI Table Edit jQuery Plugin セルをクリックすることで編集可能にするプラグイン Colorize – jQuery Table Plugin マウスオーバーした列の背景をカラーリングしてくれる Animated Sortable Data Table jQuery plugin – jTPS テーブルにページネーションやソート機
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIエレメントのデザインに悩んでる人にぴったり、UIエレメントのリソースが探せる・見つかる・使える -UICloud
ウェブデザインのセンスを学ぼう、2012年上半期洗練されたディテールのUIデザインのまとめ
レトロなデザインが素敵なスマートフォン・ウェブサイトのUIのまとめ
ウェブ制作の時間を大幅に短縮する、今時のUIコンポーネントが簡単に実装できる -Chico UI
商用利用も無料、洗練されたデザインのウェブ用UIエレメントのPSD素材 -Design Kindle | コリス
[JS]フォームの入力時にラベルがスライドするスクリプト -Sliding Labels
Loading...
syboos.jp
[JS]ユーザビリティに配慮したドロップダウン型のナビゲーションを実装するチュートリアル