メガメニュー、Webサイトデザインの新常識 | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers 向こう半年の間でメガメニューがいたるWebサイトにあらわれるだろうという予測がSitePoint: Mega Menus: the Next Web Design Trendで紹介されている。予測のベースになっているのはJakob Nielsen氏が23日に公開したMega Drop-Down Navigation Menus Work Wellのようだ。Jakob Nielsen氏はNielsen Norman Groupの会長を務めるとともに、Webデザインユーザビリティの権威として名が通っている人物。 Mega Menus: the Next Web Design TrendではWebデザイナがナビゲーションをデザインする場合はたいだい次の
JS Coverflow
Coverflow in Javascript !!Strictly proof of concept!! Tested in Firefox 3, Opera 9.5 and Safari 3 Only works for images of equal width and height (250px x 250px in this example) Utilizes scroll wheel and left/right keys You can have custom labels and onclick events for center image I have tested it with other javascript libraries like jQuery, MooTools, Dojo and Prototype Download coverflow.js - 21
はてなブログ | 無料ブログを作成しよう
キジ焼き丼とおばんざい シンプルな我が家の定番のおばんざいたち 赤梅酢の新生姜漬け 昨夜は香ばしいきじ焼き丼に添えて。大きめにカットした鶏とししとうを魚グリルでこんがり焼く。 タレをつけながら煙モクモク、焼き鳥屋さんみたいな香ばしい香りがキッチンいっぱいに広がります 磯の味も…
JavaScriptを使ってページにマウスジェスチャ機能を実装する:phpspot開発日誌
YUI: Mouse Gestures JavaScriptを使ってページにマウスジェスチャ機能を実装するサンプルが公開されています。 基本ライブラリにはYahoo UI Libraryを使用しています。 画面上の灰色部分を左クリックしながらマウスジェスチャを行うことでアクションを起こすサンプルになっています。 コードは次のようになっています。 最初に、マウスの向きと関数名を関連付けた連想配列を定義して、YAHOO.widget.Gestures.init に渡しています。 後は関連付けた関数の中身を定義するだけという実装の容易さとなっています。 <script type="text/javascript"> var config = { 'left': test1, 'right': test2, 'up': test3, 'down': test4, 'upleft': test5,
ブラウザのマウスクリック時の動作 - えむもじら
*1: Firefox は Undo Closed Tabs Button で代用。 これを見て分るのは、基本的に Firefox ではブラウザの状態の変化を伴うようなクリックはすべて Mouse Up に反応するようになっています。Opera と IE7 もそれに近いのですが、Opera は中クリックはすべて Mouse Down に反応し、IE はタブの中クリックだけなぜか Mouse Down に反応するようになっています。Opera と IE7 の動作は一貫性に欠けるように思えます（表中、太字になっている箇所がおかしいと思えるところ）。もしこれらの理由を知っている人がいれば教えてください。あと、Safari などの他のブラウザの情報も歓迎します。 ちなみに、Mouse Up に反応させることのメリットとしては、クリック後、間違いに気がついてクリックしたままフォーカスをはずせばその動
[雑記／備忘]サル、いやガキ（園児）でも使えるGUIとは
子供達と一緒に、科学技術館（http://www.jsf.or.jp/）とか子供の城（http://www.kodomono-shiro.or.jp/）に行くのですが、科学技術館の4, 5階、子供の城の10階に、子供向けパソコンコーナーがあります。 科学技術館5Fでは、子供向けに特別に作ったソフトをインストールしているらしくて、未就学児である下の子も、カメラから画像を取り込んで加工するソフト（名前は「いない、いない、ばぁ」）で特に問題なく遊んでました。 しかし、子供の城ではダメでしたね。使用したソフトは「Art Dabbler 2.1J」（http://www.amazon.co.jp/gp/product/B00005OE6R）、写真を取り込んで、それをなぞることによって絵を描くソフトです。これは大人も（ひょっとしてプロも）使うようなソフトなので、未就学児には無理がある*1のですが、科学
![[雑記／備忘]サル、いやガキ（園児）でも使えるGUIとは](https://cdn-ak-scissors.b.st-hatena.com/image/square/ebc58bb5880a1558bdffc0abefc4ee86a08537cb/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F12704346814673865907%2F98012380834399401%2F1548343359)
PHP でオーディオ読み上げ CAPTCHA を実現する方法
Joining .WAVs with PHP [splitbrain.org] I’m currently working on a CAPTCHA plugin for DokuWiki and thought about providing audio output for users not able to see the image. PHPでオーディオ読み上げCAPTCHAを実現する方法。 次のような、複数のWAVオーディオファイルを結合する関数が公開されてました。 <?php function joinwavs($wavs){ $fields = join('/',array( 'H8ChunkID', 'VChunkSize', 'H8Format', 'H8Subchunk1ID', 'VSubchunk1Size', 'vAudioFormat', 'vNumChanne
Ajaxの使い過ぎに注意
ついにこの新型車に試乗できて大興奮だ。なにしろ最新鋭の操作技術を搭載しているらしい。ほほぅ。いい走りだ。でも、ちょっと寒いな。ヒーターを入れよう……うわっ！ 何だこれは？ でかい室温制御パネルが飛び出して、フロントガラスの半分が隠れた――道が見えないよ！ ちょっと落ち着かなくちゃ。そうだ、音楽がいい。なんてこった！ ハンドルがオーディオ操作パネルに置き換わったぞ。これでは運転もできないじゃないか！ いったい誰がこんなインタフェースにしたんだ？ Ajax（Asynchronous JavaScript and XML）開発者か？ もちろん、Ajax開発者が皆そこまでひどいわけではない。だが、このWeb開発技術の人気が高まり、WebアプリケーションとSaaS（サービスとしてのソフトウェア）のコアシステムのいたるところに活用されるようになるにつれ、開発者に正しいアプリケーションインタフェース設計
ユーザーはサイトのここを見ている | ユーザー視点のウェブデザインガイド | Web担当者Forum
サイトを訪れたユーザーの情報閲覧には、いくつかの基本的な行動パターンが存在する。サイトの性質にも左右される部分はあるが、以下に挙げるポイントを踏まえて画面を作成することで、スムーズにサイトを見てもらえるようになる機会がぐっと増えるはずだ。 ［1］ナビゲーションでユーザーを誘導できると思ったら大間違い「グローバルナビゲーションが設置されているのだから、当然ユーザーはそこからリンクを辿ってくれるはずだ」と思っている方はいないだろうか。 数多くのユーザビリティテストを実施していて毎回痛感するのが、「ユーザーはナビゲーションをなかなか見ない」という点である。これはなぜか。 ユーザーは、あくまでサイトの「コンテンツ」を見に来ている。そのため、ナビゲーションは常に後回しにされてしまうのである。後回しにされて、それでも必ず見てくれるのであればまだよい。しかし現実には、ユーザーはコンテンツ部分をざっと見て
シニアはログインでつまづく？！ - Trans
最近、シニア向けのあるWebサービスを構築している。その中で、シニア（特に、団塊世代、もしくはそれ以上）の方が、どういったところでWebサービスにてつまづくのかが少し分かってきたので、自分の備忘録も兼ねてメモしておく。 先に言っておくと、シニアはまずログイン、もしくは新規登録でつまづく。「中に入れない」「何かパスワード間違えているみたいなんだけど」そういった質問が、どんどん寄せられる。このWebサービスを構築する前に、できる限りネット上でシニアのネット行動特性みたいなものは調べてみたが、その多くは「ログイン後」、もしくは「ログインする必要がないサイト」のことだったと、今更ながら気が付いた。例えば、 ユーザビリティ研究所: シニア向けウェブサイト構築のための10のポイント 使いやすさを考えてみる。(アクティブシニア・シルバー層の現場から) そう、シニアのネット上の行動特性はある程度研究が進ん
キャズムを超えろ！ - 団塊～シニア層向けのWeb設計 やっちゃいけない10のＵＩ
一時期パソコン教室の講師をやっていたことによる経験と、昨今Webサービス運用にあたって中高年層からのクレームなどを自分なりにまとめた結果として、50代以上のユーザに対するWebサービス＆PCアプリケーションのUI設計における以下10のTIPSを公開してみたいと思う。...といってもたかだか10個で収まる簡単な話ではないので、思いついたら都度追加して行きたい。 ID，ニックネームを考えさせてはいけない。半角英字開始限定は論外 IDやニックネームが思いつかない方が多い。これはシニアに限らず、ITリテラシーがそれほど高くない若年層についても言えること。作る側の人間も「過去にWebで使ったID,Nicknameは全て使っちゃダメ。何か新しいのを考えて入れてみて。」と言われると結構悩んじゃうもの。それと同じ状態に陥ると思っていただけるとわかりやすい。「IDのかわりに電話番号でもいいですよ」というと結
デジタルほこり
ネタフルで紹介されていたのですが、FireFox の拡張機能に「使っていないタブの色を変化させる」というものがあるそうです： ■ 使用していないタブの色が変化するFirefox機能拡張「Aging Tabs」 （ネタフル） Aging Tabs という機能で、しばらく表示させていないタブの色を変化させてくれます。どんな色に変化させるかはカスタマイズ可能で、同時アクティブになっているタブの色もカスタマイズできます。で、実際にやってみたのがこちら： ここではアクティブなタブをベージュに、使っていないタブを濃いグレーにするように設定してみました。使っていない方のタブは3段階ぐらいに変化して、未使用時間が長ければ長いほど濃くなります。上のスクリーンショットでは、いちばん左側のタブ（Gmail）が最も濃いのが分かるでしょうか？ これ、ちょうど「ほこり」が積もるのと同じ感覚と言えるでしょうか。しばらく
無意識ナビゲーション
東京に住んでいたことのある、外国のグラフィック・デザイナーの方が、東京の鉄道システムを参考に新しいナビゲーション方法を提唱されています： ■ Ambient Signifiers - How I Learned to Stop Getting Lost and Love Tokyo Rail (Boxes and Allows) Ross Howard さんという方の論文なのですが、東京に住んでいた時に、中央・総武線ユーザーだったのだとか。僕も同じく中央・総武線ユーザーだったりするのですが、僕が気にも留めなかったことに着目して考察しています（見習わなきゃ・・・）。 Ambient Signifiers とは、直訳すれば「環境による通知」。いったい何なのかというと、例として挙げられているのは「ホームの発着ベル（発着メロディ？）」。最近、オリジナルな発着ベルを流す駅が増えましたよね。記事中で"
行単位でコメントできるYahoo!UI Libraryを使ったWordPressコメントシステム:phpspot開発日誌
行単位でコメントできるYahoo!UI Libraryを使ったWordPressコメントシステム 2006年10月12日- Jack Slocum's Blog 実WordPress Comments System built with Yahoo! UI 行単位でコメントできるYahoo!UI Libraryを使ったWordPressコメントシステム。 下の画像にある、「214」とか「23」といった部分をクリックするとコメント欄が現れ、投稿されたコメントを確認できます。 数字はコメント数を表しているようです。 コメント投稿画面は、画面上にそのままオーバーレイ表示され、移動やリサイズが出来ます。 なるほど、長い文章が掲載されているブログにコメントした場合、どの部分に対するコメントかよく分からなかったりしますが、 このシステムであれば、それがよく分かりますね。 このシステムは同サイト上の右カ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
システムアピアランス（テーマ）切り替えツールあれこれ
ソシオメディア | UIデザインパターン
Web 2.0 how-to design style guide
JavaScriptを利用してフォームの二重送信を防止する：CodeZine
http://beau.g-com.ne.jp/mon-extension-memo06_12.html
http://japan.internet.com/webtech/20060928/11.html