「誰一人取り残されない」を高い水準で叶えるために。ウェブサイトのアクセシビリティ検証結果と、その後｜デジタル庁
デジタル庁のアクセシビリティチームです。 私たちは、アクセシビリティ向上のための仕組み作りを行う民間人材の専門チームとなっています。3名で構成されており、そのうち2名は視覚に障害のある当事者です。 前回は、私たちがこれまで行った4つの取組を紹介しました。今回は、デジタル庁ウェブサイトで行ったアクセシビリティ検証結果と、そこから見えてきた課題、解決に向けた方向性などをお伝えできればと思います。 今回は少しだけ技術的な内容や規格の詳細に触れますが、できるだけわかりやすくお伝えしていきます。ぜひご覧になってもらえると嬉しいです。 ウェブアクセシビリティに関する方針策定と公開2021年7月から活動を始めた、アクセシビリティチーム。デジタル庁のウェブサイトでは、アクセシビリティ方針の策定・公開をはじめ、リニューアル時の改善に向けたアドバイス、規格に基づいた試験などを行ってきました。 アクセシビリティ
ウェブアクセシビリティ導入ガイドブック｜デジタル庁
デジタル庁では「誰一人取り残されない、人に優しいデジタル化」を実現するため、継続的に「ウェブアクセシビリティ」の向上に取り組んでいます。この度、ウェブアクセシビリティに初めて取り組む行政官の方や事業者向けに、ウェブアクセシビリティの考え方、取り組み方のポイントを解説する、ゼロから学ぶ初心者向けのガイドブックを公開します。 優しいサービスのつくり手になる一助として、ぜひご活用ください。 公開の背景ウェブアクセシビリティの向上に取り組むには、非常に専門的な複数の規格とガイドラインをそれぞれ確認する必要があります。そのため、適切なやり方がわからないままに、現在は間違っている対応の踏襲、不要・過剰な対応、不適切な対応をしてしまうことがあります。ウェブサイトだけではなく、申請・手続等のデジタルサービスの重要性が増す中で、最新の技術動向を踏まえた、初心者が学習できる行政機関向けの研修資料が不足していま
【Tips】ただただフォーム最適化をまとめたチートシート的なもの - Qiita
概要 主に「2016年 - 2017年」の記事から引っ張ってきて、ただただ羅列したものです。 なので、このまとめ自体の最適化が成されてないですが、そこはご容赦ください… ユーザビリティ・アクセシビリティ 分かりやすさ 入力項目は必要最低限にする 項目名は簡潔で短く分かりやすいものにする できる限り入力フィールドの数は最小限にする 一つの項目の入力フィールドを複数に分けない 例：姓名、電話番号、郵便番号など 必須項目は、「＊」ではなく「必須」と表示する ラベルやヒント（○文字以上必要です）をplaceholderに設定しない フォーカスした際に消えてしまうため、入力例を入れてあげる程度にする フォーカスした際の入力フィールドのデザインを変える 入力フィールドのサイズは、入力される値に合わせる リアルタイムでチェック出来るバリデーションを実装する エラーメッセージは、上部にすべて表示するのでは
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
『グラブル』ついに“ガチャ仕様”変更 ― 利用額が9万円を超えた場合、好きな装備品を一つ獲得できる…お詫びアイテム配布も | インサイド
Cygamesは、ブラウザゲーム『グランブルーファンタジー』において、ガチャに関する新たな取り組みを発表しています。 『グランブルーファンタジー』は、主人公と謎の少女「ルリア」が、星の島イスタルシアを目指し空の世界を旅するRPGです。今回は、本作のガチャに関しての仕様変更が発表されています。 現在、2015年から2016年の年末年始にかけて本作に登場した「アンチラ」というキャラクターの関連ガチャが問題視されています。このガチャでは、キャラクターを手に入れるために必要なアイテムの排出率が低く、高額な金を使っても入手できなかったユーザーがそのことを問題視。結果、各種報道がそのことを取り上げ、大きな話題となっています。 これを受けCygamesは、ガチャに関連した新たな4つの取り組みを実施すると発表。これにより、ユーザビリティの向上が行われます。なお、アイテム排出率の確率設定に関しては、年末年始
10歳のこどもから学んだユーザビリティ向上のポイント
2015年9月8日 ユーザビリティ 夏休みの後半、原稿用紙15枚の自由研究に苦しめられていた姪っ子（10歳）を「楽しそうだな〜」と手伝っていました。そんな時「私も久しぶりに自由研究したい！」と思い、ちびっこが家にいることですし、最近のちびっこがWebサイトをどのように利用しているのか研究してみることにしました。という事で今回の記事は自由研究風に進めようと思います！ ↑私が10年以上利用している会計ソフト！ 調べたいこと 認知度の高いWebサイトを、小学生がどのように利用するのかを観察し、こども向けのWebサイトに必要なもの、Webサイトを制作するうえで注意すべき点を調べます。 予想 難しい漢字は読めないので読みとばす イラストやキャラクターなど、可愛いものに興味を示す 明るい色彩のサイトに興味を示す まだ習っていない漢字や難しい表現は読み飛ばし、自分の理解できるもののみにフォーカスしていく
【まとめ】デザインが素敵！使い易さに特化してる！的なWebサイト１０選 - Love＆Peace
はじめに 私が直感で”素敵だなぁ”と思ったWebサイトをご紹介します。日々様々な情報を得る為にホームページを見に行く訳ですが、その中でも見た目のデザインや使いやすさに特化したWebページを自分なりにまとめてみました。 目次 はじめに 横浜中華街オフィシャルサイト 転職サイトGreen（グリーン） ワーナーミュージック・ジャパン 北欧、暮らしの道具箱 通販ベルメゾン ミニラボ（minilabo） 箱庭 haconiwa ドラおじさんの薬剤師・転職相談室 feve casa オンライン住宅雑誌 ZERO-CUBE MALIBU×カリフォルニア工務店のコラボハウス 写真・イラスト・動画などの素材屋「１２３R」 さいごに 横浜中華街オフィシャルサイト www.chinatown.or.jp 横浜中華街で「美味しい飲食店はないかなー？」と探していた時に出会ったのがこちらのWebサイトです。全体の雰囲
小さい子どもにコンピュータを触らせるということ - ビスケットのあれこれ
ビスケットは，開発して新しい機能を追加したときなど，必ず子どもたちが使っている様子を自分目で見てどんな風に使っているかを見てきます（最近はその暇が無くて他人に任せていたりして，かなりまずいんですが）．3年前くらいの面白いエピソードをご紹介しましょう． ちょうど，Androidタブレットで動くビスケットを開発していて（これはまた一般には配布していません．実験環境だけです），それがどのように子どもたちに使われるか見に行きました．僕としても指で直接操作するタブレットのUIの開発は初めてで．実は，マウスとタッチペンの操作は結構似ています．どちらも，非常に小さいエリアを結構正確にポイントできて，ドラッグもできますから．どちらかというと，ペンの方がドラッグが得意でしたね．小さい子はマウスクリックが全然出来ないとか（ボタンを押すときに指先だけ押すということができないので，手を握ってしまって，その結果マウ
Quartz | Make business better.™️
Our free, fast, and fun briefing on the global economy, delivered every weekday morning.
効率的に学べた！Webデザインを「職種別」に基礎から勉強出来る総まとめ | コムテブログ
作成：2014/01/6 更新：2014/11/01 Webデザイン > Web制作において、Webデザイナーに関係するものを職種別にまとめました。会社によって分け方は違うと思います。今回は参考サイトとスライドを掲載しています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ アートディレクター １．アクセシビリティ ２．ユーザビリティ ３．UX（ユーザーエクスペリエンス） ４．IA（情報アーキテクチャ） ５．画面設計（ワイヤーフレーム） ６．進行管理 Webデザイナー ７．レイアウト・フォントの知識 ８．配色 ９．Illustratorの使い方 １０．Photoshopの使い方 １１．バナー作成 １２．ボタン作成 フロントエンドエンジニア １３．HTML5 １４．CSS3／Sass １５．javascript １６．jQuery １７．WordPressテー
iOS 7のユーザーエクスペリエンス評価
フラットデザインは行動のきっかけとなる要素を見えなくしている。また、周辺部付近でのスワイプは、カルーセルやスクロールに干渉する可能性がある。 iOS 7 User-Experience Appraisal by Raluca Budiu on October 12, 2013 日本語版2013年12月2日公開 iOS 7はAppleのタブレットとモバイルデバイス用のオペレーティングシステムだが、iOSの旧バージョンまでの特徴だったスキューモーフィックデザインをやめた。新しい外見はこれまでのバージョンのオペレーティングシステムとは大きく異なっており、Appleがこれまで8年かけて熱心に構築してきた約束事のいくつかを大胆に放棄している。しかし、新デザインは本当に良くなっているのか。新しい外見の好き嫌いにかかわらず、新機能の中にはユーザビリティにとっては歓迎すべき改善もある。その一方、苦痛をもた
ユーザーの知識は低いレベルで停滞する
学習というのはたいへんな作業なので、ユーザーのやりたいことではない。その結果、彼らはユーザーインタフェースの探索をすることもなく、ほとんどの機能について知らないままだ。 User Expertise Stagnates at Low Levels by Jakob Nielsen on September 28, 2013 日本語版2013年11月25日公開 コンピュータシステムを長期間利用しているユーザーでも、知っていて使っているのは利用可能なコマンドや機能のほんの一部だけであることは多い。デザインのユーザビリティが優れていれば、ユーザーはシステムを利用しはじめて間もなく、かなり容易に一連の基本機能を理解する。しかし、その後、彼らは伸び悩み、それ以上はたいしてスキルが上がらない。システムを頻繁に使っているユーザーですら、年にわずか1つか2つの新しい知識を身につけられるようになるまでには何
富士通らくらくホンに見る高齢者に使いやすいUIのあり方 - A Successful Failure
2013年10月02日 富士通らくらくホンに見る高齢者に使いやすいUIのあり方 Tweet 高齢者にも使いやすい携帯電話といえば、富士通のらくらくホンシリーズが有名だが、総務省のICT超高齢社会構想会議の第4回WGにて、富士通研究所の石垣一司氏が高齢者のICT活用について 富士通（研究所）の取組ご紹介と題し、同社の取り組みの紹介を行っている。 非常に示唆に富んだ良い資料であるので、本エントリでは同資料を引用して、高齢者に使いやすいUIの勘所について考えてみたい。本エントリ内の図表は同資料からの引用である。 加齢に伴う身体機能の低下 加齢に伴い身体能力が低下することは誰もが体感することだが、具体的には次のような形として現れる（高齢者にとってのユーザビリティ）。 視覚機能の低下 老眼による近視力の低下 暗順応の低下 視野の狭まり 短い波長の色（青、緑）の感度低下 聴覚機能の低下 高い周波数帯の
iOS 7 の UI が分かりにくいワケ
［iOS の UIPicker を比較する］ 新しい iOS 7 の UI が識別しにくいと思っていたら、Sean Woodhouse がデベロッパの立場から同じことを指摘している。 iOS 6 と iOS 7 の UIPicker の違いを比較したものだ。 Itty Bitty Labs: “Lifting the lid on the iOS 7 UIPicker” by Sean Woodhouse: 30 September 2013 ＊ ＊ ＊ やっと iOS 7 ピッカーがよくなった？ iOS 7 の見かけが大きく変わった原因のひとつは UIPicker（およびその関連で UIDatePicker も）がフラットになったことだ。新しいピッカーは表面上はよりクリーンになったように見える。自分は iOS 6 のピッカーのビジュアル偏重と疑似３次元回転効果が好きではな
【テクニカルレポート】ユーザーの感情を視覚化するユーザビリティ評価手法の開発……パナソニック技報 | RBB TODAY
ユーザーの感情を視覚化するユーザビリティ評価手法の開発 解析センター ユーザビリティサポートグループ 東章子 要旨 「使って楽しい」「心地よい」「達成感がある」など，快適性・達成感を目指した製品開発が進むにあたり，これらの感情を評価する方法が確立されていないのが課題であった．そこで，「表情に感情が出る」ことに着目し，無意識に表れる表情・行動から感情を数値化して感情の変化を視覚化し，感情に影響を及ぼす場面を特定する評価方法を開発した． 1． 開発のねらい 一般に，ユーザーインタフェースにおけるユーザビリティ評価では，主観評価や，操作時の手順行動・発話などからその使いやすさを評価し問題点の発見や改善方法の検討を行うことが多い[1]．しかしながら，使いやすさという価値だけでなく「使って楽しい・快適・達成感がある」など感情面での価値を客観的，定量的に評価する方法については十分確立されていない． そ
「終了前に、ただ伝えてほしい」――多くの開発者に届きますように。
オープンソースの集まりで1度しか実際にお会いしていませんが、お願いがあります。 富士通アクセシビリティ・アシスタンスというサービスが、2013年8月20日で提供終了します。つまり、あと20日。このソフトは視覚障がい者や色覚障がい者の方がどのように色を見ているかを確認できるツールです。Webサイト制作をしている人なら、今は必要なくても、いつか必要になるソフトです。 8月20日までにダウンロードすれば、8月21日以降もローカル環境で普通に使えるので、なんとかメディアで紹介して頂き、提供終了するまでに、少しでも多くの人に知ってもらいたいと考えています。 紙媒体だと、とても間に合わないのですが、ネット媒体なら、なんとかなるかも！と思い、お願いしたいと思いました。 視覚障がい者や色覚障がい者という障がいに興味がないかもしれませんが、外見では判断できない障がいなので、気付いていないだけなのです。 よか
ペルソナとは――ウェブサイト向けペルソナを理解して、思いこみのユーザー像と決別しよう | やってみましたペルソナ作り
顔の見えにくい漠然とした「ユーザー」ではなく、あたかも実在する人物のように具体的に記述されているので、ペルソナシートを読めば、その人が何を期待してどのようにウェブサイトを訪れ、どのように見るページを選んでいるかなどを、具体的かつ体系的に深く理解できる。 ユーザーが「できること」だけではなく「したいこと」を見つける「ユーザーにとって使いやすいサイトを設計したければ、ユーザビリティテストで十分だ」と考える人もいるかもしれない。確かに、ユーザーが「できること」「できないこと」「しやすいこと」「しにくいこと」に関しては、いわゆるユーザビリティの領域でカバーできていた部分だ。しかし、ユーザビリティでは、ユーザーがそれを望んでやっていることかどうか、つまり「したいこと」「したくないこと」あるいは「してほしいこと」「してほしくないこと」を理解することは難しい。 それに対してペルソナは、架空とはいえ、あた
[体験レポート]やってみましたペルソナ作り――これがウェブサイト向けペルソナの作り方だ | Web担当者Forum
Web担編集部では、今回、Web担当者Forumのサイト向けに実際にペルソナを作成してみたので、その様子をレポート形式でお届けする（ペルソナについて詳しくは「ウェブサイト向けペルソナを理解して、思いこみのユーザー像と決別しよう」を参照）。 結論からいうと、ペルソナ作りはWeb担当者にとって非常に役立つものであり、編集部のスタッフは、今回のペルソナ作りによって新しい発見と良い刺激を得ることができた。また、ペルソナ作成はしっかりとした方法論のもとに行う必要があり、経験のある人の助けを借りることは必須だということもわかった。 使えないペルソナで失敗した経験実はWeb担編集部では、最初にメディアの中心としてのウェブサイトWeb担当者Forumをスタートした2006年7月の時点で、一度ペルソナを作成していた。「台東区にある玩具などのメーカーに勤める三島啓介さん（32才）」というペルソナだ。しかし、そ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch
富士通キッズ 夢をかたちに : 富士通