色覚障がい者に配慮したWebサイトの作り方
2017年4月11日 Webサイト制作, アクセシビリティ, 色彩 今持ってるプロジェクトの中で、視覚・色覚障がい者にも配慮したWebサイトの制作があります。視覚障がい者向けのサイト制作についてはいくつか記事を発見できたのですが、色覚障がい者に向けたWebサイト制作についてはなかなかヒットしなかったので、断片的に読んだものを記事にまとめました。参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 追記: 一部表記の仕方を変更しました。 色覚障がいについて 目の、色を認識する細胞の変異で、色の識別が異なることを「色覚障がい」「色覚異常」と呼びます。色覚障がいといってもいろいろな種類があり、ここでは人口の多い赤系統や緑系統の色の識別が困難な、赤緑色覚異常の場合について書いてみます。 困難な点としては 灰色だと思ったらピンクのシャツだった 焼肉の際、生肉と焼けている肉の区別がつきに
自動でリンク切れチェックし、Webサイトの品質を保つ便利ツール8選 | 人手に頼らないWebサイトの戦略的品質管理指南
Webサイトの品質維持には、リンク切れや不要なファイルを少なくすることが重要です。今回は、Webサイト品質の問題点発見とその解決へのスピードを格段に上げる自動チェックツールを8つ紹介します。日本アイ・ビー・エムが提供するIBM Rational Policy TesterやW3Cリンクチェッカー、W3Cマークアップ検証サービス、リンク切れカッター、Web Developerなどのフリーツールも紹介 数百ページ～数万ページというWebサイトでは、人的な検査だけですべての問題点をチェックするのは実質的に不可能に近い。また、ページ数が少なくても、チェック漏れがあっては意味がない。 自動チェックツールを利用することで、問題点発見とその解決へのスピードは格段に上がる。現代のWebサイトでは、理想的な品質管理を実現するには、何らかのツールの利用は必須だともいえる。 最も効率良く診断できる専門ツール手前
asahi.com（朝日新聞社）：色のバリアフリーへ２０色 色見本、デザインに活用 - 社会
よく使われる色づかい（上）と、誰でも見分けやすいように考えられた色（下）。厳密な色再現ではない＝伊藤准教授提供 誰でも見分けやすいように工夫した色見本を、東京大や日本塗料工業会などが作った。色覚障害や白内障の人のほか、一般の人にも色を実際に見てもらい、２千色以上から２０色に絞り込んだ。塗料用に続き、印刷インキ用の色見本も近く完成、デザイン業界などで使ってもらう予定だ。 東大の伊藤啓・准教授（分子神経生物学）は印刷インキメーカーのＤＩＣなどと協力、２年前から色見本づくりを進めてきた。実生活で使いそうな色を、屋外で日にあてたり、古い蛍光灯の下に置いたりして、色覚障害の人や白内障手術を受けた人のべ約４０人に見てもらった。 これまでよく使われた色づかいでは、赤と緑は色覚障害の人にとってまぎらわしく、黄色は白内障の人には明るすぎたという。そこで赤はオレンジ寄りに、緑は青みを強く、黄色は濃くした
ウェブサイトをユーザーにリラックスして楽しんでもらえるようにする10のTips
ウェブサイトをユーザーにリラックスして楽しんでもらえるように、より使いやすくする10のTipsをWeb Designer Depotから紹介します。 10 Tips to Create a More Usable Web 以下、各ポイントのピックアップです。 1. Creating active navigation アクティブ機能をもったナビゲーションの設置 サイトのどのセクションにいるか、ユーザーに明示できるナビゲーションを設置します。 2. Clickable labels & buttons ラベルやボタンをクリック可能に フォームのラベル（label）やボタン（button）に、クリック可能であることが分かるようにスタイルシートで設定します。 例： <textarea name="code" class="css" cols="60" rows="5"> label, butto
サイト公開前に役立つ２５のユーザビリティチェックリスト:phpspot開発日誌
25-point Website Usability Checklist | User Effect サイト公開前に役立つ２５のユーザビリティチェックリストが公開されていましたのでメモしてみました。 サイトの公開前にチェックリストとして使うといいかもしれません。 アクセシビリティ 1. ロード時間が速いか？(60KBぐらいがベター) 2. テキストと背景のコントラスト調整(差異が低く見にくくないか) 3. フォントサイズが読みやすいサイズか？行間、文字間は適切か？ 4. Flashやアドオンは控えめか？ 5. 画像に適切なALTタグが指定されているか？ 6. カスタマイズした404ページがあるか？デフォルトは非常に不親切 7. カンパニーロゴが分かりやすい位置におかれているか？ 8. キャッチフレーズが適切に設定されているか？ 9. 5秒で大体どんな内容が分かるものになっているか？ユーザは
離脱されない携帯サイトのフォーム作成術 (ユーザビリティ実践メモ)
みなさんは携帯サイトの会員登録を行う際に以下のような経験はありませんか？ ・入力エラーが発生した。 ・次ページの読み込み中に接続不良となった。 弊社のユーザ行動観察調査では、会員登録時に上のような状況に直面すると、多くの人が会員登録をあきらめてしまう様子が観察されています。 今回はこのようなトラブル発生を防ぎ、「離脱されないフォーム」を実現する上で重要となるポイントを２つご紹介します。 フォーム入力例を適切な位置に配置する フォーム内の各項目に入力例を明示することでエラー発生を防ぎます。ごくごく当たり前のことですが、PCサイトに比べてコンテンツスペースが少ないことを理由に、携帯サイトでは「入力例が省略されたフォーム」が多く見受けられます。 また、入力例の配置にも注意が必要です。たとえ入力例が配置されているフォームであっても、下図の左側のように入力欄の下に配置しているものは十分と言えません。
ウェブサイトの第一印象を決める大切な21のポイント
ウェブサイトの第一印象を決める大切な21のポイントをVandelay Website Designから紹介します。 21 Factors that Influence the First Impression of Your Website's Visitors 下記は、それを簡潔にした意訳です。 ロード時間 ロード時間はユーザーをいらいらさせる大きな要因です。少しでも早くロードするように設計をします。 エラーメッセージ エラーメッセージが表示されアクセスができないと、ユーザーは二度とアクセスをしないでしょう。 カラー サイトのデザインは第一印象の重要なファクターです。正しいカラーコンビネーションを使用して、効果的で適切なカラースキームを使用します。 ロゴ もう一つ重要なファクターはロゴです。ブランディングを考慮し、信頼感を与えるロゴを使用します。 ヘッダ ヘッダも強い印象を与えます。魅力
秀逸なユーザビリティのボタンをデザインするための5つの秘伝 - GIGAZINE
ユーザビリティを考える上でかなり重要なのがボタンのデザイン。聞いた話だと、某どこかのローンお申し込みページではボタンのサイズを極端に大きくして目立つようにして、ボタンに「OK」とか「投稿」ではなくデカデカと「今すぐ申し込む」というようにラベリングしたところ、数百パーセント増しで申込みがあったとのこと。ほんの少しのデザインの差でもバカにはできません。 というわけで、いろいろな有名サイトのアイディアが詰まって練り込まれたボタンのデザインを見てみると、どれもこれも一見すると普通に見えるようでも、実はそうではないことがわかります。それらには共通して5つのルールが適用されています。 秘伝の法則は以下から。 ■秘伝その1：色 ボタンの色はページの他のものよりも目立たせ、より明るく、そしてコントラストを効かせてページのカラーとは対照の色を使いましょう。 ■秘伝その2：場所 ユーザーがすぐに見つけることが
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
