h @h94597453 2023.08.14 駅の意地悪ベンチ。 こういうのを淡々と案出ししてプレゼンして作成するひとを考えると、「作品」と「作者の思想」は分けられるのか、ということを思う。 腰痛があり、尻肉が落ちている母は多分、3分持たず、半泣きになって立ち上がって横にしゃがみ込む。 pic.twitter.com/xUbqjgukix 2023-08-14 11:51:17
"最も使われているサービスのひとつを iOS Native から React Native に作り変えた" というアナウンスメントを出し話題となった Shopify で、まさにその内容を扱った React Native の meetup があり、参加してきたので内容と所感をまとめました。 React Native is the Future of Mobile at Shopify 発表内容 検証/導入フェーズ 技術スタック React Native がもたらした効果 途中でやめたこと 追加で登壇者に聞いたこと その他の発表 React Native for Web @twitter その他もろもろ React Native is the Future of Mobile at Shopify React Native で書き換えた話はしばらく前にアナウンスしていたのですが、Shopify
はじめに 私はデザイナー兼フロントエンドエンジニアというような立ち位置で、勤務するfreee株式会社のアクセシビリティガイドラインの作成に関わったり、アクセシビリティまわりの仕組みの整備や社内エバンジェリストみたいなことをしています。 もともと私はWebアクセシビリティという分野が、重要なものである以上に技術や考え方として面白いと思ってやっているうちに気付いたら仕事で大きなウェイトを占めるようになってしまったタイプの人です。しかし、そうではない人たちにその重要さを説明したり、対応をお願いしたり、そのための資料を作ったりしているうちに、「やっぱWebアクセシビリティって難しいんだなぁ」と思うようになってきたので、それについて書いてみようと思います。 なお、背景を説明するうえで必要なので社名を出しましたが、あくまでこの文章は個人の見解であり、所属組織とは関係がありません。 誰のためにやるのかが
$tina$ @tinasuke 若者のスクショ癖を腐すの嫌なんだけど、1万回注意してもアシスタント(25歳)が参考資料などをスクショで送って来るので1万1回目のキレをかましてしまった😢地図でもサイトでもスクショで送ってくる😭情報追えねぇからURL貼れっつってもURL写ってる状態のスクショ送ってくる😭若者のコピペ離れ😭つら 2020-06-22 15:41:41 $tina$ @tinasuke スタジオの電話番号とかもスクショで送ってくるから、何度も何度も、番号コピペで送ってくれたらそのままタッチで発信できるんだからね、つっても、「ググれば一番上に出てくるとこなんで!」とか謎の持論かましてくる😭 手間よ😭 2020-06-22 15:44:22
10月1日の消費税増税に合わせ、キャッシュレス決済で支払うと金額の最大5%を国がポイントで還元する「キャッシュレス・消費者還元事業」が始まりますが、この事業をPRする公式Webサイトから「加盟店一覧はこちら」をクリックすると、即座に3608ページという膨大なPDFファイルに飛ばされてしまうことがちょっとした話題になっています。長い。 国の「キャッシュレス・消費者還元事業」公式サイトの消費者向けページ。「使えるお店を探す」から加盟店一覧を確認できます 同事業は、増税後の消費刺激策に加え、キャッシュレス化の促進を図るもの。ポイント還元対象のキャッシュレス決済サービスで支払うと、中小の小売店や飲食店などなら5%、大手企業が展開するコンビニエンスストアや飲食店のフランチャイズ店なら2%を、国がポイントで還元する仕組みですが、20年6月までの時限措置です。 これをPRするのが「キャッシュレス・消費者
点字ブロックの中にアンパンマンの顔が隠れている―。 子供たちに大人気の施設「アンパンマンこどもミュージアム」のそんな仕掛けが、微笑ましい話題としてSNSなどで度々注目を集める。しかしこの“隠れアンパンマン”、視覚障害者の間では以前から「危ないのでやめてほしい」という声が根強いと聞く。当事者と施設に取材した。 【写真】点字ブロックのアンパンマンをアップで見る 神戸市にある「神戸アンパンマンこどもミュージアム&モール」。点字ブロック(点字鋲)は、限定グッズのショップや飲食店などが並ぶ1階のショッピングモールと、有料フロアである2階のミュージアムをつなぐスロープなど数カ所に設置されている。しゃがみ込んで目を凝らすと、等間隔で並ぶ金属製の丸い鋲の中に、愛らしいアンパンマンの顔がいくつも潜んでいるのを見つけることができた。 「探している子供に気づかず、蹴ったり突き飛ばしたりしてしまったらどうするのか
Web フロントエンドの実装において本来の機能を損なってはいけない 2022.12.24 データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケースも発生してしまいました。見た目上操作に不都合がないのですが、修飾キーが有効でなかったりと、とある要素が当然に持っているべき機能が失われていることがよくあります。 昨今の Web フロントエンドの開発においては、React や Vue.js などを利用した SPA を採用することが多くなりました。従来の MPA と比較して、リンククリック時やフォーム送信時にページリロードを挟まないので、高速な画面遷移を実現できるため、快適な操作を実現できます。 一方データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で
こんにちは。伊原 力也(@magi1125)と申します。業務アプリケーションのデザイナー、デザインチームのマネージャー、アクセシビリティ関連のコンサルタントなどをやっています。 ウェブアクセシビリティを普及啓発する活動を始めて10年が経ちました。おかげさまで興味を持ってくれる人はかなり増えたと感じています。しかし、人が増えると声は届きにくくなります。「アクセシビリティをどこから学び始めていいかわからない」という意見も目にするようになってきました。 また、私はこれまでにアクセシビリティに関する書籍を何冊か書いていますが、専門書ってちょっと高いので、興味があるぐらいの段階で本を買うのはちょっと……という気持ちもわかります。 ということで、これまで自分が発信したり関わったりしたコンテンツのうち、ウェブアクセシビリティの理解の助けになりそうものをベストアルバム的に一度まとめてみることにしました。
sgm @g_stand 先日、たまたま立ち寄った道の駅で見かけた食堂の券売機。このシステムを考えた人は天才だと思った。 券売機の各ボタンの中に、料理名だけでなく写真が入っているので、直感的に選ぶことができる(ここまではよくある話)。 pic.twitter.com/ek6cmFracM 2023-08-17 14:22:43 sgm @g_stand 感心したのはここから。そのすぐ右隣(券売機の待ち行列ができる方向)に、券売機のボタン配列通りにそのまま約1.5倍に拡大したパネルがあり、券を買う前に何を食べるか、どの券を買うか、一度シミュレーションができる。つまり自分の番になってもほとんどまごつくことなく、券売機のボタンが押せる。 pic.twitter.com/tPeBNZmv7U 2023-08-17 14:24:00
どうもフロントエンドエンジニアのoreoです。 今回はWebブラウザのレンダリングの仕組みについてまとめたいと思います。あまり意識していなくても開発はできますが、知っていればパフォーマンスの改善やAccessibilityの向上に役立ちそうですね。 1 レンダリングとは? 普段私たちは、WebブラウザにURLを指定することで、そのリソースをブラウザ画面に表示できます。この時の 「指定したリソースをブラウザ画面に表示すること」を「レンダリング」と言います。 Webブラウザは、下記のように多くの機能を搭載していますが、この中でRendering engineが、レンダリングを実行します。 参考:https://web.dev/howbrowserswork/ ちなみに、ブラウザごとのRendering engineは下記になります。 Rendering engine Browser 参考:ht
DeepLを超えるやさしい翻訳アプリとGPTsを作りました 苦手な分野の英文を理解するのを助けてくれます。 なぜ翻訳アプリを作ったのか 私は最近ChatGPTのような大規模言語モデルに興味があり、AI開発者の方や、大規模言語モデル関連の情報を発信している方をフォローしていました。 すると最新の論文(英語)や英語のツイートが次々に流れてくるのですが、それらをGoogle翻訳したり、DeepLで翻訳しても、意味不明な場合が多いということに気づきました。 特に海外の方の1行だけのツイートなどは、DeepLで翻訳しても全く意味がわからない場合が多くて困っていました。 AI関連の論文は専門用語が多く、いちいち調べながら読んでいると、1日の大半の時間が情報収集だけで終わってしまいます。 これは要するに「自分の専門分野でない分野の英文を理解するのは大変」ということなので、例えば「Web制作初心者の方が海
*アノマテカ* @hoshikuzucake 偏見かもしれないけど公共交通機関ってこういうとこあるよな、と思う。JRに限らず鉄道会社で「切符の買い方」みたいな基本的な情報がホームページのどこに書かれてるかわかりやすいとこってぜんぜんない。海外から来る人とか困ったりしないのかな? twitter.com/akita11/status… 2023-02-10 23:53:07 *アノマテカ* @hoshikuzucake 自分は身体に障害があるし遠距離恋愛してたから、デート(という名の旅行)の予定を立てたら事前に行く場所の公共交通機関をよく調べたけど、バスも前払いなのか後払いなのか、前の扉から乗るのか後ろの扉から乗るのかも、ホームページのすごくわかりにくいところに書いてあるか最悪書いてなかったりした 2023-02-10 23:56:44
Ashutosh Singh Ashutosh is a JavaScript developer and a technical writer. He writes about the fundamentals of JavaScript, Node.js, React, Next, Vue, and tutorials on building projects. Visual Studio Code is one of the most widely used code editors in the developer community. One of the reasons for VS Code’s popularity is its many extensions that speed up the development process. In this guide, we’
現在、本業・副業ともにWEBデザイナーとしてデザイン・コーディングをしているゆるけーです。 本業で携わっているWEBサービスが割と高齢者向けのサービスで、ITリテラシーやUIが今の自分と考え方が異なるよなーと思っているなか、『高齢者のためのユーザインタフェースデザイン』という書籍に出会いました。 高齢者関係なく普通にアクセシビリティの観点でも重要な視点がたくさんあり、とてもいい書籍だったので、ざっくり大事だと思った箇所を抜粋しつつ自分で探した事例等をざっと記事にまとめていきますー。 視覚 高齢者になると視力が低下する傾向があります。ただ、視力の低下=フォントを大きくするだけではありません。 視力の低下は老眼や光覚の減少などより複雑です。 主な視力の低下の具体例は以下のような点。 老眼:近く・遠くのものの焦点が合わない 周辺視野のぼやけ:画面の端に気づきにくい 中心視野の損失:画面の中央が暗
中嶋涼子®︎Ryoko Nakajima @NakashimaMinion 久々に悔しい気持ちになった。 今日は映画「#52ヘルツのクジラたち」を見てきたんだけど、トランスジェンダーの人が生きづらさを抱え差別を受ける話で辛すぎて発作起きるくらい泣ける映画だったんだけど、その後更に泣ける事があった。 ちょうどいい時間の映画がイオンシネマのグランシアターっていうちょっとお値段張るけどリクライニングできて足があげられるプレミアムシートがある豪華な劇場で4段の段差がある席しかないところで見たんだけど、今まで何度もその劇場に一人で見に行って映画館の人が手伝ってくれてたのに、今日は見終わった後急に支配人みたいな人が来て急に「この劇場はご覧の通り段差があって危なくて、お手伝いできるスタッフもそこまで時間があるわけではないので、今後はこの劇場以外で見てもらえるとお互いいい気分でいられると思うのですがいいで
ライトモードだといい感じのグレースケールが、ダークモードにすると特に暗いグレーあたりのコントラストが低くなることがあります。 これは人がカラーとコントラストを知覚する感じ方に関係があります。どのようなメカニズムでそう感じるのか、ダークモードでもいい感じのグレースケールにするにはどうすればよいのかを解説します。 Darkmode by Dan Holick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ダークモードのグレースケールを作成するのが難しいのは、なぜだと思いますか? それは、人がカラーとコントラストを知覚する感じ方に関係があります 👇
Published 2023/08/12 16:22 (JST) Updated 2023/08/12 16:29 (JST) 漢字にもっとふりがなを振って―。子どもや外国人が漢字を読みやすくするために、ウェブサイトや出版物、案内板の漢字にふりがなを振るよう出版社や自治体などに働きかける活動を、オンライン証券大手マネックスグループの松本大代表執行役会長が始めた。活動を担う「ルビ財団」を5月下旬に立ち上げ、2年間をめどに1億円の私財を投じて集中的に活動する。 財団は、ふりがなを意味する「ルビ」から名付けた。ウェブサイト上でボタンをクリックすれば、文脈に応じて漢字に自動でルビを付けたり消したりできるソフトを開発し、年内に自治体などへの無償配布を始めることも計画している。
近日連投していた Next.js 記事のサンプルコードを公開しました。このサンプルコードを元に、私のフロントエンドディレクトリ構成・テスト観点を紹介します(あくまで執筆現在の脳内アウトプットになりますのでご了承ください) フロントエンドディレクトリ構成の事情 タイトルの「フロントエンドディレクトリ構成」をさす「Components」のディレクトリ構成は、いつも悩みのタネです。このモジュールシステムは「デザインシステム観点・アクセシビリティ観点・フロントエンド実装観点」の 3 つの観点が混在するため事情が複雑です。どうせ作るのなら「デザイナー・フロントエンド」どちらの開発基盤にもなりえる、盤石なモジュールシステムを目指したいですよね。 "AtomicDesign やめました"という声をたまに聞くのですが「デザインシステム的に捨てていいの?」と思うこともあるので、とくに要望がなければ、筆者は「
埼玉県に住む67歳のオカダさんは9年前に人間ドックで前立腺がんが見つかった。 「えっ、なんで自分が…?」 58歳、公務員としてまだやるべき仕事があった。 怖くないわけではないが、命が助かるならと全摘出の手術を選び、無事に成功した。 問題は尿失禁だった。 手術後は自分の意思でコントロールできないのだ。 あんまり気持ちのいい状態じゃない。 おむつや尿漏れパッドは、頻繁に交換しないと尿がどんどんたまり、スラックスも重くなった。 手術後、しばらく家に引きこもるような生活が続いた。 「このままの状態で仕事に行くのか?」と思うと恥ずかしさと戸惑いがこみ上げ、職場復帰を遅らせざるをえなかった。 尿の漏れる量は落ち着いたが、仕事中も気になる。 スーツのポケットに、二重にした袋と替えのオムツ、パッドをこそっとしのばせてトイレに立つ。 湿ったそれを、そのまま外で捨てるなんてやってはいけない… 自席に戻り、袋を
啓吾郎 @kei56 スマホが使えることを前提にする施策はちょっとブレーキをかけた方がいいです。 スマホが使えない人は置いてけぼりなのです。 レガシーシステムと言われてもラジオの方が簡便かつ強力です。 写真は時刻表がQRコードになった駅の看板。 pic.twitter.com/OHTVHUVmMb x.com/sakkurusan/sta… 2024-02-17 21:10:03 咲来さん@ @sakkurusan AMほぼ全廃で、FMに移行。聴ける範囲が狭まるといっても、radikoがあるからいいだろって声あるが。あのな、radikoには「時差」という最大の弱点があるのよ。しかも2分間以上の長い時差。 ということは、もし緊急地震速報がラジオで流れた場合。radikoで聴いてる場合は全く意味をなさないということ。大津波警報も、2分遅れは確実に命にかかわる。 なのでこの問題はそう簡単な話では
この記事は、2022年10月28日に開催されたDIST.37「マークアップな夜」での発表「マークアップのわかり方」をもとにしたものです。当日は話せなかった内容も大幅に追加しています。 現代における「マークアップ」とはどのような行為なのか。いかにそれと向き合っていけばいいのか。そういったことについて考えてみます。 マークアップの議論においては、「マークアップには正解がない」という意見が決まって出ます。正解がないと言うならば、たいていなんであってもそうです。たとえばCSSやJavaScriptの書き方には「正解」があるのかと考えてみると、必ずしもそうではありません。 しかし、ことさらマークアップにおいてこれがよく言われる理由としては、妥当性を判断する基準がわからない、ということでしょう。 というのも、CSSなら望む通りの見た目になればとりあえずOKだし、JavaScriptでも意図した通りの振
イヤホン・ヘッドホンで音楽を聴いていたら、家のチャイムが鳴っているのに気づかなかった。何かいい解決策はないの? iOS14 / iPadOS14から「サウンド認識」機能が追加されました。元々は「アクセシビリティ」に分類されている、聴覚サポート機能の一つです。しかし、iPhoneが聞き取った音を通知してくれる機能は、日常生活で便利に活用することができます。 例えば、イヤホンやヘッドホンで音楽を聴いていると、外部の音を認識しづらくなります。そのため、ドアのチャイムが聴こえなくて応対できない場合があります。「ドアベル」の音を通知するように設定すれば、チャイムの音が聞こえなくて宅配便の荷物を受け取れなかった、といったことを防ぐことができます。「ドアベル」の他にも「水の出しっ放し」などの認識可能な音があるので、お好みで設定することをおすすめします。
情報処理推進機構(IPA)の公式Webサイトリニューアルにおいて、多くのページにリダイレクト設定がなされず問題視されていた件を巡り、IPAは4月3日「ご不便をおかけしまして大変申し訳ありません」と謝罪した。 IPAは3月31日に公式Webサイトの全面リニューアルを実施。モバイル端末からの閲覧を意識したデザイン改修、コンテンツへの導線の改善などを図ったとしていた。その中で多くのページのURLも変更したが、リダイレクト設定がほとんどなく、既存のリンクを開いても「404 Not Found」とのみ表示されることが問題視されていた。 謝罪文によると、リニューアルに際して「安定的なレスポンスの確保を考慮し、リダイレクト対象とするコンテンツを選定した」という。しかし、多くのユーザーがIPAのコンテンツを資料として使っており、その影響について認識が不足していたのが原因の一つとしている。 なぜ「404エラ
「Ameba」は2020年に16周年を迎える長寿サービスです。 プロダクトチームはPC / SP / iOS / Androidと4種類のデバイスに対応しており、15年という歳月を経た結果、管理の追いつかない画面、レガシーなコード等に苛まれるようになってきました。 「Ameba」開発チームではそのような、過去の遺物に開発リソースを割かれる状態を「負債」と呼び、その解消のために日々戦っています。 さらに、「Ameba」には現在10名ほどのデザイナーが携わっており、それぞれが異なる施策や領域を対応していることも相まって、施策を経る毎に、「Ameba」内でGUIに関する、共通の意識や見解を持つことができなくなっていました。 この状態を打開し、「Ameba」プロダクト再興の礎を構築しようと、今年度からデザインシステムの開発をスタートしました。 今回はそのデザインシステムの中でも真っ先に取り組んだ要
ゆう🇺🇸本気のアメリカ就職 @honkiku1 🇺🇸人同僚「日本人は何で24時間表記なんて使うんだ?」 僕「だって、9時から会議って言うだけじゃ、朝の9時か夜の9時か分からないだろ?」 🇺🇸「何言ってんだ!夜の9時から会議なんてするはず無いじゃないか!」 僕「え?」 🇺🇸「ん?」 僕&🇺🇸「……」 僕「でも、24時間表記の方が、数字だけで午前と午後がぱっと分かって便利だろ?」 🇺🇸「何言ってんだ!時計見るたびに毎回電卓を使えって言うのかよ!」 僕「え?」 🇺🇸「ん?」 僕&🇺🇸「……」 アメリカで24時間表記が広まらない理由、どうやらこの辺にヒントが隠されているみたいです😅 2023-12-08 05:00:26 ゆう🇺🇸本気のアメリカ就職 @honkiku1 僕がアンバサダーを務める #WorkCircle というコミュニティアプリでは、このような外
よしもとよしとも @yoshitomosan 強度の色覚異常という点でオレも障害者なのだが手帳が出るわけでもなく不便はある。なぜカラー原稿が描けるかというと20年前のコピックのマーカーを使ってるからで、これは色の識別に「物体の名前」が付いている。 2021-04-15 09:10:09 よしもとよしとも @yoshitomosan 「Peach Skin」なら女の肌、「Yellowish Skin」なら男の肌、肌の影は「Skin Shade」というように。実はこの色だけ見ても判別ができない。「物体の名前」がないと。「なんちゃらブラウン」でなく「Bread」とあればそれが何かわかる。 pic.twitter.com/hBzfHBIqMK 2021-04-15 09:10:10
来年開催のパリ五輪・パラリンピック大会組織委員会は8日、 五輪とパラリンピックの各競技や種目を絵文字で表す、 62種類のピクトグラムを発表しました。 シンメトリー(左右対称)を取り入れた「紋章型」で、 競技で使う用具や会場などがモチーフになっています (ピクトグラムは日本発祥で、1964年東京五輪での使用が初。 世界中のトイレで用いられる男女の絵文字や、 非常口に描かれるピクトグラムも日本発)。 各公式SNSでも新たなピクトグラムは公表されており、 デザインのアート性を評価する声も見られるものの、 東京大会のものと比べて分かりづらい、 つまりピクトグラムの目的を果たしていないとして、 全体的にはかなりの不評となっています。 各国からの反応をまとめましたので、ごらんください。 「もう日本語入力は不可欠だ」 日本の一般的な顔文字が斬新すぎると話題に ※画像はクリックで拡大 翻訳元■■■(シェア
皆さん、「テレ朝UD」はご存知でしょうか? テレ朝UDは、テレビ朝日の長年の経験に基づくテレビテロップの知見と強いこだわりを、フォントワークスのフォント制作の技術で実現したオリジナルフォント。2022年10月から以下の報道番組のテロップに使用されています。 2022年10月からテロップに「テレ朝UD」を使用している報道番組テレ朝UDの開発背景や、書体の特徴については、フォントワークスのコーポレートサイト「もじがたり」で紹介されていますので、ぜひそちらもチェックしてみてください。 そしてもじがたりの取材のため、テレビ朝日 コーポレートデザインセンターにお話を聞きに行くと耳に挟んだ編集部。これはじっとしていられません。「何か面白い話がうかがえそう!」と取材に同行させてもらいました。 テレビの現場の方にお話を聞けるなら、やはりデザインについて勉強させていただきたい! 「ニュースの画面ってどんなふ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く