トグルスイッチとは状態のON/OFFを切り替えるためのUIパーツです。選択肢が明確にわかり直感的に操作できるトグルスイッチは、ユーザビリティを高めるための重要な要素です。しかしそのシンプルさゆえに、不適切な使われ方をしているケースを見かけます。トグルスイッチの機能と適切な使用方法を理解し、ポイントをおさえて設計することが大切です。 トグルスイッチの定義 トグルスイッチはウェブページやアプリケーションのコンポーネントです。同時に選択できない2つのオプションからいずれかを選択し、現在の状態を視覚的に表します。ユーザーがトグルスイッチのON/OFFを切り替えれば、ボタンの操作結果やオプションの変更設定がすぐにシステムに反映されます。 一般的に「トグルボタン」や「トグルスイッチ」と呼ばれることが多く、Material Design（※1）では「スイッチ」、Human Interface Guide
この記事は STUDIO アクセシビリティ委員会のマガジンvol.8 です。 こんにちは！STUDIO株式会社 フロントエンドエンジニアのjimbouです。 私からはSTUDIO アクセシビリティ委員会マガジンにて、主にエンジニア/デザイナーさん向けに技術的な記事を発信しています。 STUDIOに限らずWebサイト、Webアプリに携わる全ての方々に読んでいただければと思います🌟 今回は「アコーディオンUI」についての記事になります💡 Webサイト、WebアプリでアコーディオンUIをデザイン/実装する方に向けて、少しでも役に立つ記事になれば幸いです☺️ 何のためにアクセシビリティを向上させるのか？ではこのアコーディオンUIを実装する上で、アクセシビリティを向上させるとどんな良いことが起こるのでしょうか。 例として、アクセシビリティを特に意識せず主にdivタグを用いてマークアップしたアコー
以前にも少し書いたのですが、ウェブブラウザーで使えるページ内検索による体験が阻害されるのが本当にストレスで、その例を残しておこうと思います。 採用側の気持ちも分かりますので、どうなると皆が幸せになるのか分からないという種類のものなので困ったところです。 省略されたテキストoverflow: hiddenとtext-overflow: ellipsisまたは-webkit-line-clampによってテキストが省略された場合、その省略部分がページ内検索にヒットすると非常に探しづらいです。 特に、グリッドで区切られたアイテムが複数列・複数行で並んでいる際に顕著です。 以前の記事のとおり、わたしはYouTubeでよく遭遇します。 下記のデモは、1000個のアイテムを並べたものです。 このうち、「Red Rose」というワードは12個のアイテムに含まれています。 デモを開いて「Red Rose」で
こんにちは。 コーポレートデザインチームのmewmo(@mewmoppel)です。 ペパボではテレワークを基本とする働き方に移行することが決定され、社内デザイナーのナレッジシェアの場として開催されている「Designer’s MTG（通称 デザミ）」のフルリモート開催も当たり前の風景となってきました。 今回は「UI Design」のエキスパートスキルエリアのデザイナーにナレッジシェアしていただきましたので、その様子をお届けしていきたいと思います〜 これまでのデザミのレポートはこちら Designer's MTG #9 Information Architecture編 レポート！ 40人のデザイナーがフルリモートで集合！ Designer's MTG #8 レポート！ 「デザミとは？」「エキスパートスキルエリアとは？」については、前回の記事で紹介していますので、気になった方はあわせてご覧く
ワンタイムパスワードについて（2024年3月7日以降） / One-Time Passwords (From March 7, 2024) 言語につきましては、以下ボタンから選択してください。 Please select your language from the buttons below.
あけましておめでとうございます。株式会社ミツエーリンクスの黒澤剛志です。本稿では、昨年に引き続いて、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.
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
HTML5とWAI-ARIAでマルチデバイスに対応したアクセシブルなサイトを作ろう「HTML5 Conference 2013」 馬場 美由紀（HTML5 Experts.jp編集部） いまやマルチデバイスの時代。PCやタブレット端末、スマートフォン、将来的にはメガネ型デバイスも登場しつつある。「今はこのような時代。Webは特定のデバイスや環境のものではない」 こう語るのはミツエーリンクスの黒澤剛志氏だ。黒澤氏は同社のアクセシビリティエンジニア。顧客のWebサイト診断やコンサルティング、社内制作物のチェック業務のほか、同社が運営しているアクセシビリティBlogの執筆などを手がけている。またW3C UAWG（User Agent Accessibility Guidelines Working Group）のメンバーも務める。 マルチデバイス時代のWebアクセシビリティとは 先述したようにマ
インフォメーションアーキテクトの浅野です。 今回翻訳した記事は、ユーザーインターフェース（UI）デザインの中でも、現在のモバイル主流のトレンドの影響もあってますます注目度が高まっている「アイコンデザイン」がテーマです。 記号論の基本中の基本をふまえながら、著者による実際のテストデータに基づいたベストプラクティスを紹介してくれる、とても親しみやすい記事です。 » 翻訳記事「UIアイコンの最適化 — 認識速度の向上をめざして」へ この記事で紹介されている「イコン／インデックス／シンボル」とは、アメリカの科学者チャールズ・パースによる記号の分類方法のひとつです。記号についての研究でもっとも著名なのは、このパースと、スイスの言語学者フェルディナン・ド・ソシュールという二人の学者ということになるでしょう。 記事の脚注にも、その2名の名前が出てはきましたが、本文の中で両者の理論をはっきりと区別でき
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く