少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示する そのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。

Linearのリニューアル記事がすごく良かった。 A design reset (part I) How we redesigned the Linear UI (part Ⅱ) その記事の中で「LCHカラースペース」について書かれていた。知らなかったので調べてみると、以下の記事を見つけた。 この記事の内容を抜粋しながら、自分用に簡易なメモとしてまとめる。 LCHとは？LCHは簡単に言うと、異なる色相でも同じコントラストに見えるように構成されたカラースペース。 1976年に国際照明委員会 (International Commission on Illumination, CIE) によって最初に定義された色空間であるため、CIELAB とも呼ばれている。 LCH は、Lightness（明度）、Chroma（彩度）、Hue（色相）の略。 HSL と LCH の違いLightness（明度

Web アプリなどの UI でよくあるのですが、フォームの外側に送信ボタンがあるようなデザインのときに HTML だけで解決する方法があるので紹介します。 form 属性で紐付け <input> 要素の form 属性に <form> 要素の id 属性値を指定することで、フォームと送信ボタンを関連づけられます。 <form id="signin"> <label> メールアドレス <input type="email"> </label> <label> パスワード <input type="password"> </label> </form> <input type="submit" form="signin" value="サインイン">

こんにちは！東芝UIデザインチームnote事務局の小林Jです。 みなさんは「使いやすさ」について、どのように考え、どのようにデザインしていますか？ちゃんと「使いやすい」ものづくりができているか不安になったことはありませんか？ そんな時によりどころになるのが「人間工学」です。 「人間工学」とは、人間にとって使いやすく、安全な道具や製品、システムを考える学問です。人間特性をもとに環境や道具の使い勝手などを研究する学問でもあります。 「人間特性」とは、知覚から認知、身体に至るまで人間特有のあらゆる機能や性質のことです。どうしてそのような行動をするのか、という原理を知っていることが、モノづくりや仕組みづくりをする人たちにはとても大切なんです。 弊社デザイン部門には人間特性ワーキンググループという専門チームがあり、デザイン部門内で情報共有や勉強会を行っております。 noteにも「人間工学シリーズ」と

グラフィック系の開発者であるニキータ・リシッツァ氏が、「自身のプロダクトのあらゆる場所で使用している」と述べるお気に入りのテクニックである「指数平滑法」について解説を投稿しました。 My favourite animation trick: exponential smoothing | lisyarus blog https://lisyarus.github.io/blog/programming/2023/02/21/exponential-smoothing.html リシッツァ氏は下図のようなトグルボタンを例に解説を行っています。クリックすると「オン」「オフ」が切り替わります。まだアニメーションを何も設置しておらず、トグルボタンは左端と右端を瞬間移動しています。 機能的にはアニメーションが設定されていなくとも問題はないのですが、アニメーションを設定することでユーザーは何が起こって

ウェブページ上には「クレジットカード番号」「郵便番号」「電話番号」といった数値の入力欄が存在することがありますが、実装方法によってはブラウザの挙動によって入力内容が変化してしまったり、テンキーでの入力を受けつけなくなってしまったりします。そこで、数値入力欄の実装時に気を付けるべき点をまとめてみました。 KeyboardEvent - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent Why the GOV.UK Design System team changed the input type for numbers – Technology in government https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-desig

Xアカウントのrandomsakugaが、4月27日に更新を停止することを発表した。 randomsakugaは、世界中のアニメーション作品の秀逸な作画シーンを、作品名や関わったクリエイターと共に紹介するアカウントとして、人気を集めていた。 アニメの秀逸な作画を紹介「randomsakuga」randomsakugaは、2017年2月から運用を開始。 2024年3月19日まで毎日、日本の作品を中心に古今東西あらゆるアニメの作画シーンを紹介していた。 https://twitter.com/i/status/1769770744823640456 https://twitter.com/i/status/1769589549880025473 投稿していた作画シーンは、ライターによる考察や翻訳記事を掲載しているアニメ専門サイト・Sakugabooruにアップロードされている、無数のアーカイブ

※本記事はアフィリエイトプログラムによる収益を得ています 東京駅・丸の内駅舎の断面を描いた手描きイラストが、X（旧Twitter）で「見てて楽しい」「素敵だなあ」と、約3万6000件の“いいね”を集めるほど人気です。 東京駅・丸の内駅舎（出典：PIXTA） 豆知識がいっぱい詰まった手描きイラスト 話題になっているのは、訪れた旅館の建物を断面パースで記録してまわっている吉宮晴紀（@rninopon）さんの作品。東京駅・南ドーム（南口）の駅舎を、地下の構造まで含めた断面図として描いたイラストです。 南ドーム（南口）を北側から見た視点で描かれており、“実はドーム上に空洞がある”という建物上部からホテル部分、駅舎に近い中央線ホーム（電車も断面図）、大規模な免震化工事が行われた地下部まで、利用客が普段目にすることのない細かいところまで描かれています。毎日たくさんの人が歩くエントランスの地下にこんな構

※本ページは、アフィリエイト広告を利用しています。 「はじめてでもここまでできる」の本書タイトル通り、読んで3時間ほどでStable Diffusionの画像生成を思い通りにできるようになりました！ Stable Diffusionでどんなことができるのかは知っていましたが、実際に自分のPCにセットアップし、プロンプトによる画像生成をはじめ、色塗り指定や画風指定、キャラをAIに学習させての画像生成までできました。Stable Diffusion初心者の人にお勧めの解説書を紹介します。 また、少しやってみたけどTextual InversionやControlNetやLoRAなどがうまく使えない、そんな人にもかなりお勧めです。 本書は「はじめてでもここまでできる」というタイトル通り、初心者向けの解説書です。そして「本格活用」とあるように、ただ使えるようになるだけでなく、塗りの書き込み感、色塗

《この記事は約 21 分で読めます（1分で600字計算）》 一般社団法人版元ドットコムとopenBDプロジェクト（版元ドットコムと株式会社カーリル）は3月29日、版元ドットコム会員社以外の出版社に対し、書誌・書影の読者（第三者）などへの利用承諾を求める取り組みの開始を発表しました。そもそもなぜそのような取り組みが必要なのでしょうか？ 本稿ではその背景や経緯などについて、関係者への取材などを踏まえた上で詳しく解説します。 お断り：アマゾンジャパンには、HON.jpの法人会員として事業活動を賛助いただいています。しかし、本稿の記述は筆者の自由意志であり、対価を伴ったものではありませんし忖度もしていません。また、本稿では論点を絞るため、話をおおむね「書影」に絞ります。以下、常体で記述します。 そもそもなぜ書影の利用許諾が必要なのか？ オンラインショッピングなどで用いられる商品画像――本の場合、そ

Webサイトやスマホアプリの実装に、ボタンは欠かせない要素の一つです。そんなボタンの実装に設定しておくと便利なCSSのスタイルを紹介します。 スマホでボタンをタップした際にズームなどの誤動作が起きないようにするCSS、ボタンのテキストが選択されてハイライトにならないようにするCSS、フォーカス時のアウトラインをより見やすくするCSS、ボタンの論理サイズを設定するCSSなど、デフォルトのスタイルとして設定しておくと便利です。 CSS Button Styles You Might Not Know by David Bushell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スマホでボタンをタップした際の誤動作を防止 ボタンのテキストの意図しない選択 ファイル選択のボタン ボタンをフォーカス時の視覚的なアウトライン

うそのカウントダウンタイマーや、在庫が少ない、需要が高いなどの表示。 画像では、カウントダウンタイマーや「今だけ」の表示で焦らせて「今買わなければ」という気持ちに追い込んでいます。 今回私たちは、企業の間ではダークパターンがどのように認識されていて、どのような対策を取っているのか、現状を把握するために独自にアンケート調査を行いました。 調査は、武蔵野美術大学の長谷川敦士教授の監修のもとで行い、ダークパターンが使用されることの多い6つのジャンル（ネットショッピング、旅行予約サービス、飲食店予約サービス、動画配信サービス、音楽配信サービス、電子コミック配信サービス）について、利用者の多い5つのサービス、あわせて30のサービスを対象にしました（利用者数については、ニールセンとICT総研の調査を元にしています）。このうち、16のサービスの運営企業から回答がありました（回答率は53％）。 回答した企

異なるカラーを濃くしたり薄くしたりするとき、個別にカラーを設定してもできますが、CSSの相対カラー構文（color: rgb(from green r g b);）を使用すると簡単に実装できます。 下記はそれぞれ元のカラーに対して相対カラー構文1つでそのカラーを濃くしたり薄くしたりしています。1つのカラーに対して複数の濃さが必要な場合に便利です。 CSSの相対カラー構文とは CSSの相対カラー構文のデモ CSSの相対カラー構文とは CSSの相対カラー（CSS Relative colors）構文を使用すると、他のカラーのパラメータを変更してカラーを定義できます。相対カラー構文は設定した色を相対色に変換します。変換には、fromキーワードを使用します。ブラウザはベースのカラーを変換して分解し、新しいカラーの定義で使用する変数として使用できます。

2月29日に、文化庁で「文化審議会著作権分科会」の第7回が開催されました。著作権の専門家によってその制度について議論をする場ですが、今年度は2023年7月より「AIと著作権」について議論されてきました。3月に文化庁から政府に報告する「AIと著作権に関する考え方について（素案）」の最終案に近いものが発表され、1月下旬から2月上旬にかけて募った「パブリックコメント（パブコメ）」の結果報告もされるということもあり、注目されました。登場したのは「AIと著作権に関する考え方について（素案）令和6年2月29日時点版」、パブコメの結果を受けて、これまでの内容に微修正が施されていました。しかし、そこからわかったのは、文化庁の一貫したスタンスでした。 文化庁 文化審議会 著作権分科会 法制度小委員会（第7回） パブコメへの反応は「素案の内容周知」 発表物から議論を集めたのが発表資料に「パブコメの結果」が追加

メリークリスマス！ 週末もPHPを楽しんでますか？ ところでWebセキュリティはWebアプリケーションを公開する上で基礎中の基礎ですよね！ メジャーな脆弱性を作り込まないことはWeb開発においては専門技術ではなく、プロとしての基本です。 中でもXSS (Cross-Site Scriptingクロスサイトスクリプティング)やインジェクションについての考慮は常に絶対に欠いてはならないものです。 現実にはプログラミングには自動車のような運転免許制度がないため、自動車学校に通わず独学で公道に出ることができてしまいます。つまりは基礎知識がないままにWebプログラマとして就職したり、フリーランスとして案件を請けることも現実には罷り通っています。それは一時停止標識も赤信号も知らずにタクシー営業しているようなものです。 このような事情により、体系的な理解のないWeb開発初心者は (時にはn年のキャリアを

Designed to be a reference for anyone building component-based user interfaces, The Component Gallery is an up-to-date repository of interface components based on examples from the world of design systems.