母親から学ぶ使いやすいウェブサイトのインターフェース・デザイン
インターネットが苦手な母親に子どもが使い方を教えるのはほほえましい光景ですがなかなか骨が折れるものです。そんな母親が1人でもウェブサイトを使えるようにデザインすることで、誰にでも使いやすいユーザー・インターフェースを作る方法がまとめられています。 Designing User Interfaces for Your Mother — Design/UX — Medium https://medium.com/design-ux/dd45ec50f7b0 ◆母親のためのインターフェース・デザイン ウェブデザイナーであるトニー・ジャインズさんは、「ちょっとコンピューターのことを見てくれない？いろいろと大丈夫かしら？」とよく母親から不安そうに聞かれるそうです。彼女はインターネットを使いますが、全てを知っている訳ではありません。そこでジャインズさんは世界中に何百万の母親と同じレベルのユーザーがいる
Account Suspended
Account Suspended This Account has been suspended. Contact your hosting provider for more information.
第13回 Windows 8を持ち運ぶWindows To Go
第13回 Windows 8を持ち運ぶWindows To Go：Windows 8レボリューション（1/2 ページ） Windows To Goとは、USBメモリやUSBハードディスクにWindows 8やアプリケーションをインストールして出張先や自宅へ持ち運ぶためのテクノロジ。ちょっと借りたPCでUSBブートさせれば、既存のシステムにいっさい手を加えることなく、いつもの環境をすぐに再現できる。 連載目次 「Windows To Go」は、Windows 8のEnterpriseエディションで導入された、新しいWindows OSの実行・運用形態だ。今までのWindows OSは、Windows PEのような一部の例外を除いて、システムの内蔵ディスクにインストールして利用するのが当たり前であった。システムを起動すると、起動するOSを選択するブート・メニューが表示され（OSが複数インストー
第1回 使いやすいメニューはどう作る？ ～水平メニュー | gihyo.jp
「使いやすいメニュー」に必要な3つのこと よく「ナビゲーションメニュー」と言われるように、Webサイトではメニューはナビゲートするためのものです。ナビゲートする対象はもちろん人（ユーザー）ですが、もっと具体的に言及すると「情報を探しているユーザー」ということになります。そして、情報を探す際には、できるだけ簡単に探せる必要があります。 使いやすいメニューには、3つのことが必要です。1つ目はアフォーダンス。言い換えると「メニューがメニューである（次の情報に導く）とすぐにわかる」ということです。2つ目はインタラクティブ性。たとえばメニューにマウスオーバーした、あるいはクリックしたことがわかることを意味します。3つ目はカレント表示。これは「現在いる場所がわかる」という意味です。 この3つを満たすため、メニューには3タイプから4タイプの画像を用意することが多くなっています。ノーマル時、マウスオーバー
視覚障害者のインターネット使用、サイトやベンダーはもっと考慮すべき？ | スラド IT
視覚障害者のインターネット使用はかなりフラストレーションが溜まるものだそうだ（ComputerWorld記事、本家/.記事）。例えばマイクロソフトは画面読み取りのツールなどを提供しているが、使い勝手に関する改善の余地は大幅にあるとのこと。単純に画面上の情報が分かるだけでは不十分で、複雑化したウェブページをナビゲートするのは至難の業であることも多いという。記事に対する意見は大半がこの問題を取り上げたことに対する好意的なものだったそうだが、中には「視覚障害者は、糖尿病患者が『砂糖を使うな』と主張できないのと同じで、自分たちのニーズを満たすよう周りに対してそんなに要求出来ないものだという現実を理解すべき」とのコメントもあったそうだ。本家ではウェブサイトやソフトウェアメーカーの努力が足りていないのか、それとも視覚障害者は現状を受け入れるしかないのか？と投げかけているが、/.Jの皆様はどのような見解
40分でできるホームページ診断 ～最低限クリアしたい40項目のチェックシート | Web担当者Forum
40分でできるホームページ診断 最低限クリアしたい40項目のチェックシート［訪問者目線編 2008年版］ SEO？ ユーザビリティの向上？ それ以前にしなきゃいけない「サイト作りの基本のキ」を、あなたのサイトではちゃんとできているだろうか？ 高度な施策に目を向ける前に、最低限クリアしておきたいチェックポイントをまとめてみた。あなたのサイトは何点とれるだろうか？ TEXT：編集部 協力：株式会社 環 ウェブサイト作りの基本のキSEOやユーザビリティに限らず、キーワード広告、アクセス解析、LPO、リッチインターフェイスなど、サイトの効果をアップさせる手法はさまざまあり、Web担でも詳しく解説してきている。 しかし、そういった施策にコストを割く前に、現状の自社サイトが、訪問者が「あれれ？」とマウスをうろうろさせてしまうような状態になっていないか確認したことがあるだろうか。 そんなあなたのために、
CSSとJavaScriptで実装するタブ型インターフェイス37選 -noupe | コリス
noupeのエントリー「37+ Great Ajax, CSS Tab-Based Interfaces」から、CSSとJavaScriptで実装するタブ型インターフェイス37選の紹介です。 37+ Great Ajax, CSS Tab-Based Interfaces 自動で切り替わるタブ型インターフェイス Easy Tabs 1.2 - now with autochange Rotating jQuery tabs example Tab Content Script (v 2.1) スライド式のタブ型インターフェイス Sliding Tabs Coda-Slider Perspective Tabs AJAXを使用したタブ型インターフェイス Ajax Tabs Content Script (v 2.1) 閉じることも可能なタブ型インターフェイス Tab Panels Close
第30回 JavaScriptの動作を軽くするための工夫：ITpro
今回はJavaScriptとWebページの表示・操作の体感速度について考えてみます。というのは，JavaScriptのせいでWebページの表示や操作などの速度が遅くなっている，と感じることがあるからです。 現在のWebサイトでは，JavaScriptを使って使い勝手を向上することは，ごく当たり前に行われています。例えば，動的にページを書き換えたり，ページ遷移を行わずにサーバーと通信を行ってデータを取得したりと，JavaScriptを使うことで，Webサイトをより便利に，より使いやすくすることができます。 Ajaxという言葉がはやってから，もう2年以上がたつんですよね。何年か前，JavaScriptはじゃまで，セキュリティを低下させる不要なものだと見なされていた頃がありました。しかしそれから一変して，「JavaScriptをがんがん使ってもいい」という空気になったことで，Webサイトを作成す
第9回 より見てもらえるようにユーザーを“そそる”、ワンランク上の画面構成のコツ | Web担当者Forum
第9回 より見てもらえるようにユーザーを“そそる”、ワンランク上の画面構成のコツ 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか？ 今木 智隆（株式会社ビービット） 限られた画面内でユーザーの目線を 効果的に誘導するテクニックを紹介「ファーストビュー」、すなわち「ユーザーがサイトを訪問したその瞬間に画面に表示される領域」は、画面設計・デザインにおいて、常に意識しなければならないポイントの1つだ。限られたスペースの中で、いかにコンテンツに優先度を付け、効果的に構成するか、かなり悩まれた経験のあ
Ajaxの弱点を補うscript.aculo.usの楽しいエフェクト
Ajaxの弱点を補うscript.aculo.usの楽しいエフェクト：パターンとライブラリで作るAjaxおいしいレシピ（4）（1/4 ページ） script.aculo.usの一歩進んだテクニック 今回紹介するscript.aculo.usは、以下のような機能を提供するAjax（JavaScript）フレームワークです。 ビジュアルエフェクト ドラッグ＆ドロップ DOM操作 オートコンプリート スライダー 単体テスト prototype.jsをベースのライブラリに使用しているので、prototype.jsとともに利用したことがある方も多いのではないでしょうか。 今回はscripot.aculo.usのエフェクト機能に焦点を絞り、より突っ込んだ使い方を紹介していきます。 ■ Ajaxの弱点を補う「エフェクト」の必要性 Ajaxを活用することで、画面全体を再描画せずに画面上の一部分のみを変更し
全てのチェックボックスをチェック/解除する - JavaScript
サンプルと機能 → Sample 1：全てのチェックボックスをチェック/解除する フォームにあるチェックボックスを全てチェック/解除します。 チェックボックスは、name属性で判別します。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 → Sample 1：全てのチェックボックスをチェック/解除する <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // チェックボックスに使用している名前 chn = new Array("ch1","ch2","ch3","ch4","ch5","ch6"); // 全てのチェックボックをチェックする fu
入力値を簡単に制限する「yav」とかフォーム入力チェックいろいろ
メール送信フォームやらアンケートの回答フォームやら、とにかくネット上には様々なフォームが存在しています。入力する値が間違っていると「エラー」表示を出すタイプのモノが多いですが、出される側から見れば「そんな値を入力できるようにするなよ！」「8文字までしか受け付けないんだったら、最初から入力可能な文字数を8文字に制限しておけよ！」「エラーが出たらどこを再入力すればいいのかわかりやすく表示してくれ！」などと思うこともしばしば。 というわけで、この「yav」は入力エラーチェックだけでなく、最初から入力できる値を制限したり、数字であれば範囲指定したり、入力チェック後にフォームの色を変えてわかりやすくしてくれたり、とにかくいろいろ便利な入力チェック機能を簡単に組み込むことができるオープンソースで開発されているJavaScriptファイルです。入力チェック後のエラー表示もポップアップウインドウやページ内
検索ユーザーの目線はどう動く Yahoo！とGoogleで違い
アイレップとジャパンマーケットインテリジェンスは6月11日、Yahoo！JAPANとGoogleの検索結果画面を見ている際のユーザーの目線の動きを調べた結果を発表した。Yahoo！は「関連検索ワード」や「Yahoo！カテゴリ」が注目されており、Googleはサイトのタイトルを最初から最後までよく読まれているという傾向が見えた。 測定は昨年9月から10月にかけ、目の網膜に照射した赤外線の反射を利用する専用機器を使い、無作為に選んだ76人（男女半々）を対象に実施した。 それぞれ、画面上部に検索連動広告が表示されている場合と、表示されていない場合に分けて調べた。 Yahoo！検索で広告が表示されていない場合、目線は「逆L字型」に動く。検索結果の上に表示される「関連検索ワード」や「Yahoo！カテゴリ」を見るために目線が右に動き、その後目線が左に戻り、検索結果サイトのタイトル先頭部分を下まで流して
知っておいて損はないAJAXやCSSを駆使したタブインターフェース18種類 - GIGAZINE
技術的知識が無くてもタブを作れるフリーソフトからかなり派手な効果を伴うタブ作成ライブラリ、Yahoo！やGoogle、Adobeの作ったタブまで、いろいろと応用が利いて独自の特徴があるものをざっくりと18種類ほどピックアップしてみました。 いろいろなページやブログで頻繁に見かけるタブ方式のメニューですが、こうやって並べてみると実は見せ方も使い方も種々様々であることがよくわかります。 まずは知識不要でタブが簡単に作成できる「CSS Tab Designer」。Windows用のフリーソフトで、約60種類ものデザインが用意されています。その中にタブ方式のメニューもたくさん用意されており、ほかにも縦型のメニューやZDNet風メニューなども用意されています。 OverZone Software - CSS Tab Designer 細かいカスタマイズが可能なタブメニュー。画像を使ったサンプルも用意
ユーザーの目線を考えることの重要性 | ユーザー視点のウェブデザインガイド | Web担当者Forum
第1回 サイト訪問者の目線で考える 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか？ 今木 智隆（株式会社ビービット） ウェブサイトがビジネスとして成功するための要素は、コンセプト・デザインから細かな言葉遣いに至るまでさまざまであるが、その中でも「ユーザーにしっかりと（見てもらうべき）情報を見てもらう」ことは常に重要な要素の1つに挙げられるだろう。 いくらデザイン（見た目）がよく、コンテンツが充実しているサイトであっても、ユーザーは驚くほどすぐにサイトから離脱してしまうことが少なくない。この
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hokusai Manga Construction Kit
https://www.openvista.jp/archives/note/257/?257/
moveme.comのエラーメッセージ（というか表現） - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
どんなパソコンでもタブレットPCにしてしまう『NAVISIS』 | 100SHIKI
“色”でグッと引きつける！：NBonline(日経ビジネス オンライン)