デザインエンジニアについてのポエムを書きました。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デザインシステム的な話から装飾、カラーツールなどデザインに必要な話がとてもたくさん詰め込まれているためデザイン学習の教材として非常に優秀です。コンポーネントもユースケースやスペックまできちんと網羅...

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

良いLT資料を作るにはデザインだけでなく文章も気をつけなければなりません。今回はそのTipsを紹介します。 主題を意識するLTの文章を考えるとき、LTの主題がぶれないことが重要です。「このLTで一番伝えたいこと」を整理・言語化して話が脱線しないよう構成を考えると、わかりやすく面白いLTになると思います。 疑問・課題→結論の流れを意識する聞きやすいLTは話の流れが読めるLTだと思っています。「次はこんな内容かも」というのがわかると、参加者が納得感を得やすく、スムーズにLTを進行することができますし、その分野に詳しくない人でも無理なく聞けるLTになります。予想しやすくするに...

LT資料の文章術

近年デザインエンジニアと呼ばれる職種が新しくできるなど「デザインとエンジニアリングをどうやってつなげていくか」ということが熱心に議論されており、エンジニアでも「UIデザイン」について議論することが多くなってきました。しかし、全く知らない分野についていきなり勉強してくださいと言われてもちょっと困っちゃいますよね。この本ではソフトウェアエンジニアの方々ために「UIデザインとは何か」「なぜUIデザインを学ぶのか」について、UIの歴史や心理学の観点から解説しています。