「The ustwo™ Pixel Perfect Precision Handbook 2 日本語版 」を読んだ

https://www.concentinc.jp/design_research/2014/01/pixel-perfect-precision-handbook-2-japanese/

ドキュメントが PDF というのが気に食わなかったけど、簡潔にまとめられた文章と説明のためにつけられたグラフィックは読みやすかった。

自分がなるほどな、これは知らなかったなと思ったことをまとめた。普段 Sketch で Photoshop を使ってないから、ツール的なところは全然メモしてない。

• きれいに整列されたデザインをつくるためにグリッドを使おう
• 枠線を角丸で指定したとき、内側の角丸の半径について気を配ることがよくあるが、このときの半径の求め方として「線幅と角の半径を足す方法」または「線幅から角の半径を引く方法」があるのは知らなかった。この方法を使えば、内側の角を CSS などで汎用的に指定することが可能になりそう
• 正三角形を描くとき、「横幅に対して高さを 86.6% にすると綺麗な正三角形に見える」というのを知らなかった。正確にはこの方法自体は知っていたが、縦幅の求め方（値）を知らなかった
• 1 段落 5 行以内で！っていう提案があったけど、レスポンシブに表示されることを考えたら文字数で制限したほうがいいと思った。読みやすさのために、制限をつけること自体はいいと思う
• たとえばページ内の注意書きの表示位置など、コンテンツを載せる順番を決めておくことは、ユーザーが知りたい情報をうまく見せるのに役立つ
• フォームなど、ユーザーが行動を開始してから目標を達成するまでの最高ステップ数には制限をつけて決めていいかも。「いつになったら私がやりたいことができるの」とユーザーが思わないように
• 何のページか明確にするためにタイトルは必要
• ラベルは短い文章で的確に
• タッチデバイスでもリンクを押せるエリアを十分確保しよう（この "十分" というのを正確な値でルール化するのが必要）
• アプリケーションに慣れたユーザーにはリンクよりボタンのほうがアクション要素としてわかりやすい
• ユーザーが何らかのアクションした際は反応を返そう。ユーザーが自分の取った行動を不安に思わないように
• タイポグラフィを 3 点リーダーで短縮表示すると Example 1, Example 2 みたいなときにサフィックスが見れなくて困るから、省略するときは十分気をつけること
• 色だけで要素の違いをつけることはしないこと。グラフなんかでも
• 曲線にすると直線で同じ線幅にしたときより線が細く見えてしまう。こういったときは曲線と直線で同じ線幅に見えるように調整するため、線幅を直接調整するか、光彩で擬似的に見た目を整える