UI/UXデザイナーが本気で挑む「サービスサイト制作」―成果を出す情報設計と導線設計のリアル

BtoBサービスサイトで成果を分ける「前提設計」

ジェイ・ラインのBtoBサービスサイトでは、まず「誰に・何を・どこまで伝えるか」を明確化します。事業責任者や営業へのヒアリングから、典型的な検討プロセス、よくある反対理由、導入決裁のフローを洗い出し、
・一次訪問（情報収集）
・二次訪問（比較検討）
・三次訪問（社内説明用資料探し）
といった来訪シーンごとに期待行動を整理。これを踏まえて、ページ構成・CTA配置・必要コンテンツのレベル感を決めていきます。UIより先に「検討構造」を描くことが、コンバージョン差の起点になります。

ペルソナ定義と価値提案の整理プロセス

UI/UXデザイナーが主導するのが、ペルソナと価値提案の言語化です。単なる属性ではなく、
・「今日このサイトに来たきっかけ」
・「上司から何を求められているか」
・「導入に踏み切れない理由」
まで深掘りし、共感フレーズと解消すべき不安をリスト化します。並行して、競合比較で勝てる要素（強み）と、見せ方でカバーすべき要素（弱み）をマッピング。これを「価値提案キャンバス」として整理し、後続のワイヤー・コピー・ビジュアルの判断基準とします。

サイトマップ設計：情報量と導線のバランス

BtoBサイトでは「情報不足」と「情報過多」の両極端を避ける設計が重要です。ジェイ・ラインでは、まずトップページを「課題→解決策→証拠→次の一手」という4ブロックで定義し、その下に
・サービス詳細（機能・料金・導入プロセス）
・導入事例（業種・課題別にタグ付け）
・ナレッジ（お役立ち記事、ホワイトペーパー）
・会社情報・サポート
を配置したサイトマップを設計。Googleスプレッドシート等で「ページ目的」「主要CTA」「想定流入キーワード」を1行ずつ整理し、無駄なページや役割が被るコンテンツをそぎ落としていきます。

ワイヤーフレーム例：ファーストビューとストーリー設計

ワイヤーでは特に、ファーストビューとスクロールに応じたストーリーを具体化します。典型的なトップの構成は、
・左上：ロゴ／グローバルナビ（シンプルに3〜5項目）
・中央：メインコピー＋補足テキスト（「誰の・どんな課題を・どう変えるか」を一文で）
・右または下部：プライマリCTA（資料DL・相談）
・直下：ベネフィット3点＋実績（数値・ロゴ）
・中盤以降：課題共感→解決アプローチ→サービス詳細→事例→FAQ→再CTA
といった流れ。FigmaやXD上で「視線の動き」と「スクロールの分岐」を意識しながら、コピー欄も含めた精度高いワイヤーを作り込みます。

コンバージョンを生む導線設計のポイント

導線設計では、「その場で決められない」BtoBの現実を前提にします。ジェイ・ラインでは、
・今すぐ系：問い合わせ・見積もり・デモ依頼
・検討系：資料DL・チェックリスト・比較表
・情報収集系：セミナー・メルマガ・ノウハウ記事
と複数レベルのCTAを用意し、各ページに最適な1〜2つだけを配置。サイドバーやフッターに「次の一歩」を必ず用意し、遷移ログからボトルネックページを特定して改善します。UI変更だけでなく、オファー自体の見直しも同時に行う点が特徴です。

デザイナーが担う役割とチーム連携

ジェイ・ラインのサービスサイト制作では、UI/UXデザイナーは「見た目担当」ではなく、
・要件定義〜情報設計フェーズでの議論リード
・ディレクターとのサイトマップ・ワイヤー共創
・コピーライターへのトンマナ・構造フィードバック
・エンジニアと実装上の制約をすり合わせたUI設計
まで関与します。提案段階から参加する案件も多く、Figmaプロトタイプを用いた提案や、GA・ヒートマップを踏まえた改善案出しなど、デザインを軸にPDCAを回す役割が期待されています。

入社後に関わる案件の種類と成長イメージ

担当するのは、採用特化のサービスサイト、自社プロダクト、HR・地方創生・海外向けなど多様なBtoB案件です。情報設計が肝になる案件が多く、
・小〜中規模サイトのUIリード
・既存サイトのUX改善提案
・ブランドトーンを踏まえたビジュアル刷新
を経験しながら、将来的には
・大型サイトのデザインリード
・若手デザイナーのレビュー
・全社的なデザインガイドライン整備
といった役割へ広げていくことが可能です。事業や採用の成果に直結する設計に向き合いたいデザイナーにとって、スキルを立体的に伸ばせる環境です。