開発者が押さえておくべきデザインの道具

デザイナーのいない案件はたくさんあります。それは、UIが事故のように見えていい理由にはなりません。

ここに挙げる道具は、たいてい失敗する判断を押さえます。色、コントラスト、余白、画像、そして文字サイズの階段です。

Realtime Colors

何も分からない5つの四角ではなく、実際のレイアウトでパレットを試せます。

realtimecolors.com

Coolors

手早くパレットを作って固定し、そのままCSS変数として書き出せます。

coolors.co

アクセシビリティ

WebAIM Contrast Checker

ここでの2分が、どの監査でも落ちるグレー地にグレー文字を防ぎます。

webaim.org/resources/contrastchecker

組版

Type Scale

見出しの階段を整えることで、文字サイズが行き当たりばったりでなくなります。

typescale.com

イラスト

unDraw

無料のイラストを、ダウンロード前にブランド色へ変えられます。

undraw.co

画像

Squoosh

ブラウザ内で圧縮し、劣化を受け入れる前に自分の目で確かめられます。

squoosh.app

背景

Haikei

ヒーロー領域向けのSVGの形状・波・グラデーションを数クリックで生成します。

haikei.app

デザインツール

Figma

自分で描かないとしても、本物のデザイナーから届いたものを開くのに必要になります。

figma.com

2つだけ使うなら、コントラスト確認とタイプスケールを。利用者が実際に気づく問題を直せます。

選ぶだけでなく、作る必要がありますか?

Webアプリ、API、インフラ、インターフェース。バルセロナ拠点のフリーランス、世界中のクライアントと。

問い合わせる


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *