自己紹介の代わりに著書紹介 「P2P教科書」 「パーフェクトJava」 「実践JS サーバサイドJavaScript入門」 「パーフェクトJavaScript」
「苦悩からユーザビリティテストに希望を託すまでの道のり」と題してプレゼンしたので、資料を公開します
自己紹介の代わりに著書紹介 「P2P教科書」 「パーフェクトJava」 「実践JS サーバサイドJavaScript入門」 「パーフェクトJavaScript」
ニコニコ超会議2012『超エンジニアミーティング』で喋った時のスライドを公開します - ぼくはまちちゃん！
こんにちはこんにちは！！ ニコニコ超会議2012 『超エンジニアミーティング』で喋った時のスライドを公開します！ 『ふつうのformをつかいたい』 - はまちや２ - ニコニコ超会議2012 難しい話は苦手なので、普通のお話です。 あとこのスライドはIEでは動きません。他のブラウザで見てね。 (追記) IEでも見られるようになりました。たぶん。 超エンジニアミーティング全体の内容については、 『ニコニコ超会議の「超エンジニアミーティング」 を全部取材してみた』でまとめてくれています。 ちなみにぼくは自分が喋ったあとは、ずーっと隣の『ニコニコ学会β』の発表を見てました。 ロボット作ったりとかすごいかっこいい。 (関連記事) その言葉は誰のためのもの？ [この日記のブックマークコメントを見る/書く ]
立場が違えば、見えるものが違う。 - シニア現場の隅っこ。was使いやすさを考えてみる。(アクティブシニア・シルバー層の現場から)
タクシーに乗って道案内？をすると、少なくない、タクシーの運転手さんに言われる。 「お姉さん、車乗らないでしょう」 実際、その通りである。 話を聞くと、私の道案内は歩行者の目線らしい。 建物、建物の特徴、お店の名前で道案内をする。 車を運転する人は、できれば信号単位で教えてほしいとのこと。 分かってはいるのだが、いまだにうまく道案内ができない。 いる立場が違えば、見えているものも、感じているものも全く違う。 だから、ユーザーテストが大切なのだ。 ユーザーテストは、ユーザーさんに実際に操作をしてもらうことで、自社サイトの問題点であったり、使う人に物足りない機能、気づいていない機能やサービスを修正するために行う。 立場が違えば見るものが違う。 慣れた人と慣れていない人では見えるものも、感じることも違う。 先日入ったＫさん（62歳男性）は、インターネットを最近始めた。 Ｋさんが先日行った旅館のサイ
私が「Ice Cream Sandwich」を嫌いな理由 - Kazzz's diary
GALAXY Nexusが来て2日間使い倒した。ハードウェア自体は良いなぁと思う点が多々あったものの、ソフトウェアに関しては自分がそれを生業にしている点で評価がどうしても厳しくなってしまうようで、今の所嫌いな所ばかりが目立つ状況だ。 私は元々AndroidそれもGingerbread(2.3)までのスマートフォンを主なターゲットとした装飾を控えめにした機能優先なインタフェースとデザインは好きだ。がしかしAndroidとしてタブレットに始めて対応することとなったハニカムは機能的なデザインが影を潜め、完成度もお世辞には高いとは思えないそのデザインとGUIは結局好きになれずじまいだったのである。 そこでAndroid4.0だ。"Ice Cream Sandwich" (以降はICSと略する)はスマートフォンとタブレットのユーザインタフェースを統合するものでありそのデザインは基本的にはハニカムが踏
スマートフォンサイトに適したユーザビリティとは？【リサーチ】
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
わかっちゃったカモ!? iPhoneのスクリーンが3.5インチなワケ
わかっちゃったカモ!? iPhoneのスクリーンが3.5インチなワケ2011.10.11 15:00 junjun Dustin Curtisが教えてくれました。 iPhoneのスクリーンってなんで3.5インチなんだろ？ なんで大き目なスマホは手に持った時に扱いづらいんだろう？ っていう疑問に対する答えを。 歩きながら4.27インチのGalaxy S II を片手で操作しつつ、Google Mapsを見ていたら、右上のコーナーに触れるのが難しくて、イライラしてしたんですよ。そこで、とっさにiPhone4を取り出してテストしてたんです。iPhoneは左手で持ってたんですけど、親指がスクリーンのどの部分にもとどいて、スムーズに操作することができたんです。 だからiPhoneのスクリーンはいっつも3.5インチでなんだぁ！ と、納得する部分もあるけど、手の大きさは人によって違うからiPhoneが大
海外との文字入力文化の違い｜小学2年生で「普通に文字が打てる」という事のすごさ
ゴールデンウィークだというのにまた入院してしまい、色々とご迷惑をおかけした方もいらっしゃるかと思いますが、すみませんです。 今回の入院中に知り合った子で、小学2年生の男の子がおりまして、その子がまたすごいんですよ。 当たり前っていう人もいるかもしれないんですが、携帯電話でぽちぽちとメッセージを打って、メールのやり取りなんかをしちゃってるんですよね。 私からしてみると「すげー」と思ったわけですが、入院中暇だったので、携帯について色々考えてみた事を書き残します。なぜに私は、これをすごいと思ったのかを考えてみたかったのです。 日本は海外に比べてキーボードを使う敷居が高い とりあえず日本語のあの配列に慣れるまですごい労力が必要です。 また日本人は 「ひらがな配列を覚えるか、アルファベットを全て覚えた上で、ローマ字を覚えなければ文字が打てない」 というのがあります。 そう考えると、小さい子、特にロー
中小企業のウェブサイトで陥りやすい5つの落とし穴とアドバイス
Top 5 Web Design Mistakes Small Businesses Make [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに 1. 役に立たないナビゲーション 2. ゴールが不明瞭 3. カラーとコントラスト 4. 分かりにくいコンテンツ 5. 情報の詰め込み過ぎ はじめに もし、あなたが中小企業のオーナーであるなら、あなたのウェブサイトはあなたの会社の中枢であり、マーケティングとブランディングにおける極めて重要なパートでもあります。 見込みのある顧客がサイトのコンテンツを目的にあなたのサイトを訪問します、それはあなたの会社がどのように見えるかを意味しており、サイトのアピアランスとユーザビリティは成功への重要なポイントとなります。 しかしながら、サイトのデザインを間違ったものにしてしまうと、あなたのビジネスに悪影響を与えてしまうことになります。ここにあ
ページ内リンクをスマートにするsmoothScroll.js[to-R]
ページ内リンクをスマートにするsmoothScroll.js ページ内リンクをスムーズに行うjsライブラリ、smoothScroll.jsを作成したので公開します。 どういったものかはサンプルで確認してください。 <a href="#header">ページの先頭に戻る</a> などのページ内リンクをスムーズな移動に変更します。 これにより、エンドユーザーがページが遷移したという錯覚におちいることはありません。 設置方法は簡単です。 smoothScroll.jsをダウンロードして、設置したいページで取りこみます。 <script type="text/javascript" src="./smoothScroll.js"></script> 特定のリンクはスムーズさせない smoothScroll.jsは#（ハッシュ）付きのリンクを全てスムーズスクリプトに変換します。他のライブラリなどで#
![ページ内リンクをスマートにするsmoothScroll.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
プログラマのためのUXチートシート — ありえるえりあ
はじめに http://msdn.microsoft.com/ja-jp/library/aa511258.aspx の 「Windows ユーザー エクスペリエンス ガイドライン」 「ガイドライン」 主に「コントロール」 の抜粋です。 以下の基準で抜粋しました Web UIに応用可能 実用的かつ具体的 自明ではない プライマリUIを目立たせる プライマリ UI 要素を強調するには、以下に従います。 - プライマリ UI 要素は、視線の通り道に配置します。 - タスクを開始する UI 要素は、左上隅または中央上に配置します。 - コミット ボタンは、右下隅に配置します。 - 残りのプライマリ UI は、中央に配置します。 - コマンド ボタン、コマンド リンク、アイコンなど、注意を引き付けるコントロールを使用します。 - 大きなテキストや太字のテキストなどの目立つテキストを使用します。 ユ
ウェブデザインで可読性を考慮した背景と文字の色の組み合わせ方
ホワイトの背景にブラックの文字、ブラックの背景にホワイトの文字の組み合わせがベストでしょうか？ ウェブデザインにおいて、背景と文字の色の組み合わせ方で可読性を考慮するきっけかになるスタディをDevloungeから紹介します。 ホワイトとブラックを使用したコントラストのスタディです。 上段の1と3はホワイトに#ffffff、ブラックに#000000を使用しており、最も高いコントラストをもっています。 下段の2と4はそれより若干低いコントラストになっています。 上記をモニター越しに見ると、下段の方がより読みやすく、デザイナーがホワイトの背景の場合に文字の色を#000000ではなく、#333333を使用したくなるのも頷けます。 カラフルの背景色と文字色のスタディ ※訳者注：オレンジの箇所のテキストが間違ってますが、そのまま掲載しています。 左と右を比べた場合、左のボックスの方に目を奪われると思い
ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」:phpspot開発日誌
ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」 2010年01月19日- rikrikrik.com - jQuery autosave plug-in ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」。 データを編集中にフォームに書き込んでいて、ブログ記事などが消えたりするとても悲しい気持ちになりますが、このプラグインを使えばデータをブラウザのクッキーに保存してくれて、次にアクセスした時にリストアできるという素晴らしいプラグインです。 クッキー保存のため、サーバに保存する必要はないですし、手軽に使うことができそうです（ブラウザごとにクッキーに依存した文字数制限などは存在すると思います） こういうことを１からやろうとすると結構大変ですが、毎度のことながら、jQueryプラグ
ユーザを混乱させない表組みのコツ (ユーザビリティ実践メモ)
ウェブサイト制作において、多くの情報をいかに整理してユーザに伝えるかは重要なポイントの1つです。よく使われる方法として表組みがありますが、今回は実際の事例をもとにしたケーススタディを通じて、ユーザを混乱させない表組みのコツをご紹介します。 表１はよく見かける表組みの例ですが、実際にユーザの立場に立ってこの表を使用してみると、いくつかの問題点があります。 同種の情報をユーザは区別できない 表1の問題点として、 日付という同種の情報を多く掲載しているため、ユーザには各情報が何の日付を意味しているのか区別できず、分かりにくい列数が多いために、セル内に折り返しが発生し、読みにくい ことが挙げられます。 特に、1つ目の問題点は、表が縦に長い場合にユーザを混乱させる要因の一つになります。なぜなら、画面サイズに収まりきらないほど表が縦に長い場合、下にスクロールしていくと「開催日」などの項目名が画面から消
UIは正規化しない方がいいと思う - 六の日記はこっちになったぞ
曰く、「データ構造をこれこれこうすれば共通化できるでしょ。そうすると、この画面とこの画面とこの画面と・・・は同じデータを見る事になるんだから、分ける意味が判らない、意味がないでしょ。だから画面をひとつにしろって話でblur blur blur」 いやー、それ分けた方がいいと思います。 「えー？じゃあ、この画面とこの画面とこの画面・・・・と、何が違う？」 アクターが違う、ユースケースが違う、サブシステムからして違う、他色々考えるとあれもこれも違ってくると思う。というか、唯一違わないのがデータ構造、ただそれだけ。 そりゃ「出来る限りは」正規化というか共通化した方がいいと思うけど、データが正規化出来るという事実「だけ」を根拠にUIの正規化を正当化するのはおかしい。 稼働し始めると、ユーザーさんからどうせ「フォーカス順はこうした方が」「入力欄の並び順が」「この場合これが必須なので」とか、アクターや
ナビゲーションの実践的なスタイリング
本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介しています。今回は前回に引き続き、より実践的なテクニックとして、「ナビゲーション」を例にクロスブラウザな表示を意識したスタイリング方法を紹介していきたいと思います。 はじめに 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。 前回の記事では、ナビゲーションのマークアップに使われる代表的な要素として、a要素やリスト関連の要素（ul要素、ol要素など）を中心に取り上げ、これら要素のプレゼンテーションをコントロールする基本的なテクニックを紹介しました。今回は、これらのテクニックを組み合わせ、「グローバルナビゲーション」や「パンくずリスト」などのナビゲーションパーツをスタイリングする方法
もうWebデザインしないなんていわないよ、絶対（3） - ＠IT
もうWebデザインしないなんていわないよ、絶対（3） デザイナのためのUI設計段階のデモ制作6カ条 ワンパク 宮城秀雄、吉森大介、野村政行 2009/10/2 新人デザイナーが、泣く子もさらに泣くクライアントに自信を粉々にされた経験から導く、UI設計段階のデモ制作6カ条 イントロダクション 新人デザイナーが、Webデザイナーとして成長する連載も第3回になった。「入社1年目、デザインしないデザイナなんて!?」「デザイナーは消費されるもんだぞ」で、不安と戦いつつ、スキルの相乗効果が生まれ、仕事が楽しくなるまでをお伝えした。今回はいよいよクライアントとのやりとりの具体的なコツを伝授したい。泣く子もさらに泣く猛者達を目の前にし、自信を粉々にされた苦い経験から導き出した、UI設計段階のデモ制作6カ条だ。 どんよりと曇った渋谷に僕は降り立った。僕は月に1度水曜日にここへやって来る。 にぎやかなハチ公前
ユーザーローカル、Webページ内の行動を分析する無料アクセス解析ツール「ユーザーヒート」を公開 | gihyo.jp
ユーザーローカル、Webページ内の行動を分析する無料アクセス解析ツール「ユーザーヒート」を公開 9月30日、（株）ユーザーローカルは、Webページがどのように読まれているかを「マウスの軌跡」「クリックが多い場所」「熟読エリア」の3パターンの画像で可視化する、ヒートマップ※対応の無料のアクセス解析ツール「ユーザーヒート」をリリースした。 これまでのアクセス解析ツールは、どのWebページが読まれているかは分析できても、Webページ内の「どの段落がよく読まれているか」までは調査できなかった。ユーザーヒートでは、調査対象となるWebページの中を、サイト訪問者がどのように動いたのかを分析することができる。 ※ ヒートマップとは、温度測定データをデジタルによって可視化する技術のこと。サーモグラフィとも呼ばれる。 同サービスの主な解析機能は以下のとおり。 図1 左から「マウストラック分析」「クリ
ネットはユーザーの問題解決ツール、カギはユーザー体験シナリオ
今回のコラム（リレー連載）では、実際にウェブサイト構築におけるサービス・イノベーションへのアプローチについて書いてみたい。 そもそもウェブサイト構築に必要なこと ウェブサイトはユーザーが満足体験をし、「ありがとう」と言ってくれる、つまりファンになってくれる素晴らしいメディアだ。なぜそれが可能なのか？ それは、ウェブサイトに訪れるユーザーは、何らかの目的を持ち、それはほとんどの場合に何らかの問題を抱えているからだ。 つまりウェブサイトは、ユーザーの問題解決ツールでなければならないということになる。そして、ほとんどのユーザーが検索エンジンをスタートページとして選択していることも、忘れてはならない事実だ。 書籍であれ、テレビであれ、既存のすべてのメディアは、ほとんどが提供する側に、情報やサービスを提供する順番は、任されていた。しかし、ウェブサイトでは、企業がトップだと主張しても、ユーザーは、検索
整然とライン上で表示されるCSSフレームワーク·Baseline MOONGIFT
大学ノートには横線が引かれている。これを使って文字を書けば、斜めになったり一部だけ文字の大きさが変わって読みづらくなったりしない。整然と並んで書かれていれば後で読み返す時にもきっと分かりやすいはずだ。ある一定の基準に沿っていると安心感があり、情報を受け入れやすくなるのだ。 グリッド コンテンツを重視したWebサイトではそのような読みやすさの観点も考える必要がある。そのためのフレームワークがBaselineだ。 今回紹介するオープンソース・ソフトウェアはBaseline、グリッドに沿ったCSSフレームワークだ。 Baselineはまるで大学ノート、と思わせるような横線が引かれた背景画像にぴったりと合わせて文字が書かれている。カラムも1〜4カラムで調整でき、幅も3カラム分使ったり、2カラムずつで等分することもできる。統一された、均質的なデザインが組めるのが特徴だ。 フォーム テキストの表示の他
AnythingSlider
Other Information Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet accumsan eros, et iaculis massa fringilla auctor. Proin a mi ante, ut lobortis risus. Sed fringilla augue sed enim faucibus eget aliquam tellus ultricies. Morbi a magna eu ligula scelerisque lobortis vel non nisi. Aliquam condimentum libero eget elit ultrices sit amet ullamcorper felis gravida. Queenie's Kille
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
