Webサイトの制作／運用の効率化を図る　「ガイドライン策定」のすすめ（前編）：CodeZine

2008/12/08 999 users CodeZine ユーザービリティ ガイドライン策定 運用

はじめに　Web標準に従うことは、SEO効果、アクセシビリティ、ユーザービリティ、相互運用性、互換性、メンテナンス性の向上など、Webサイトの利用者と制作者の双方にさまざまなメリットをもたらします。しかし、実際にWeb標準の仕様書に従って「正しい（X）HTML+CSS」でWebサイトを制作しようとすると、制作者の頭を悩ませる多くの問題が待っています。　本連載では、Web標準のメリットを最大限に生か... 続きを読む

これが無料！？SEO・マーケティング分析ツールの「Nibbler」がスゴい

2015/02/16 733 users Nibbler SEO ソーシャルメディア 素晴らしいツール

先日、Nibbler（ニブラー）という、SEOとWEBマーケティング分析サービスを見つけました。 これを使ってみたら、無料ながらかなり詳細にサイト分析が行える素晴らしいツールだったので紹介です。 Nibblerとは Nibbler – Test any website Nibblerとは、フリーのウェブサイトテストツールです。 アドレスを入力するだけで、アクセシビリティ、SEO、ソーシャルメディア... 続きを読む

ひと昔前といろいろ違う、Webサイトを公開した時に確認しておきたい項目のまとめ -Web Launch Checklist | コリス

2017/07/24 712 users コリス SEO テクノロジー セキュリティ パフォーマンス

Webサイトを公開した時に、サイトのパフォーマンス、SEO、セキュリティ、アクセシビリティ、コンテンツ、機能性の面から確認しておきたい項目がまとめられたチェックリストを紹介します。 2017年、最近のWebのテクノロジーや制作事情をふまえたものとなっており、ひと昔前とはいろいろ変化しています。 イラスト: Girls Design Materials 「Web Launch Checklist」は... 続きを読む

ウェブサイトの制作に必ず役立つブックマークレットのまとめ | コリス

2013/01/21 548 users コリス セレクタ ブックマークレット グリッド CSS

ウェブサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなるのがイヤな人にぴったりです。 レスポンシブの確認はこれが一番便利 コードとアクセシビリティをチェック ページに柔軟なグリッドを表示 デザインの確認がピクセル単位でできる CSSの変更をリフレッシュ無しで確認 要素のスタイルを確認 CSSのセレクタを確認 ページで使用しているカラーを... 続きを読む

「iPhoneの画面をグレースケールにするとスマホに全然触らなくなる」というスマホ中毒の解消技を試したら本当に魅力が激減して全然触らなくなった - Togetter

2021/05/27 497 users Togetter iPhone カラーフィルタ 吉永龍樹 僕秩

吉永龍樹（ヨシナガタツキ@僕秩） @dfnt 昨日の放送で一番反応があった「iPhoneの画面をグレースケールにするとスマホに全然触らなくなる」というスマホ中毒の解消技、 設定→アクセシビリティ→画面表示とテキストサイズ→カラーフィルタ→オン から設定できます。本当にスマホが色を失うだけで魅力が激減して全然触らなく... 続きを読む

制作者のためのHTML

2019/03/10 430 users HTML 文脈 切り口 制作者 スクリーンリーダー

主にユーザー側の視点から語られることが多いアクセシビリティですが、制作という側からはどのように捉えることができるのでしょうか。2つの切り口から考えてみます。 # アクセシビリティという文脈において、何のためにHTMLを書くかという話になると マシンリーダビリティのため スクリーンリーダーのアクセシビリティ... 続きを読む

CSSの単位px、em、remはどれをどこで使用するのがよいか、ピクセルとアクセシビリティにおける意外な真相

2022/06/07 387 users rem height font-size width マージン

CSSの単位px、em、remは、どれをどこで使用するのがよいか。 font-sizeの値にはどの単位を使用していますか？ ほかにもメディアクエリを定義する時、マージンを定義する時、widthやheightを定義する時、使用する単位はアクセシビリティに配慮する必要があります。 The Surprising Truth About Pixels and Accessibility ... 続きを読む

【続報】担当者に聞いた：なぜ、富士通は「色覚障がい者のための診断ソフトウェア無償提供」を終了したのか - ＠IT

2013/08/26 385 users 続報 富士通 反響 色覚障がい者 視覚障がい者

富士通は2013年8月20日、視覚障がい者や色覚障がい者のアクセシビリティを高めるための診断ソフトウェアツール群「富士通アクセシビリティ・アシスタンス」の無償提供を終了した（参照記事）。このニュースはSNSでの反響も大きく、ユーザーから「なぜこのような素晴らしいサービスが終了してしまうのか」との声が多く聞かれた。 同様のツールは他にもあったが、富士通アクセシビリティ・アシスタンスが愛用されるのには... 続きを読む

差別とアクセシビリティ - 下村和也

2016/07/06 334 users 差別 大手監査法人 公認会計士試験 日米 聴覚障害者

差別とアクセシビリティ アメリカに留学していた時に、痛感した日米のアクセシビリティや差別に対する考え方の違いについて書いてみようと思います。 聞こえなくてもできることを突き詰める 私は、日本で、「聞こえなくてもできることを突き詰める」ことが、聴覚障害者の生きる道だと思っていました。大学１年生の頃から、ひたすら勉強をして、大学４年次に公認会計士試験に合格しました。その後、程なくして、大手監査法人から... 続きを読む

デジタル庁が大切にしたい、アクセシビリティとアカウンタビリティ｜デジタル庁（準備中）

2021/06/22 293 users アカウ 正司 HCD 内閣官房 Note

こんにちは、内閣官房ＩＴ総合戦略室の大橋 正司と申します。 4月12日から内閣官房に非常勤で採用された民間人材のひとりです。普段は人間中心設計（HCD）や情報設計（IA）の仕事をしています。 最初のnoteへの皆様のご意見をひとつひとつ拝見しながら、何を書こうか迷っていたのですが、今日はアクセシビリティとアカウ... 続きを読む

東京五輪ボランティア応募サイトのコードがいかに酷いか - Togetter

2018/09/28 289 users コード 支障 HTML 音声 ソースコード

ボランティア応募サイトの使い勝手が悪いと話題になってますが、ソースコードもなかなかの品質でした。 HTMLのコードが悪いと、アクセシビリティ（音声読み上げやキーボード操作）にも支障があるので、開発者だけでなく利用者にも不便を強いることになります。 続きを読む

『投稿サイトに載せてる自作小説のタイトルを試しに短くしたらクリックの当たり判定がめちゃくちゃ狭くなってしまったんだが』～アクセシビリティの観点から見るWEB小説の長文タイトル

2020/10/24 267 users 観点 当たり判定 長文タイトル 自作小説 WEB小説

すかい@3冊予約受付中 @skynovel7 アイコンは妻(@nira_zui)から。なろうメイン 書籍化コミカライズ複数進行中 noteとFANBOXにて創作について記事を出したりサポートしています お仕事の依頼はDMまでお気軽に 欲しい物 amazon.jp/hz/wishlist/ls… skyfarm.fanbox.cc すかい@3冊予約受付中 @skynovel7 ncode.syosetu.com/n... 続きを読む

【iOS14】ドアベルなどの音をiPhoneが聞き取って通知する「サウンド認識」 - iPhone Mania

2021/03/27 229 users iPhone チャイム iPhone Mania ヘッドホン

イヤホン・ヘッドホンで音楽を聴いていたら、家のチャイムが鳴っているのに気づかなかった。何かいい解決策はないの？ iOS14 / iPadOS14から「サウンド認識」機能が追加されました。元々は「アクセシビリティ」に分類されている、聴覚サポート機能の一つです。しかし、iPhoneが聞き取った音を通知してくれる機能は、日常... 続きを読む

アクセシビリティを考えたドロップダウンメニューを実装する | Webクリエイターボックス

2014/09/03 209 users TAB サブメニュー Webクリエイターボックス マウス 観点

多くのWebサイトに設置されているドロップダウンメニュー。うまくカテゴリー分けされていれば非常にわかりやすく、スペースも取らないので制作側からも愛されていますね。しかしアクセシビリティの観点から考えると、ちょっとやっかいな存在ではあります。マウスがうまく利用できないユーザーはキーボードを使ってページやリンクを移動しますが、ドロップダウンメニューは tab キーを使ってもサブメニューが表示されないの... 続きを読む

マイクロソフト製サイト作成ソフト「Expression Web」日本語ベータ版 - GIGAZINE

2006/09/12 185 users word CSS ウリ GIGAZINE HTML

以前まで「Microsoft Expression Web Designer」という名称だったモノで、日本語ベータ版は無料で利用できます。ウリとしては、Web標準へ準拠しており、なおかつ洗練されたCSSページレイアウトが可能という点。 個人的には、Wordで作ったHTMLを最適化する機能やCSSなどのチェック機能、アクセシビリティの検査機能がなかなかお役立ち。使用感はDreamweaverっぽい。... 続きを読む

Web制作者は要チェック！現在のWeb制作に合わせて制作された新しいCSSリセット -Reseter.css | コリス

2021/04/12 179 users reset.css コリス Normalize.css 既存

現在のWeb制作だと、既存のReset.cssやNormalize.cssには不足を感じると思います。それらの代替手段として制作された新しいCSSリセットを紹介します。 Reseter.cssは各ブラウザの最後から5つ前までのバージョンをサポートし、アクセシビリティにも配慮されており、CSSのテクニックや学びも満載です。 Reseter.css Resete... 続きを読む

UIの可能性を感じさせる、「Think Different」なiPhoneアプリのインターフェイスのまとめ | コリス

2012/07/17 179 users コリス インターフェイス Think different

Clear Clearはボタンのない、ジェスチャーベースのインターフェイスで私たちに衝撃を与えました。ユーザビリティとアクセシビリティに若干問題があるにもかかわらず、その操作性とミニマルなインターフェイスはジャスチャーだけでユーザーに素晴らしい経験を与えます。 続きを読む

アクセシビリティ | SmartHR Design System

2023/07/03 174 users アクセシビリティ向上 さまざ 障害当事者 ユーザー 多く

アクセシビリティとはアクセシビリティは、サービスや情報をどんな利用者も円滑に利用できるかの度合いです。 アクセシビリティが高いほど、より多くのユーザーが円滑に利用でき、アクセシビリティが低いほど、より多くのユーザーが利用できないということです。 アクセシビリティ向上は、障害当事者だけでなく、さまざ... 続きを読む

アクセシビリティから変わるビジュアルデザイン : could

2013/03/06 158 users could WCAG アクセシビ アクセシビリティデザイン

アクセシビリティデザイン アクセシビリティから変わるビジュアルデザイン WCAG 2.0 で提示されているアクセシビリティの 4 原則にはビジュアルデザインを改善させるためのヒントがあります。デザインとの連携性を高めることで、より自然にアクセシビリティが認知されるのではないでしょうか。 W3C が勧告しているウェブコンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0 の中に「アクセシビ... 続きを読む

目が見えない・見えづらい世界の「ビデオゲーム」 | AUTOMATON

2017/04/16 155 users AUTOMATON 対戦 アクセシビリティキャンプ東京 スト

全記事 Gamer Pick 目が見えない・見えづらい世界の 「ビデオゲーム」 視覚障害者たちに訊く、アクセシビリティの意味とゲームの力 参加者が主催側とともに「アクセシビリティ」について考える「アクセシビリティキャンプ」。「 第10回 アクセシビリティキャンプ東京 」は、「目が見えなくともスト2はできる。全盲ゲーマーと対戦！」 と銘打ち、「ビデオゲームとアクセシビリティ」がテーマに据えられた。今... 続きを読む

Webのアクセシビリティを向上させる、始めに取り組んでおきたいガイドラインの10項目のまとめ | コリス

2018/01/12 144 users コリス ガイドライン web Tim Berners-Lee

Webの創始者であり、W3Cのディレクターを勤める Tim Berners-Lee 氏の言葉に、「Webが持つ力とは、その普遍性にあります」というのがあります。Webサイトに誰もがアクセスできるようにするのは、わたし達の責任です。 Webのアクセシビリティは机上では難しいと思われがちですが、実際に取り組んでみるとそんなに難しいものではありません。障害者、スクリーンリーダのユーザー、低速接続のユーザ... 続きを読む

アクセシビリティを意識した CSS の書き方 - Frasco

2017/10/27 143 users medium Frasco カンファレンス トピック CSS

私は約一年前から Web アクセシビリティについて注目し始めました。私にとって何かを学ぶこと最も効率的な方法は他人に教えることなので、 ミートアップやカンファレンス などで発言したり、このトピックに関する記事を書いているわけです。 Progressive Enhancement については Smashing Magazine で、Web アクセシビリティに関しては Medium で書いています。こ... 続きを読む

改めてWebサイトの品質について考える : could

2016/12/21 137 users could 地固め 品質 クオリティ 評価指標

アクセシビリティ デザイン 改めてWebサイトの品質について考える 独自の評価指標もないまま Web アクセシビリティを実践しようとすると、頑張れる人がやれる限り頑張るということになります。品質への捉え方を合わせなければ、「地固めという見え難いものに時間を費やす」ことが理解できません。 制作における品質とは？ Webサイトにおける品質（クオリティ）とはどういう意味でしょうか。 制作者であれば同じよ... 続きを読む

サイト上のさまざまなページのパフォーマンスをまとめて測定できるツール「Unlighthouse」

2023/05/20 135 users Lighthouse スコア 速度 パフォーマンス ツール

「Lighthouse」はGoogleが作成したページの読み込み速度やアクセシビリティなどをまとめてチェック・採点してくれるツールですが、そのLighthouseをサイト上のさまざまなページで動作させることでサイト全体のスコアを一発で算出してくれるツールが「Unlighthouse」です。 Unlighthouse - Site-wide Google Lighthouse ·... 続きを読む

ユーザーの期待に応えるクックパッドのUI/UXーWDF Vol.17 with HTML5 Experts.jp「アクセシビリティとUX」 | HTML5Experts.jp

2015/05/01 134 users クックパッド WDF Experts.jp ユーザー 期待

3月14日に特定非営利活動法人Web Directors Forum（以下、WDF）とHTML5 Experts.jpの共催企画として、WDF Vol.17 with HTML5 Experts.jp「アクセシビリティとUX」が金沢にて開催されました。この記事では、その勉強会のセッションの模様をレポートします。ユーザーの期待に応えるクックパッドのUI/UXー元山 和之イベント最後のセッションは、ク... 続きを読む