音符のオブジェクトを認識する五線譜「Noteput - Interactive Music Table」: DesignWorks Archive
【フリー壁紙】A CANDLE LOSES NOTHING by モンクレールウンアウトレット (12/20) 【フリー壁紙】A CANDLE LOSES NOTHING by ルイヴィトンコピー (01/04) 【フリー壁紙】A CANDLE LOSES NOTHING by コピーブランド (11/11) 【フリー壁紙】A CANDLE LOSES NOTHING by バーバリー 財布 メンズ (08/17) 無料で使える2010年カレンダーのまとめ by 浅見 晴美 (11/29) 様々なデジタルデバイスが展開されていますが、今日紹介するのは五線譜を電子化されたインタラクティブな音楽テーブル「Noteput - Interactive Music Table」です。 こちらは音符の形をしたオブジェクトを置く事で、音を奏でるというものになっています。置いた場所や音符の形で認識している
IBMがWebアプリケーションのUIガイドラインとHTML/CSSのソースコードを公開
業務アプリケーションがWebアプリケーションとして開発されるのは現在の大きなトレンドです。それに伴ってHTMLとCSSによって業務アプリケーションの複雑なユーザーインターフェイスを構築する必要性が生じます。 しかし機能が豊富な業務アプリケーションのユーザーインターフェイスをHTMLとCSSで構築するのはそれほど簡単ではなく、しかもそれをアプリケーション全体で統一し、優れたユーザビリティを実現するのはさらに手間のかかる作業です。 そうした業務用のWebアプリケーションのユーザーインターフェイスを構築するためのサンプルが豊富に含まれたガイドライン「IBM Lotus User Interface Developer Documentation」が、IBMから公開されました。 今回公開されたIBMのガイドラインは、同社のLotus製品群のユーザビリティを統一するための社内プロジェクト「One U
カラーユニバーサルデザイン推奨配色セット
色覚の多様性に配慮した 案内・サイン・図表等用のカラーユニバーサルデザイン 推奨配色セット ■ 東京大学分子細胞生物学研究所 高次構造研究分野 伊藤啓 ■ 社団法人日本塗料工業会（JPMA） ■ DIC 株式会社（旧･大日本インキ化学工業株式会社） DIC カラーデザイン株式会社 ■ 特定非営利活動法人カラーユニバーサルデザイン機構（CUDO） 概略 一般の人にも色の見え方が異なる人にも見分けやすい、カラーユニバーサルデザイン推奨配色セットを作成。 被験者実験を重ね、数千の候補色から20色を絞り込み。 塗料業界の色指定の業界標準であるJPMA塗料用標準色2011年F版に対応色を収録。印刷・デザイン業界の色指定の業界標準であるDICカラーガイドシリーズから対応色を選出。 はじめに いわゆる色弱（色覚異常）の人や、緑内障など網膜の疾患を持つ人、白内障の人は、色によっては違いを
ボタンデザインショーケース「Button Design Showcase」
WEBを制作する上でメニューと並んで書かせないのがボタン。ユーザーが使うものだけにデザインは印象に残りやすく、細かい所ですがサイト全体のクオリティにも影響を与えかねない重要な要素の一つです。今回紹介する「Button Design Showcase」は優れたボタンデザインを紹介していくエントリーです。 GoodBarry いくつものボタンデザインが紹介されていますが、今日はその中からいくつか気になったボタンデザインを紹介したいと思います。 詳しくは以下 ■Checkout 反光沢で少し立体感のあるクリアなボタン。 ■Tao Effect 周囲が凹んでいるように見える処理を施したボタン ■Clearspring 光沢が効いたボタン。スッキリとしていながらも存在感があります。 ■Games for Her by You アナログ感のあるボタンデザイン。サイトのテイストにもよりますがハマれば効果
實松アウトプット: パスワード再設定機能の実装案
パスワード再設定機能案考えてたら「つきあいきれねーよ」という考えにいたり、OpenIDにフリーライドすればいいのではという話。 ■パスワード再設定機能とは 登録メールアドレスにパスワード再設定用URLの入ったメールを送り、パスワード再設定を可能にする機能 「※パスワードを忘れた方はこちら」のやつ ■パスワードも忘れたし登録メールアドレスも使えないときに困る ●登録メールアドレスを忘れた場合 よくあるのがGmailのアドレスに「.」つけたり「+suffix」つけたりしてなにがなんだか分からなくなるケース。 対処法→忘れない 探す ●登録メールアドレスが使えない場合(捨てた) 登録時はフリーメールアドレスで登録したが、そのアドレスはもう使えないケース。 学校のメールアドレス、会社のメールアドレスで登録して今は使えない。 対処法→捨てメールアドレスは使わない ●登録メールアドレスが使えない場合(
エンジニアにもわかる「ユーザーインターフェース設計」
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに 島津悠樹と申します。Yahoo! JAPANのソーシャルメディア系サービスの開発・ユーザーインターフェース（以下UI）設計を担当しています。私からは「エンジニアにもわかる『ユーザーインターフェース設計』」と題し、エンジニアのみなさまに考え方のヒントとなるようなネタをお届けします。 エンジニアの方々にとって、UI設計は、おもしろそう、けれど、どこかとっつきにくい......、そんな印象を持っておられるのではないかと思います。 私も以前はそう思っていました。ですが、とっつきにくさを理由にUI設計をやらないのはもったいない、という思いで試行錯誤した結果、なんとか、UI設計のお仕事をいろいろ担当させていただくことができるようにな
触覚現実
まったく関心を持ってくれない人に、無理やり注意を向けさせる。広告が威力を発揮する領域ですが、ウザがられてしまうことも少なくありません。しかしこんな目的のためなら、広告の正しい使い方と言えるかもしれません： ■ Roche "Anti-Stress Balls" (directdaily) ヘルスケア企業のロシュがポルトガルで展開したキャンペーンについて。一見するとストレスボール（よく企業がノベルティとして配布する、ゴムのように弾力があるボールです）のようなものを街頭で配布していますね： このストレスボール（のようなもの）、当然ながら「ぎゅっと握りしめてストレス発散してもらう」という普通の目的のために配布されたわけではありません。それどころか、中には小石のような固い物質が入っていて、握るとそれを感じるようになっています。実はこれ、女性に乳ガンの危険を呼びかけるもので、よく言われる「乳房を触っ
楽器とかインターフェイスの話 - SLN:blog*
ピアノがうまいとか、ギターがうまいとか、ドラムがうまいとか、「音を出す」っていう根本的な所を考えれば、ウマ/ヘタはあまり関係ないはずなんだけども、例えば譜面のような「演奏を再現する」という目的がある限り、その精度によって「うまさ」というのはどうしても測られてしまうわけだよね。もちろん、そういった「うまい」演奏というのは、それはそれで見ていて気持ちいいし、高揚したりもするんだけど、今回注目してみたいのは、そういった「うまい」演奏ではなくて、そこから逸脱しているもの、例えば本来楽器ではないものを楽器にしている、本来の使い方とは違う方法で演奏している、ようなもの。こうした一風変わったテクニックの中に、人と楽器のインターフェイスを考える上でのいろいろなヒントが隠されているような気がしている。 本来の用途とは違う使い方をしている代表格として、レコードをこする事で音を出すスクラッチがあげられると思う。
ソフトウェアにおける名称とDSL - Sooey
ソフトウェアの持つ機能・インターフェースの名称は、そのソフトウェアが扱う領域（写真管理、作曲、請求書の作成などなど）におけるDSLである。 これは、37signalsがiPhoto ‘09 and Domain Languageというエントリで主張していることで、言われてみればその通りなんだけど実際にソフトウェアを設計している段階ではなかなか思い当たらないことでもあります。 DSL（ドメイン固有言語 - Wikipedia）といっても実際に何らかの言語でコードを書くという話ではなく、機能に付けられた名称がソフトウェアの挙動や使われ方までもを左右するため、新しい機能やソフトウェアにおける用語は熟慮したうえで決定する必要があるということです。 例えば、37signalsのプロダクトのひとつであるBasecampの場合は「プロジェクトにおける人々のコラボレーション」という問題領域を扱っており、同
もうペルソナなんて言わない
さて、1つ前の「ゴールダイレクテッドデザインとは」で紹介したゴールダイレクテッドデザインプロセスのなかでもとうぜんペルソナとシナリオが使われています。そりゃ、そうですよね。クーパーがペルソナの生みの親なんですから。 僕はこれまでペルソナ／シナリオ法という用語を使ってきましたが、今後はもうその用語は使わずに、ゴールダイレクテッドデザインという用語を積極的に使っていこうと思います。 というのは、ペルソナ／シナリオ法あるいはペルソナという言い方は誤解が多すぎるからです。 デザイン・シンキング（デザイン思考）といい、どうしてこうも流行りだからというだけで飛びついて、それが何なのか、何の役に立つのかをちゃんと自分で理解して使おうとする人がすくないんでしょうね。それでそういう人に限って間違った使い方をして、なんだこんな方法を役に立たないと言いだすことになるのだからあきれます。 ペルソナはゴールダイレク
ソース付！実用的なページナビゲーション集「24 Web 2.0 Navigation」
TOP > WebDesign > ソース付！実用的なページナビゲーション集「24 Web 2.0 Navigation」 ブログが一般的になってきて、ご自身のブログにページナビゲーションをつけている方も多数いるかと思います。今回紹介するのはページナビゲーションのデザイン例を集めた「24 Web 2.0 Navigation」です。 オリジナルのデザインもありますが、「24 Web 2.0 Navigation」ではFlickrやDigg、yahooなど人気ページのページナビゲーションも収録されていて、CSSも見ることができます。 詳しくは以下 ただ見本としてデザインが掲載されているだけではなく、HTMLとCSSファイルが配布されていますので、そちらを参考に自分のサイトのページナビゲーションにデザインを反映させることが可能です。ちなみに一部画像を利用しているものもありますが、配布し
網膜ディスプレイ、ブラザーが2010年に発売へ
ブラザー工業は、網膜に光を当てて映像を映す、眼鏡型の網膜走査ディスプレイ（RID：Retinal Imaging Display）を2010年に発売する計画だ。まずは法人向けに展開し、ディスプレイに回路図を投影しながら工事したり、カルテを映しながら手術するといった利用を見込んでいる。 9月4日に東京で開いたプライベートショー「Brother World JAPAN 2008」（東京国際フォーラム）でモックアップを展示した。 RIDは、目に入れても安全な明るさの光を網膜に当て、その光を高速に動かすことによる残像効果を利用し、網膜に映像を投影する技術。 従来のヘッドマウントディスプレイと異なり、目に直接光を当てるため、小型液晶ディスプレイなどはなく、眼鏡型といってもレンズもない。目の前にあるのは透過型の反射板だけ。映像の向こうには外の景色が透けて見える。 眼鏡に装着する投影部は25グラムと軽く
キャズムを超えろ！ - 団塊～シニア層向けのWeb設計 やっちゃいけない10のＵＩ
一時期パソコン教室の講師をやっていたことによる経験と、昨今Webサービス運用にあたって中高年層からのクレームなどを自分なりにまとめた結果として、50代以上のユーザに対するWebサービス＆PCアプリケーションのUI設計における以下10のTIPSを公開してみたいと思う。...といってもたかだか10個で収まる簡単な話ではないので、思いついたら都度追加して行きたい。 ID，ニックネームを考えさせてはいけない。半角英字開始限定は論外 IDやニックネームが思いつかない方が多い。これはシニアに限らず、ITリテラシーがそれほど高くない若年層についても言えること。作る側の人間も「過去にWebで使ったID,Nicknameは全て使っちゃダメ。何か新しいのを考えて入れてみて。」と言われると結構悩んじゃうもの。それと同じ状態に陥ると思っていただけるとわかりやすい。「IDのかわりに電話番号でもいいですよ」というと結
CSSとHTMLで作るシンプルなサブメニュー付きメニュー「 Pastel color menu」
メニューはサイトないで最も多く使われ、見られている重要な要素の一つだと思います。今日紹介する「 Pastel color menu」はサブメニューが付いた、シンプルでデザイン性、汎用性の高いナビゲーションメニューです。 デザインはCSSで制御されているので、ベースとして利用してカスタマイズすることも容易にできるかと思います。サブメニューの表示にはjavascriptを使っているみたいです。 詳しくは以下 実際の動作デモは「Live Preview」から見ることができます。 サンプルは「Download source code」というテキストリンクから必要な画像などを含めてダウンロードすることができます。ソースにたいしての詳しい解説は「 woork: Pastel color menu with dynamic submenu using CSS」でされていますので、若干javascript
jsmap - JavaScriptによる都道府県入力補助
Q - なぜ、全国地図にしないのですか? 4つほど理由があります。 ポップアップが場所をとりすぎるから 現在、地図部分は185x120pxにおさめていますが、標準的なモニタ解像度ではこの辺が限界です。 キーボード操作時の押下回数を減らすため jsmapがフォーカスするのはSugarCRMなどのWEBアプリです。使い切りのWEBフォームと違い、慣れによるスピードアップが望めるUIである必要があります。 多言語対応のため 日本は47都道府県なので、かろうじて可能だと思う方もいるかもしれませんが、これがイギリス(現在製作中)とかでは100を超えます。 認知的限界のため これも重要。ぱっと見て探せる数というのは、15や20がせいぜいです。 ただ、上記の話とは別に、地方選択用の全国図はあってもいいと考えていますので、それは将来のバージョンで。 Q - 地図はもっと詳細化/単純化しないのですか? 詳細
Ext JSとprototype.jsで作るリッチなUI（1/4） ─ ＠IT
Ext JSとprototype.jsで作るリッチなUI：パターンとライブラリで作るAjaxおいしいレシピ（3）（1/4 ページ） 今回は話題のExt JSを使ったサンプル Ext JSはAjaxアプリケーションを構築するためのJavaScriptライブラリ（フレームワーク）です。Ext JSを使用することで、デスクトップアプリケーションのようなユーザーエクスペリエンスを提供できます。2007年10月11日に2.0のベータ版がリリースされ大変注目を集めました。 今回はそのExt JS 2.0のベータ版を使ったサンプルを紹介していきます。 ■ ごく普通の入力フォームのサンプル まずこちらのサンプルを見てください。 今回のサンプルプログラム（拡大表示はこちら、※注意1：FireBugを有効にしている場合は動作が重くなる場合があります。一時的にFireBugをオフにして利用されることをおすすめし
jQuery UIで実現！ Ajaxで複数選択ドラッグ＆ドロップ
jQuery、プラグイン、jQuery UI、Web経由のCDNとは CSSの書き方も分かるjQueryプラグイン実践活用法（1） 基本／おさらいとしてプラグインやjQuery UIについて簡単に触れ、Web経由でjQueryを使うCDNについて解説 デザインハック ＜ リッチクライアント 2009/12/8 今回は「jQuery UI」のより進んだ活用例 ■ jQueryのプラグイン「jQuery UI」とは？ 今回紹介するjQuery UIは、JavaScript（Ajax）フレームワークjQueryのプロジェクトがjQuery用に開発している、以下の機能を提供するプラグインです。 ドラッグ＆ドロップなどのマウス操作の機能拡張 ユーザーインターフェイスを改善するウィジェット（アコーディオン、日付入力、ダイアログ、スライダー、タブなど） 今回は、jQuery UIのドラッグ＆ドロップ機能
アップル ヒューマンインタフェースガイドライン
アップル ヒューマンインタフェースガイドライン 原文：Apple Computer Inc. 訳：かろでん☆みゅーあ 2006-06-28 はじめに アップル ヒューマンインタフェースガイドライン序文 アップルは、強力なコアファウンデーション、そしてアクアと呼ばれる、目の離せないユーザインタフェースを結びつけた、世界で最も先進的なオペレーティングシステム、Mac OS X を手にしました。 進化した機能と、美的に洗練された色使い、そして透過処理、アニメーションによって、Mac OS Xは新規のユーザにはコンピュータ操作をより容易に、同時にプロフェッショナルユーザには彼らがMacintoshに期待する通りの生産性を提供します。 ユーザインタフェース、すなわちふるまいと外見は、よく練られた緊密なユーザ体験を、Mac OS X向けに開発された全てのアプリケーションに利用できるようにします。 これ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
買い物をする脳-Buyology
足りないのは思慮深さ