使うかどうかは微妙だけど一応メモ。jTPSはjQuery用のプラグインです。ちょっとしたコードを加えるだけでHTML中のテーブルに高度な機能をつけてくれます。 列タイトルによるソート機能、一度に表示できるデータ数の変更の他、次のページへ行くときにずずっとアニメーションしながらスクロールしてくれます。ちょっと新しい感覚ですね。 ↑ 次のページにいくときのアニメー...
本連載では、ユーザビリティに配慮したFlashの正しい使い方や導入法について紹介します。 エンドユーザーのインターネット接続環境が加速度的に高速化している現在、ムービーやサウンドの要素を含んだリッチなウェブコンテンツは「当たり前」に見られるようになってきています。特に、閲覧に必要なプレーヤーアプリケーションの普及率が高く、プラットフォーム（OSや...
Flashを使用しないで、画像ギャラリーを実装するスクリプトやスタイルシートの紹介です。 Slideshow 2 minishowcase photo starfield simulation gallery Javascript Image Gallery Using Mootools (E)2 Photo Gallery Slider Gallery Coverflow in Javascript ProtoFlow Spacegallery JonDesign's SmoothGallery 2.0 jQuery Gallery Flickrshow. Galleria jqGalViewIII easyALBUM slideViewer Interface Slideshow Image Transition Manager Highslide JS MooPix LightWindow v2.0 ThickBox Not so simpl...
『 目的遂行後に表示される完了ページやログアウト画面では、ユーザに『次は■■■■をする』といった明確な意思がないことが多く、サイトが訴求したいものを受け入れてくれることがあります。 』
『 "HAREL-ハレル-とは、Webページのソースコードをチェックし、アクセシビリティへの適合度を点数で表示するWebサイトです。問題箇所を抽出するだけでなく、問題の解説と改善方法を提示することで、アクセシビリティの専門家ではない方でも簡単にWebサイトを評価・修正できます。開発中のWebサイトやアプリケーションがアクセシビリティを満たしているか、確認する時にご利用ください。" 』
Web制作の現場で「ユーザビリティ」という言葉が注目され始めたのは2000年ごろからでしょうか。それ以来、Webデザインの専門誌では頻繁に取り上げられ、今ではWebサイトを評価する際の大きな指標の1つとなった感があります。しかし、その一方で、システム開発の現場では、ユーザビリティの概念はあまり浸透していない印象があります。 もちろん、多くのエンジニアが自...
ようこそ「リグレト」へ！ リグレトは、日々の小さな『ヘコみ』や『後悔』に対して お互いが『なぐさめ』を送りあうことで、元気づけあえる場所です。 このサイトを閲覧するには、Macromedia Flash Player9以降が必要です。 お手数をお掛けしますが、ブラウザのJavaScriptをオンにし、下記のリンクよりFlash Playerをダウンロードしてください。
『 アニメみたいな視差を表現する面白JavaScriptライブラリ「jParallax」 イメージ上でマウスを動かすと、近くの物ほど速く、遠くの物ほど遅く動作するような表現が可能。 』
『 quicksilverと少し似てる部分がある。デスクトップ環境に付加することで高効率を目指すのがquicksilverならブラウザ環境に付加することで高効率を目指すのがUbiquityかもしれない。あとプレゼンビデオがとても良い。 』
Ubiquityが提供する機能を解説する前に、百聞は一見にしかずということで、まずは紹介ビデオを見てみましょう。 このビデオ、とても格好いいですね！ Ubiquityの魅力を十二分に伝えてくれます。 「何じゃこりゃ！」と感じた方も多いかと思います。Ubiquityはブラウザ上でのありとあらゆる操作をスマートにこなせるようにしてくれる、超強力なコマンドラインツールです。...
『 NTTデータ製。Webページのアクセシビリティを約130の観点でチェック。accesskey属性が一般的なブラウザのショートカットキーと重複しているかどうか見てくれる! 』
「売れるサイト」を作るためのあれこれをご案内してきましたが、今回は「サイトデザイン」という視点から、ユーザーへのアピール方法を考えてみたいと思います。いかに中身が素晴らしいサイトでも、ユーザーにその素晴らしさが伝わらなくては、リピーターにはなってもらえません。 サイトデザインの観点で一般的に「良いサイト」とは、ユーザーに余計なことを考えさせ...
jParallaxは、複数のパネルをパララックスで奥行きを表現し、マウスの動きに合わせてダイナミックにスクロールさせるスクリプトです。 jParallax 複数のイラストを重ねただけでも面白いですが、下記のデモのよう [...]
『 デザインも秀逸なナビゲーションを実装するスタイルシートとスクリプトのチュートリアルの紹介です。シンプルできれい! 』
ここ2・3日、ひたすら色々なサイトの会員登録フォームやコマースサイトの購入フローを見ていました。 また、フォームのユーザビリティについて語っているブログやサイトをみて研究していました。 こうすれば登録数が劇的に上がる！とか、売上が上がる！といった方法はありませんが、少しだけユーザーに安心感を与えたり、ストレスを取り除いたりする方法はたくさんあり...
A List Apartのエントリーから、CSS Spriteを使用したナビゲーションに、マウスオーバー時にアニメーションのエフェクトをつける「CSS Sprite2」を紹介します。 CSS Sprites2 - It [...]
jQueryでかっこいいUIを実装したい。 そんなときにおすすめなのが、『10 useful jQuery plugins』。jQueryの便利なプラグイン10選だ。 以下にご紹介。 ・jQuery UI Webアプリをデスクトップアプリのように動作させる。タブメニューやスプリットペイン、ドラッグできるフォトマネジャーなど ・Mark-It-Up テキストエリアをマークアップエディタに変えてくれる ・jQuery cookie plugin クッキ...
理系のくせに文章を書くのが至上の喜びである私ですが、それでもある程度以上の長い文章になると苦しさのほうが勝ち始めます。 文章を書く苦しみはページ数の二乗で増えてゆくということをかの伝説の研究者に教わりましたが、私にとっては原稿用紙10枚を越えたあたりから頭が混乱し始めて、二乗などという騒ぎではなくなります。論文を書くときなどはいつも七転八倒で...
これはデザイナーのみならず導入必須のソフトウェアと言えそうだ。 Webサイトを作る際には、モックアップが必要になる。それをベースにして「ここをこうしよう」「次はどこに遷移させよう」といった議論が可能になる。頭の中だけではイメージがはっきりせず、意見も出しづらい。 ドラッグアンドドロップでモックアップを作成できる そんなモックアップを作成しようと...
ちょっとしたフォームのおしゃれに。 サンプルデモ 解説は英語ですが、サンプルコードがありますのでわかり易いと思います。 Enhance your input fields with simple CSS tricks
