Vol.281
The things of everyday design || Matthew Ström: designer & developer Jump to heading
誰のためのデザイン? Jump to heading
インターフェース設計、特にアフォーダンスの考え方について。1988 年に Don Norman 氏が出版した The Design of Everyday Things という本では、人間中心のデザインのアプローチについて焦点を当て、アフォーダンスの考え方を広めた。そこから年月を経た今日においては、アフォーダンスは、“ユーザーが実行できるアクションをユーザーに示すオブジェクトのプロパティ” というように理解されている。適切なアフォーダンスはモノとユーザーを自然な形で繋ぐことを可能にするが、それは物理的な関係にのみに限った話では無いと指摘する。この記事では、アフォーダンスの考え方を、PC におけるマウスカーソルの操作や、スマートフォンにおけるガラスの板に対してタッチ操作に対して、どのように実装ができるのかについて解説し、その考え方を知ることの有用性を解く。
If You Learn to Write, You Can Change Your Life. | by Ali Mese | The Startup | Medium Jump to heading
ライティングを学べば人生が変わる Jump to heading
Ali氏による、書くことの重要性について説く記事。人の脳はストーリーテリングを愛してやまず、ストーリーが人を動かし、そして人を動かすことができるというのは重要なスキルであると解説する。人にストーリーを読んでもらうためには、丁寧に一行ずつ書いていき、言葉を大切に扱うことが重要。このスキルによって人は人生を大きく変えることができるのだと締めくくる。
Developing a North Star product experience Jump to heading
デザインにおける北極星を形成する Jump to heading
Julie Zhuo氏は、自身の記事で、デザインのノーススター(=北極星)の考え方を公開した。デザインのノーススターは、そのアイデアやコンセプトが人々の生活を向上させる理由を説明するビデオなどの視覚的アウトプットのことを指す。この記事では、そのノーススターをどのように形成するか、ステップ・バイ・ステップで解説する。
- チームを結成する
- コンテキストを理解する
- 機会のセグメントを特定する
- アイデアを生み出す
- プロトタイプを開発する
- テストして繰り返す
- 物語を形成し、ソーシャル化する
Visualising Front-End Performance Bottlenecks | by Richie McColl | DAZN Engineering | Jul, 2020 | Medium Jump to heading
フロントエンドのパフォーマンスを改善するためには、まずボトルネックを見つけることが重要となる。この記事では、実際のサンプルプロジェクトを使用しながら、どのように Web サイトパフォーマンスを視覚し、ボトルネックを見つけるのか、その方法を紹介する。
What is the difference between _ and _ in the front-end development? Jump to heading
フロントエンド開発 でよく目にする、:active
と:focus
やborder
とoutline
などといった似ている仕様について、それらを比較をしながら それぞれがどのような差を持っているのか、詳しく解説する。
In Brief Jump to heading
Digging Into the Flex Property:
display: flex
の挙動について深く理解するMy Favorite JavaScript Tips and Tricks: JavaScript で使える便利な記法やテクニックを紹介
HTML for Subheadings and Headings | CSS-Tricks: 見出しが複数ある場合のマークアップの方法をセマンティクスさやアクセシビリティを考慮した場合どのような方法があるか、考察する
Layout Shift GIF Generator - Cumulative Layout Shift (CLS) Visualiser.: Core Web Vitals の指標にあたる、Cumulative Layout Shift について GIF を生成し視覚化をすることができるツール
Webpack: A gentle introduction: Webpack についてその有用性や、はじめ方から丁寧に解説する