Macの「Chicago」フォント、Windowsの「メモ帳」アイコンを作ったグラフィック・デザイナー、スーザン・ケア - モジログ
Macの「Chicago」フォント、Windowsの「メモ帳」アイコンを作ったグラフィック・デザイナー、スーザン・ケア Wikipedia - File:Original Mac fonts.png http://en.wikipedia.org/wiki/File:Original_Mac_fonts.png Wikipediaでビットマップフォントがらみのページを見ていて、スーザン・ケアというグラフィック・デザイナーを知った。「Chicago」「Monaco」「Geneva」など、昔のMacのビットマップフォントや、起動時の「Happy Mac」アイコン、そしてWindowsの「メモ帳」のアイコンなども、この人の仕事だそうだ。 スーザン・ケア http://ja.wikipedia.org/wiki/%E3%82%B9.. ＜スーザン・ケア（Susan Kare）は、アメリカの芸術家、
これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」:phpspot開発日誌
これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」 2009年03月12日- jQuery Context Menu Plugin これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」。 ちょっと前までだと独自の右クリックメニューを作るのはすごく大変でした。特にクロスブラウザで動作することなんかを考慮すると本当に大変でした。 が、このライブラリを使えば簡単に実装できてしまいます。 特定のエレメント上のみに右クリックメニューを設定できるという、柔軟なつくりになっています。 どのアイテム上でクリックしたかっていうのがイベントハンドラで受けられるところも汎用的になっていていいです。 このライブラリ１つとってみても、jQueryを使う意味が出てきそうです。 jQueryは本当にデフ
複数選択のドロップダウンにチェックボックスを付ける·Dropdown Check List MOONGIFT
「神は細部に宿る」。ほんのちょっとした機能だからと見過ごすのではなく、ほんのちょっとしたことだからこそ誠心誠意作り込んでいくといったような意味合いが込められた言葉だ。コンピュータのGUIインタフェースはまだここ十年、二十年の話でありまだまだ改善の余地は大きい。 ドロップダウンリストが便利に！ 例えばファイルのアップロード、一つ一つファイルを指定するなんて愚の骨頂だ。さらに複数選択のドロップダウンも選んでいる途中のちょっとしたミスで全ての項目が非選択に戻ったりする。これも問題だが、解決策としてDropdown Check Listがある。 今回紹介するオープンソース・ソフトウェアはDropdown Check List、ドロップダウンリストにチェックボックスを付けるというjQueryプラグインだ。 これは良いアイディアだ。Dropdown Check Listを使うとドロップダウンの複数項目
UIデザインガイドラインのまとめ : could
UIUXガイドライン UIデザインガイドラインのまとめ デザインガイドラインは、実際同じようなガイドラインを作るときだけでなく、UIデザインを考える際にも役立つ貴重な資料です。今まで個別で紹介したことはありますが、今回は一挙にまとめてリストアップしてみました。 Introduction to Apple Human Interface Guidelines 個人的に UI デザインガイドラインといえばこれ。日本語訳も大変便利です Apple User Experience Guides ソフトウェア開発向けですが、イントロダクションあたりは参考になります iPhones Human Interface Guidelines 会員登録すると見れる PDF 資料ですが、上記のリンクからブラウザ上で観覧することが出来ます Windows User Experience Interaction G
UIデザインガイドラインのまとめ - everything might happen tomorrow - yhassy - builder by ZDNet Japan
デザインガイドラインは、実際同じようなガイドラインを作るときだけでなく、UIデザインを考える際にも役立つ貴重な資料です。今まで個別で紹介したことはありますが、今回は一挙にまとめてリストアップしてみました。 Introduction to Apple Human Interface Guidelines 個人的に UI デザインガイドラインといえばこれ。日本語訳も大変便利です Apple User Experience Guides ソフトウェア開発向けですが、イントロダクションあたりは参考になります iPhones Human Interface Guidelines 会員登録すると見れる PDF 資料ですが、上記のリンクからブラウザ上で観覧することが出来ます Windows User Experience Interaction Guidelines Windows UX チームが公開し
チェック必須！GUIインタフェースを作るようにWebインタフェースを作成できる·Sigma Visual Ajax GUI Builder MOONGIFT
Visual StudioやMS Accessの良い所は画面のデザインが誰でも簡単に作成できることだろう。そのため、整ったデザインにはならないこともあるが、それでも誰でも作成できてしまうというのは大きな利点だ。 ドラッグアンドドロップでWebアプリケーションの画面を設計できる Webの場合はHTMLを色々と修正する分、インタフェースの作成が面倒だった。そう、それは過去の話になるかも知れない。 今回紹介するオープンソース・ソフトウェアはSigma Visual Ajax GUI Builder、GUi並みの操作性でWebインタフェースを作成できるソフトウェアだ。 Sigma Visual Ajax GUI BuilderはWebアプリケーションを容易に開発することができるIDEライクなソフトウェアだ。多数のコンポーネントをドラッグアンドドロップで配置し、キャプションや値、アクションを指定でき
最高の習得性はゲームのステップアップにあり
最高の習得性はゲームのステップアップにあり：デザイナにおすすめのユーザーインターフェイスデザイン6つのポイント（2）（1/2 ページ） 前回は自社製品のデザインガイドラインを作ろうという話をしました。その中で独自のガイドラインの一例についても紹介させていただきました。今回はこの中で定めた「習得性：Learnability」という概念について注目してみましょう。 はじめに あなたの持っている携帯電話は、何のために買ったものですか？ 電話をするため、メールをするため、Webサイトを閲覧するため、ゲームをするため、音楽を聴くため……など、さまざまな目的があるはずです。 ここで注意していただきたいのは、「ツール（ここの例では携帯電話）を使った結果、どんな成果が得られるのか」が、ユーザーにとって最大の関心事だということです。携帯電話のコレクターや研究家でもなければ、収集すること自体が目的となっている
20年前とほぼ同じ。Photoshopのインターフェイス20年の進化
20年前とほぼ同じ。Photoshopのインターフェイス20年の進化2008.12.31 14:00 昔々あるところにKnoll Brothersという人が作ったPhotoshopというプログラムがありました。 20年後。11ものバージョンを経た今のインターフェイスが右端のです。あんま変わってませんよね。変わったのは、あのくそったれのタブぐらいで…。 ツールパレットだけじゃないんです。全体のUIも1988年の誕生以来、90年代と基本的に一緒です。 でもまあ、壊れてもいないものを直すというのも変ですし。イメージ編集には、もっと良いインターフェイスのメタファーを思いつく人が出てくるかもしれませんけど、Photoshopのインターフェイスとワークフローは｢みんなそれで慣れちゃってるから有効なんだ｣という人もいます。たぶんその通りで、誰かこの型を破る必要があるんでしょうね。 これまでのところ破ろう
Win32::GuiTest でツールバーのクリック。 - IT戦記
昨日の夜、つまづいてたところ。 ちょこっと試してみたら普通に動いた 貼っておきます。ペタ sub MouseClickToolbar { my $toolbar = shift; my $id_target = shift; my $tbb_buf = AllocateVirtualBuffer($win, 24); my $count = SendMessage($toolbar1, 0x418, 0, 0); # TB_BUTTONCOUNT for (my $i = 0; $i < $count; $i ++) { SendMessage($toolbar1, 0x417, $i, $tbb_buf->{'ptr'}); # TB_GETBUTTON my ($bitmap, $id_command, $state) = unpack 'i2 c', ReadFromVirtu
perl の Win32::GuiTest モジュールを使ってみる。 - IT戦記
はじめに 久々の perl。突っ込まれるのを期待しつつやってみます。 準備 Strawberry Perl for Windows をインストール PATH を通して、コマンドプロンプトを起動して、 > cpan -i Win32::GuiTestでおｋ。 何から始めよう IE8 をどこまで操作できるかやってみる。 IE8 を起動 use strict; use warnings; use utf8; system('explorer http://www.google.co.jp/'); おおお。 IE8 のウィンドウハンドルを取得 use strict; use warnings; use utf8; use Data::Dumper; use Win32::GuiTest qw(:ALL); # これをやっておかないと中で shift-jis 前提で扱われるみたい UnicodeSe
iPhoneのUIに思うところ - 人生を書き換える者すらいた。
ここ数カ月、ちょこちょことiPhone用のアプリ（主にゲーム）を買って調べている。まあそれほど遊びたいわけじゃないんだけど、ユーザーインタフェースの研究を兼ねてね。単価が安い(1000円程度が多い)のでつい気軽に買ってしまい、１～２回しか起動してないのがいっぱいあるんだけど。 しかしiPhoneでなにしろ重要なのは、ちょっとしたダイアログボックスを出すのでもアニメーションしたりフェードイン・アウトしたりの視覚的なエフェクトを工夫するのが当然のプラットフォームになっている、ってことだ。これは家庭用ゲーム機やゲームセンターでは１０年以上前から常識だったけど、ビジネス用アプリケーションではなかった。 一般に、プラットフォームではその代表的なアプリケーションがUIの標準を決める。WindowsではエクスプローラやWordやExcelが代表的なアプリケーションであるから、その流儀に従うのが正しい。ど
【コラム】シリコンバレー101 (293) MozillaのUIデザイナーがパイ型のコンテキストメニューを提案 | ネット | マイコミジャーナル
Firefox 3を使っている方は、まずこのページのデモを試してほしい。2つのボックスがあり、上のボックス内でクリックすると1から7までの数字が並んだパイ型のメニュー、下のボックス内ではリスト型のメニューが出てくる。それぞれで"6"を選択するスピードを実感してもらうためのデモだ。 Mozillaのユーザーインタフェース(UI)デザイナーJono DiCarl氏が10月28日に、Webブラウザにおけるパイ型コンテキスト・メニューの可能性をブログで提案した。上記のデモは、その実験1である。 どちらのメニューが"6"を選択しやすかっただろうか。DiCarl氏は、UI操作の効率性を現したフィッツの法則(Fitts’ Law)を挙げて、パイ型の優位性を説いている。 フィッツの法則 T = a+b log2 (D/W + 1) T = ポインターがターゲットまで動くのにかかる時間 D = ポインターの
【ハウツー】Web開発者必見! jQuery UI ウィジェット3選 (1) シンプルでかつ強力なウィジェット群 | エンタープライズ | マイコミジャーナル
7月3日に掲載した記事「jQueryを使ってるならコレ! ウィジェットライブラリの決定版 - jQuery UI」ではjQuery UIの簡単な概要と、jQuery UI/SliderとjQuery API/CSSを組み合わせたサンプルコードをいくつか紹介した。簡単なコードを追加するだけで、工夫次第でさまざまな使い方ができるUIを作成可能ことがおわかりいただけたと思うが、jQuery UIには他にも汎用性の高いコア機能とウィジェットが用意されている。本稿ではその中でもとくに興味深いウィジェット「Datepicker」「Dialog」「Tabs」を紹介する。 なおWebブラウザ実行環境と使用したJavaScriptファイルは次のとおり。 Microsoft Windows XP SP3 / Microsoft Internet Explorer 7 FreeBSD 8-current / M
FirefoxにGUIプロトタイピングの機能を追加するものすごい拡張「The Pencil Project」:phpspot開発日誌
FirefoxにGUIプロトタイピングの機能を追加するものすごい拡張「The Pencil Project」 2008年07月09日- Home - Pencil Project FirefoxにGUIプロトタイピングの機能を追加するものすごい拡張「The Pencil Project」。 Pencil Projectを使えば、予め用意されているGUI部品をキャンバスにドラッグ＆ドロップしてプロトタイプの画面イメージを作成することができます。 ボタンなんかも、ダブルクリックでキャプションを変えることができたり、VisualBasic、VisualC++などのアプリを使って画面デザインをしているイメージに近い操作感が実現できています。 アプリっぽい画面を作ってみましたが、超簡単です。 GUIのスタンドアロンアプリだけでなく、Webサイトにも使うことが出来ます。 HTMLを使って簡単に画面を作
「OKボタン」は左にあるのが正しい事を、任天堂に教わってみる - 狐の王国
少し前だが、やっぱりOKボタンは右なんだよという記事が話題になっていた。 OKボタンは右か左かというのはけっこう議論になったり統計とってる人がいたりと尽きない話題なのだが、先日任天堂のWiiを使ってて「OKボタンは左が正しい」と確信するに至った。 Wiiにはショッピングチャンネルといって、Wii用のソフトウェアや昔のゲームが購入できる機能が搭載されている。いろんなソフトがある中、特定のソフトを選んでみると…… このような画面になる。 そして「購入する」ボタンを押す。 注意書きがあらわれる。OKが右側にあるのが見える。「次の工程へ進む」ためのボタンは右が基本なのは、やはりどこの環境でも変わり無いようだ。 OKを押すとさらに別の注意書きが現れる。ここでもOKは右側。 しかし次の画面で「はい」と「いいえ」が現れ、左側が「はい」になる。 この画面で「はい」を押すと購入が確定になり、プリペイドカード
Macのメニューバーに対してフィッツの法則は正しいか
てんぽ: Macのメニューバーに対してフィッツの法則は正しいか CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど Macが上部固定メニューバーを採用している理由として、マウスでのクリックのしやすさがよく挙げられる。 Life is beautiful: OS-Xのメニューの位置が固定なのは「たとえ一点でもMicrosoftの方が正しかったこと」を認めたくないAppleの意地か？ のコメント欄で指摘されている高さ1マイルのメニューバー という概念です。 一方Macintoshでは、どれくらい動かすか考えずにマウスをスクリーンの一番上にドンと持って行けば、 マウスはスクリーンの上端--メニューを使うための正しい位置--で止まる。 これはフィッツの法則として定量化もされている（らしい）。 オブジェクトを正しくクリックするためにかかる時間(T)はオブジェクトの面積(S)が大きく、
垂直スクロールバーを左側にしたい！（CSSではなく、アクセシビリティの話） - Trans
垂直スクロールバーは一般的にユーザの右側にあります。でも、左側にあったほうがアクセシブルなときもあると思います。 文末ではてブのコメントに返答しました。（2008年6月15日1時35分） 肢体不自由者の操作の困難さ 一般的にページを縦にスクロールしたいときは垂直スクロールバーを使うことと思います。そして、そのページから1つ前のページに戻るときはブラウザやソフトウェアのツールバーにある「戻る」などをクリックすることと思います（使い慣れた人はキーボードかもしれません）。 そのときはこんな感じのマウスポインタの移動になります。 これをマウスを使って移動すれば一瞬の出来事です。しかし、マウスを使えない肢体不自由者の場合はそうではありません。例えば、下記のような支援機器を使う人の場合はどうでしょうか。 僕はこの数ヶ月の間にこういった支援機器を使う人たち（顎や舌でマウスを使う）にパソコンを教える機会が
Life is beautiful: OS-Xのメニューの位置が固定なのは「たとえ一点でもMicrosoftの方が正しかったこと」を認めたくないAppleの意地か？
とりあえず右クリックすれば操作するべきメニューが出てて来るというのは意外と便利なんだけどね。コンテキストメニューがよくできてるというのはWindowsの美点のひとつだと思う。【いまどきWindowsなんぞを使うメリットはなにか - 狐の王国より引用】 ここのところApple製品のことばかり褒めているが、上のエントリーを読んで思い出したのが、Windows95のユーザーインターフェイスを設計していたころの話。「マウスのボタンは一つ」に必要以上にこだわるアップルに対して、二つあるマウスのボタンを最大に生かしたユーザーインターフェイスの一環として徹底的にこだわって作ったのが、このコンテキストメニュー。 今やいろいろな理由でぐだぐだになってしまったが、当時は「シングルクリックは選択」「ダブルクリックはデフォールト動作の実行」「右クリックはコンテキストメニュー」という大原則をOSだけでなく、Offi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Engadget | Technology News & Reviews
https://blog.8-p.info/2009/03/textfield-js