生成AI流行ってますね。ウェブアクセシビリティ改善での活用を探ってみました。 ウェブアクセシビリティ改善で効率化できそうなところを探す生成AI活用を考える前に、アクセシビリティ改善でどんなことやるか考えてみましょう。いろいろやることはあると思いますが、代表的なものはこんな感じでしょうか。公開されているウェブサイトのアクセシビリティチェックマークアップの静的解析スクリーンリーダー読み上げチェックデザインレビューこれらを生成AIで効率化できないか考えてみます。 生成AIで効率化できる？ 公開されているウェブサイトのアクセシビリティチェック結論：axe Dev...

ウェブアクセシビリティ改善での生成AI活用を模索する

最近こういう記事を見かけたので、「視認性」「ニュートラル」「デフォルト感のない」 を揃えていそうなフォントを3つ紹介する。https://soudakyoto-ikou.hatenadiary.jp/entry/20241007/1728301046 Murechohttps://fonts.google.com/specimen/Murechohttps://github.com/positype/Murecho-Project僕が最近よく使うオープンソースフォント。ニュートラルよりかはちょっとモダンめかな？M+フォントがベースになっているようで、視認性も高くデフォルト...

Googleスライドで使える、Noto Sans以外のおすすめGoogle Fonts3選

こんにちは、Ubieデザインエンジニアの takanoripです。最近はずっと社内管理画面を開発しており、そのフロントエンド開発にAnt Design（Antd）を採用してみたので感想と注意が必要なポイントについてまとめました。https://ant.design/ Ant Design？Ant DesignはAnt Group（中国アリババグループの金融関連会社）が開発しているUIライブラリです。現在はReactのコンポーネントや周辺ライブラリが公開されています。 なぜAntdを選択したか今回の管理画面開発でAntdを採用した理由は次の6つです。コンポーネントの...

Ant Designで始める管理画面開発

「症状検索エンジン ユビー」を総務省が募集している情報アクセシビリティ好事例2023に応募しました。（募集はすでに締め切っています。）https://www.soumu.go.jp/menu_news/s-news/01ryutsu05_02000156.html 情報アクセシビリティ好事例2023「情報アクセシビリティ好事例2023」は、総務省が主導する取り組みで、情報アクセシビリティに配慮したICT機器やサービスを対象とした募集活動です。この取り組みを通じてアクセシブルなICT機器・サービスの普及促進を目的としています。応募には3つの書類が必要です。情報アクセシビリティ...

「情報アクセシビリティ好事例2023」に応募しました

デザインシステム Advent Calendar 2023 25日めの記事です。Ubieでデザインエンジニアをしているtakanoripです。この度UbieのデザインシステムであるUbie Vitalsのウェブサイトを公開しました。https://vitals.ubie.life/またUbie Vitalsを構成するUIコンポーネントライブラリであるUbie UIをOSSとして公開しました。（こちらはまだWIP）https://github.com/ubie-oss/ubie-uiウェブサイトやコンポーネントライブラリ公開に至った過程を振り返ります。 Ubie Vita...

Rebooting Ubie Vitals Design Systems

アクセシビリティ Advent Calendar 2023 21日目の記事です。Ubie株式会社 デザインエンジニアのtakanoripです。Ubieではデザインシステムの1要素としてコンポーネントライブラリの実装を進めています。その中でコンポーネントをアクセシブルに保つための仕組みをいくつか導入しているので紹介します。 Linterまず一番オーソドックスなものとして、アクセシビリティ向けLintツールを導入しています。Ubieではeslint-plugin-jsx-a11yとMarkuplintを導入しています。両者は重複する部分もありますが、eslint-plugin-...

コンポーネントをアクセシブルに保つ技術

こんにちは。Ubie株式会社でデザインエンジニアをしているtakanoripです。今回は2023年のUbieでのアクセシビリティ活動を振り返っていきたいと思います。今年はあまり活動できてないなあと思ったんですが、意外と色々やってました。 障害を持つ方へのユーザビリティテストの実施これは去年の年末から進めていたものですが、課題探索のためのユーザビリティテストを実施しました。視覚障害の方だけでなく、身体に何らかの障害をお持ちの方にインタビューさせていただき、ユビーをより使いやすくするためのヒントを得ることができました。（プライバシーの観点から具体的な内容を書くことは控えます。）アク...

Ubieアクセシビリティ振り返り2023

社内向けにまとめていたものを加筆修正して公開します。アクセシビリティの学習を始める人の助けになれば嬉しいです。 YouTubefreee アクセシビリティ研修動画～全職種対象～freee アクセシビリティ研修動画～技術職対象（Basic）freee アクセシビリティ研修動画～技術職対象（Advance）a11ygogoA11yTokyoMeetup Webコンテンツ 全般https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook/https://web.dev/...

Webアクセシビリティ学習リソースまとめ （2023年3月版）

どうも、2023年になり入社1周年を迎えたデザインエンジニアのtakanboripです。Ubieでの2022年を振り返りつつ2023年の話をします。 一人目デザインエンジニアとして入社一人目のデザインエンジニアとして2022年1月に入社した。もともとUbieに入社するつもりはあんまりなかったんだけど、代表の阿部と話したらなんかUbie面白そうに思えてきて気づいたら入社していた。デザインエンジニアというポジションがおもしろそうというのもある。募集要項にデザインエンジニアに期待することがきちんと書かれていて雰囲気で募集しているわけではないことが伝わってきたのが良かった。Ubieで...

Ubieでの2022年を振り返る

Ubie株式会社でデザインエンジニアをしているtakanoripです。年の瀬なので今年取り組んだアクセシビリティ向上の施策について振り返りつつ来年の展望を考えようかなと思います。12月19日に公開された @3284 の記事もあわせて読んでみてください。https://note.com/3284/n/nb0ebee00b137 アクセシビリティ向上にむけた実装の改善去年からアクセシビリティ向上のための実装改善を進めていたのですが、今年の前半で一旦完了となりました。全ての不具合を修正できてはいませんが、プロダクトを利用する上でクリティカルな問題は全て解消できました。https:...

Ubie アクセシビリティ改善の振り返り 2022

!この記事は Ubie Engineers & Designers Advent Calendar 2022 21日目の記事です。この記事は12月22日に行われた「Figma Design File 大公開！ デザイナー忘年会2022」で話した内容を記事化したものです。 デザインデータは中間成果物これはこの記事のベースとなる考え方です。僕はデザインデータは中間成果物であり、いつか捨てられる（メンテされなくなる）ものだと考えています。デザインデータを作る目的はエンジニアやBizDevの人たちとのコミュニケーションを円滑に進めることです。その目的を達成する以上に整ってい...

努力しないFigmaとの付き合い方

!これはUbie Engineers & Designers Advent Calendar 2022 1日目の記事ですこんにちは、Ubie株式会社でデザインエンジニアをしているtakanoripです。僕がデザインエンジニアとして働き始めてもうすぐ1年になりますが、デザインエンジニアというポジションで働いているとデザインとコードを行ったり来たりすることが多いです。実際僕はデザイナーでもありエンジニアでもあるのでバナーやLPを作ることもあるしユーザーサポート対応でSentryやBQとにらめっこすることもあります。この記事では普段僕がどういうことを考えて働いているか、Ubi...

デザインとコードを反復横跳びする日々

デザインエンジニアについてのポエムを書きました。BOOTHで物理本も販売中です。https://inutetraplus.booth.pm/items/4142102

ABDUCTION デザインエンジニアについての観察と考察

この記事は2022年7月7日に行われた「デザイナー勉強法ハックLT」というイベントで発表した内容を記事化したものです。発表に使用したスライドはこちら。 認知科学とは認知科学とは生体（人間など）の認知を情報処理の観点から研究する学問で、さまざまな分野にまたがる学際的な学問でもあります。従来の心理学（行動主義心理学）では刺激とそれに対する反応に着目していたのに対し、認知科学では認知のメカニズムを解明しモデル化することに主眼を置いています。実は認知科学は最初から認知科学として確立していたわけではありません。1950年頃からコンピュータの発展に伴い「認知の過程をモデル化すること」が様々...

認知科学のススメ

これから新人フロントエンドエンジニアとして仕事を始める人や現在勉強中の人に向けて、僕が読んで良かった開発以外の本を10冊紹介します。参考になれば嬉しいです。 Wizard Bible事件から考えるサイバーセキュリティhttps://peaks.cc/books/wizard_bible_securityWebアプリケーション開発に携わるなら必ずこの本を読んだほうが良いです。この本に書かれている「不正指令電磁的記録に関する罪」の問題は決して他人事ではなく、日頃から法律を学び準備をしておくことが非常に大事です。 今日からはじめる情報設計 - センスメイキングするための7ステップ...

新人エンジニアにすすめる開発以外の本 10選 2022年4月

こんにちは、takanoripです。2022年1月にUbieにデザインエンジニアとして入社してから3ヶ月が経ったので、今どんなことをしているかとかUbieに実際に入社して感じたこととか振り返ろうかなと思います。 入社後の感想Ubieはもとから賑やかなイメージがあったんですが、実際に入社してみると予想以上に賑やかでした。オンラインでもオフラインでも楽しく熱くプロダクト開発のことについて話す人ばかりでとても楽しいです。入社して一番驚いたのは意思決定と行動の早さでした。各プロジェクト単位での意思決定はもちろんけっこうでかい意思決定も素早く論理的に行われていて、社内の状況は目まぐるしく...

Ubieにデザインエンジニアとして入社して3ヶ月経った感想

CSS Color Module Level 4で定義されている色関数についてざっくりまとめました。デザインシステムでカラーパレットを実装するときやグラデーションを実装するときに知っていると便利かもしれません。詳しく知りたい人はW3Cの仕様書を読みましょう。https://www.w3.org/TR/css-color-4/ 補足：色空間とは色空間（color space）とは色を立体的に表現したもので、空間内の座標で色を定義します。色空間内の座標定義に使用される変数をチャンネルと言い、色空間を構成する色を数値や計算式などを用いて定量的に表現する方法を表色系と言います。色...

Introduction to CSS Color Function 2022

概要先日Astro + microCMSでポートフォリオサイトを作り直したので、その時のことを振り返りつつ感じたことをまとめます。https://twitter.com/takanoripe/status/1477962561077530625?s=20リポジトリはこちらhttps://github.com/takanorip/takanorip.com.v4 この記事で触れることAstroのメリット・デメリット・個人的な好き嫌いmicroCMSを使ってみてどうだったか 触れないことAstroの概要、技術説明microCMSの説明 AstroAs...

AstroとmicroCMSでポートフォリオサイトを作る

この記事は エンジニアリングに興味があるデザイナー、デザインに興味があるエンジニア Advent Calendar 2021 25日目の記事です。この記事は takanorip Advent Calendar 2021 25日目の記事です。最近デザインエンジニアという職種の知名度が上がってきましたよね。このアドベントカレンダーでも何人かデザインエンジニアについて書いています。今回は僕が考えるデザインエンジニアに必要なことを5つまとめてみました。他にもみなさんが考えるデザインエンジニア像があればぜひコメントください。 アプリケーションの実装とデザインの知識・経験があること...

デザインエンジニアに必要な5つのこと

この記事はtakanorip Advent Calendar 2021 21日目の記事です。今年の8月から @yamanoku と二人でお元気ですか.fmをやっています。今回はこのPodcastを支える技術についてまとめます。https://anchor.fm/ogenkidesuka-fm 機材マイクはaudio-technicaのAT2020、ミキサーはYAMAHA AG03を使用しています。https://www.audio-technica.co.jp/product/AT2020https://jp.yamaha.com/products/music_prod...

takanorip

ウェブアクセシビリティ改善での生成AI活用を模索する

Googleスライドで使える、Noto Sans以外のおすすめGoogle Fonts3選

Ant Designで始める管理画面開発

「情報アクセシビリティ好事例2023」に応募しました

Rebooting Ubie Vitals Design Systems

コンポーネントをアクセシブルに保つ技術

Ubieアクセシビリティ振り返り2023

Webアクセシビリティ学習リソースまとめ（2023年3月版）

Ubieでの2022年を振り返る

Ubie アクセシビリティ改善の振り返り 2022

努力しないFigmaとの付き合い方

デザインとコードを反復横跳びする日々

ABDUCTION デザインエンジニアについての観察と考察

認知科学のススメ

新人エンジニアにすすめる開発以外の本 10選 2022年4月

Ubieにデザインエンジニアとして入社して3ヶ月経った感想

Introduction to CSS Color Function 2022

AstroとmicroCMSでポートフォリオサイトを作る

デザインエンジニアに必要な5つのこと

お元気ですか.fmを支える技術

ウェブアクセシビリティ改善での生成AI活用を模索する

Googleスライドで使える、Noto Sans以外のおすすめGoogle Fonts3選

Ant Designで始める管理画面開発

「情報アクセシビリティ好事例2023」に応募しました

Rebooting Ubie Vitals Design Systems

コンポーネントをアクセシブルに保つ技術

Ubieアクセシビリティ振り返り2023

Webアクセシビリティ学習リソースまとめ （2023年3月版）

Ubieでの2022年を振り返る

Ubie アクセシビリティ改善の振り返り 2022

努力しないFigmaとの付き合い方

デザインとコードを反復横跳びする日々

ABDUCTION デザインエンジニアについての観察と考察

認知科学のススメ

新人エンジニアにすすめる開発以外の本 10選 2022年4月

Ubieにデザインエンジニアとして入社して3ヶ月経った感想

Introduction to CSS Color Function 2022

AstroとmicroCMSでポートフォリオサイトを作る

デザインエンジニアに必要な5つのこと

お元気ですか.fmを支える技術

Webアクセシビリティ学習リソースまとめ（2023年3月版）