高さの違うカードを隙間なく敷き詰めます。読み順が「縦に流れて折り返す」形になるので、順序が意味を持つ一覧には向きません。

短いメモ

一行だけ。

設計の覚え書き

余白は4pxの倍数で刻む。行間は日本語なら1.8前後。この2つを最初に決めておくと、あとから全体を作り直さずに済みます。

色の決め方

まず1色だけ決めて、残りは明度で作る。

読み込みの体感

実際の速さより、待っていることが分かるかどうかが効きます。スケルトンを置くだけで印象が変わります。

命名

見た目ではなく役割で名付ける。

フォーム

ラベルは必ず上に置き、入力欄と for と id で結ぶ。プレースホルダーをラベル代わりにしない。入力を始めた瞬間に何の欄か分からなくなります。

アイコン

装飾なら aria-hidden を付ける。

距離を長く、不透明度を低く。近い影は安っぽく見えます。