ゲームの UI 研究 (2007/10/05＠java-ja)
ゲームの UI 研究＠java-ja onk (大仲 能史) 所属：株式会社ドリコム blog：http://onk.blog.drecom.jp/ twitter：http://twitter.com/onk/ tumblr：http://onk.tumblr.com/ よろしくお願いします ゲームと Web の共通点 大きく2つ マニュアルを読まないユーザ層 ゲームの場合 ゲームセンターをベース としているのが原因 web は…… なんで読まないんだろう？ マニュアルの分厚さ('A`)？ マニュアルを読まなくても 操作が分からなくてはいけない ゲームはホントにこれが上手い 2つめ 長時間の連続操作 これが家電と ゲーム / web との 大きな差 だからこそ ユーザをハメる演出 が必要 この点で ゲームは2歩も3歩も 先を行っている
株式会社はてな最強化計画 - ココロ社
こんにちは。勝手コンサルティング企業、ココロ社です。 新コーナーを作っては放置して申し訳ありません…ときどき、勝手にコンサルトをする企画をやっていきたいと思います。 みなさんは、自分が顧客という立場のときも、「うーん…ぼくがここの担当だったらこうするなぁー」と思うことってないでしょうか。わたし自身は、典型的な総合職という感じで、サービスの企画・ソフトの制作・広告の制作・編集などを少しずつかじっているだけで、どの分野も中途半端にしか知らないのですが、普通にビジネスをしている感覚からすると、「ネットのサービスの提供の仕方はちょっと変わってる」と思うことが多いです。とくに株式会社はてなは、マイペースな運営で商機を逃している感じがして、他人事ながら気になってしょうがない！…ということで、僭越ながら、わたしが今まで取り組んできたビジネスの感覚から、ブログサービスの運営方法について、こうしたらいいので
Prototype Window Class : Introduction
Overview This javascript class allows you to add window in a HTML page. This class is based on Prototype. The code is inspired by the powerful script.aculo.us library. You can even use all script.aculo.us effects to show and hide windows if you include effects.js file , but it's not mandatory. It has been tested on Safari, Camino, Firefox and IE6, Opera looks fine. Features Valid HTML/XHTML gener
フォントの色と大きさと背景色の微妙な関係 | S i M P L E * S i M P L E
フォントの色と大きさと背景色の微妙な関係 December 26, 2006 10:00 AM written by 8maki 12月1日からクリスマスまで、日替わりでウェブ制作のちょっとしたTipsを紹介する「24 ways」が今年も開設されているようです。 その24 waysから一つご紹介。 » 24 ways: Cheating Color フォントの色と大きさと背景色についてのTipsです。 わかりやすく例を出していきましょう。 架空の会社のロゴを例にしてご説明します。まず、大きいフォントで「Double Dagger」という社名があり、その下に小さいテキストが入っています。よくあるデザインですよね。さて、このデザインについて見ていきましょう。 ■ 薄い背景に明るいフォントの場合 さて、下に2つのロゴがあります。 左のロゴは色の統一感のルールに従って社名とテキストを同じ色にしてい
お手軽Webホワイトボード Sharpan - monthly gimite
Web上でリアルタイムに描いたものが共有できるホワイトボードを作ってみました。 Sharpan - お手軽Webホワイトボード プラグイン不要で、ブラウザだけあれば動きます。JavaScriptしか使ってないので…。 Flashで動くやつは知ってたんですが、共有する時は相手のメールアドレスを入力してどーのとか面倒くさかったので、Sharpanは ワンクリックで新しいホワイトボードを作成。 共有するには、そのURLを相手に教えるだけ。 という風にしました。 チャットとかSkypeをしてて、ちょっと図が描きたいって時に便利かなぁと。機能的にはしょぼいですが、その辺はおいおい。 作ったホワイトボードにはどこからもリンクが張られないので、URLを知ってる人だけがアクセスできます。あとで同じボードを使いたい場合はブックマークを忘れずに。 実装はLingrと同じくCometを使ってます。ただ、効率とか
excanvas.js でクロスブラウザ canvas を使ってみた。 - IT戦記
excanvas.js は Google が作った js ライブラリで、これを使うと IE でも canvas 要素が使えるようになる。VML に canvas のインタフェースを持たせた感じです。 ためしに使ってみた。。。 http://sample.ecmascript.jp/20060531.html …しかし excanvas.js まだまだ互換性が足りない。 Firefox の canvas でアニメーションをさせるのが重すぎる。 Firefox リークしまくり。 やっぱり、まだまだ先の技術なのかなー。 とはいえ、VML、SVG、canvas で何が出来て、何が出来ないのかをしっかり理解しておきたい。絶対何かに使えるはず！ リンク canvas http://www.whatwg.org/specs/web-apps/current-work/#scs-dynamic VML h
第11回 プログラマが知らない，デザイナーの苦労
今回は，デザイナーとして，世間やプログラマに対して言いたい放題書かせてもらう。どうか怒らずに最後まで読んでもらいたい。デザイナーの皆さんには，大いに賛同していただける内容になっているはずだ。 デザイナーだって，タイヘンなんだ！ まず，デザイナーという仕事は，非常に誤解されやすい。例えば次のような誤解をうけて，暗い気持ちで日々の作業をこなしているデザイナーも少なからずいるはずだ。 1) デザイナーという職種に対する，先入観がある 世間（顧客やエンドユーザー）には，「すべてのデザイナー」＝「技術に無知」だという先入観がある。「デザイナー」とは「Webページの配色とレイアウトをする人」だから技術を知らなくて当然，むしろ知らなくてよいとする傾向すらある。開発ツールが完全分業に向けて進化しているのだから，デザイナーはビジュアル・デザインのことだけ考えていればいいという意見を持っている人もいるだろう。
ユーザビリティコラム：Jakob Nielsen博士のAlertbox
スクロールフェードの基礎 4月11日 読了までに約14分 スクロールフェードがユーザブルというよりも気が散るものになるかどうかは、その持続性、応答性、ページ上の要素への控えめな適用といった要素に左右される。このデザインパターンを正しく用いれば、ブランド認知を向上させ、ページの読み込みを最適化し、コンテンツをより理解しやすくすることができる。 このコラムについてUIデザイン・ユーザビリティ・UXデザインについて、その道の第一人者・ヤコブ・ニールセン博士（略歴）ら米Nielsen Norman Groupのメンバーが実例を交えて洞察するコラム『Alertbox』。その日本語訳を許可を得て公開しています。 デザインサイクルの各段階でアンケートを実施する方法 3月29日 読了までに約7分 ほとんどのUXアンケートは、デザインサイクルの最後の「耳を澄ます」フェーズで実施される。しかし、アンケートには
mixiのデザイン変更から学ぶ、ウェブサイトの最小横幅を800px以下にすべき理由 : akiyan.com
mixiのデザイン変更から学ぶ、ウェブサイトの最小横幅を800px以下にすべき理由 2006-02-09 mixiのレイアウトが大幅に変更された。右側にサイドバーが出現して、全体の横幅が大きく広がったのだ。全体の横幅は900pxほどだ。このため、私の環境ではブラウザの横スクロールバーが現れるようになってしまった。以下がその様子だ。 これはユーザビリティ的にかなりよくない状況だ。横スクロールは可能な限り避けなければならない。なぜなら多くのユーザーは横スクロールすること自体に不慣れだから。 しかし、画面を見てお気づきの方もいると思うが私はWindowsのタスクバーを縦に配置している。このレイアウトはマイノリティな類であろう。このレイアウトのためにブラウザの横幅が縮まっているので「それは例外だ。みんなブラウザの幅は900px以上にしてるよ」という声が聞こえてきそうだ。しかしこれには反論の余地があ
TinyMCE JavaScript Content Editor - naoyaのはてなダイアリー:
とある友人に教えても経ったTinyMCEという WYSYWIGWYSIWYG な HTML エディタライブラリがやばそう。 JavaScript で記述された LGPL でオープンソースな クロスプラットフォームの 多言語対応もしてて 簡単に使える ライブラリ。似たようなものに htmlArea というのがあって結構昔に話題になってたんですが、導入がめんどくさかったりブラウザによってはまともに動かなかったりとか色々面倒な感がありました。TinyMCE の方はと言いますと、Installation instructions にもあるとおり、 <html> <head> <title>TinyMCE Test</title> <script type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script> <script type=
ユーザが期待するページデザイン (クリックされやすいネット広告 ＾＾；) | 秋元@サイボウズラボ・プログラマー・ブログ
Examining User Expectations of the Location of Web Objects では、304 人への聞き取りを基に、ウェブページのどこに何があると期待されているか、を調べている。 ウェブサイトに置かれる(コンテンツ自身以外の)5つの要素は以下、 サイト内へのリンク 他サイトへのリンク ホーム(トップ)に戻る サイト内検索 広告スペース それぞれについて、サイト内へのリンクは左端にあると思われていることが多い、といった結果を、賛同者が多いと色が濃くなるグラフで表している。(各グラフはリンク先の記事を参照) ページの最後には、すべての調査をまとめたグラフがあり、どこにどの要素を配置すれば、「よりユーザが意表をつかれない」デザインにできるかを考える参考にできる。これはウェブサイトを設計する際の重要な知見の一つと言えると思う。 トップへ戻るリンクが左上、という
naoyaのはてなダイアリー - onsubmit で submit ボタンを disable にしてユーザビリティを良くする
先の Yahoo! Shopping のアプリケーションで、今度ちょっとやってみようと思ってたことを実装してみた。 http://bloghackers.net/~naoya/ys/app.cgi ボタンを押したときに、そのボタンが disable になります。この方法を使うとボタンが押されて次の処理に入ろうとしているというのが直感的に分かるのと、二重送信防止にもなるということでユーザビリティが改善できます。 仕掛けはすごく簡単で、form の onsubmit ハンドラに、その form に紐づく submit ボタンを disable になるような JavaScript を登録しておくだけ。 function disableSubmit(form) { var elements = form.elements; for (var i = 0; i < elements.length;
＠IT：ユーザーが選びやすいフォームのカタチを考えよう
Webアプリケーションのユーザーインターフェイス[2] ユーザーが選びやすい フォームのカタチを考えよう ソシオメディア 上野 学 2005/6/24 前回「ユーザーにとっては “ユーザーインターフェイス”こそが製品そのもの」は、ユーザーインターフェイスというもののとらえ方と、それをデザインするうえでは、人とシステムとの対話であるインタラクションデザインを論理的に行わなければならないという話をしました。今回は、GUIをデザインするうえで必要な前提知識と、Webアプリケーションの課題、そしてウェブアプリケーションにおけるインタラクションの要となるフォームコントロールについて考えていきたいと思います。 ■WIMPインターフェイス GUIは、別名「WIMPインターフェイス」とも呼ばれます。WIMPとは、ウィンドウ（W）、アイコン（I）、メニュー（M）、ポインター（P）のことで、GUIを構成する代
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rimo - Perfume ch
Yahoo UI Libraryを拡張した超リッチなコンポーネント集:phpspot開発日誌
マトメー