ユーザーは音声だけでWebサイトをどう使うのか？ 弁護士ドットコム、アクセシビリティユーザー調査の結果を公開 | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い
いよいよユーザーテストに入ります。テストの結果どうなり、何がわかったのでしょうか。今回は、ユーザーテスト本番の様子をお伝えします。 中根さん登場！前回の記事でもご紹介した中根さんに、実際に当社までお越しいただきました。中根さんは、アクセシビリティの専門家です。かつてはW3CのWAI (Web Accessibility Initiative) でアクセシビリティガイドラインの策定にも関わっており、現在ではアクセシビリティの情報サイト「AccSell」を主催して、Webに限らず、アクセシビリティ全般の情報を積極的に発信されています。 弁護士ドットコムの社内からは、20名ほどの参加者が集まりました。テストに先立ち、まずは視覚障害者の一般的な環境や、中根さんの普段の利用方法をご紹介いただきました。この内容は第1回、第2回の記事で触れた内容と重複しますので、そちらをご覧いただければと思います。 い
【2018年版】Webサイトのファビコンや各種アイコンの正しい設定方法 | Web Design Trends
Webサイトにファビコン（favicon）を設定しておくことで、ブラウザのタブやGoogleの検索結果にアイコンが表示されるようになります。 今回は、2021年現在のファビコン（favicon）の設定方法とおすすめの作成ツールについてご紹介したいと思います。 ファビコン（favicon）とは？ ファビコンとは、Webページごとに設定されるブラウザのタブなどに表示されるアイコンのことです。 PCのブラウザでWebサイトを開くと、タブごとにサイト名の隣にアイコン画像が表示されますが、その画像はWebページ側で指定したアイコンが表示されるようになっていて、ブラウザでの見た目が分かりやすくなるだけでなく、Webサイトのブランディングやイメージ作りにも影響を与えます。 ファビコンは、主に下記の箇所に表示されます。 必ずファビコンを設定しないといけないわけではありませんが、ファビコンが設定されていない
Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!
Written by Cody Lindley Sponsored by Frontend Masters, advancing your skills with in-depth, modern front-end engineering courses Download: PDF | epub Overview: This is a guide that everyone can use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2019. It is s
NVDAを使ってWebアクセシビリティをテストする方法｜実践ノウハウ｜エー イレブン ワイ［WebA11y.jp］
このWebページは、アメリカのユタ州立大学にある非営利組織WebAIMに許諾をいただき、”Using NVDA to Evaluate Web Accessibility“という記事を日本語訳したものです。 この記事のコンテンツ 以下にあるリストは、このWebページの見出しです。このリストをNVDAでスキップするには、Hを押して次の見出しへ移動してください。 イントロダクション まず最初に 読み上げ ナビゲーション クイックキー その他のナビゲーション用ショートカット 画像 データテーブル フォーム 練習 イントロダクション この記事は、NonVisual Desktop Access (NVDA)を使ったことのない方々がWebコンテンツを検証する際の基本的な操作方法を学ぶために、またNVDAを時折使う人の参考となるように書かれています。NonVisual Desktop Access (
現役UIデザイナーが制作した入力フォームを自身で解説！【WEB屋必読】 | 株式会社パンタグラフ
現役UIデザイナーが制作した入力フォームを自身で解説！【WEB屋必読】 UI／UXデザイン 2017.12.15 入力フォームについて様々な角度から考察させていただいたPantographのUIデザイナーが、今回は実際にデザイン制作した入力フォームを解説させていただきます。 実際の制作物を、デザイナー本人がこうして記事を通して解説することは滅多にないので、UIデザイナーさんもそうでない人も、WEBに携わるすべての人にお読みいただけたら嬉しいです。 ▼入力フォームについて考察した関連記事 ・入力フォームの制作ルールを紹介･解説 【ヒューリスティック分析】入力フォームを改善して送信数を上げる10の技 【スマートフォン編】入力フォームの送信数・CVRを上げる5つの改善策 ・入力フォームの参考サイトを紹介･解説 【2018年版】入力フォームのデザイン設計に参考にしたいサイト事例8選 制作過程におけ
遂に来る！ Chrome 75にてLazyLoadが正式に実装されるようです🎉 | フロントエンドBlog | ミツエーリンクス
2019年4月8日 遂に来る！ Chrome 75にてLazyLoadが正式に実装されるようです🎉 リードUI開発者 宇賀 皆さんこんにちは！春から肩書の頭に「リード」が付きましたリードUI開発者の宇賀です！ 今後ともどうぞよろしくお願いいたします。 さて、つい先日の話ですがそれよりももっと素晴らしいニュースが飛び込んできました！！😲 なんと、CanaryではないGoogle Chrome 75にて、LazyLoad（遅延読み込み）が正式に実装されるとのこと...！🎉🎉🎉 ページの初期ロードでは見えている必要がない画像の読み込みを遅延させることで、ユーザー体験の質を向上させることができることから、今までもずっと注目されてきた技術です。 Native lazy-loading is coming to the web! https://t.co/LgF7F1iMgR
Chrome DevToolsを使用してサイトのパフォーマンス改善をしてみた - WILLGATE TECH BLOG
こんにちは！開発室メディアユニット所属新卒1年目の小澤です。 ウィルゲートでは現在（2018年9月1日）4つのメディアを出版社と協業で運営しており、そのうちの3つを自社で開発、運用・保守しています。 暮らしニスタ｜知りたい！教えたい！暮らしのアイデアがいっぱい！ Milly ミリー｜妊娠・出産・子育ての“今知りたい”をすぐ解決 花時間 | 花やグリーンから始まるボタニカルライフの提案 PV数や回遊率を上げるためには良質なコンテンツを提供するのはもちろんですが、その他にできる取り組みとして、UI・UXの改善、表示速度のチューニングなどがあります。 今回は、ページの表示速度を改善する一歩目として、webブラウザ「Google Chrome」に標準で搭載されている 「Chrome DevTools」を利用して簡単にサイトスピードを計測する方法を紹介します。 Chrome DevTools(旧：
色盲・色弱の人にWebページがどのように見えているかシミュレートできるChromeの機能拡張 -Colorblindly | コリス
色盲や色弱の人がどのように見えているかシミュレートできるオンラインサービスはいつかありますが、テストサーバーやローカルで利用できないのが残念なところです。 色盲・色弱の人の見え方をシミュレートできるChromeの機能拡張を紹介します。
mikan.js : 機械学習なしで、日本語の単語の改行を処理するライブラリを書いた - Qiita
今朝方、はてなのホットエントリにBudou - 機械学習を用いた日本語改行問題へのソリューションという記事が上がっていました。 ざっくりとした説明をすると、「タイトル中の単語が途中で改行されるせいで読み見辛いのを、機械学習を使ってキーワードごとに分割することでなんとかした」という感じの内容です。 Budouというソリューション オリジナルのBudouは、GoogleクラウドAPIを用いて単語を分けるわけですが、これ毎回APIを叩かないといけないですし、叩き過ぎるとお金もかかってきます。 また、このライブラリはPythonで書かれていますので、RubyやPHP、Node.jsでは単純に導入という形で使うことはできません。GoogleクラウドAPIの設定も必要です。 分かち書きすることで改行をどうにかするというのは、とても良いアイディアですし、導入するだけで見た目も良く見えますので、上記の理由
Budou - 機械学習を用いた日本語改行問題へのソリューション - ウェブ雑記
こんにちは！ 日本語のウェブサイトを作っていると、日本語特有の問題にぶちあたることがありますよね。 その中でも今回着目したいのは、日本語改行問題。最近、この問題を解決するためのライブラリを公開したので、紹介します。 github.com そもそも日本語改行問題とは何か ウェブブラウザで日本語で書かれたウェブサイトを見ていると、ときどき文章が変なところで改行されているのを目にすることがありますよね。 たとえば、こんなかんじ。 「ソリューション」が「ソリューショ」と「ン」に分かれてしまっています。読みにくいですね。 英語では単語がスペースによって区切られますが、日本語や中国語などのアジア圏の言語では単語がスペースで区切られないことが多いです。 そのため、英語では単語の途中で改行されることは通常ありませんが、日本語では単語の途中で改行されることがよくあります。 本文ならともかく、見出しやキャッチ
2013年に話題になったデザインに関する「考え方」が変わる記事14選
デザインをしつづけていると、たまに柔軟に考えられなかったり、自分のデザインに対して疑問を感じるときがありませんか？ そういうときは一度、初心にかえってデザインに関して考え方を見直したり、インスピレーションを刺激することも大切です。 また、デザイン思考を身につけるためにも、常日頃から考え続けることも重要です。 今回は、過去に話題になり、読むだけでデザインに関する「考え方」が深まる14個の記事をご紹介します。 デザインに対する考え方が変わる・深まる記事 これはウェブページです｡ ウェブデザインの本質は､言葉です｡ ウェブで一番強力な道具は､今も昔も言葉だということを、思い出させてもらいました。 ▷これはウェブページです｡ 選ばれるウェブデザインとは ９つの基本的なルールと感情に訴えるデザインについて詳しく書かれています。 サイトの使いやすさだけでなく「ユーザーがそのサイトにどんな感情を抱くか」
新人Webデザイナーへ向けた、考え方から実践までの話 | Web制作に関するブログ | 株式会社シロクロ
Web制作会社 シロクロ Web制作に関するブログ新人Webデザイナーへ向けた、考え方から実践までの話 新人Webデザイナーへ向けた、考え方から実践までの話 2016年6月15日 Webデザイナーとしての心構え、普段やるべきこと、実際にデザインするときの手順など、弊社の新人デザイナーに伝えていることをまとめました。学生や新人Webデザイナーの方に役立てていただければ幸いです。※ディレクターが打ち合わせやワイヤーフレーム制作などを担当し、デザイナーは純粋に画面を作る役割として話を進めます。 はじめに何のためのデザインか色んなWebサイトを見ることWebサイトを模写することデザインする前にWebサイトの目的／目標を理解する同業他社のWebサイトを調べるワイヤーフレームのままデザインしないデザイン作業時世界観（トーン&マナー）とレイアウトを決める文字、色、装飾、余白のルールを決める必要であれば構
最新Web技術！WebPaymentAPIについて調べてみた。 - Sassyブログ
目次 目次 1.WebPaymentとは？ PaymentRequestAPI ペイメントアプリ トークン 2.WebPaymentでできることは？ 3.対応ブラウザは？ 4.最後に 最近のWeb技術を調べていたのだけど、 WebPaymentという言葉がでてきまして気になって調べてみました。 どうやら去年頃に出W3Cによって、仕様が制定されたようですね。 下記のリンクにて仕様が確認できます。 Web Payments HTTP API 1.0 1.WebPaymentとは？ 私が調査を行って、理解したベースで説明させていただくと、 Webでの決済にてクレジットカード情報を直接ECサイトに渡さずに決済を行う仕組みです。 WebPaymentで重要なキーワードとして、下記の３つがあります。 PaymentRequestAPI ブラウザで提供されている標準のAPIであり、クレジットカード情報の
ARIA in HTML
ARIA in HTML W3C Recommendation 07 May 2024 More details about this document This version: https://www.w3.org/TR/2024/REC-html-aria-20240507/ Latest published version: https://www.w3.org/TR/html-aria/ Latest editor's draft:https://w3c.github.io/html-aria/ History: https://www.w3.org/standards/history/html-aria/ Commit history Implementation report: https://w3c.github.io/html-aria/results/implement
[Webフォント]意外と簡単！フォントを自分でアップロードしてWebフォント化する手順 | ひま缶
最近ではフリーでも日本語フォントが色々出てきているようですね。 そんな恵まれたこのご時世、Webフォントを導入して差別化したい！可読性を高めたい！と考える運営者様も多いのではないでしょうか。 Webフォントを使うには Webフォントを導入する方法としては、 Google FontsやFONTPLUSのようなWebサービスを使う方法と、 自分でフォントをサーバーにアップロードして使う方法の2種類があります。 Webサービスを使うメリットとしては、導入が凄く楽という事です。 タグを発行してあとはcssでフォントを指定するのみです。 自分でWebフォントをサーバーにアップロードする方法のメリットとしては、 フォントの選択肢が増えるという事と、無料で好みのフォントが見つかれば 費用が掛からないという点ですね。 (英語フォントで良いのであればGoogle Fontsは無料なのでこちらを使うべき) た
Font-familyメーカー：フォント種類一覧からサクッと指定
Windows メイリオ 'メイリオ', Meiryo, 愛のあるユニークで豊かな書体 Meiryo UI 'Meiryo UI', 愛のあるユニークで豊かな書体 游ゴシック YuGothic,'Yu Gothic', 愛のあるユニークで豊かな書体 Windows8.1~ 游明朝体 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体', 愛のあるユニークで豊かな書体 Windows8.1~ Yu Gothic UI 'Yu Gothic UI', 愛のあるユニークで豊かな書体 Windows10~ ＭＳ ゴシック 'ＭＳ ゴシック', 愛のあるユニークで豊かな書体 ＭＳ Ｐゴシック 'ＭＳ Ｐゴシック','MS PGothic', 愛のあるユニークで豊かな書体 MS UIゴシック 'MS UI Gothic', 愛のあるユニークで豊かな書体 MS明
Facebook UIデザイン大解剖─UIの使いやすさを決める「グレースケール」の配色ルール ｜ブログ｜root｜芯を問い、成長に貢献する
初めまして、rootアシスタントデザイナーの内藤です。 今日はFacebookのモバイルUIを事例に、UIデザインにおける「グレースケール」の使い方について考えてみます。 そもそも「グレースケール」とはなんなのか。僕も、言葉だけ知っていてなんとなく使っていたので改めて調べてみました。 IT用語辞典（e-words.jp）によると グレースケールとは、画像などに使われる色の種類・範囲を表す用語の一つで、白と黒とその中間の何段階かの灰色のみを用いること 一言でいってしまえば、限りなく黒に近いものから限りなく白に近いものまで「いろんなグレー」ということでしょうか。 グレーという色は地味ですが、UIデザインにおいて実はもっとも重要で、なおかつ難しい色なのではないかと考えています。 例えば、Webサイトのキーカラーなどは、目立ちますし、サイト、しいてはブランドそのものの印象を決定づける色なので、色選
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - axcelwork/Noto-Snas-subset: のとさんのサブセットです
★WebブラウザシェアランキングTOP10(日本国内・世界) – ソフトウェアテスト・第三者検証ならウェブレッジ
クリエイティブなWebデザインリンク集 -[ウェブアートノックARTNOC]-![クリエイティブなWebデザインリンク集 -[ウェブアートノックARTNOC]-](https://cdn-ak-scissors.b.st-hatena.com/image/square/6a641442babbfb54f2b57a3b080bdb65fd49f0b6/height=288;version=1;width=512/http%3A%2F%2Fart-noc.com%2Fwp-content%2Fuploads%2F2017%2F11%2Ffillinglife-1024x598.jpg)
