震災後の社会不安に役立つ（？）社会心理学の知見 - とラねこ日誌
御用学者と謂うレッテルや、科学者対市民のような構図が意図的かどうかまではわかりませんが、つくられている事について、どらねこは色々と懸念をしております。ただ単に心配性なだけかも知れませんが、集団の心理やレッテルの威力を考えるとどうしても不安に思ってしまうのです。こうした状況は異なる集団間の葛藤を生み出しますし、集団の外にいる人間が述べることは信用ができないと考えてしまいがちです。震災後の復興では、私たちは互いに協力し合い、現実的な対応を行っていかなければならないと思いますが、信用のできないと考える相手との作業には、機会費用が多くかかる事がしられており、このような高コスト体質はその妨げになると考えられます。相手を信用するために担保が必要となるからです。問題をおこしたときの罰則を厳しくする事、第三者の検証を増やすことで手続きが煩雑になる事などなどです。こうした問題は見逃されがちですが、非常に重要
クリック可能な箇所でa要素を使用しない時に気をつけたい3つのポイント
リンクではない、例えばJavaScriptを埋め込むなどのクリッカブルな箇所でアンカーリンクを使用しない時に気をつけたい3つのポイントを紹介します。 When (and when not to) use an anchor tag? [ad#ad-2] 下記は各ポイントを意訳したものです。 a要素は、いつ使うべきでしょうか。 私はそれがクリック可能である時に、a要素を気前よく使用していました。しかし、a要素の定義を考えてみると、セマンティックではない使い方をしている場合があるのではないかと思いました。 例えば、Gmailのソースを調べてみると、クリック可能な大部分の箇所はdiv要素を使用しています。これはJavaScriptのイベント用のもので、a要素を使用すべきではないものです。 では、そのa要素を使用しない場合、ユーザーにそれがクリック可能であるように見せるために、どのようにしたらよい
ブラウザ上でEscapeキーを押したときの処理を簡単にかけるjQueryプラグイン「jEscape」:phpspot開発日誌
ブラウザ上でEscapeキーを押したときの処理を簡単にかけるjQueryプラグイン「jEscape」 2011年06月21日- S. Ferit Arslan | jEscape ブラウザ上でEscapeキーを押したときの処理を簡単にかけるjQueryプラグイン「jEscape」 普通に .keydown(function(e){ /* something */ }) でescapeキーを判別すればいい話のように思えますが、 .escape(function(){ /* */ } で書けるようになるというものです。 コードも非常に見やすくなっていいですね。他のキーでも対応すると便利そうです。 関連エントリ 上下左右どこでも設置できるスライドコンテンツ実装jQueryプラグイン「jQuery Slick」 Google Chart APIを使ったQRコードを超簡単に描画してくれるjQuery
HTML5のLast Callに関連するアクセシビリティの話題 | アクセシビリティBlog | ミツエーリンクス
既に半月近くも前のことになりますが、当社Web標準Blogなどでも既報の通り、HTML5がLast Callとなっています。HTML5にまつわるアクセシビリティの話題にはさまざまなものがあるのですが、本エントリーではその中からいくつかを簡単にご紹介します。 HTML5: Techniques for providing useful text alternatives 前述のWeb標準Blogのエントリーでは「HTML5仕様と関連仕様のいくつかがLast Call」になった旨が述べられていますが、その関連仕様のひとつであるこの文書、日本語に訳すと「有用な代替テキストを提供するためのHTML5におけるテクニック」といったところでしょうか、こちらもLast Callになっています。 タイトルの通り、HTML5における代替テキストの付け方についての文書なのですが、これからHTML5を使っていく方
[CSS]ネガティブホバーに違和感アリ、ポジティブホバーのススメ
ポジティブホバーのデモページ ホバー時のキャプチャ [ad#ad-2] ネガティブホバーとポジティブホバーの考察 直感的に 最も大切なことは、間違っているように思われない、ということです。 ホバー時に期待するものとしては、なにかしらの反応があると予想しませんか？ 例えば、ページに遷移するリンクをクリックしようとした際、そのリンクがあなたから逃げてしまうことは望まないでしょう。その箇所に注意が向けられるように分かりやすくなることは、直観的に理解ができるとも言えるでしょう。 この感覚はUIデザイナー・デベロッパーにとって、とても大切ことです。 そして、この直感をもたらすものが、ポジティブホバーです。 どちらがよいのか？ 答えはもちろん、ポジティブホバーです。 ホバー時には、そのアピアランスには加えるようにします。 アピアランスをポジティブにするには、下記の方法があります。 通常時：下線無し 下
iOSデバイスのデフォルトテキストサイズを大きくする方法 | ライフハッカー・ジャパン
モバイルバッテリーとは呼べない。「ほぼポタ電」なコレ1台で有事の時もアウトドアも大活躍!【AmazonスマイルSALE】
Alt+○キーで目的のフォーム要素にすぐ移動できるようにするjQueryプラグイン「KeyTips」:phpspot開発日誌
Alt+○キーで目的のフォーム要素にすぐ移動できるようにするjQueryプラグイン「KeyTips」 2010年12月03日- KeyTips jQuery Plugin Example Alt+○キーで目的のフォーム要素にすぐ移動できるようにするjQueryプラグイン「KeyTips」。 たとえば、以下のようなフォームがあって、要素にフォーカスした後、Alt+H を押すと、「Home phone」に移動できるというものです。 タブを連打しなくて一発でいけるのはいいケースもありそう。これは何度も何度も使うようなフォームに導入すると便利そうです。 たとえば、フォーム要素が沢山あって、そのフォームを使って毎日沢山の仕事をするような場合を想像してみると便利さが実感できるはず。 色々とアイデアがあるものですね。 関連エントリ jQueryを使って画像の上にコンテンツをクールにアニメーションされてオ
配色のアクセシビリティチェックを手軽に行えるシンプルなカラーツール・Contrast-A - かちびと.net
Web制作を行う前の配色チェック に手軽で良さそうでしたので備忘録 がてら記事にします。コントラストが 十分かどうか、などその配色がアク セシビリティガイドラインに沿ってい るかを示してくれるツールです。 Webツールとソフトウェアがあります。 目的はシンプルなツールですが機能はなかなかです。 Webサービスをご紹介しますが、無料でダウンロードして使えるAir製のソフトウェアもあります。 手軽に使える 基本的にマウスで操作できます。配色を左で決めて、明暗を右で調整、リアルタイムでプレビュー。 アクセシビリティチェックもリアルタイムで表示されます。 何かと使い勝手も良いのですが環境によっては横スクロール出るかもしれません。 パレット機能 パレット機能もあります。丸の数はチェックをクリアしているかを表しています。 ソフトウェアも Air製のフリーソフトもありました。まだ試していませんけど・・
色覚障がい者に配慮したWebサイトの作り方
2017年4月11日 Webサイト制作, アクセシビリティ, 色彩 今持ってるプロジェクトの中で、視覚・色覚障がい者にも配慮したWebサイトの制作があります。視覚障がい者向けのサイト制作についてはいくつか記事を発見できたのですが、色覚障がい者に向けたWebサイト制作についてはなかなかヒットしなかったので、断片的に読んだものを記事にまとめました。参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 追記: 一部表記の仕方を変更しました。 色覚障がいについて 目の、色を認識する細胞の変異で、色の識別が異なることを「色覚障がい」「色覚異常」と呼びます。色覚障がいといってもいろいろな種類があり、ここでは人口の多い赤系統や緑系統の色の識別が困難な、赤緑色覚異常の場合について書いてみます。 困難な点としては 灰色だと思ったらピンクのシャツだった 焼肉の際、生肉と焼けている肉の区別がつきに
探しやすい一覧のコツ (ユーザビリティ実践メモ)
コンテンツ量の多いサイトでは、情報を一覧にすることで、ユーザが欲しい情報を見つけやすくするという手法がよく使われます。今回は表形式で情報を整理する際の考え方を、ユーザ行動観察調査の事例を元にご紹介しましょう。 図1は、ある旅行情報サイトでの情報一覧ページです。次の休暇にお得なパッケージツアーを検討しているユーザは、どのようにこのページを使うと思いますか？ 弊社のユーザ行動観察調査の結果、ユーザの視線は下の図のように左右に大きく動き、かなり時間をかけて表を見ていく様子が観察されました。 このページを見る際のユーザの関心事は、第一に「予算の範囲内で一番お得なツアーは何か」であり、さらにいえば「同じ価格ならできるだけ魅力的なところに行きたい」ということでした。 したがって、ユーザは各パッケージツアーの「価格」と「割引率」に注目しています。この表では二つの情報が離れた場所にあるため、視線があちこち
会社案内ページでユーザの印象を良くする方法 (ユーザビリティ実践メモ)
ユーザが商品・サービスの購入を検討する中で、ウェブサイトを使ってその商品を扱っている会社の信頼性をチェックする場合があります。 特に、一旦契約したら継続的な関係が維持される金融サービスや、単価が高い不動産などの場合、その傾向が強いことが弊社のユーザ調査でも良く観察されています。 今回は会社情報でユーザの印象を向上する方法についてご紹介します。 自分がよく知らない会社に対して、ユーザは「この会社は安心・信頼できるか」 「マイナスとなる点がないか」という観点から情報をチェックします。具体的には「会社概要」「沿革」「役員構成」などに加え、金融系では「IR・財務情報」、不動産系では「取得免許の更新回数」などがチェックされやすい項目です。 これらの項目の中で大きなネガティブ要素があった場合、ユーザはその会社を選定対象から外してしまいますが、大きな問題がないと思ったら会社情報のチェックを終了し、引き続
「ログインフォーム」は慣れが大事 (ユーザビリティ実践メモ)
ユーザビリティを考える上では、ユーザの「慣れ」を考慮する必要があるということは、過去の実践メモでも何度か指摘してきました。 過去記事：「ユーザの慣れや先入観に配慮する」 そうした「慣れ」の代表例として、「ログインフォーム」が挙げられます。 ログインフォームの入力項目や並び順はほとんどのサイトで共通している 入力するID・パスワードも、多くのユーザは同じものを使い回している という特徴から、ログインフォームを利用するユーザは、ほぼ無意識的に行動する傾向が見られます。 特に、ある程度キーボード操作に慣れているユーザの場合、タブキーを利用して、 「ID入力→タブキー→パスワード入力→エンターキー」 という操作が身体に染みついていることがあります。 「他と違う」フォームは、ユーザのエラーにつながりうる とあるECサイトでは、次のようなログインフォームを用意していました。 このログインフォームでは、
タブキー利用にも対応するフォームのちょっとした改善 (ユーザビリティ実践メモ)
最近のユーザ行動観察調査(ユーザビリティテスト)では、ウェブサイトの利用、マウスやキーボードの使い方に慣れたユーザも増えてきていると感じます。そこで今回は、ユーザのタブキー利用への対応について考えてみたいと思います。 フォーム制作において、タブキーを使った時にフォーカスが移動する箇所の順番を、気にされていますでしょうか？タブキーを使って入力ボックスを移動した時に、適切な順番で、全ての入力ボックスへ移動できることが期待されます。 タブキーを使って移動するユーザにとっては、適切な順番でフォーカスが移動しない、タブキーで全ての入力ボックスへ移動できないケースが発生した場合、離脱の原因になりえます。 フォーカス移動の順番は、HTMLのtabindex属性で指定することができます。 <タグ名 tabindex=n> またフォーカス移動を指定する場合には、最後の送信ボタンにまで移動できるよう配慮しまし
あなたのサイトで音声認識が使えるようになるAPI『SpeechAPI』 | 100SHIKI
試してみたところ、ちと微妙だったが、可能性を感じたのでご紹介。 SpeechAPIは、JavaScriptだけで音声認識をしてくれるAPIだ。 これを使えばあなたのサイトに音声コマンドなんかを仕込んだり、しゃべった言葉をフォームに埋め込むなんてこともできる。 また音声からテキストのみでなく、テキストから音声、といったことも可能なようだ。 FLASH経由でマイクを使うため毎回許可を求められるのが微妙だが、アクセシビリティ的に必要なシーンでは重宝するのではないだろうか。 日本語で使うことができないのが残念だが、覚えておいても良いですな。
iPhoneとらくらくホンの静かなる戦い
iPhoneが好調だ。調査会社MM総研によると2009年度のスマートフォン国内出荷台数234万のうちの7割以上がiPhoneだという。まさに「一人勝ち」状態だ。 いま、このiPhoneとつばぜり合いを演じている携帯電話がある。想像がつくだろうか。「らくらくホン」だというと、意外に思う方が多いかもしれない。 ともに「ユニバーサルデザイン」に基づく機能を搭載 らくらくホンは、NTTドコモが販売している高年齢層向けの携帯電話である。主に富士通が開発・製造しており、2010年2月時点で累計で1600万台を出荷している人気機種だ。画面で表示する文字を大きくでき、ボタンが押しやすくなっているなどの特徴がある（写真1）。 使いやすさを重視した携帯電話が、高機能なスマートフォンであるiPhoneと対決する要素はどこにあるのか。それは「ユニバーサルデザイン」という考え方に基づいた機能を搭載している点である。
「なんだ朝日新聞は読めないのか」――高齢者がiPadを使ったら？
iPadが発売されて3週間ほどが経過した。発売当初の熱気が落ち着きつつあり、改めてiPadについて振り返ってみるにはいい時期ではないだろうか。米国での3G版発売が5月7日と正式発表される一方で、日本を含む世界での販売は5月末に遅延と残念なニュースも出ているが、2週間ほどiPadを使い続けてきた感想と、これまでに出てきたiPad関連のニュースをまとめて、iPadリポート総集編という形でお届けしていく。 以前に、Appleイベント現地リポートまとめの後編として「ぼくらは“未完成”の「iPad」に期待しすぎていたのだろうか」という記事を書いたが、ここで「iPadは高齢層や教育現場、PCとは縁のやや薄い一般層あたりに需要があるのではないか？」という言葉でまとめのコメントを締めてみた。 iPadのような“PCの一歩手前”である機能限定型デバイスは、多くの一般層を対象に潜在的な需要があるのでは、とは常
Webアクセシビリティを動画で学べるサイト「Open Accessibility Library Project」公開 | Web担当者Forum
付添い介助付き旅行を手がける特定非営利活動法人しゃらくは、Webアクセシビリティを動画で学べるサイト「Open Accessibility Library Project（OALP）」を4月19日に一般公開した。 OALPでは、障害者や高齢者、在日外国人のインターネット利用者がどのようにWebサイトを使い、どんなことを改善してほしいのかというインタビューを動画で公開する。これまでも、動画でアクセシビリティを学べるサイトはあったが、同サイトではさまざまな属性、50人以上のインタビューを掲載しているのが特徴。Webアクセシビリティに関するインタビューをこれだけ掲載しているサイトは、世界中でも例がないという。 OALPのサイトは、クリエイティブ・コモンズ・ライセンス（表示-改変禁止 2.1 日本）でライセンスしており、勉強会、セミナーやクライアントへのプレゼンテーションなど、商用目的でも利用でき
http://oalp.org/video/
For full functionality of this site it is necessary to enable JavaScript. Here are the instructions how to enable JavaScript in your web browser.
自動でリンク切れチェックし、Webサイトの品質を保つ便利ツール8選 | 人手に頼らないWebサイトの戦略的品質管理指南
Webサイトの品質維持には、リンク切れや不要なファイルを少なくすることが重要です。今回は、Webサイト品質の問題点発見とその解決へのスピードを格段に上げる自動チェックツールを8つ紹介します。日本アイ・ビー・エムが提供するIBM Rational Policy TesterやW3Cリンクチェッカー、W3Cマークアップ検証サービス、リンク切れカッター、Web Developerなどのフリーツールも紹介 数百ページ～数万ページというWebサイトでは、人的な検査だけですべての問題点をチェックするのは実質的に不可能に近い。また、ページ数が少なくても、チェック漏れがあっては意味がない。 自動チェックツールを利用することで、問題点発見とその解決へのスピードは格段に上がる。現代のWebサイトでは、理想的な品質管理を実現するには、何らかのツールの利用は必須だともいえる。 最も効率良く診断できる専門ツール手前
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webサイト品質管理のチェック項目リスト | 人手に頼らないWebサイトの戦略的品質管理指南