ウェブサイト 実はユーザー中心設計やユーザビリティ、インターフェースについてちゃんとまとまったサイトは国内には少数です。 ここに挙げたサイトはどれも大変充実したものだと思います。 ※残念ながら、海外の記事を紹介しているブログでよいものは見つからず。 劣化コピペサイトを紹介するのも気が引けるので割愛しました。 ヤコブ・ニールセンのAlert Box ユーザビリティ・ユーザ調査の世界的権威であるヤコブ・ニールセン博士のナレッジを発表しているサイトです。 実際の調査結果、そこに対する考察も含め、とてもよくまとまっています。 アップル ヒューマンインタフェースガイドライン Max OS Xのためのインターフェース資料に始まり、アプリケーションをデザインしている間、心に留めておくべき基礎となるデザイン原則がまとまっています。 もちろん、Windows / Linusユーザーにとっても必見。 ユーザビ

AppStore のレビューでは「さいすけを超えた！」と評されている本気度たっぷりのカレンダーアプリが登場しました。 アプリ名は、.Sched (sync with Google Calendar) 。Google カレンダーと完全同期を行って閲覧、編集、新規イベントの作成のできるアプリです。 アプリの見やすさはもちろんのこと、縦、横での月別・週別表示違いなどなど、カレンダーアプリとしては申し分の無い使い勝手を実現してくれています。 今回はAppBankのエースライター、entrypostman 氏の10月の予定をみながら使い方を説明していきます！ .Sched for iPhone and iPod touch 起動しました。 まずはデータ元となるGoogle カレンダーのアカウントを入力してっと。。 データのロード中から、、、 出た！Google カレンダー！！青いのはentrypos

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. What's New in jQuery UI 1.14? Compatibility with recent jQuery versions (up to 3.7): Usage of deprecated jQuery API

抜粋　製品が直感的、または自然なものになるべきである、ということは多くのインターフェース要件に明記されています。しかし、この言葉が表しているような、人間の直感、つまり事前にコンセプトを知ること無く、学習段階を必要とせず、合理的な考えを行うこと無しに獲得できる知識などありはしません。普通の人々にはできそうもない迅速かつ正確な判断を熟練者が行う場合、一般的に直感を用いていると表現されますが、その場合でも、彼らは自身の経験と知識に基づいて判断を下しているのです。多くの場合、彼らは過去に学んできた、普通の人が知らない手法やテクニックを用いています。作業の熟練者は、他の人が気付いていない、あるいは理解していない手がかりを用いています。つまり、直感ではなく、技能を使っているというのが本当のところなのです。　あるユーザーが、特定のインタフェースを直感的と評価した場合、それは該当ユーザーの慣れ親しんでいる

20 Vital Techniques & Best Practices For Effective Web Design 下記、各エッセンスの簡単な説明とワンポイントとサイトの紹介です。noupeのサイトでは他にも多くのサイトが紹介されています。 1. ビビッド カラー 2. グラデーションとライトのエフェクト 3. 透過 4. グランジ 5. 手書き風のデザイン 6. 押さえた色味 7. 水彩画のエフェクト 8. ネイチャー系のエレメント 9. 写実的でリアルな背景 10. 特大のタイポグラフィ 11. デコラティブなタイポグラフィ 12. 大胆な背景 13. レトロやヴィンテージのエレメント 14. アイキャッチなヘッダ 15. コラージュしたエレメント 16. テクスチャを使った背景 17. タブ型のナビゲーション 18. ブラックとホワイト 19. 水平方向のスクロール 20.

ユーザーにあなたのウェブページを容易で、そして楽しくアクセスできるようにする実用的なユーザビリティの10のポイント（ガイドライン編）をSmashing Magazineから紹介します。 Tumblr 多くのフォームは2カラムのレイアウトを採用し、ラベルはフィールドの左に配置されています。一見よさそうに思えますが、これは採用すべきではありません。 なぜなら、フォームは一般に垂直に方向付けがされているためです。ユーザーが左→右→左下と視線を動かすことより、上→下と移動する方が容易です。 また、ラベルを左に配置することはもう一つの問題があります。 あなたはラベルを右揃えと左揃えのどちらで配置しますか？　左揃えはラベルを読みやすくしますが、どのフィールドのラベルか判断するのが難しい場合があります。 右揃えはその逆です。フィールドのラベルを判断するのは容易ですが、ラベルを俯瞰するのが困難です。 2.

jQueryでチェックボックスをすごい形にカッコよくしちゃう方法が紹介されていました。 具体的なデザインは以下。もうチェックボックスの原型がないという、面白くて分かりやすいＵＩに調整されています。 マークアップ上も、次のように綺麗になっています。 実際のタグは、不可視にしちゃって、jqueryによって、on/off を切り替えればいいわけですから、まさに何でもありで、参考にして他にも面白く、使いやすいデザインはいくらでも作れるかもしれません。 jQueryによるクロスブラウザ対応が出来るので、昔のように神経質になる必要もないですね。 詳細は以下のエントリから参照。 Pretty checkboxes with jQuery | Aaron Weyenberg

9/1にロケットスタートからリリースされたサイト「nanapi [ナナピ] - みんなで作る暮らしのレシピ -」でのサイトデザインを担当させていただきました。 制作過程みたいなものを書いてみたいと思います。 ロケットスタートに全力投球を誓った、けんすうさんからのご依頼 ある日、ロケットスタートの社長、けんすうこと古川健介さん（以下、けんすうさん）から ：HOWTOサイトをつくりたいからデザインを依頼したい！ ということで早速じっくりとお話を伺うことにしました。 ベンチャーだからこそできる！？合宿的制作スタイル 以前けんすうさんと一緒にお仕事させていただいたときに双方にとってよかったことがあります。 それは、デザインカンプができあがるまでのプロセスの段階で、短期間ながらじっくり直接やりとりする時間をつくる、ということでした。 宿泊こそ伴わないものの、合宿に似たようなスタイルです。 長い時

タブUIの構造や特長、設置の判断、ユーザビリティ、アクセシビリティ、実装のポイントや機能の拡張方法、実装例やスクリプト例をSmashing Magazineから紹介します。 Module Tabs in Web Design 以下、その意訳です。 ※原文では「タブモジュール」となっていますが、タブモジュールやタブUIと記載すると煩雑になるため、「タブ」と略します。 タブのみを指す場合は、「タブ コントロール」としています。 はじめに 1. タブの構造 2. タブはいつ使用するのか 3. タブのユーザビリティとベストプラクティス 4. タブのアクセシビリティ 5. タブの拡張 6. タブの実装集 7. タブを実装するためのチュートリアル集 8. タブを実装するスクリプト集 はじめに タブモジュールは複数のコンテンツを異なるパネルに配置したユーザインターフェースのデザインパターンです。 パネル

Wii観察会メモ Wii本体 メーカー名を前面に押し出さない Nintendoサイドのみ リモコン、本体、全てWiiの文字あり 斜めカット 土台に入れたときに安定させるため お母さんに嫌われないサイズ コネクタの抜き差しが気持ちいい 金具ではない、プラスチック 読み仮名がついている Game Cubeができる 昔からのユーザーに配慮したのでは 設定画面 カーソルオーバーで音と震え BGMがあって飽きない 無いと長く感じる 進むときと戻るときの音のテンションが違う 左上に画面の深さがグラデーションで表示されている クリックはできない いらないものは極力表示しない キーボード ボタンのアニメーション アニメーションが生っぽい感じ キーが大きくなる 自分が押そうとしているキーが分かりやすい あたり判定は元のサイズ 色と形を変えると分かりやすい 子ども向けだと派手に変える 大人向けだとおとなしい感

先日、第0回のWii観察会やりました。すごくおもしろかったです。以下、その時のメモです。 tenjin.web: ui/0 僕は「なんでインターフェースを集まって勉強しなくちゃいけないのか」ということを話しました。(PDF、後で消えるかもしれません) なぜインターフェース勉強会か(PDF) 次回以降も隔週土曜で定期的にやっていこうということになりました。全体の知識マップは広いけど、こんなかんじで「理論」「基礎」「実習」の3方向で学習していこうという(とりあえずの)計画です。 「基礎」として周辺知識の概観を浅く把握するために、「Design rule index」を一回に10ルールぐらいづつ読み進めていこうと思っています。この本を持っていない場合は、とりあえず持参しなくてもOKです。 Design rule index―デザイン、新・100の法則作者: William Lidwell, Kr