FigmaでWebデザインを作る時の基本

作る前に決める3つ

手を動かす前にここを決めておくと、途中で作り直すことが減ります。

1. そのページで何をしてほしいか — 問い合わせ、購入、資料請求、理解
2. 誰が見るか — 既に知っている人か、初めての人か
3. どこから来るか — 検索、SNS、名刺、広告。前提が違います

3番目は見落とされがちです。来る経路によって、最初に説明すべきことが変わります。検索から来る人には何のサービスかの説明が要りますが、名刺から来る人には要りません。

画面の幅を決めてから配置する

どの幅で作るかを決めずに置き始めると、後で全部やり直しになります。

• 狭い画面から作る — 入る情報量の上限が先に決まります
• 広げた時に何を足すか決める — 単に伸ばすと間延びします
• 途中の幅で崩れないか確認する — 一番崩れやすいのは中間の幅です

3番目が抜けやすい部分です。スマホと広い画面だけ確認して、タブレット程度の幅で崩れる例が多くあります。幅を連続的に変えながら見てください。

実装する人に渡す前の確認

デザインを渡す前に、次が決まっているか確認してください。決まっていないと、実装側が推測で埋めることになります。

• 文字が長くなった場合の見え方 — 想定より長い名前が入ったらどうなるか
• データが無い場合 — 一覧が0件の時に何を出すか
• 押した後の状態 — 読み込み中、成功、失敗
• エラーの表示位置

2番目と4番目は、デザインに描かれないまま実装に回ることが多い部分です。描いていない状態は、実装側が決めることになります。そこを揃えたいなら、渡す前に用意してください。

作り終わってから見直すところ

完成したと思った時点で、次を一度確認してください。

• 目的の行動に辿り着けるか — 最初に決めた「してほしいこと」まで、迷わず進めるか
• 初めて見る人が理解できるか — 作った本人は前提を知っているので判断できません
• 削れる要素が無いか — 足すより削るほうが効くことが多くあります

2番目は他人に見てもらうのが確実です。説明せずに開いてもらい、何のページか聞いてください。説明が要る時点で、伝わっていません。