2026.09.08

ジェイ・ラインのUI/UXデザイナーの仕事とは?情報設計・導線設計・ビジュアル設計の“守備範囲”をざっくり解説

Webデザイナー仕事のこと
# UI設計と情報設計# Webデザイン業務# マイクロインタラクション# ワイヤーフレーム# 画面導線設計

担当するプロジェクトと関わり方の全体像

ジェイ・ラインのデザイナーは、コーポレートサイト・採用サイト・LP・キャンペーンページなど、事業寄り&採用寄りの案件が中心です。規模感は、中小〜大手まで幅広く、直案件も代理店経由もあります。
役割としては、「ビジュアルだけ仕上げる人」というより、情報設計〜UI設計〜ビジュアル設計までを一貫して見るポジション。とはいえ、要件定義や進行管理はディレクターが担うため、「全部を一人で背負う」構造ではありません。
案件によっては、デザインリードとして複数ページのトーン&マナーを握り、若手デザイナーのレビューに入ることもあります。

情報設計の守備範囲:ペルソナ〜サイトマップまで

上流の情報設計にはかなり踏み込みます。典型的なタスクは以下のようなイメージです。
・ディレクターと一緒にターゲット・ゴールを整理
・既存サイトのページ構成・導線の棚卸し
・ペルソナ・カスタマージャーニーのたたき台作成
・サイトマップ/コンテンツ構成案の提案
ペルソナや構成は、ディレクター主導の場が多いですが、「ユーザー視点で見るとここは一本化したい」「スマホの文脈だと情報量を絞りたい」など、デザイナーからの突っ込み・提案が歓迎される文化です。

ワイヤー&導線設計:画面単位での裁量

情報設計が固まったら、各ページのワイヤーフレームを作成します。
・主要ページはデザイナーがFigma / XDでワイヤー作成
・一覧〜詳細〜応募/問い合わせなど、一連の導線をセットで設計
・ファーストビューのメッセージ優先度、CTAの配置・数も提案
ディレクターがテキストラフを用意することもありますが、「ここはビジュアルで見せよう」「フォームは分割したほうが離脱が減りそう」など、UI観点から構成を組み替える提案も日常的です。ワイヤー段階でクライアントに見せるケースも多く、そこでの説明もデザイナーが担います。

ビジュアル設計:世界観づくりと細部のUI

UIデザインでは、トンマナづくりから各パーツの挙動までを担当します。
・ブランド/採用コンセプトを踏まえたカラーパレット・タイポグラフィ設計
・キービジュアル、アイコン、図解などのビジュアル制作
・ボタン、フォーム、ナビゲーションの状態設計(通常/ホバー/アクティブ)
・スマホ前提のレイアウト最適化(親指の届き方、可読性など)
「なんとなくキレイ」ではなく、「誰に何をどう伝えるか」をディレクター・ライターとすり合わせながら、ロジックのあるデザインを組み立てていくスタイルです。

マイクロインタラクションと改善提案

アニメーション専門担当はいませんが、マイクロインタラクションはデザイナーのアイデア次第で結構踏み込めます。
・スクロール時のフェードインやパララックスの指示
・ホバー時の変化、タップフィードバックの指定
・応募ボタン押下後の完了メッセージやサンクスページの体験設計
動きはFigmaのプロトタイプや、簡易モーション案を共有してエンジニアと詰めていきます。公開後のヒートマップやCVデータを見ながら、「ここはCTAのラベルを変えたい」「セクション順を入れ替えたい」といった改善提案をする場面もあります。

ディレクター・ライター・エンジニアとの役割分担

ジェイ・ラインはチーム制作が前提で、職種ごとの守備範囲は比較的クリアです。
・ディレクター:要件定義、予算・スケジュール管理、クライアント折衝
・ライター:コンテンツ企画、構成案、原稿作成・取材
・エンジニア:実装、パフォーマンス・アクセシビリティの技術検討
デザイナーはその中心で、体験設計とUIの整合を取る役割。MTGでは、ディレクターが全体進行、デザイナーがUI案の説明と意図の言語化、ライター・エンジニアが具体的な実現方法を詰める、という流れが多いです。

MTG〜レビューの進み方とサポート体制

プロジェクトの基本フローは、
1. キックオフ(課題・ゴール・ターゲットの共有)
2. 情報設計〜ワイヤーレビュー(ディレクター、場合によってはクライアント同席)
3. UIデザインレビュー(社内→クライアント)
4. 実装中のデザインチェック(STGでの最終確認)
レビューは、先輩デザイナーやディレクターが入り、クオリティと工数のバランスを一緒に見るスタイルです。
「全部自分で判断して決めてこい」ではなく、「自分で考えた上で、相談・壁打ちしながら進める」くらいの裁量感なので、上流から関わりつつも、一人で抱え込みにくい環境になっています。