気持ちのいいアニメーションは、スマフォのアプリには欠かせないと言ってもよいでしょう。 アニメーションはインターフェイスを設計する上で非常に重要で、4つのカテゴリに分けてユーザエクスペリエンスに欠かせないアニメーションを紹介します。 Great Animations Make Great Apps 下記は各ポイントを意訳したものです。 1. 知らせるアニメーション 2. 可能であることを伝えるアニメーション 3. あなたを歓迎するアニメーション 4. 楽しませるアニメーション 1. 知らせるアニメーション 最も単純なアニメーションの使い方で、ユーザーに知らせることを目的としたアニメーションです。これは多くのアプリケーションで使用されています。

カートのページだけを集めたデザインギャラリーです。カートの中身は適当なので特に気にしないでください。amazon 「最近チェックした商品」がわかる 「このショッピングカートにある商品を買った人は、こんな商品も買っています」がわかる 「チェックした商品の履歴」がわかる 商品の在庫数がわかる 値引きされている場合、いくら値引きかわかる 利用可能なポイント数がわかる

モーダルウインドウを表示する際、CSS3アニメーションでズームイン・アウトさせるチュートリアルを紹介します。 デモページ：ズームアウト 実装 HTML div要素でモーダルウインドウを作成し、ページ全体を覆うオーバーレイのdiv要素で内包します。 <div class="overlay-container"> <div class="window-container zoomin"> <h3>Hello I'm zoom in modal window</h3> I'm coming using scale transform, using transform: scale() <br> From <strong>scale(1.2)</strong> to scale(1) with transition property make me looks like <strong>come

フォームからデータを送信する場合は、テキストエリアに書き込んだり、セレクトから選択しり、ラジオボタンを選んだり、チェックボックスにチェックをいれたり複数の操作をしてから、最後に「送信する」や「確認画面へ」などのSUBMITボタンを押して送ると思いますが、ある一覧での絞り込みなどで、選んでいちいちボタンを押すというそのいち動作が以外と面倒くさかったりします。 セレクトメニューだけで絞込み、選択したら送信するというフォームをソースは以下詳細。 普通にSUBMITボタンを使ったフォームはこれ↓ index.php <table width="500" border="0" cellspacing="1" cellpadding="4"> <tr> <td align="center"> <table border="0" cellspacing="1" cellpadding="4">

This domain may be for sale!

設置が簡単でカスタマイズも簡単にできる、ページの上部・下部・中央・角からアニメーションで通知パネルを表示・非表示するjQueryのプラグインを紹介します。 noty [ad#ad-2] notyのデモ notyの使い方 notyのデモ デモではnotyのさまざまな通知パネルを楽しむことができます。 下記は全てアラートパネルですが、他にもError, Success, Confirmが用意されています。

今回のテーマは「目線の操作」です。ユーザの視線を集める要素と遠ざける要素をうまく使い分けることで、意図通りにユーザにメッセージを伝達するためのコツをご紹介します。 ファーストビュー 関連性 具体性 ウェブライティング リンクの装飾と配置 目線の操作　←今回のテーマ 他サイトでの慣習 「目線の操作」を構成する3つの要素 視線の開始位置 視線を集める要素 視線を遠ざける要素 1. 視線の開始位置 例えば、以下は弊社のHPですが、このサイトを見るときどこから見ますか？「徹底した顧客心理分析により・・・」というブランドパネルか、その下の「コンサルティング事例・実績」ではないでしょうか？ 弊社HPの例 ビービットのサイトには、「ビービットは何をやっているんだろう？どのような会社なんだろう？」ということを漠然と思いながら来訪する方が多いため、その疑問に直接答えられるようメインメッセージや実績エリアに目

実装は超簡単、カスタマイズ性にも優れ、IE6にも対応、クリックで開閉する折りたたみコンテンツを設置するjQueryのプラグインを紹介します。 jQuery Collapse jQuery Collapse -GitHub [ad#ad-2] jQuery Collapseの特徴 jQuery Collapseのデモ jQuery Collapseの使い方 jQuery Collapseの特徴 軽量 約600バイトの軽量スクリプト。 クロスブラウザ対応 IE6+, Firefox3+, chrome5+, Safari4+, Opera10+ でテスト済み。 カスタマイズ モジュール式で設計しているため、簡単にカスタマイズが可能。 開閉する要素の変更、callback関数も用意されています。 クッキーのサポート 「jquery-cookie」を利用してクッキーをサポート。 ARIA遵守 障害

複数のアイテムを特定の条件で表示したり、非表示にするフィルタリングをCSS3のエフェクトを使ってかっこよく実装するチュートリアルを紹介します。 Filter Functionality with CSS3 [ad#ad-2] チュートリアルでは3種類のエフェクトを使って、フィルタリングを実装しています。 各デモはページ上部の「ALL」「WEB DESIGN」「ILLUSTRATION」「ICON DESIGN」をクリックすると、フィルタリングを実行します。

リストのアイテムやサイドバーの各コンテンツなど、ページ上のコンテンツをドラッグ&ドロップで移動し、それをクッキーに保存するjQueryのチュートリアルを紹介します。 jQuery: Customizable layout using drag and drop [ad#ad-2] デモ 実装 デモ デモでは簡単なリストのアイテムの順番変更からページのレイアウト変更まで、ドラッグ&ドロップで移動が可能です。 demo1からdemo3は、レイアウト変更までのステップという感じです。 demo 3: Implementation in a real design 最終的には、ページ内の指定コンテンツが指定エリア内で移動が可能で、その内容をクッキーに保存します。 例：打ち出しエリアの3つのコンテンツ、サイドバーのコンテンツ 実装 外部ファイル 実装に使用するスクリプトは「jquery.js」「jQ

jQuery で Ajax な非同期通信中に「Now Loading」的な GIFアニメ画像を表示する方法の解説です。 超小ネタですが。 jQuery で非同期通信処理をしている間に「Now Loading」的なアニメーション画像を表示する、というのはよくあるパターンですが、その方法の解説です。 ローディング中の画像を表示するスクリプト 例えば、以下のような html の id="message" の内容を Ajax によって変更したい場合。 <p id="message">ここのメッセージが非同期通信後に変更されます。</p> <form method="GET" action="#"> <input type="button" value="ここをクリックでメッセージ変更" onclick="ChangeMessage();"> </form> この時、function ChangeM

live demo: IFrame iframeを使ったデモです。 div要素と同様にスクロールバーのカスタマイズ、コンテンツのズームが可能です。 NiceScrollの特徴 既存のコードの修正無しで、簡単に設置ができます。 ページのスペースを必要としないスクロールバーを設置できます。 スクロールバーのデザインを変更できます。 すべてのブラウザでマウス・キーボードでスクロールができます。 スクロールは慣性スクロールに対応しており、スピードは調整可能。 コンテンツのズーム機能。 対応ブラウザ IE6を含めたデスクトップブラウザだけでなく、iPhone, iPadなどモバイルブラウザ、タッチデバイスに対応しています。 Firefox 4+ Chrome 5+ Safari 4+ (win/mac) Opera 10+ IE 6+ iPhone, iPadなどのiOSデバイス [ad#ad-2]