JavaScriptライブラリ キャビネット（Cabinet） ウェブアクセシビリティに対応した スライダー・カルーセルUI スライド、フェード、自動再生、ドラッグ操作、レスポンシブ、キーボード操作・スクリーンリーダーに対応しています。
JavaScriptライブラリ キャビネット（Cabinet） ウェブアクセシビリティに対応した スライダー・カルーセルUI スライド、フェード、自動再生、ドラッグ操作、レスポンシブ、キーボード操作・スクリーンリーダーに対応しています。
Tailwind CSS での開発体験が個人的に最高すぎて、最近はどんなWebサイトの実装でも利用しています。 CSS custom properties を併用することもあり、そのときに嬉しいことを紹介します。 Next.js を使っている前提でコード・ファイル名を例示しますが、他でも扱えると思います。 CSS custom properties 併用したい場面 スマートフォンでは、コンテンツを端から 16px の位置に置く パソコンでは、コンテンツ幅を 960px にし中央寄せにする こんなデザイン仕様、レスポンシブデザインだとよく出きます。 tailwind.config.js でテーマを拡張して実装すると以下のようになります。 import type { Config } from 'tailwindcss'; export default { theme: { extend: {
今回はバックエンドAPIでページネーションをどうやるかについての話なので、よくある無限スクロールUIのようなフロントエンド側の実装に関する話はしない。あくまでもAPI、もっと言えばRESTfulなAPIのリクエスト・レスポンスにおけるページネーションの話。 本気で深く考えるというよりざっくり検討したときの話です。 はじめに REST APIを実装するにあたってリスト系のAPIを提供する場合に必須といっても過言ではないのがページネーション。大量のリソースをレスポンスする場合にそれらを一気に返してしまうことは応答速度、転送量、クライアントサイドでの扱いづらさなどなどに繋がるので必須と言える。 最近、新たなAPIを開発するにあたってページネーションをする必要があったこともあり、今回はこのページネーションをどうやって提供するか整理して改めて検討してみた。 前提 TypeScript Nest.js
圧縮率だけで選んだら AVIFかJPEG XLの圧倒的な勝ちになる AVIF はプログレッシブレンダリング対応しておらず、 画像が100%ダウンロードされた後にポン！と表示されるので、UXが悪化する JPEG XLは理想ですが、まだ対応ブラウザがありません[3:1] WebP2は 開発中[4:1] この問題が分かる次の39秒動画をご覧ください LCPの解決編: 新しい指標 🚀 現在、Core Web VitalsのLCPは描画が終わったタイミングしか計ってないので、 LCP上 AVIFやWebPが素晴らしいスコアになるが、UX観点だと宜しくない体験になります。 この指標は早めに定義をし直さないと、現行のLCPが広まった後だと業界全体の取り返しがつかない可能性があるので、新しい指標を定義し、W3CのWICGにプロポーザルを3つ提出しました 💪 その中身を翻訳・解説します。 （日本語ネイテ
今年はmacOSのアップデートによりヒラギノが動かなくなったり、 来年初頭にはWindows7がサポート終了、Edgeのブラウザエンジン変更など、 エンドユーザーの環境を考えなければならない節目の時です。 そこでいつもコピペで済ましているfont-familyについて1から考え直してみます。 全部読もうとしている人はスクロールバーを見てから考えてください。 結果 コピペユーザーのために先に結果を記載します。 ブログ等に転載する場合はこのページのURLぐらい貼ってください。 @font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100; } @font-face { font-family: "Original Yu Gothic"; src: local("Y
NTTコミュニケーションズ Advent Calendar 2018の16日目です。 はじめに PWAネタについて書きたい人生だった。 気づいたらウェブアクセシビリティについて書いていた。 目的 気になって調べてみたら少し知見が溜まったので、メモついでに共有しようかと思い、今回記事にしました。 記事内容 ウェブアクセシビリティ概要 概要 重要性 近年の動向 手法 ヒューマンリーダビリティに関する手法 マシンリーダビリティに関する手法 ウェブアクセシビリティ概要 ウェブアクセシビリティって何？ WAICのホームページより抜粋 一般にアクセシビリティとは、アクセスのしやすさを意味します。転じて、製品やサービスの利用しやすさという意味でも使われます。 ウェブのアクセシビリティを言い表す言葉がウェブアクセシビリティです。ウェブコンテンツ、より具体的にはウェブページにある情報や機能の利用しやすさを意
国税庁のWebサイトが3月31日にリニューアルされ、トップページを除くほぼすべてのURLが変わった。旧URLにアクセスすると、国税庁のトップページにリダイレクトされる仕様だ。トップページにはYahoo！検索を使ったサイト内検索機能があるが、4月2日午後3時現在、これで検索しても過去のURLがヒットし、トップページにリダイレクトされてしまうため、「トップページの無限ループ」「目的のページにたどり着けない」と混乱が起きている。 国税庁広報広聴室は「検索が現状、機能していない状態だ」と認め、検索エンジン側にURL更新のリクエストを出しているという。検索エンジンが対応するまでは、トップページからメニューをたどって目的のページを探してほしいと呼び掛けている。 同庁は今回のリニューアルに当たり、サイト内の情報分類を再整理。2015年に内閣官房のIT総合戦略室が定めた政府共通のWebサイトの構築ルールに
UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 メールアドレスは、もっとも間違いやすいフォームフィールドの１つです。 入力データにはさまざまな種類の文字による長い文字列が含まれているため、間違って入力してしまいがちです。これにより、ユーザーが間違ったメールアドレスを送信する可能性があるのです。 メールアドレス確認の問題 デザイナーは、メールアドレスの確認フィールドを追加することで、間違ったメールアドレスの送信を防ぐことができると考えています。メールアドレスの確認フィールドの追加で誤送信を何件か防ぐことはできるかもしれませんが、必ずしもすべてを防ぐことができるというわけではありません。 多くのユーザーは、メールアドレスの入力内容をコピーして、確認フィールドに貼り付ける傾向があります。これでは、ユーザーが間違ったメールアドレスを貼り付ける
HTML5でWebページを作成する時のベースになる必要最小限の構成で記述されたHTML5のテンプレートを紹介します。 スニペットに登録しておくと、便利ですね。 イラスト: Girls Design Materials HTML5 Boilerplate -GitHub HTML5のテンプレート HTML5のテンプレートの解説 HTML5のテンプレート HTML5 Boilerplateのテンプレートを日本語化しました。 オリジナルライセンスで、商用利用、修正、配布、サブライセンス可です。 <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>タイトル</title> <met
With hundreds of thousands of themes, skins & free backgrounds, you can customize any website with your own color scheme in a click. We heard you - Unlimited Styles are BACK! Enjoy over 500K custom website themes in just a click. Custom website themes that make the internet entirely yours ★ Explore the largest gallery of free website themes for websites like: Roblox, Youtube, Facebook, Google and
例のタイプのスマホ広告が生まれる前に元を断ちたい https://t.co/0baZhe6gj9
アプリマーケティング研究所 > アプリ開発 > 世界3,200万ダウンロード、単月黒字化も達成。フリマアプリ「メルカリ」が語るマーケティング、検索結果にあえて「売り切れたモノ」を置いている理由。 世界3,200万ダウンロード、単月黒字化も達成。フリマアプリ「メルカリ」が語るマーケティング、検索結果にあえて「売り切れたモノ」を置いている理由。 今回は、日米3,200万ダウンロードのフリマアプリ「メルカリ」を取材しました。 ※株式会社メルカリ 取締役 濱田優貴さん(左)、プロダクトマネージャー 山本久智さん(右)、広報 中澤理香さん 「メルカリ」について 「メルカリ」についておしえてください。 濱田： 誰でもかんたんに売り買いできる「フリマアプリ」です。ダウンロード数としては世界3,200万ダウンロード（日本 2,500万、アメリカ 700万）です。OSで見ると、iOSのほうがすこし多いですね
Windows 8のUIやGoogleのアイコン、Appleの新しいiOS7、さらにはFirefox 23のアイコンにまで使われているフラットデザイン。そんなフラットデザインがインターネット上で流行しているのかどうか、このデザインの特長は一体どういった点なのか、ということを実際にウェブ業界で働くプロ100人に対して調査したレポートが公開されています。 Flat Web Design Is Here To Stay - The Usabilla Blog http://blog.usabilla.com/flat-web-design-is-here-to-stay/ 調査はウェブ業界で働くプロフェッショナル100人に対して行われました。調査対象者の職業は以下の通りで、ウェブ業界で働く人々をまんべんなく調査しています。 調査の参加者にフラットデザインについて最初に思い浮かぶ単語を尋ねると、以
まずは、歴史をみてみよう。 初期* { margin:0; padding:0; border:none; } table レイアウトから CSS レイアウトへの移行期に考案された。すべてゼロにするというコードで、実装者が書いたコードのみが適用できるという手法。弊害として input 要素の枠線など、本来、スタイルをゼロにする必要がない箇所までスタイルが消えてしまい、しょうがないので更に上から枠線を加えるなどが必要になっていた 中期今から 5 年ほど前の 2008 年、エリックメイヤー氏によるリセット CSS や YUI のリセット CSS が登場した。全称セレクター「*」 ではなく、要素セレクターそれぞれに対して CSS をゼロにするという手法。 ただし、p や見出し要素の上下マージンや li のリストスタイルまでも依然としてゼロになっていたため、次のような、本末転倒な HTML まで
BBS（ビービーエス）、またの名を掲示板。 今となっては少しノスタルジックな響きを持った言葉ですが、先日、とあるお店のサイトに設置されていた掲示板を見かけて驚いたとともに、ユーザビリティについて考える機会があったのでご紹介したいと思います。 掲示板上でやりとりされる注文情報…問題の掲示板は、こちらの「しょうゆ販売店」のサイトに設置されたものです。 書き込みの途中に、商品の注文情報が書かれているのが見つかりますか？ （個人情報がそのまま書かれているので、ボカシ入り画像のみでのご紹介です。） これを初めて見たとき、2つの意味で衝撃を受けました。 1つ目は、ここを注文フォームと間違えて書き込みをしてしまう人が存在するということ。 2つ目は、この方法、結構いいんじゃない？ということです。 セキュリティ上はマズいけど…一般公開されている掲示板に注文情報を書いてしまうというのは、普段からインターネット
jQueryを使って、既存サイトの画像を遅延ロードっぽく見せる方法、いわゆる「なんちゃって遅延ロード」について紹介します。 昨日エントリーした「画像を遅延ロードする定番jQueryプラグイン「Lazy Load」」ですが、投稿済み記事の画像に対して設定をひとつひとつ変更するのは現実的に厳しいと思われます。 とはいっても、他のサイトでページをスクロールすると画像がふわっと浮かび上がるアクションには憧れます。 ということで、既存サイトの画像を遅延ロードっぽく表示させる方法を考えてみました。 １．「なんちゃって遅延ロード」と称する理由 「なんちゃって遅延ロード」と称する理由は、ページをスクロールしたときの表示は遅延ロードされたようにみえますが、最初から遅延ロードの設定をしていないimg要素はページロード時に画像が先に読み込まれてしまうためです。 下のスクリーンショットは、遅延ロードの設定有無によ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く