ウェブに激しく使えるインタラクティブなインターフェース集『Welie』 - 100SHIKI ～ 世界のアイデアを日替わりで ～
インタラクティブなデザインがどうあるべきか、そのデザインパターンを集めまくっているのがデザイナーのWelieさんだ。 彼のサイトではカテゴリーごとにどういったインターフェースデザインが有効かをまとめてくれている。 検索サイト、ショッピングサイト、サイトナビゲーションなどなど、ウェブを作る仕事をしている人にとっては必見だろう。 またそれぞれのパターンにはスクリーンショットの例や、いつ使うべきか、使うときにはどういった点に気をつければ良いかも教えてくれる。 こうした資料は知っておいて損はないですね。
メールを奇妙な生物におきかえて受信箱を表現してくれる『Anymail』 | POP*POP
メールの受信箱を使ったちょっとした作品のご紹介。データのビジュアライゼーションに関する論文に使われたものらしいです。 コンセプトはシンプルで、受信箱にあるメールを種類ごとにバクテリアのような生物に置き換えて表現するというもんです。迷惑メールはゲジゲジ虫に、ショッピングサイトからのメールは赤い生物、学校からのメールは青い生物で、といった具合です。 ↑ 一つ一つのメールが生物になります。 かつ、新しいメールは大きく表示され、時間が経つと小さくなる、といったような工夫もされているようです。また未読メールにはとげが付いていますが、既読のメールや返信したメールはだんだんとげがなくなっていくようにも表現されます。 ↑ 扱ったことがあるメールはだんだんやさしく表現されていきます。 サイトにはそのシミュレーションの様子が映像になっていますのでご興味のある方はどうぞ。「今日も迷惑メールばかり・・・」とうんざ
観的なインタフェースをめざして
現在使われている計算機のほとんどは ウィンドウやマウスを使った グラフィカルユーザインタフェース(GUI)で操作を行なうようになっているが、 GUIが一般に普及する前は キーボードを使った コマンドラインユーザインタフェース(CUI)で計算機に指示を与えたり 結果を表示させたりするのが普通であった。 CUIに比べるとGUIは圧倒的に操作が直観的になることが多いため、 GUIを持たない計算機は現在ほとんど考えられなくなっているといえる。 家電製品などあらゆる機器で計算機やネットワークの機能が利用されるように なりつつあるが、これらの世界では現在でもCUI的なインタフェースが利用されていることが多い。 たとえば テレビのチャンネルを変えるために リモコンの数字キーでチャンネル番号と決定ボタンを押すという方式はCUI的な操作といえるだろう。 ビデオの録画予約にしても電子レンジにしても 直観的でな
手書きインターフェースでアジャイルなサイト構築を支援する『DENIM』 | POP*POP
昔からあったものですが、ひさしぶりに見てみたらすっかりバージョンアップしていたのでご紹介。 ワシントン大学が開発したDENIMは手書きのインターフェースでサイトマップを作成、HTMLまで生成してくれるというすぐれものです。 タブレットPCと相性が良いですが、マウスでもぐりぐり操作可能です。 簡単な使い方を以下にご紹介。 ↑ 起動直後の画面。 ↑ 文字を書いていくとそれが一つのページとして認識されます（画面はHomeと書こうとしていますｗ）。 ↑ 複数作ったページ。リンクもドラッグで簡単に貼れます。 ↑ ページの詳細へ。左側のメニューでサイトマップレベルか、詳細ページレベルかなどが選択できます。 ↑ 円形メニューでさまざまな操作が可能。HTMLでエクスポートなどもできますよ。 ちなみにこうして作られたサイトをHTMLにしたページのサンプルは以下からどうぞ。なかなか味がありますよね・・・。 »
地図上を歩くようにウェブを探検できる『Walk 2 Web』 - 100SHIKI ～ 世界のアイデアを日替わりで ～
広大なウェブを見ていくことは世界を旅することに似ている。 そこでそのようなメタファーそのままにウェブを探検できるWalk 2 Webはどうだろう。 このサイトでは指定したサイトからリンクを辿って次々にウェブを見ていくことができる。 気に入った箇所には旗を立てたり、コメントを残すこともできる。また気になるサイトはブックマークしておくことも可能だ。 誰しも旅には心惹かれるものである。そうした旅のメタファーをどう活かすことができるか、ちょっと考えてみてもいいですね。
写真とグラフでわかりやすいショッピングサイト『CrispyShop』 | 100SHIKI
なんかインターフェースが気持ちいい。 CrispyShopはいわゆるショッピングサイトであるが、検索結果画面がインタラクティブで心地いい。 値段はわかりやすくグラフで示され、商品画像もずらずらとグラフの下にならべてくれる。一画面ですべて俯瞰できる点がいい。 また値段だけでなく、重さや電池の持ち時間などもグラフ化してくれる。 下に並んでいる商品画像はマウスを持っていくことで拡大してくれるし、詳細な情報も教えてくれる。 さらに値段や機能で絞り込んでいくこともできるので比較検討しながらショッピングを進めていくことができる。 シンプルな画面ながら実にさまざまな機能が詰め込まれている。ショッピングサイトを運営している方は参考にされてみてはどうだろう。
オンライン雑誌が簡単に作れる『Format Pixel』 | 100SHIKI.COM
オンラインでぱらぱらめくる雑誌やカタログなどのインターフェースはよく見る。 ページのはしにマウスを持っていくとペロリとめくれる例のやつだ。 そうしたインターフェースを使うには今まで専用のソフトなどが必要だったが、format pixelではウェブ上で簡単に作れるようだ。 ちょっと自分でも作ってみたが、直感的な操作でカタログっぽいものがすぐできた。 レイアウトも柔軟に行えるのでちょっと凝ったフォトアルバムや招待状などをつくるのにいいのかもしれない。 DTP（Desk Top Publishing）もWTP（Web Top Publishing）へと変化していく時代ですかね・・・。 管理人の独り言 『おとりよせ』 個人的におとりよせがブームだ（最近ひきこもりぎみ・・・）。先日は友人に紹介してもらったチーズケーキを食してみた。 冷凍して、解凍させながら食べる、というのがなかなか新感覚でよかった。
第1回 サイト訪問者の目線で考えるサイト作り | ユーザー視点のウェブデザインガイド
第1回 サイト訪問者の目線で考える 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか？ 今木 智隆（株式会社ビービット） ユーザーの目線を考えることの重要性ウェブサイトがビジネスとして成功するための要素は、コンセプト・デザインから細かな言葉遣いに至るまでさまざまであるが、その中でも「ユーザーにしっかりと（見てもらうべき）情報を見てもらう」ことは常に重要な要素の1つに挙げられるだろう。 いくらデザイン（見た目）がよく、コンテンツが充実しているサイトであっても、ユーザーは驚くほどすぐにサイトから離
キャズムを超えろ！ - 団塊～シニア層向けのWeb設計 やっちゃいけない10のＵＩ
一時期パソコン教室の講師をやっていたことによる経験と、昨今Webサービス運用にあたって中高年層からのクレームなどを自分なりにまとめた結果として、50代以上のユーザに対するWebサービス＆PCアプリケーションのUI設計における以下10のTIPSを公開してみたいと思う。...といってもたかだか10個で収まる簡単な話ではないので、思いついたら都度追加して行きたい。 ID，ニックネームを考えさせてはいけない。半角英字開始限定は論外 IDやニックネームが思いつかない方が多い。これはシニアに限らず、ITリテラシーがそれほど高くない若年層についても言えること。作る側の人間も「過去にWebで使ったID,Nicknameは全て使っちゃダメ。何か新しいのを考えて入れてみて。」と言われると結構悩んじゃうもの。それと同じ状態に陥ると思っていただけるとわかりやすい。「IDのかわりに電話番号でもいいですよ」というと結
多くのユーザーは一度に1本しかジュースを買わない ― ＠IT
ユーザビリティのヒント（1） 多くのユーザーは 一度に1本しかジュースを買わない 「自動販売機での不要な動作から考える」 ソシオメディア 上野 学 2006/6/2 Webアプリケーションのユーザーインターフェイスデザインに役立つさまざまなTips集。自動販売機でジュースを買うときの不要な動作から考える。（編集部） 今回からはWebアプリケーションのユーザーインターフェイスの続編の「Tips編」として、ウェブアプリケーションのユーザーインターフェイスをデザインするうえで役立つさまざまなヒントを、少し細かな視点から具体的に見ていきます。 複雑な構成物を作り上げるには、基本となるコンセプトやアーキテクチャといった抽象度の高い部分から考えていくトップダウン式のアプローチと、構成要素の細部から考えていくボトムアップ式のアプローチの両方が必要になりますが、前回までの経験則編はどちらかといえばトップダ
「使える、使いやすい、使いたい」と思えるUIとは？ - @IT
最新トレンドやキーワードをわかりやすく解説 WCR Watch ［15］ 「使える、使いやすい、使いたい」 と思えるUIとは？ アドビシステムズ 上条 晃宏 2006/8/31 ここ数年、リッチクライアント技術としてFlashやFlexを採用する例が急速に増加している。この状況の背景としては、アプリケーション開発における“使いやすさ”の実現が重要な要件の1つとして認知されつつあることが挙げられるだろう。 しかし、単にFlash／Flexを使ったからといって使い勝手の良いユーザーインターフェイスができるわけではない。例えば、使いにくかった画面を“そのまま”Flexで置き換えたとしたら、従来からの問題点も再現することになる。これでは改善は望めない。画面設計を行う側にも使いやすさを実現するためのアプローチが求められるだろう。 ここで注目されるのがエクスペリエンスデザイン（XD）だ。エクスペリエン
第18回 ユーザー・インタフェース作りに必要なマーケティング感覚
Webアプリケーションを開発する際に，対象ユーザーを考慮することの大切さについて見てきました。今回は，ユーザー・インタフェース（UI）設計にも，マーケティング感覚が必要なことを考えてみましょう。 UIの問題点を改善していく手順 例によって航空券の予約をサンプルに使います。下記の画面をご覧ください。このWebアプリケーションには，様々なオプションを付け加えることができます。しかし，必要最小限の情報は，「搭乗日」と「出発地」と「到着地」の三項目だけです。このUIに，どこか問題はないでしょうか。 (1) 日付部分への改良 まず注目してほしいのは，搭乗日という日付情報をユーザーにすべて入力させている点です。日付情報をユーザーにまかせ切ってしまうと，表記が統一されず，結局のところシステムでそれを補う処理が発生してしまいます（たとえ「2006/08/02」などと「例」を明記しても，半角文字と倍角文字と
ユーザ・インターフェイス標準化からパクリは擁護できる - 半可思惟
ヤコブ・ニールセンのAlertbox -そのデザイン、間違ってます- (RD Books)を読んで面白いな、と思ったのは以下の指摘でした。 デザイン標準に従うということは、単にユーザに伝えたいことをより確実に伝える上で役立つという意味しかない。ドキュメントを作成するときには、自分で編み出した言葉を使うのではなく、英語の単語を使うというのと同じだ。どのようなストーリーを語るのか、デザイン要素をどうやって組み合わせるかは自分が決めるのである。 前掲書 pp105-106 ここで言う標準化されたデザイン要素というのは、「ページ左上にロゴを配置する」「ホームページに検索ボックスを設ける」「ショッピングカートへのリンクを右上に配置する」などユーザが特定の動作を期待する要素のことです。 このユーザ・インターフェイスの標準化をニールセンが推奨しているのは、 ユーザがウェブ全体を大きなひとつの資源のかたま
AjaxでWebブラウザ上にデスクトップを再現したSNS，クレイプが公開
クレイプは7月28日，Ajaxでデスクトップのようなユーザー・インタフェースを備えたSNS（ソーシャル・ネットワーキング・サービス)「Rinca.cc」のアルファ・テストを開始した。付箋や，時計などのウインドウを，Webブラウザの「仮想デスクトップ」上に自由に配置できる。 同社が「スティッキー」と呼ぶ付箋のようなウインドウは，文章や画像を自由に書き込み，仮想デスクトップに貼れるほか，登録した友人（フレンド）に送付したり，パブリックページで公開したりすることができる。 また「ウィジェット」と呼ぶミニアプリケーション・ウインドウは，インターネットから配信された情報などを仮想デスクトップ上に表示させることができる。現在，時計のウィジェットが利用できる。今後，ニュース，天気予報，スケジューラ，ミニゲームといったウィジェットの開発に取り組むという。 同社では，Rinca.ccは「メモ書きやToDo管
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Microsoft Surface - 新しいタブレット PC
http://japan.internet.com/allnet/20070328/12.html
http://japan.internet.com/allnet/20070126/26.html
Flowser On Amazon
情報デザインの設計
prima materia diary - XMLのコメントに--を入れてはいけない