はてなブックマーク

これから新人フロントエンドエンジニアとして仕事を始める人や現在勉強中の人に向けて、僕が読んで良かった開発以外の本を10冊紹介します。参考になれば嬉しいです。 Wizard Bible事件から考えるサイバーセキュリティ Webアプリケーション開発に携わるなら必ずこの本を読んだほうが良いです。 この本に書かれている「不正指令電磁的記録に関する罪」の問題は決して他人事ではなく、日頃から法律を学び準備をしておくことが非常に大事です。 今日からはじめる情報設計 - センスメイキングするための7ステップ フロントエンドエンジニアにとって情報設計はとても重要です。 この本では情報設計を7つのステップに分解し、わかりやすく解説しています。入門書ではありますが、何度も読み返したくなる非常に良い本です。 インクルーシブデザイン: 社会の課題を解決する参加型デザイン この本はアクセシブルなプロダクトデザインを実

CSS Color Module Level 4で定義されている色関数についてざっくりまとめました。 デザインシステムでカラーパレットを実装するときやグラデーションを実装するときに知っていると便利かもしれません。 詳しく知りたい人はW3Cの仕様書を読みましょう。 補足：色空間とは 色空間（color space）とは色を立体的に表現したもので、空間内の座標で色を定義します。 色空間内の座標定義に使用される変数をチャンネルと言い、色空間を構成する色を数値や計算式などを用いて定量的に表現する方法を表色系と言います。 色が使われる場所（印刷物、ディスプレイ、など）や用いられる指標などに応じていくつかの色空間が定義されています。（RGB、Lab、HLSなど） ある色空間から別の色空間へは数学的に変換することができますが、変換後の色空間で表現できない情報は失われてしまいます。 sRGB Colors

概要 先日Astro + microCMSでポートフォリオサイトを作り直したので、その時のことを振り返りつつ感じたことをまとめます。 リポジトリはこちら この記事で触れること Astroのメリット・デメリット・個人的な好き嫌い microCMSを使ってみてどうだったか 触れないこと Astroの概要、技術説明 microCMSの説明 Astro Astroについては公式ドキュメントを参照してください。 Astroを使った理由 100% Static HTML, No JS という点に惹かれたからです。 これの前のポートフォリオはEleventy.jsを使って開発していましたが、11tyを使っていた理由もJSが動作しない100%静的なHTMLを生成できるツールだったからでした。 （余談ですがEleventy v1.0が正式にリリースされましたね！めでたい！） これに加えてReactやPrea

最近デザインエンジニアという職種の知名度が上がってきましたよね。このアドベントカレンダーでも何人かデザインエンジニアについて書いています。 今回は僕が考えるデザインエンジニアに必要なことを5つまとめてみました。他にもみなさんが考えるデザインエンジニア像があればぜひコメントください。 アプリケーションの実装とデザインの知識・経験があること アプリケーションの実装にはWebかモバイルかなどいくつかの方法がありますが、2021年現在日本国内の求人を見るとWebフロントエンドの開発経験が求められることが多いようです。肩書に「エンジニア」とつくことから軸足はエンジニア側にあり、一定以上の開発経験や最新情報についてキャッチアップしていける能力が必要です。 その中でもCSS、アクセシビリティ、ウェブフォントなどの知識があるとより良いと思います。これらはデザインと開発両方の知識が必要になる分野でありユーザ

概要 2021/04/22に新しいWeb Componentsライブラリ、Lit(Lit 2.0)がリリースされ、同日ローンチイベントもYouTubeで生配信されました。 それに伴いPolymer ProjectがLitに改名されロゴが刷新されました。 ウェブサイトも新しく公開されました。チュートリアルとPlaygroundが刷新され、非常に便利になりました。 実装は https://github.com/lit/lit に公開されています。 LitElementとlit-htmlのおさらい 旧Polymer Project（Lit 1.0）では、lit-html(HTMLテンプレートライブラリ)とLitElement(Web Componentsを実装するためのライブラリ)の2つのライブラリが提供されていました。 LitElementにもテンプレート機能があったので、2つとも独立したライ

eleventy-google-fonts これは11tyのプラグインです。Google FontsのCSSをダウンロードしてインライン化してくれます。 やってることはNext.jsのFont Optimizationとほぼ同じです。 PR待ってます。 使い方

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

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