著者：アダム・シルヴァー 監訳：土屋一彦 定価：本体3,300円 + 税 発行・発売：株式会社 ボーンデジタル ISBN：978-4-86246-451-4 総ページ数：320 ページ サイズ：B5判、2色 発売日：2019年12月中旬 【内容】 ウェブのUXの要であるフォームのデザインについて、300ページ超のボリュームで、誰もが使えるアクセシブルな実装方法を解説! 本書ではあらゆるユーザーにとって利用可能なフォームの実装のしかたを解説しています(ロバスト、プログレッシブエンハンスメント、アクセシビリティ、といった軸で、ウェブの特質を最大限に活かした形でのフォーム実装を説く内容です)。 フォームのパターンごとにHTMLタグの意味が丁寧に解説されており、フレームワークを弄ることから入門したようなフロントエンドエンジニアの方々でも違和感なく学習できます。機能、ビジュアルデザイン、実装用コード

コピー＆ペーストのみの操作に特化したシンプルキーボード「こぴぺくん」のMac向けモデル「SU2-AKCV-WH」がエスエスエーサービスから発売された。千石電商 秋葉原本店にて2780円で販売されている。 2月に発売された「こぴぺくん」の新バリエーションで、リクエストにより製品化したというMac向けモデル。通常モデルはコピー・ペースト（Copy/Paste）の2キー版とコピー・ペースト・カット（Copy/Paste/Cut）の3キー版があったが、Mac向けは2キー仕様かつホワイトカラーのみになっている。 基本的な機能と外観は通常モデルの2キー版とほぼ同様で、コピーとペーストに割り当てられた2キーを搭載。キースイッチはリニアタイプのOutemu（Gaote）赤軸が採用され、好みのスイッチに換装することもできる。

How to build accessibility semantics into web patterns and widgets ARIA Authoring Practices Guide (APG) Home Learn to use the accessibility semantics defined by the Accessible Rich Internet Application (ARIA) specification to create accessible web experiences. This guide describes how to apply accessibility semantics to common design patterns and widgets. It provides design patterns and functional

はじめに結論 CSS の aspect-ratio プロパティを使っている場合、Chrome 124 で崩れる場合があります。 aspect-ratio を設定している要素に min-width: 0; を設定しておくと安全かも。 以下詳細です。 現象 以前は問題なく表示できていたはずのページで、コンテンツがページ外にはみ出してしまう現象が発生していました。 原因を確認すると、以下のような条件で発生していました。 親で display: grid; を設定して横並びにしている おそらく flex でも同様 その中に aspect-ratio プロパティを設定している要素がある 同様の状況を再現したのが、冒頭に掲載した CodePen のサンプルです。 原因 Chrome 123.0.6262.0 で表示を確認したところ、問題なく表示されていました。 Chrome 124.0.6367.92

適合性チェックマークアップは、有効なコードを記述する必要があります。これは、各ユーザーエージェントを介してウェブページを壊さないという標準の約束を守るために重要なことです。Markuplintは、HTML StandardやWAI-ARIAなどの仕様を踏まえた上で、適合性チェックを行うことができます。 ハウスルールに利用するプロジェクトや組織でハウスルールがある場合があります。方針や管理手法に基づいてチェックすることができます。設定次第で、アプリケーションをよりアクセシブルで、より安全で、より高いパフォーマンスを得ることができ、高い品質を得ることができます。

HubSpotやCSS設計に明るい半田のウェブサイトです。 ウェブサイトの本質は情報を伝えることですので、それを言い訳にデザインは全体的に工事中です。 みんな大好き、あるいは大嫌いなCSS設計。そんな言葉が生まれてから久しく、JavaScriptフレームワーク（以後JSフレームワーク）を始めとする技術が提供するスコープ付きのコンポーネント環境の登場によって、そのなりを潜めている気がしなくもない。 そんなCSS設計とは何だったのか、をちょっと小難しく振り返ってみます。 なお本記事では、区別のためCSS設計が「再利用可能なパーツ」とみなす単位を（あるいは慣習的に）「モジュール」、JSフレームワークにより提供される単位を「コンポーネント」と呼びます。 CSS設計が行っていたこと 「CSS設計」と聞くと Block__Element–Modifier という形式の長ったらしいクラス名を付けることだ

TL;DR 自身の成果をアピールするために、1)Before/After、2)自分の寄与度、3)数字的インパクトを過不足なく伝えることが重要 説明の冒頭では、課題と解法の全体感と成果を述べ、詳細は後に肉付けすると伝わりやすい 課題を伝える際は"誰から見た課題か"を明確にする。課題は解法の前提であるためブレないように はじめに 技術広報のしゅーぞーです。この記事では、過去100人分程度の成果報告書を読み、気付いた "自分の成果をわかりやすく伝える書き方"をまとめています。 仕事をしていると自身の成果を的確に伝える機会は数多くありますよね。 評価期、転職面接、昇格面談など 評価者に自分の成果をどう分かりやすく伝えるか は自分のキャリアを伸ばす上でとても大事なスキルです。 しかし、自分の頑張りや成果を上手く言語化し、相手に正しく理解してもらうのは簡単ではありません。 特に、経験の浅い若手にとって

なんか世の中便利になったなーと思うことが多いので 書き出してみる。 自分のスペックは重度の聴覚障害者で補聴器を外すと何も聞こえない。けどなんとか喋れるレベル（発音は不明瞭だけど）。 聴覚障害者みんなが同じように感じてるかは知らないけど自分の感想。 テレビの字幕これはだいぶ前からだけど、なんの番組でも大抵は字幕がついてるようになった。一昔前はこの番組は字幕ないかぁ…って事が多かったけど今はもうあんまりそんなことはない。深夜帯はついてないことも多いかな？ 最近はCMにもつくようになった。すごい。 自動文字起こし（web会議）コロナ禍以降web会議オンリーになったんだけど、コンピューターの方がよく聞き取れてる。聴覚障害にも色々あると思うけど自分は補聴器をつけても、聞こえても聞き取れない事が多い。音として認識はしてるけど言葉として認識できないんだよね。でもパソコンはかなりの精度で認識してくれる。

「ローマは一日にして成らず」という表現を聞いたことがある方は多いと思います。これは大きなことを成し遂げるためには、長い年月にわたる努力の積み重ねが必要である、というたとえであるわけですが、私は高いアクセシビリティについても同様のことがいえる、と考えています。 しかし、一方でローマにも途中段階があったと考えられるのと同様に、高いアクセシビリティを目指すにあたっても、その途中段階があります。本コラムでは一日では達成できないからこそ、少しずつできることを進めるべき、ということと、その進め方を間違わないようにすること、についてお伝えしたいと思います。 さて、昨今アクセシビリティ、という単語を調べているみなさまの中には、「障害者差別解消法」との関連で気になっている、という方も多いようです。本年2024年4月1日に施行された同法の改正法については、民間事業者においてWebアクセシビリティが義務化される

はじめに こんにちは！　Yahoo!知恵袋の津村です。去年の11月からYahoo!知恵袋のフロントエンドシステムのリアーキテクトに取り組んでいます。この記事では、これまで抱えていた技術的な問題と、それらをどう解決したかについて説明します。この結果、開発効率向上やレビュー時間短縮などの効果がありました。 Yahoo!知恵袋は利用者登録者数5,200万人、質問総数2億8,000万件、回答総数は6億5,000万件以上（2024年4月3日現在）ある、日本最大級のQ&Aサイトです。2004年からサービスを開始し、今年20周年を迎えます。 Yahoo!知恵袋はモバイルクライアント、バックエンド、フロントエンドの3つのシステムで構成されています。今回対象とするフロントエンドシステムは、ブラウザやYahoo! JAPANアプリからアクセスされる際のWebページを提供するシステムです。 Yahoo!知恵袋の

❗❗問題発生❗❗ 作った機能のバグの発見報告が上がってきました。 この時点で何となく 「ヤバさ」 と 「あたり」 を自分の中でつけます 売上に響くやばい？ 条件がある？全員？ ボタンが押せないならクライアントだし、API飛んで成功してないならサーバ？届いてないならネットワークもあるか。 モバイル、Webどっち？両方？ そもそもどこの環境？開発中のもの？ 購入ボタンってどこのこと？特定のアイテム？それとも全部？ 購入できてないってどういうこと？DBはどうなってる？ まずは 👀 をつける これは 「見ていますよ」 という表現です。 もしくはリプライで 「見ます！」 と宣言するのも良いですね。 これにより投稿者は 「対応してくれるな」 と安心できます。 必要な情報をもらう 発生している環境 発生時間 アカウント名＋ログイン情報 スクリーンショット・録画 この時点で試せることは色々試してもらいま

ICS MEDIAでは「Figma」の機能紹介記事を多く公開しています。Figmaは標準でも十分な機能が備わっていますがプラグインを利用することでより便利にカスタマイズ可能です。 今回の記事では、プラグインの使い方とオススメのプラグインを紹介します。Figmaは他のデザインツールと比べ、プラグインを利用するまでのハードルが低く、とても使いやすくなっています。まだ使ったことがない人や便利なプラグインをもっと知りたいという方にオススメの記事です。 Figmaプラグインの使い方 Figmaのプラグインを見つけるにはFigmaコミュニティが便利です。Figmaアプリのホーム画面の「コミュニティ」ボタンから、Figmaコミュニティへアクセスしましょう。 プルダウンから「プラグイン」を選択すると、コミュニティに公開されているプラグインの検索が可能です。 プラグインアイコンの右下のマークで、対応している

SNSを利用している方であれば、おそらくほとんどの方が「もふもふ動画」や「最多情報局」といったアカウントを一度は見たことがあるでしょう。 面白動画やかわいいペットの写真などの投稿で、多くのフォロワーを集めていますが、実はその大半が無断転載によるもの。転載を知らされていない元の投稿主らから、問題視されています。 ■　「削除依頼はDMまで」とあるものの、要請に応じず 投稿を見てみると、完全に無断転載しているものと、Xの動画引用方法（URLの末尾に「video/1」を付ける方法）を使用した、“仕様の範囲内”で引用しているものの2パターンがあります。 しかしながら後者の“仕様”を使った場合でも、投稿者（動画や写真の権利者）が嫌だといえばそれまで。投稿者には著作権および著作者人格権があり、Xにポストしたからといって権利を手放したわけではありません。 これは利用規約の概要にも「ユーザーは、ポストまたは

18 光と影の法則〜機材やツールに頼らない光と影を見る力を身につける〜 「見せる」ということは「見せないこと」「光と影の法則」（https://amzn.to/4bhhPmn）とは、伝えたいメッセージや主題を浮かび上がらせるための光と影の原理原則を理解し、それを活用することを指します。以下に引用しますね。 ビジネス書の目利きとMetaビジネスパートナーも「推しの光と影の法則」日本一のビジネス書の目利きとして知られるメルマガ「ビジネスブックマラソン」でも、山口県の高校生（起業家養成）に教えた商品撮影の授業のシーンが紹介されていました。 本書に使

印刷に適した画像のカラーモード・解像度・保存形式を覚えましょういろんな入稿データのチェックをしていると、あれ？というようなデータは結構あります。 その中でもいちばん気になるのが画像なんですが、次の3セットがとても多く使われているということ。 ①解像度72dpi ②RGB ③JPG形式 おそらくスマホやデジカメで撮影した画像をそのままIllustratorやInDesignに貼り込んだのでしょうけど、割と有名な企業のチラシのデータでもよく見かけるので、どうしてこうなっているのか不思議に思うことがあります。 結論から言うと印刷に適した画像は次の3つが守られているものです。 ①解像度350dpi ②CMYK ③PSD形式（フォトショップ） たまにカラーの画像で無駄に解像度が高いものを見かけることがありますが、意味がありません。少しでもきれいに見せたいとか、そういう意図があるのかもしれませんが、デ

自分が会社員だった時の転職活動、必ずしも毎回全部できていたわけではないけど、一応こういうステップを意識していたなぁ、というノウハウのシェア。 ①1度に1社だけを受ける。エージェントではなくリファラルで紹介者を見つける。2社以上を同時に受けるのはちょっと大変かなと考えていた。 ②紹介者に社内の課題を聞いて、イシュー度（本当に解く価値があるか？）やCan（自分のスキルや経歴に合う領域か？）とのマッチングを確認する。 ③カジュアル面談やリファラル食事会で社内課題やカルチャーをヒアリングする。なるべく違う立場のメンバーに来てもらって、見え方や意見のズレを探り、正確な状況を把握する。必要に応じて事前にNDAを締結する。 ④外部事例をリサーチしてその会社にマッチする解決案を考え、提案資料にまとめて送る。入社後に期待される動きの1つを先に実施し、③の参加者が投下した時間コストはこの成果物でお返しとする。

日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約40%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です（参照「StatCounter」)。 HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。 本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。 この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方 レスポンシブイメージとは一体何か？ レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です（現在のHTMLの仕様書）。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り