2026.07.10

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

Webデザイナー仕事のこと
# BtoBマーケティング# コンバージョン最適化# サイトマップ設計# ワイヤーフレーム# 情報設計

コンバージョンを左右するBtoBサービスサイトの前提条件

BtoBサービスサイトの成否を分けるのは「誰が・どのフェーズで・何を判断するために閲覧しているか」をどこまで具体的に想定できているかです。ジェイ・ラインでは、まず営業担当へのヒアリングと既存顧客インタビューを通じて、
・決裁者/現場担当/情報収集担当の役割
・初回訪問か、比較検討か、社内説明用か
を整理します。そのうえで「このページでどの行動を完了させたいか」を一つに絞り、欲張って情報を詰め込みすぎないことを徹底します。CVボタンの配置より先に、「ここは問い合わせ前の不安を解消するページ」といった役割定義から着手するのが特徴です。

ペルソナと価値仮説を一つのシートにまとめる設計

サービスサイトでは、詳細なペルソナを作り込むより「決裁フローにどう絡むか」を重視します。ジェイ・ラインでは、1枚の設計シートに
・ペルソナの立場/KPI/評価基準
・現状の課題と、社内でよく出る反対意見
・サービスの提供価値(機能的・情緒的・組織的)
をマトリクスで整理します。UI/UXデザイナーもここから参加し、「この不安をこのブロックで解消できているか」「社内説得に使える図解になっているか」といった観点で、コピーライターやディレクターと要素レベルでディスカッションしていきます。

サイトマップ設計:深さより「判断ステップ」を優先する

情報量の多いBtoBサービスでは、階層を増やして整理したくなりますが、検討プロセスが分断されがちです。ジェイ・ラインのサイトマップは、深さよりも「判断ステップ」に沿った流れを優先します。
1. サービスの全体像とメリットを理解する
2. 自社に当てはめてイメージする
3. 導入ハードルとリスクを把握する
4. 担当者が社内に説明できる材料をそろえる
という流れを軸に、「1ページに収めるか」「用途別に分けるか」を決めます。これをベースに、後工程のワイヤーフレームで各ページの役割をさらに明確化していきます。

ワイヤーフレームでのファーストビューとスクロール設計

ワイヤーフレーム制作では、「ファーストビュー=キャッチコピー+1メッセージ+1アクション」に絞ることをルール化しています。BtoBでは「何のサービスか分からない」「誰向けかが曖昧」という状態がコンバージョンを大きく下げるためです。
スクロールに応じた構成は、
・なぜ必要か(背景・課題)
・何をしてくれるか(サービス構造)
・本当に効くのか(実績・事例)
・どう始めるか(導入プロセス・価格の考え方)
というストーリーを基本形にします。UI/UXデザイナーは、この流れが一目で把握できる低解像度ワイヤーを先に共有し、細部のUIはその後詰めていきます。

コンバージョン導線の「入口・比較・背中押し」を設計する

問い合わせボタンをただ増やすのではなく、「入口・比較・背中押し」の3種類の導線を設計するのがジェイ・ラインのやり方です。
・入口導線:資料ダウンロード、セミナー案内など、心理的負担の低いアクション
・比較導線:プラン比較、他社との違い、導入パターンなど、検討を前進させる情報への導線
・背中押し導線:FAQ、サポート体制、セキュリティ情報、導入後のフォローなど
各導線をどのセクションに置くかをワイヤーフレーム段階で明示し、CV計測の設計とセットで検討します。UI/UXデザイナーは、ボタンの配置だけでなく「どの文脈でどのラベルを出すか」まで踏み込んで設計します。

ディレクター・エンジニアとの役割分担と進め方

ジェイ・ラインでは、ディレクターが要件整理と全体進行、UI/UXデザイナーが情報設計とインタラクションの骨格、エンジニアが実装とパフォーマンス最適化を担います。特徴的なのは、提案段階からデザイナーが打ち合わせに入り、
・初期提案用のラフサイトマップとキービジュアル案
・ワイヤーフレームベースの簡易モック
を用意する点です。これにより、クライアントの合意形成が早まり、実制作フェーズでの手戻りも少なくなります。実装前には、エンジニアと一緒にUIの再現性や運用時の更新しやすさも確認します。

関わるサービスサイト案件とUI/UXデザイナーの成長軸

取り扱う案件は、HR系サービス、SaaS、メーカーのソリューション紹介、採用サービスなど多岐にわたります。共通するのは「ビジネスのKPIに直結するサイト」であることです。
入社後は、
・中小〜中堅企業のサイトで情報設計の型を身につける
・大手企業案件で、ステークホルダーの多さに対応した設計を経験する
・自社サービスやメディアで、継続改善のUI/UXをリードする
といった段階的な関わり方が可能です。見た目だけでなく、「誰に、何を、どう伝えるか」を設計し続けたいデザイナーにとって、設計力を実務で検証しながら磨ける環境になっています。