UI/UXデザイナーが語る「サービスサイトの裏側」――企画0日目からローンチまでのリアルな進め方

企画0日目：クライアントの「なんとなく」を言語化する

最初にやるのは、要件定義というより「翻訳」です。
チャットやオンラインMTGで、クライアントの口ぐせ・よく出てくる単語をそのままメモしていきます。例：「スタイリッシュ」「でも堅すぎない」「採用にも効く感じ」。
その曖昧さを、Figmaのメモやドキュメントに次のように落とします。

• トーン：信頼寄りのフレンドリー
• 主ターゲット：採用担当・決裁者
• KPI：問い合わせ・採用エントリー

この「翻訳メモ」をクライアントと画面共有しながら、「この解釈で合っていますか？」とすり合わせるのが、後工程のブレを減らす最初の一手です。

情報設計：ビジネスゴールとユーザー導線をざっくり描く

方向性が固まったら、サイトマップとカスタマージャーニーをラフに作ります。ここではきれいさよりスピード重視。Figma上に「ホーム→サービス詳細→事例→問い合わせ」とボックスを並べ、矢印でつなぐだけでも十分です。
ポイントは、

• 「最初に何を見せたいか」ではなく「ユーザーはどこで不安になるか」から逆算する
• 採用サイトであれば「共感→信頼→応募」の3ステップを必ず設計に入れる

この段階でディレクターと「絶対に外せないコンテンツ」を合意しておくと、後からページ追加で炎上しづらくなります。

ワイヤーフレーム：チャット感覚で粗めに共有する

情報設計が固まったら、FigmaやXDでワイヤーを作成。ジェイ・ラインでは、最初から作り込みすぎず「チャットで投げられるラフ案」を意識します。
例えばFigmaのキャプチャにコメントで、

• 「このエリアで“他社との違い”を一言で伝えたいです」
• 「ここは採用とサービスで共通パーツにして運用を軽くしたいです」

など意図を書き込んで共有。テキストはダミーでも、「何を伝える枠なのか」が分かるレベルまで言語化しておくと、ライターやディレクターとの往復がスムーズです。

UIデザイン：ブランドらしさと運用しやすさのバランス

ワイヤー承認後、UIデザインに入ります。クライアントのブランドガイドラインがあれば尊重しつつ、「Webとして読まれやすいか」「更新しやすいか」をセットで考えます。
Figmaでは、

• コンポーネント化（CTAボタン、カード、FAQなど）
• Auto Layoutでテキスト量の増減に耐えられる設計

を徹底。レビュー時には、画面キャプチャに「視線の流れ」「主役要素」「KPIとの紐づけ」をコメントで添えます。見た目の好み論争を避け、根拠ベースの会話にするコツです。

エンジニア連携：揉めないための“ちょうどいい仕様”

デザインFIX前後で、フロントエンドと仕様すり合わせMTGを行います。ここでのポイントは、「全部は書かないが、迷いそうなところだけは書く」こと。例えば、

• アニメーション：ホバー時・スクロール時の振る舞いをGIFか簡易動画で共有
• ブレークポイント：主要3〜4パターンだけFigmaでレイアウトを用意
• コンポーネント名：Figmaとコードの命名をできるだけ合わせる

論点が出たらその場でFigma上にメモを残し、「最終仕様はここを見れば分かる」状態に。これだけで、チャットのログを漁る時間がかなり減ります。

ローンチ〜公開後改善：数字で語るデザインにする

公開して終わりではなく、1〜3カ月を目安に簡易レポートを確認します。採用サイトならエントリー率、サービスサイトなら資料DLや問い合わせ数など。
ジェイ・ラインでは、

• ヒートマップで離脱ポイントを確認
• CTA文言やファーストビューを小さくABテスト

といった改善提案をセットで行うことが多いです。ここまで見届けると、「このUIパターンはこのターゲットに刺さる」といったナレッジがたまり、次案件の設計スピードが一段上がります。

ジェイ・ラインのUI/UXデザイナーの裁量と関わり方

ジェイ・ラインのUI/UXデザイナーは、単なる「デザイン担当」ではなく、企画0日目からミーティングに入り、情報設計〜UI設計まで一貫して関わるケースが一般的です。
社内にはディレクター、ライター、エンジニアが揃っており、SlackやオンラインMTGで日常的に相談しながら進行。海外拠点と連携する案件もあり、新しい表現やUIにもチャレンジしやすい環境です。
「誰に、何を、どう伝えるか」を起点に、プロジェクトの最初から最後まで伴走したいデザイナーにとって、腕を試しやすいフィールドになっています。