Alertbox: 2005年 ウェブ・デザインの間違いトップ10（2005年10月3日）
2005年、ユーザをうんざりさせてきたWebデザインの間違いをリストアップしてみると、古くから言われているものがランクイン。悪さをし続けていることがわかった。 Top Ten Web Design Mistakes of 2005 by Jakob Nielsen on October 3, 2005 Webデザインの間違いをリストアップするにあたり、今年は趣向を凝らしてみることにした。私が発行しているニュースレターの読者にお願いして、今年、もっとも腹立たしいと思ったユーザビリティ上の問題点を投票してもらったのだ。 読者の参加によって、ユーザテストでは気付かなかった多くの課題が浮き彫りになるだろうと思っていたが、そうはならなかった。30位までにランクインした問題点は、ユーザビリティガイドラインの中で指摘済みのものばかりだったのだ。今年のトップ10を読んで、“聞き覚えがあるぞ！”と思われる方
ウノウラボ Unoh Labs: フォームのユーザビリティを改善する10のTips
miyakeです。Webアプリケーションにおけるユーザーインタフェースの代表格と言えばフォーム。今日はそんなフォームのUIを作るに当たって、普段自分が心掛けていることをつらつらとご紹介します。 ■チェックボックスやラジオボタンはfieldset,label要素でくくる チェックボックスやラジオボタンには一般的にその内容を表すテキスト（ラベル）が付けられますが、input要素だけでマークアップした場合、チェックボックス（ラジオボタン）の部分しかクリックすることができません。 label要素を用いることで、ラベルの部分をクリックしてフォームを操作することが可能になります。これは是非設定しておきましょう。 ラベルをクリックできると思って期待を裏切られると、かなりのストレスになりかねません。 また、そのチェックボックスやラジオボタンのグループをfieldset要素で囲んでおくことをお勧めします。マ
シニアはログインでつまづく？！ - Trans
最近、シニア向けのあるWebサービスを構築している。その中で、シニア（特に、団塊世代、もしくはそれ以上）の方が、どういったところでWebサービスにてつまづくのかが少し分かってきたので、自分の備忘録も兼ねてメモしておく。 先に言っておくと、シニアはまずログイン、もしくは新規登録でつまづく。「中に入れない」「何かパスワード間違えているみたいなんだけど」そういった質問が、どんどん寄せられる。このWebサービスを構築する前に、できる限りネット上でシニアのネット行動特性みたいなものは調べてみたが、その多くは「ログイン後」、もしくは「ログインする必要がないサイト」のことだったと、今更ながら気が付いた。例えば、 ユーザビリティ研究所: シニア向けウェブサイト構築のための10のポイント 使いやすさを考えてみる。(アクティブシニア・シルバー層の現場から) そう、シニアのネット上の行動特性はある程度研究が進ん
CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない - webデザイナーのナナメガキ
「text-indent:-9999px;」や「display:none;」でテキストをウィンドウ外に飛ばしたり非表示にして、代わりに背景画像を表示させる手法を「画像置換(Image Replacement)」というが、これには重大な欠陥があって、最近では使用が推奨されていない。 h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; text-indent:-9999px; } <h5>SITE TITLE</h5> h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; } h5 span{ display:none; } <h5><span>SITE TITLE</span></h5> 上記のようなCSSだと「CS
ユーザビリティの高い、使いやすいフォームを制作するための12のポイント
Li'l Engineのエントリー「ユーザビリティフォームのためのチェックリスト」の意訳で、ユーザビリティの高いフォームを制作するための12のポイントの紹介です。 Checklist for Usability Forms 不明な箇所は英文のまま記載してましたが、皆様の協力により3,5を和文にしました。 フォームは正しく入力できるように、可能な限り簡潔に。 フォームには、必要なインフォーメーションを含める。 タイトル：なんのためのフォームか フォームのヘルプ キャンセル(中止)の選択肢 入力すべき項目は、多くしない。 重複する入力項目は設置しない。 フォームの公開後しばらくしたら、収集したデータが実際に使用されているかチェックする。利用されていないものがあれば、収集しないようにする。 長いフォームは紛らわしいので、分ける。 タスクごとに分ける それぞれのページごとにチェックをし修正すること
大月市の借金相談／返済の無料相談【おすすめ3社】弁護士と司法書士／債務整理・任意整理・自己破産・個人再生
「なぜこんなことに…。」 借金が増え、多重債務を抱え、自分ひとりではどうしようもない…。 そういった状態なら、今すぐ司法書士・弁護士に相談するのが一番です。 弁護士・司法書士に借金返済・債務の悩みを相談して、最善の解決策を探してみましょう。 大月市でお金・借金の相談をするなら、まずはネットの無料相談サービスを使ってみては？ スマホやパソコンのネットで、自分の今の悩みや状況を冷静に相談できるので安心です。 当サイトでは大月市にも対応していて、インターネットで無料相談ができる法律事務所・法務事務所を紹介しています。 借金返済の悩み解決のために、できるだけ早く弁護士・司法書士に相談することをオススメします。 大月市の債務や借金返済解決の相談なら、この事務所がおススメ。 弁護士が対応してくれて、しかも全国対応の法律事務所です。 初期費用が無料なので、現在の手持ちがなくても安心して相談できます。 弁
Webアクセシビリティのポータルサイト『Infoaxia(インフォアクシア)』
アクセシビリティPodcast 2人の軽妙なトーク(?)で最新情報を提供 Web Developer 日本語版 2008年3月より、開発およびユーザーサポートを他サイトへ全て移管しました。 移管のお知らせ "Webアクセシビリティとは？"から始まる『Webアクセシビリティ入門』、2004年6月に制定されたWebコンテンツのJIS（日本工業規格）『JIS X8341-3の解説』など、これだけは知っておきたいWebアクセシビリティの基礎知識を習得。 Webアクセシビリティ入門 Web アクセシビリティを正しく理解する上での基礎知識を分かりやすく解説。 JIS X8341-3の解説 2004年6月に制定された、Webコンテンツの JIS X 8341-3 について詳しく解説。 Webアクセシビリティ用語辞典 Web アクセシビリティに関連する専門用語の辞典。 『基礎知識』トップ
色の組み合わせチェック - 読みやすい前景色と背景色
誰にも読みやすいコンテンツとするためには、文字色と背景色のコントラストをしっかり確保しなければなりません。これを客観的にチェックするため、色の明るさの差などを計算する仕組みを用意してみました。 色の組み合わせ検証 テストの手法 コントラストの計算 色覚偏位のシミュレーション 当サイトが独自に加えたコントラストの段階評価 コントラストと読みやすさの相関関係 色の組み合わせ検証 検証してみたい文字色と背景色の組み合わせを入力してみてください。色の指定には3桁もしくは6桁の16進数カラーコード、あるいは色名（CSS2の色名＋SVGの色名、計147色）およびrgb()の表現が使えます（初期値は、読みにくい例が入っています）。また、入力欄左ボックスから216色のパレットを呼び出して入力することもできます。文字色2、3は、複数の文字色の組み合わせを表示するためのオプションで、コントラストなどの計算は行
prototype.jsを用いたフォントサイズ変更スクリプト
Posted by: Hirotaka Ogawa @ January 11, 2007 02:57 PM | Movable Typeを触っている時間がとれないのですが、新年に入ってからちょっとばかしテンプレートとスタイルシートを変更して、ほぼ一カラム、ほぼfont-size: 100%で表示されるようにしました。要はレイアウトとか考えるのを最小限に留めようと思ったわけです。不得手なデザインをこれ以上考える必要がないという私個人の精神衛生上の利点に加え、読者の目にも優しくなりました。 結論: でかフォントは人を健康にします。 それだけだとなんなので、prototype.js (Prototype JavaScript Framework: Class-style OO, Ajax, and more)を使ってフォントサイズ変更スクリプト(クッキー保存機能付き)を実現してみました。これまで
Gomez： Eコマースサイトの評価・ランキング
森澤 正人 元ゴメス・コンサルティング株式会社 代表取締役、モーニングスター株式会社（現：ウエルスアドバイザー株式会社） 取締役、SBIネオファイナンシャルサービシーズ株式会社 取締役などを経て、現在は株式会社ブロードバンドセキュリティ 代表取締役副社長 ゴメス・コンサルティング本部長として、銀行、証券会社、クレジットカード会社のWebサイト戦略立案や各種調査・分析、Webサイト設計など数多くのプロジェクトを担当。 金融機関のみならず、IRサイト、不動産サイト、旅行・航空券、ショッピングサイトなど幅広い業種・業界もカバーしており、進化しつづけるWebサイトを常に把握して、企業のEビジネス戦略を支援している。 コンサルタント紹介
Lifehacker Top 10：アドオン要らずのFirefox便利機能トップ10 (1/2...
Firefoxは拡張機能（アドオン）を入れることで、さまざまな機能を追加することができる。しかしそれが動作の遅さを招くのも事実だ。アドオンなしでも十分に活用できるFirefoxの便利機能とは。 【この記事は、2007年8月1日付で米ブログメディア「Lifehacker」に掲載された記事を翻訳したものです。】 「Show Us Your Firefox」シリーズの連載では、アドオンを利用したFirefoxの便利な機能をいろいろ紹介してきた。だが、ソフトウェアの常として、Firefoxにアドオンを追加すればするほど、動作は遅く、にぶくなる。そこで今日は、アドオンではなく、生産性向上に役立つFirefox本来の機能トップ10を紹介する。 10位：フィッシング対策 フィッシング攻撃の発見となると、大方の人はかなり詳しくなっているものだが、われわれ（もしくはあまりフィッシングを意識していない家族たち
Web Developer 1.1.2 日本語版／ツール＆ダウンロード ― 『infoaxia(インフォアクシア)』
Web Developer 日本語版サポート移管のお知らせ これまで当サイトにて、日本語版のダウンロード配布およびサポートを行ってきた『Web Developer』ですが、2008年3月より開発担当エンジニアの個人サイトへ全てを移管させていただくことになりました。新しいサイトのURLは、以下の通りです。 ミナトラボ：Web Developer 日本語版 『Web Developer』は、開発者である米国のChris Pederick氏に協力しながら、これからも上記サイトにて日本語版へのローカライズおよびユーザーサポートを継続していきます。今後とも『Web Developer 日本語版』をよろしくお願いいたします。
著作権保護よりライブで稼ぐ、というビジネスモデル
プリンスが、イギリスでCDを新聞の「オマケ」として配って話題になった。 The Mail紙の日曜版に、新作CDのThe Planet Earth、300万枚（！）を折込、その上イギリスでのPrinceのコンサートツアーに来た人には、全員無料配布。こちらも延べ40万人超。 New York Timesが、Princeの収益構造を分析しているが、非常に単純化すると、 「Princeはライブの稼ぎがメイン。印税収入はたいして重要ではない。CDは、ライブをプロモートするための広告ツールであり、別に違法コピーがどれほど出回ってもOK。むしろ、沢山出回って知名度が上がり、ライブに人が沢山来てもらったほうがよい。しかも、CDに頼らなければレコードレーベルに利益を搾り取られることもない」 というのがPrince側の論理では、という話。 Princeは非常にエキセントリックな外見、マスコミからのインタビュー
パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種｜CSS HappyLife
普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。 #main .entryBody #topicPath_01 { margin:10px 0; } #main .entryBody #topicPath_01 li { display:inline; line-height:110%; list-style-type:none; } #main .entryBody #topicPath_01 li a { padding-right:10
ダウンロードもできる、大手ウェブサイトのガイドライン | コリス
ガイドラインの中にはテレビやエディトリアル関連もありますが、ウェブ制作関係のものをいくつか紹介します。 一部のページ（,htaccessの設定など）はアクセス制限をされているため閲覧することはできません。 ウェブサイト ガイドライン Guidelines Overview ガイドラインのトップ Standards & Guidelines Glossary ガイドラインの用語集 デザイン関連 Visual Language ヴィジュアルスタイルガイド Multimedia Plug-in Content Standards (Flash, Shockwave etc.) Flashなどマルチメディアコンテンツ Brand Guidelines ブランディング マークアップ関連 Semantic Mark-up Markup XHTML Integrity Standards XHTML H
サイトの読み込み時間を詳細に調べてくれる無料診断ツール『Pingdom Tools』 | POP*POP
Firebugを使えばいいじゃん、という突っ込みはさておき、Pingdom Toolsでなかなか使える診断ツールが提供されています。 任意のURLを指定すればページのどこがどれぐらいの速度で表示されているかを診断してくれます。「最近サイトがちょっと重いなぁ」というときに使ってみてはいかがでしょうか。 詳しい使い方は以下のとおり。 ↑ このサイトでとりあえずテスト。 ↑ 結果はこのとおり。時間がかかっている画像がどれだけわかりますね。 ↑ それぞれのバーの色の見方はこんな感じです。 ↑ ロード時間のサマリーもこのように表示してくれます。 ロード時間がかかりすぎている場合はどれを圧縮すればいいかが一目瞭然ですね。またどのプラグインやスクリプトに時間がかかっているかもわかるのでサイトを軽くしたい場合には外す優先順位がわかってよろしいかと。 ご利用は以下からどうぞ。 » Pingdom Tools
ウェブ標準、それは状況や環境に左右されない情報伝達を実現するためのもの
何がウェブ標準で、何がウェブ標準でないか一般にW3C、ISO/IEC、IETF、ECMA、IANA、OASISといった国際的な標準化団体やガイドライン策定機関によって発行された技術や仕様、ガイドラインが、ウェブ標準の「標準」で表される技術や仕様であるとされており、「ウェブ標準技術」あるいは「ウェブ標準仕様」という。また、ウェブ標準的な仕様に基づいて定義されたウェブサイトを「ウェブ標準に準拠している」などという。 そういった団体のなかでも、特にW3C（ワールドワイドウェブコンソーシアム）が策定する各種の仕様が、最も「ウェブ標準的」だといえる。しかし、W3Cの仕様であればすなわちウェブ標準なのかというと、必ずしもそうではないのが困ったところだ。なぜこうも曖昧なのかといえば、ウェブ標準とは、「なんとなく標準的な仕様であろうもの」のこと全般を指すからだ。「ウェブ標準」に厳密な定義はなく、ときにはマ
Dive Into Accessibility
この文書は2つの質問に答えるために書いてみたんだ。 1コ目は、「なんでサイトをアクセシブルにした方がいいのか」。 だから、ここの情報はサイトを持ってない人には向かないかも。 2コ目は、「じゃどうしたらサイトをアクセシブルにできるのか」。 1コ目の答えが納得できるものじゃなかったら、2コ目はどうでもいいってことになるよね。 じゃ行ってみよう。 Dive Into Accessibility（英語版）をダウンロードする HTML（英語版）をダウンロード PDF（英語版）をダウンロード Dive Into Accessibilityを読む 目次 掲載された順序のままにならべてある、すべての情報はこちら。はじめてココ の文を読むときにおすすめの読み方。 人に基づいた情報分類 ここではどんな人に役立つかによって、情報が分けられています。 障碍に基づいた情報分類 ここではどういった障碍があるときに役立
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
gooランキング - あらゆるものをランキングで紹介！ランキングの総合サイト
dontclick.it