BtoBサービスサイト
料金、導入事例、問い合わせ後の流れ、サポート体制など、 検討中の不安をどこで解消しているかを見る。
UIデザインの参考を探していると、きれいなWebサイトや流行のレイアウトに目が行きがちです。 ただ、自社サイトに活かすうえで大切なのは、見た目をそのまま真似ることではありません。
まず整理したいのは、そのWebサイトで、ユーザーのどんな迷いや不安を減らしたいのかです。
このページが向いている方
「問い合わせを増やしたい」「サービス内容をわかりやすく伝えたい」 「採用応募を増やしたい」「ブランドの印象を整えたい」など、目的が変われば参考にすべきUIも変わります。
このページでは、参考サイトの見た目だけでなく、 ユーザーがどこで迷い、どの情報で安心し、どのタイミングで行動するのかを見るための視点を整理します。
料金、導入事例、問い合わせ後の流れ、サポート体制など、 検討中の不安をどこで解消しているかを見る。
写真の雰囲気だけでなく、仕事内容、働く人、選考フロー、 入社後のイメージが伝わるかを見る。
商品の魅力に加えて、比較、送料、返品条件、購入前の不安を 迷わず確認できるかを見る。
参考にすべきなのは、配色や装飾だけではありません。 「なぜこの順番で情報を見せているのか」「どこで不安を減らしているのか」まで見ると、 自社サイトの改善に使えるヒントが見つかりやすくなります。
ファーストビューでは、誰向けのサービスか、何を解決できるか、 次に何をすればよいかが伝わる必要があります。
BtoBサイトなら「対象ユーザー」「解決できる課題」「資料請求・問い合わせ導線」が見つけやすいかを確認します。
料金、機能、事例、FAQ、導入フローなどの順番には、ユーザーの検討心理が表れます。 ただ情報を並べるだけでは、迷いは減りません。
先に信頼材料を見せてから問い合わせへつなげるなど、納得して進める流れがあるかを見ます。
きれいなサイトでも、料金がわからない、導入後の流れが見えない、 サポート体制が不明だと行動にはつながりにくくなります。
事例、口コミ、比較表、FAQ、実績数、対応範囲の見せ方を確認しましょう。
問い合わせボタンや資料請求ボタンは、目立てばよいわけではありません。 ユーザーが納得した直後、不安が解消された直後にあるかが重要です。
サービス説明後、導入事例後、料金説明後に自然な導線があるかを見ます。
真似してよい部分
注意したい部分
参考にするときは、表面的なデザインではなく、その裏にある設計意図を見ることが大切です。
近年は、生成AIを使ってWebサイトのラフ案やUIパーツ案を短時間で作れるようになりました。 デザインの方向性を試したり、複数のパターンを比較したりするハードルは下がっています。
一方で、AIが作るUIは、一般的なパターンに寄りやすい面もあります。 見た目は整っていても、自社のユーザーがどこで迷うのか、どんな情報に不安を感じるのか、 どの導線なら成果につながるのかまでは判断しにくいことがあります。
AI案を見るときは、「きれいかどうか」よりも「自社のユーザーが行動しやすくなるか」を基準にしましょう。
完璧な要件定義は不要です。課題が曖昧な段階でも相談できます。 ただし、以下を整理しておくと、提案の精度が上がりやすくなります。
問い合わせを増やしたい、採用応募を増やしたい、サービス理解を深めたいなど。
離脱が多い、情報が伝わらない、社内で改善方針がまとまらないなど。
誰が、どんな状況で、何を知りたくてサイトを見るのか。
好きな見た目だけでなく、なぜ参考にしたいのかも添えると伝わりやすくなります。
このページでは、WebサイトのUIUXデザイン事例と、それを手掛けたUIUXデザイン会社を紹介しています。 自社の課題に近い事例や、相談したい領域に強い会社を探す際の参考にしてください。
BtoB、採用、EC、ブランド訴求など、目的が近い事例を確認します。
UI改善、UXリサーチ、システム画面、Web制作などの強みを見ます。
何を相談したいかが曖昧でも、困っていることから整理できます。
WEBデザインのUIUX事例から、
問い合わせしたいデザイン会社を探そう
WEBサイトのUIUXデザインやコンサルティングを外部パートナーに依頼したいと考えている企業のために、WEBデザインのUIUXの実例と、それを手掛けたUIUXデザイン会社をご紹介します。
引用元：Proxim公式HP（https://www.proximo.co.jp/works/diva/）
クラウドサービスユーザーに対してユーザー体験向上を提供
これまでオンプレミス版として展開してきたサービスをクラウド化するにあたり、蓄積されたデータや機能を継承しつつ、クラウドサービスのユーザーに最適な体験を提供するためのUI/UX設計を支援。
ディーバのデザインチームと連携し、これまでに作成されたデザイン成果物をもとに、フォント、配色、アイコンなどのグラフィック要素におけるデザイントーン＆マナーを定義・文書化しました。
全プロダクトのコンポーネント共通化を目指し、既存のコンポーネントを収集・分類し、インターフェイスインベントリとして整理。これを基盤に、各パーツを分類ごとにドキュメント化したパターンライブラリを構築し、デザイナーが使いやすいようAdobe XDのコンポーネント化されたスタイルガイドおよび画面ライブラリを作成しました。
さらに、デジタルプロダクトに限らず、デザイン体制の整備やデザイナー採用支援、ブランドガイドラインの構築サポート、社外向け営業・広報資料の作成など、多岐にわたるデザインプロジェクトでディーバ様を支援しています。
引用元：株式会社 THE GUILD(https://theguild.jp/company)
Proximoは、企画・開発の初期段階からクライアントと共にプロジェクトを進め、「ユーザー目線」での課題抽出を得意としています。徹底したヒアリングを通じて業界特有の「分かりにくさ」や「使いづらさ」を言語化。その結果、具体的かつ実行可能な解決策を提案することができるだけでなく、デザインから開発、運用改善までを一貫して支援します。ユーザー体験の最適化とビジネス成果の両立を実現できる点が強みです。
引用元：Proximo公式HP（https://www.proximo.co.jp/works/diva/)
引用元：株式会社THE GUILD公式HP（https://theguild.jp/works/3596）
アイスクリームブランド・企業情報サイトのリニューアル
アメリカの人気アイスクリームブランドのひとつであるハーゲンダッツ（Häagen-Dazs）。日本国内では、ハーゲンダッツ・ネザーランド、サントリーホールディングス、タカナシ乳業の3社による合弁会社である、ハーゲンダッツジャパン株式会社が販売を行っています。公式HPでは、商品情報・最新ニュース・CM・レシピ情報など、ハーゲンダッツの魅力を中心に掲載しています。
ハーゲンダッツジャパン株式会社のブランド・企業情報サイトのリニューアルを手がけた「THE GUILD(ザ・ギルド)」では、まず顧客が求めている情報にスムーズに到達できるよう、サイト内コンテンツ・導線の整理を徹底しました。
ブランドの持つ世界観を最大限に伝え、ハーゲンダッツの製品を食べる瞬間をより良い体験とできるよう、「イメージビジュアルの撮影」「パッケージ画像の見え方」といった提案を実施。具体的には、トップページに新製品情報を掲載、知りたい製品のページにワンクリックでジャンプできる、キャンペーンやオンラインショップ等の目次を分かりやすくサイト上部に掲載する…といった取り組みです。
シンプルながら細やかな工夫で、迷うことなく情報にたどり着けるようにしました。
引用元：株式会社 THE GUILD(https://theguild.jp/company)
それぞれのメンバーが高い専門性・自律性を持っているTHE GUILDは、ギルド型のクリエイティブファーム(個々の裁量や自由を尊重した組織運営。プロジェクトが発生すると能力を持ったメンバーを集め、一つのチームとして機能)。各プロジェクトのニーズに合わせて、デザイナー・エンジニア・データアナリスト・ビジネスストラテジストといったメンバーの中から適した人材をアサイン。課題定義からグロースに至るまで、一気貫通のコミットを可能としています。
引用元：株式会社 THE GUILD(https://theguild.jp/company)
引用元：株式会社Goodpatch公式HP（https://goodpatch.com/work/onecareercloud）
戦略人事をターゲットとしたSaaSプロダクト
ワンキャリアクラウドは、新卒採用を専門とするクラウド型サービスです。就職サイト「ONE CAREER」の運営元である株式会社ワンキャリアが独自で保有する30万件の学生の声をベースに、多様なデータ・コンテンツを積極的に活用。新卒採用活動に必要となる学生の就職活動の動向、他社の状況確認といった課題を、解決へと導くサービスとなっています。
このソフトウェアのデザイン設計をトータルプロデュースしたのは、UIUXデザイン専門会社「Goodpatch(グッドパッチ)」。サービスのベースとなるアーキテクチャ設計、およびワンキャリアクラウド採用計画の開発を支援しました。デザインについては、拡張性・柔軟性といったSaaSプロダクトの成長に不可欠な要素を重視。ワンキャリアクラウドにおける情報構造のあり方、UI表現、インタラクション構造など、さまざまなレイヤーにおいて拡張性を意識したデザインを心がけています。
UI設計については、情報量が増加してもレイアウトが崩れないUI設計・配置、再利用性を高めるためのタイポグラフィ・カラーの名称などを、デザイナー・エンジニアがそれぞれの観点を取り入れながら設計。同じ思想で、デザインを実装に落とし込めるよう工夫を凝らしています。
引用元：株式会社グッドパッチ(https://goodpatch.com/company/studios)
デジタルプロダクト開発（UI/UXデザイン）を中心に、ブランド構築・新規事業立ち上げ・デザイン組織支援といった、企業のビジネス課題に幅広くコミット。表面的なデザイン・アウトプットの納品ではなく、戦略立案フェーズからクライアントと共にチームを組み、目標の達成を目指して並走してくれるデザインパートナーとして、名だたる企業から厚い信頼を寄せられているUIUXデザイン専門会社です。また、デザイン会社では国内唯一※(2023年7月時点)の上場企業としても知られています。
※情報参照元：日経クロストレンド
（https://xtrend.nikkei.com/atcl/contents/watch/00008/00081/）
引用元：株式会社グッドパッチ(https://goodpatch.com/company/studios)
引用元：株式会社フォーデジット公式HP(https://www.4digit.com/projects/tsi-01/)
ファッションカンパニーの採用ブランディング
TSIホールディングスは、国内をはじめ海外ブランドのライセンス事業なども手がけるアパレル企業。EC・販売代行・コスメティック・飲食など、さまざまなファッションビジネスを展開しています。
公式の新卒採用サイトでは、総合的なファッションカンパニーとしての魅力・情報を伝達。ファッションを仕事にする喜びを知ってもらえるよう尽力しています。
国内外でアパレル事業を展開するTSIホールディングスでは、スケールメリットの発揮を目的に人材力の強化を計画。その一環として、新卒の獲得を目指した採用サイトの設計・デザインを、UIUXデザイン会社のFOURDIGIT(フォーデジット)が担当しました。
採用サイトのコンセプトを「多様な個性（ブランド）を最大限に生かす仕事」と位置づけ、伝わりにくい情報を分かりやすくデザイン。ブランドや職種、入社後のキャリア・ライフスタイルといった、働き方の魅力を伝達できるような構造設計としました。
また、撮影・イラスト・モーショングラフィックなどは、すみずみまで細やかなディレクションを実施。イラストやアニメーションで目を引くよう工夫を凝らし、サイト全体でブランドイメージを表現できるよう心がけています。
引用元：株式会社フォーデジット(https://www.4digit.com/about/studios/tokyo)
FOURDIGIT(フォーデジット)は、2001年の創業から現在に至るまで、ビジネスとユーザーを結び付けるデジタルデザインを提供。日本国内はもちろん、世界各国のさまざまな企業にとってのプロフェッショナルパートナーとして、デジタル施策・DX・サービス創出に伴走し続けています。幅広い年齢・国籍のメンバーが揃っているのも特徴です。
引用元：株式会社フォーデジット(https://www.4digit.com/about/studios/tokyo)
引用元：株式会社フォーデジット公式HP(https://www.4digit.com/projects/tg-01/)
結婚式場サイトのUIUXデザインリニューアル
株式会社テイクアンドギヴ・ニーズ（T＆G）は、国内におけるウェディング事業を取り扱っている企業です。オリジナルウェディングにこだわり、顧客ニーズに合わせたサービスでシェアを拡大。新スタイルの挙式スタイルとして、ハウスウェディングを展開しています。自社サイトでは、それぞれの結婚式場を魅力的に紹介しています。
各結婚式場の魅力を伝え、さらに更新性を向上させることを目的とし、UIUXデザイン会社のFOURDIGIT(フォーデジット)がサイトのテンプレートリニューアルを実施。
ユーザーが求める情報はもちろん、「One Heart Wedding」というサービスコンセプトを伝えるための表現・ストーリーを意識したコンテンツの提案を行いました。
表現・コンテンツ作成では、「共感を生むための世界観」「雑誌を読むようなコンテンツ体験」といったキーワードに基づき、事前に設計しておいたペルソナを考慮したトーン＆マナーを設計。
その結果、さまざまな結婚式場を取り扱うテンプレートでありながら、オリジナルウェディングのカスタマイズ感、華やかな世界観の表現を実現。ビジュアルデザイン・レイアウト・インタラクションのすべてで、依頼主であるテイクアンドギヴ・ニーズ社からも高い評価を得たとのこと。
引用元：株式会社フォーデジット(https://www.4digit.com/about/studios/tokyo)
FOURDIGIT(フォーデジット)は、2001年の創業から現在に至るまで、ビジネスとユーザーを結び付けるデジタルデザインを提供。日本国内はもちろん、世界各国のさまざまな企業にとってのプロフェッショナルパートナーとして、デジタル施策・DX・サービス創出に伴走し続けています。幅広い年齢・国籍のメンバーが揃っているのも特徴です。
引用元：株式会社フォーデジット(https://www.4digit.com/about/studios/tokyo)
引用元：株式会社グッドパッチ公式HP(https://goodpatch.com/work/ashinaga)
支援の輪を広げるブランディング＆リニューアルデザイン
あしなが育英会は、病気や災害などで親をなくした子ども、親の障がいで経済的に苦しんでいる子どもなどを対象に、物・心の両面におけるサポートを行っている民間の非営利団体。奨学金の貸与による経済的な支援、心のケアハウス「レインボーハウス」での活動、短期ケアプログラム「つどい」による心のケアプログラムなどを提供しています。
あしなが育英会では、既存支援者からの支持を保ちつつ、新しい支援者を獲得するための施策を必要としていました。相談を受けたUIUXデザイン会社の「Goodpatch(グッドパッチ)」は、サイト内における寄付導線の検討に時間をかけ、必要な情報までスムーズにたどり着けるよう、サイトのUIUXを大きくリニューアル。
また、エンジニアを介すことなくコンテンツを更新できるCMSを構築し、誰でもページの構築・情報更新ができるようにするなど、運用面にも最大限配慮した開発を実施しました。
TOPページのメインビジュアルには、あしなが育英会のテーマカラーである緑色を使用し、より優しいイメージを抱かせるようブランディング。その結果、オンラインによる寄付やサイトへのアクセスといった、主要なKPIの大幅な改善に成功しています。
引用元：株式会社グッドパッチ(https://goodpatch.com/company/studios)
デジタルプロダクト開発（UI/UXデザイン）を中心に、ブランド構築・新規事業立ち上げ・デザイン組織支援といった、企業のビジネス課題に幅広くコミット。表面的なデザイン・アウトプットの納品ではなく、戦略立案フェーズからクライアントと共にチームを組み、目標の達成を目指して並走してくれるデザインパートナーとして、名だたる企業から厚い信頼を寄せられているUIUXデザイン専門会社です。また、デザイン会社では国内唯一(2023年7月時点)の上場企業としても知られています。
※情報参照元：日経クロストレンド
（https://xtrend.nikkei.com/atcl/contents/watch/00008/00081/）
引用元：株式会社グッドパッチ(https://goodpatch.com/company/studios)
当ページは下記ページの事例を参照しております。
事例1参照元：株式会社THE GUILD公式HP (https://theguild.jp/works/3596)
事例2参照元：株式会社Goodpatch公式HP (https://goodpatch.com/work/onecareercloud)
事例3参照元：株式会社フォーデジット公式HP (https://www.4digit.com/projects/tsi-01/)
事例4参照元：株式会社フォーデジット公式HP (https://www.4digit.com/projects/tg-01/)
事例5参照元：株式会社Goodpatch公式HP (https://goodpatch.com/work/ashinaga)
参考サイトを見るだけでは、自社に合うWebサイトにはなりにくいです。 参考サイトと自社サイトでは、ユーザー、商品理解、検討期間、問い合わせや購入までのハードルが異なるためです。
参考にするときは、色やレイアウトだけでなく、 情報の順番、ボタンの配置、ページ内の導線、スマートフォンでの使いやすさ まで見ることが大切です。
まず見るべきなのは、自社と目的が近いWebサイトです。 問い合わせを増やしたいならBtoBサービスサイトや資料請求型サイト、 ブランドの世界観を伝えたいならブランドサイトや採用サイトが参考になります。
同じ業種にこだわる必要はありません。 大切なのは、業種の近さよりも、解決したい課題の近さで見ることです。
真似してよいのは、ユーザーの理解や行動を助けている設計です。 たとえば、情報の出し方、FAQの置き方、問い合わせボタンの位置、 事例や実績の見せ方などは参考になります。
一方で、配色、アニメーション、独特な余白、写真のトーンなどは注意が必要です。 自社のブランドやユーザー層に合っていなければ、見た目は良くても使いにくいサイトになることがあります。
生成AIで作ったUIデザインは、初期案やたたき台としては役立ちます。 ただし、そのまま使う前に、自社のユーザーにとってわかりやすいか、 必要な情報が抜けていないか、ブランドイメージと合っているかを確認する必要があります。
特に問い合わせ、資料請求、予約、購入などの成果を重視するサイトでは、 AIの案をそのまま使うのではなく、UIUXの視点で検証すること が重要です。
見せても問題ありません。方向性の共有材料として役立つことがあります。 ただし、「この見た目にしたい」と伝えるだけでなく、 どこが良いと思ったのか、どんな課題を解決したいのかも一緒に伝えると、より具体的な提案を受けやすくなります。
完璧な資料を用意する必要はありません。 ただし、「誰に何を伝えたいか」「今どこで困っているか」 「成果として何を見たいか」を整理しておくと、相談がスムーズになります。
うまく説明できない場合は、 「好きなデザイン」ではなく「困っていること」から伝える のがおすすめです。
業種だけで探すのではなく、サイトの目的やユーザー行動で探してみましょう。 SaaS、採用、EC、予約、資料請求、ブランド訴求など、Webサイトには目的ごとの設計パターンがあります。
自社とまったく同じ業界の事例がなくても、 似ている課題を解決しているサイト から参考にできることは多くあります。
参考にしたいWebサイトはあるのに、自社サイトへどう落とし込めばよいかわからない場合は、 UIUX会社に相談する価値があります。
また、見た目は整っているのに問い合わせが増えない、 ユーザーから使いにくいと言われる、社内で改善方針がまとまらない場合も、 外部の視点を入れることで課題を整理しやすくなります。
UIUX会社に相談するメリットは、単にデザインをきれいにすることではありません。 ユーザーが迷う原因を見つけ、成果につながる導線や情報設計まで見直せること にあります。
UIUXデザイン会社といっても、それぞれ得意とすることに違いがあります。
まずはUIUXデザイン会社に依頼して何をしてもらいたいのかを考えた上で、企業を選定すると良いでしょう。
ここではUI/UXデザイン会社に依頼する目的別に、それぞれおすすめの会社を紹介します。
