用語集A〜Z

Web デザイナー

よみ: ウェブデザイナー

Web サイトの視覚デザインを担当する役職です。ディレクターが作ったワイヤーフレーム(WF / ワイヤーフレーム)(画面構成案)をベースに、実際のビジュアルデザインを制作します。現在のデザインツールは「Figma(フィグマ)」が圧倒的な業界標準です。また、デザインだけでなく HTML / CSS のコーディングまでこなす人を「マークアップエンジニア」と呼ぶこともあります。

最大の鉄則:デザイナーには「言語化された要件」を渡す

「なんかカッコよく作って」「いい感じで」といった曖昧な丸投げ指示からは、絶対に良いデザインは生まれません。狙い通りのデザインを上げるには、事前に以下の要件を言葉にして伝えることが必須です。

  • ペルソナ:誰に見てもらうデザインか(年齢・性別・職業など)。
  • トーン&マナー(ブランドトーン):どんな雰囲気か(信頼感・親しみやすさ・高級感など)。
  • 行動目標:デザインを見た人にどうして欲しいか(購入・資料請求など)。

実務でのアクション:要件を「評価軸」にしてレビューする

デザインが上がってきたら、自分の好み(主観)で「ここは赤の方が好き」と語るのではなく、「ターゲットは 30 代男性だから、この色より青の方が適切ではないか」と、事前に共有した要件(客観)を評価軸にしてレビューしてください。この対話ができると、手戻りが激減します。

現場で陥りやすい「落とし穴」

最も多い失敗は、「デザインは感性だ」と勘違いして要件を曖昧に投げ、上がってきたデザインに後出しで文句を言うことです。「事前の言語化」と「判断基準の共有」ができているかどうかが、Web 担当者のディレクション能力の分かれ目になります。

言葉をよく利用する人

  • Web 担当者(発注側)
  • プロデューサー
  • デザイナー
  • ディレクター

会話上での使用例

制作会社のディレクター経由でデザインを発注する場面

  • Webディレクター
    では次の工程としてデザインに入りますので、要件をいただけますか。
  • Web担当者
    はい。Webデザイナーさんに渡せるよう、ペルソナとトーン、それから達成したい行動目標を言葉にした要件書を用意しました。カッコよくお願いします、では伝わらないと思うので。
  • Webディレクター
    ここまで言語化していただけると、デザイナーも狙いを外しません。助かります。

上がってきたデザイン案をレビューする場面

  • デザイナー
    ご依頼のデザイン案、ひと通り仕上がりました。ご確認ください。
  • Web担当者
    ありがとうございます。Webデザイナーさんの意図をうかがいながら見たいので、各ブロックで何を狙ったか聞かせてください。事前に共有した要件を評価軸にして、感覚的な指摘にならないよう確認します。
  • デザイナー
    では意図を説明しながら進めますね。先に判断基準を共有いただけているので、こちらもやりやすいです。

関連 Lesson(本書本文)

Lesson 4-1 デザインを判断する軸