社内向けにまとめていたものを加筆修正して公開します。アクセシビリティの学習を始める人の助けになれば嬉しいです。 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...

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

この記事はtakanorip Advent Calendar 2021 20日目の記事です。この記事はFigma Advent Calendar 2021 14日目の記事です。僕がFigmaを仕事で使うときにやってる仕草を4つ紹介します。何かの参考になれば嬉しいです。 コメントコンポーネントを作る僕はUtilコンポーネント（デザインには関係ない便利ツールコンポーネント）をよく作るんですが、その中でもコメントコンポーネントは非常に使い勝手が良く便利でした。実装時の注意事項や補足事項などをこれに書いて付箋のようにデザインに貼っ付けて運用しています。Frame外に直書き...

個人的Figma仕草

この記事は takanorip Advent Calendar 2021 9日目の記事です。これは2021年12月09日に行われたジャムジャム！！Jamstack_3の登壇資料です。 自己紹介大木尊紀 / Takanori Oki / @takanorip無職（UI designer, Frontend web developer）https://blog.takanorip.com/ Eleventyとは？Eleventy, a simpler static site generator.公式ドキュメントよりEleventyは非常にシンプルな静的サ...

Eleventy1.0という選択肢

概要2021/04/22に新しいWeb Componentsライブラリ、Lit(Lit 2.0)がリリースされ、同日ローンチイベントもYouTubeで生配信されました。https://twitter.com/buildWithLit/status/1384929943386214401?s=20https://www.youtube.com/watch?v=f1j7b696L-Eそれに伴いPolymer ProjectがLitに改名されロゴが刷新されました。https://twitter.com/buildWithLit/status/1384572664002478093...

Introducing "Lit" for Web Components

この本ではこれからデザインシステムに取り組もうとしている人に向けて、「デザインシステムを小さく始めるTips」を紹介します。

小さく始めるDesign System

https://twitter.com/takanoripe/status/1341918986947055619 1スライドに色々書くな1つのスライドで伝えることは1つ。（例：「このライブラリのメリット　その1」）内容を詰め込むとテンポが悪くなるし主張がぼやける。長くなりそうなときはスライドを分けるか内容を削る。空白を埋めようとしないこと。 各スライドでの主張を明確にしろそのスライドで一番何を言いたいか明確にしよう。わかりにくいと感じる資料は主張が明確に書かれていないことが多い。裏を返せば、デザインが少し悪くてもこれができれば、かなりわかりやすい資料になる。各スライ...

エンジニアに伝えたいスライド・資料で気をつけるポイント

eleventy-google-fontsこれは11tyのプラグインです。Google FontsのCSSをダウンロードしてインライン化してくれます。やってることはNext.jsのFont Optimizationとほぼ同じです。PR待ってます。https://github.com/takanorip/eleventy-google-fonts 使い方npm install eleventy-google-fonts --save-dev11tyのconfigに下記コードを追加します。const eleventyGoogleFonts = require("ele...

eleventy-google-fontsを作った

どうも。最近エンジニアからデザイナーになったものです。最近UIデザイナーになってUIデザインの情報源って意外とまとまってないなと思ったので、個人的によく参考にする情報源をまとめました。ここに載ってないやつでおすすめの情報源あればコメントとかで教えてください。 OSガイドラインOSのデザインガイドラインはUIデザイナーだったら必ず読んでますよね。 Material Designデザインシステム的な話から装飾、カラーツールなどデザインに必要な話がとてもたくさん詰め込まれているためデザイン学習の教材として非常に優秀です。コンポーネントもユースケースやスペックまできちんと網羅...

takanorip

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

Ubieでの2022年を振り返る

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

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

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

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

認知科学のススメ

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

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

Introduction to CSS Color Function 2022

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

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

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

個人的Figma仕草

Eleventy1.0という選択肢

Introducing "Lit" for Web Components

小さく始めるDesign System

エンジニアに伝えたいスライド・資料で気をつけるポイント

eleventy-google-fontsを作った

個人的UIデザインの情報源まとめ

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

Ubieでの2022年を振り返る

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

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

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

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

認知科学のススメ

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

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

Introduction to CSS Color Function 2022

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

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

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

個人的Figma仕草

Eleventy1.0という選択肢

Introducing "Lit" for Web Components

小さく始めるDesign System

エンジニアに伝えたいスライド・資料で気をつけるポイント

eleventy-google-fontsを作った

個人的UIデザインの情報源まとめ

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