これが無料！？SEO・マーケティング分析ツールの「Nibbler」がスゴい
先日、Nibbler（ニブラー）という、SEOとWEBマーケティング分析サービスを見つけました。 これを使ってみたら、無料ながら、かなり詳細にサイト分析（改善点の可視化）が行える素晴らしいツールだったので紹介です。 Nibblerとは Nibbler – Test any website Nibblerとは、フリーのウェブサイトテストツールです。 アドレスを入力するだけで、アクセシビリティ、SEO、ソーシャルメディアテクノロジーなどの観点から、ウェブサイトをクロールして、レポートを出してくれます。 加えて、適切な改善提案を示してくれるので、提案に従ってサイトを修正すれば、かなり良いサイトに仕上がるのではないかと思います。 Nibblerを英和辞典で調べてみると、「少しずつかじる（小動物）」、「打抜き切断工具」などという意味があります。サイトを細かく分析するツールという意味もあるのだと思いま
2015年のWebアクセシビリティ | gihyo.jp
あけましておめでとうございます。株式会社ミツエーリンクスの黒澤剛志です。本稿では、昨年に引き続いて、2015年のWebアクセシビリティの短期的な予測を寄稿させていただきます。 HTML5がW3C勧告に 2014年10月、HTML5仕様がW3C勧告として公開されました。 W3C勧告として公開されることは、その仕様はブラウザーなどに既に実装されていることを意味しています。Webアクセシビリティの観点からは、HTMLのセマンティクスがユーザーに伝わるかどうか、という点も重要です。この点に関しては、2014年を通して多くのブラウザーが改善に取り組みました。特に、これまで対応が弱かったGoogle Chromeでの取り組みが目立ちました。HTML5 Accessibilityのスコアを見ると、Goolge Chrome（Windows版）は、2014年3月には47でしたが、2014年11月には83.
2009年のWeb標準 | gihyo.jp
あけましておめでとうございます。株式会社ミツエーリンクスの木達です。昨年の年初、「2008年のWeb標準」と題して、Webコンテンツのフロントエンド実装に用いられる標準とその周辺の動向につき、短期的な予測などをごく簡単に書かせていただきました。それに引き続き本年もまた、同様の趣旨で記事を書かせていただくことになりましたので、よろしくお付き合いください。 2009年のWeb標準を考えるうえでのテーマとして、私は「アクセシビリティ」「モバイル対応」「マークアップ品質」の3つを挙げたいと思います。 2009年はアクセシビリティに再注目の年 9年半もの時を経て、昨年12月にWeb Content Accessibility Guidelines （WCAG） 2.0が勧告されました。1999年5月に勧告された前バージョンの1.0から大きく改善されたのは、第一に特定の技術に依存しない内容
色とデザイナーとアクセシビリティ | チャットワーククリエーターズブログ
お久しぶりです、デザイン部の守谷です。 ここしばらくクリエイターズブログでのアウトプットができていませんでした。その間、チャットワークと私の周りで何が起こっていたかというと、グローバル展開と合わせブランドカラー／ロゴの変更、それに合わせたチャットワークの各サイトのリニューアル、一番最近ではツールのカラーもブランド統一に合わせ変更になったのをご覧いただいていることと思います。 ちなみに、既にご利用の方はお気づきかと思いますが、今回のリニューアルではUI変更を行わずにテーマ（と一部アイコンの変更）のみの最小限での調整、という方針で進みました。利用者がたくさんいるチャットワークを大胆にいじって混乱を招くより、早々にカラーだけでも「チャットワークブランド」と合わせることが重要との判断からです。 色のみの変更、という場合、バランスだけ見ていればOK！簡単！速攻完了！そうは行きません。 もしもそれだけ
アニメ製作会社さん達とテレビ局の方達へ。もう東京ＭＸＴＶや各ＵＨＦ局にアニメを渡さないで下さい。 - 日本語字幕付与問題ほかいろいろ
2014-11-22 アニメ製作会社さん達とテレビ局の方達へ。もう東京ＭＸＴＶや各ＵＨＦ局にアニメを渡さないで下さい。 日本語字幕付与問題 字幕放送 アニメ 最近、地上波民法で放送されていたアニメや、されるであろうアニメが深夜で字幕放送しない時間帯や局に放送されたり、続編のアニメも字幕放送対応だった同じ局で同じ枠で放送されずに字幕放送をしない各ＵＨＦ局に移行して放送されることに字幕ユーザーの一人として納得できませんし怒りを感じています。 私は見ていなかったですが蟲師やデュラララの続編がこれに当たります。 これで再放送やＤＶＤやブルーレイ、各ネット動画サイトのアニメに日本語字幕が付いていて、いつでもどこでも楽しめていたら枠や局に翻弄されないで済むのに、それを製作側やテレビ局側が平気で字幕を付与しないこと＝情報を知ることや作品を楽しむことを剥奪することを行うから私達はこんなに苦しんでいるのです
アクセシビリティハンドブック
本書は、米国修正リハビリテーション法508条（508コンプライアンス）に基づいた、障害のある人向けのWebサイトを制作するために留意しなければならないポイントを実務者の視点からコンパクトにまとめた書籍です。視覚、聴覚、身体の別に、障害の定義、問題となる状況、望ましい対処法などを紹介しています。障害を持った人々だけでなく、すべての人にとってアクセシビリティの高いサイトを作るためのヒントが得られるでしょう。なお本書はEbookのみの販売となります。 まえがき 1章 目がまったく見えない 定義 つまり問題となる状況とは スクリーンリーダー アクセシビリティの高いサイトの構築 2章 その他の視覚障害に対応するアクセシビリティ 弱視 色覚異常 3章 音声のアクセシビリティ 音声アクセシビリティの対象 つまり問題となる状況とは 動画 ライブチャット 4章 物理的なアクセシビリティ 対象となるユーザー
アクセシビリティを考えたドロップダウンメニューを実装する | Webクリエイターボックス
2020年11月14日 jQuery, アクセシビリティ 多くのWebサイトに設置されているドロップダウンメニュー。うまくカテゴリー分けされていれば非常にわかりやすく、スペースも取らないので制作側からも愛されていますね。しかしアクセシビリティの観点から考えると、ちょっとやっかいな存在ではあります。マウスがうまく利用できないユーザーはキーボードを使ってページやリンクを移動しますが、ドロップダウンメニューは tab キーを使ってもサブメニューが表示されないのです。今回はこの問題を解決しようと思います！ ↑私が10年以上利用している会計ソフト！ こちらのGif画像のように、カーソルではなくキーボードの tab キーを使ってリンクを推移できるようにします。通常のHTMLとCSSを使った設置方法だと隠されている子メニューが表示されないので、キーボード操作でもうまく表示するのが今回の目標です。ちなみに
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
ウェブの仕事を始めたばかりのあなたにお伝えしたい、ロービジョンとウェブ | Web担当者Forum
こんにちは。すっかり春ですね。 この春からWeb担当者、Webディレクター、デザイナー、フロントエンドエンジニアとしてウェブに携わることになった皆さん、はじめまして。そして、ようこそ。 今日、5月15日はGlobal Accessibility Awareness Day。ウェブアクセシビリティについて、みんなで話したり考えたり学んだりしようという日です。 ウェブは、いろんな人が、いろんな端末で、いろんなブラウザで、いろんな使い方で使っています。 これからあなたが作るウェブコンテンツやサービスを、一人でも多くの人が、さまざまな場面で使って楽しんでもらえるようにするための考え方である「ウェブアクセシビリティ」。 中でも視覚障害の一つである「ロービジョン」と、ロービジョンの人がウェブを利用する上での不便、ウェブに携わるあなたに考えてほしいことなどをご紹介します。 「視覚障害者＝全盲」ではない皆
奈良市公式サイトのパンくずが斜め上を行くヤバさな件 – Webディレクターのお仕事ブログ
【追記】Twitterで教えてもらったのですが、13行が改善されて3行になってました。ご対応頂いた市役所のご担当者様、富士通のご担当者様、お疲れ様でした。今後とも、よろしくお願いいたします。【追記終わり】 住民票を郵送で取り寄せようと思って市役所のサイトを見たんですよ。今まで何回も見てるし別に普通のクソみたいな使いづらい行政サイトだなって相変わらず思ってたんです。でもね、あれ、これはおかしいなって、思ったんです。なんかね、変だな～って。それがね、この画像なんですよ。 委任状 – 奈良市 すっごいパンくずなんですよ…パンくず食い過ぎてお腹いっぱい。マジで。 僕らの業界ってまぁどの業界でもそうだけど仕事の流儀とか、そういうのあるじゃないですか。使いやすいサイトを作りたい人、ある程度ユーザビリティを犠牲にするけどかっこいいサイトを作る人、でもこれ酷いでしょ。誰もパンくず13段にしろなんて望んでな
バンクーバーで新築の建物にドアノブをつけるのが禁止された理由 | ライフハッカー・ジャパン
Popular Science：控えめな存在とも呼べそうな「ドアノブ」が、カナダのバンクーバーでは廃止されようとしています。3月に施行される法律で、新築の建物では、昔ながらの回すタイプのドアノブではなく、レバータイプのものを設置しなければならなくなります。 人間工学からいって「ドアノブは最悪だ」 ドアノブはレバーよりも長い歴史があるにも関わらず、バンクーバーがこのような決断をした背景は、ドアノブが最悪だということがわかったからです。人間工学の研究で、レバータイプの取っ手は、ドアノブの代わりとしてかなり望ましいとされました。ご存知のように、ドアノブを使う時は手首を回転（回内、回外）させなければならず、そこまで楽な動きではありません。すぐにドアの外へも出られないため、レバーに切り替えようということです。 年老いるほどにドアノブがつらくなる 素敵な装飾がほどこされたドアノブが好きな人もいるでしょ
魔法のボタン!? スマホの液晶画面に物理キーが浮き上がる衝撃の技術のデモ（動画あり）
魔法のボタン!? スマホの液晶画面に物理キーが浮き上がる衝撃の技術のデモ（動画あり）2014.01.20 22:008,605 塚本直樹 何これどうなってるの？ iPhoneや多くのAndroidスマートフォンにはポチポチっと押せる物理キーが搭載されていませんが、物理キーがない携帯電話を寂しく思っている人も多いはず。 ところが、スマートフォンの液晶画面に物理キーを浮き上がらせる技術がラスベガスにて開催されていたCES 2014で披露されていたんです！ あの硬い液晶画面にどうやって物理キーを作り出すんだ？という疑問もごもっとも。 たしかに液晶画面にポチポチ押せる物理ボタンが浮かび上がっていますね…。 この技術を披露したTactus Technologyによると、この物理キーはマイクロ流体によって作り出されているそうです。なんでも、一見透明なプラスチックに特殊なオイルを流し込む回路をたくさん用
効率的に学べた！Webデザインを「職種別」に基礎から勉強出来る総まとめ | コムテブログ
作成：2014/01/6 更新：2014/11/01 Webデザイン > Web制作において、Webデザイナーに関係するものを職種別にまとめました。会社によって分け方は違うと思います。今回は参考サイトとスライドを掲載しています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ アートディレクター １．アクセシビリティ ２．ユーザビリティ ３．UX（ユーザーエクスペリエンス） ４．IA（情報アーキテクチャ） ５．画面設計（ワイヤーフレーム） ６．進行管理 Webデザイナー ７．レイアウト・フォントの知識 ８．配色 ９．Illustratorの使い方 １０．Photoshopの使い方 １１．バナー作成 １２．ボタン作成 フロントエンドエンジニア １３．HTML5 １４．CSS3／Sass １５．javascript １６．jQuery １７．WordPressテー
コンテンツからみるWebアクセシビリティの課題と提案 : could
コンテンツは本当にアクセシブルか Webアクセシビリティは、大きく分けて 2 つの『デザイン』があります。ひとつは、情報を分かりやすく整理し、目的の情報へた辿り着くための Web アクセシビリティ。この要素は、色、形状、動き、スピードなど、UI デザインの課題と重なるところが多いです。もうひとつの要素は、情報の構成や文章のスタイルといった「編集」とも呼べる Web アクセシビリティです。 前者の情報構造や操作性は、明確なガイドライン化がしやすく、チェックもしやすいですが、後者の編集の部分は、パッと見では判断がしにくいだけでなく、ガイドラインとして共有するのも難しいです。 Webアクセシビリティにある 2 つの『デザイン』 もちろん JIS X 8341–3:2010 でも「利用者が理解できるコンテンツ」を制作・維持できるようにすることが重要であると書かれていますが、技術で解決できるところに
なぜ、富士通は「色覚障がい者のための診断ソフトウェア無償提供」を終了したのか
富士通は2013年8月20日、視覚障がい者や色覚障がい者のアクセシビリティを高めるための診断ソフトウェアツール群「富士通アクセシビリティ・アシスタンス」の無償提供を終了した（参照記事）。このニュースはSNSでの反響も大きく、ユーザーから「なぜこのような素晴らしいサービスが終了してしまうのか」との声が多く聞かれた。 同様のツールは他にもあったが、富士通アクセシビリティ・アシスタンスが愛用されるのにはわけがあった。富士通アクセシビリティ・アシスタンスは、3つのツール群「WebInspector（ウェブインスペクター）」「ColorSelector（カラーセレクター）」「ColorDoctor（カラードクター）」から構成されており、それぞれ以下の特徴が挙げられる。 WebInspector ローカルフォルダを指定した場合、サブフォルダのHTMLまで一括でチェックでき、結果をCSVで保存できる C
「終了前に、ただ伝えてほしい」――多くの開発者に届きますように。
オープンソースの集まりで1度しか実際にお会いしていませんが、お願いがあります。 富士通アクセシビリティ・アシスタンスというサービスが、2013年8月20日で提供終了します。つまり、あと20日。このソフトは視覚障がい者や色覚障がい者の方がどのように色を見ているかを確認できるツールです。Webサイト制作をしている人なら、今は必要なくても、いつか必要になるソフトです。 8月20日までにダウンロードすれば、8月21日以降もローカル環境で普通に使えるので、なんとかメディアで紹介して頂き、提供終了するまでに、少しでも多くの人に知ってもらいたいと考えています。 紙媒体だと、とても間に合わないのですが、ネット媒体なら、なんとかなるかも！と思い、お願いしたいと思いました。 視覚障がい者や色覚障がい者という障がいに興味がないかもしれませんが、外見では判断できない障がいなので、気付いていないだけなのです。 よか
「注目商品はコチラ」ボタンに暖色系を使っても目立つとは限らない 知識があるからこそ陥ってしまう罠
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
img（画像）には文字色を指定しよう（そう、文字の色を） | 初代編集長ブログ―安田英久
今日は、Webページの作り方に関して、ちょっとした細かい話を。ページに画像を入れるときに、imgタグの「文字の色」をCSSで指定しておきましょう。画像に文字色？ と思ったあなた、ちゃんと理由があるのです。 なぜ画像なのに「文字の色」を指定しなければいけないのでしょうか。それは、画像が表示されない状態では画像のaltテキストが表示されるため、その状態での表示をおかしくない状態にするためです。 念のために説明しておくと、altテキストとは、imgタグで画像の簡単な説明をテキスト記述するものです。HTMLの用語では「alt属性」と呼ばれ、img要素には必ず記述することとされています。altテキストはふつうにブラウザでページを見ているときには関係ありませんが、画像を解釈できない検索エンジンや視覚障害者が使うテキスト読み上げブラウザにとっては、そこに何が示されているのかを理解するのに重要です。 しか
なぜ、サイトにアクセスした人のほとんどが途中であきらめてしまうのか？ | カスタマーエクスペリエンスで道は開ける～フォレスター・リサーチのWebサイト方法論
[コラム]カスタマーエクスペリエンスで 道は開ける ～フォレスター・リサーチのWebサイト方法論 by ジョナサン・ブラウン フォレスター・リサーチのシニア・アナリストであるジョナサン・ブラウン氏によるウェブコラム。 主にカスタマーエクスペリエンスとマーケティングの側面から企業のビジネスをサポートしているジョナサン氏が、企業サイトにおけるユーザー志向の考え方や方法論をさまざまな切り口で解説します。 明けましておめでとうございます。今年もよろしくお願いいたします。 私はクリスマス前にイギリスに帰り、お正月は両親と妹たちと一緒にフランスのブルターニュ地方に行きました。ブルターニュは子供の頃、毎年夏休みを過ごしていたところですが、今回の訪問は8年ぶりでした。町はずいぶん豊かになり、新しい別荘が立ち並んで、私が知っている昔のフランスの田舎の町からはずいぶん変わったなと思いました。でも、幸いに、私た
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp: :