事例から探せる!UIUXデザイン会社図鑑【2024】 » UIUXデザイン・コンサルの目的別事例まとめ » WEBデザイン UIUX事例PICK UP

WEBデザイン UIUX事例PICK UP

ウェブデザインさん

WEBデザインのUIUX事例から、
問い合わせしたいデザイン会社を探そう

WEBサイトのUIUXデザインやコンサルティングを外部パートナーに依頼したいと考えている企業のために、WEBデザインのUIUXの実例と、それを手掛けたUIUXデザイン会社をご紹介します。

目次

Häagen-Dazs(ハーゲンダッツ)

  • 食品
  • toC
  • ハーゲンダッツ ジャパン
「ハーゲンダッツ ジャパン」の コーポレートサイト

引用元:株式会社THE GUILD公式HP(https://theguild.jp/works/3596)

アイスクリームブランド・企業情報サイトのリニューアル

アメリカの人気アイスクリームブランドのひとつであるハーゲンダッツ(Häagen-Dazs)。日本国内では、ハーゲンダッツ・ネザーランド、サントリーホールディングス、タカナシ乳業の3社による合弁会社である、ハーゲンダッツジャパン株式会社が販売を行っています。公式HPでは、商品情報・最新ニュース・CM・レシピ情報など、ハーゲンダッツの魅力を中心に掲載しています。

WEBデザイン UIUXここがポイント!

スムーズなサイト導線で顧客体験を向上

ハーゲンダッツジャパン株式会社のブランド・企業情報サイトのリニューアルを手がけた「THE GUILD(ザ・ギルド)」では、まず顧客が求めている情報にスムーズに到達できるよう、サイト内コンテンツ・導線の整理を徹底しました。

ブランドの持つ世界観を最大限に伝え、ハーゲンダッツの製品を食べる瞬間をより良い体験とできるよう、「イメージビジュアルの撮影」「パッケージ画像の見え方」といった提案を実施。具体的には、トップページに新製品情報を掲載、知りたい製品のページにワンクリックでジャンプできる、キャンペーンやオンラインショップ等の目次を分かりやすくサイト上部に掲載する…といった取り組みです。

シンプルながら細やかな工夫で、迷うことなく情報にたどり着けるようにしました。

ハーゲンダッツの事例を詳しく見る

このUIUX事例を手掛けた会社は…?
ザ・ギルド
ザ・ギルドの会社イメージ

引用元:株式会社 THE GUILD(https://theguild.jp/company)

それぞれのメンバーが高い専門性・自律性を持っているTHE GUILDは、ギルド型のクリエイティブファーム(個々の裁量や自由を尊重した組織運営。プロジェクトが発生すると能力を持ったメンバーを集め、一つのチームとして機能)。各プロジェクトのニーズに合わせて、デザイナー・エンジニア・データアナリスト・ビジネスストラテジストといったメンバーの中から適した人材をアサイン。課題定義からグロースに至るまで、一気貫通のコミットを可能としています。

ザ・ギルドの会社イメージ

引用元:株式会社 THE GUILD(https://theguild.jp/company)

ワンキャリアクラウド

  • HR
  • toB
  • 株式会社ワンキャリア
採用系ソフトウェア 「ワンキャリアクラウド」

引用元:株式会社Goodpatch公式HP(https://goodpatch.com/work/onecareercloud)

戦略人事をターゲットとしたSaaSプロダクト

ワンキャリアクラウドは、新卒採用を専門とするクラウド型サービスです。就職サイト「ONE CAREER」の運営元である株式会社ワンキャリアが独自で保有する30万件の学生の声をベースに、多様なデータ・コンテンツを積極的に活用。新卒採用活動に必要となる学生の就職活動の動向、他社の状況確認といった課題を、解決へと導くサービスとなっています。

WEBデザイン UIUXここがポイント!

「将来的な拡張性」まで見据えたUI設計が肝!

このソフトウェアのデザイン設計をトータルプロデュースしたのは、UIUXデザイン専門会社「Goodpatch(グッドパッチ)」。サービスのベースとなるアーキテクチャ設計、およびワンキャリアクラウド採用計画の開発を支援しました。デザインについては、拡張性・柔軟性といったSaaSプロダクトの成長に不可欠な要素を重視。ワンキャリアクラウドにおける情報構造のあり方、UI表現、インタラクション構造など、さまざまなレイヤーにおいて拡張性を意識したデザインを心がけています。

UI設計については、情報量が増加してもレイアウトが崩れないUI設計・配置、再利用性を高めるためのタイポグラフィ・カラーの名称などを、デザイナー・エンジニアがそれぞれの観点を取り入れながら設計。同じ思想で、デザインを実装に落とし込めるよう工夫を凝らしています。

ワンキャリアクラウドの事例を詳しく見る

このUIUX事例を手掛けた会社は…?
グッドパッチ
グッドパッチ会社イメージ

引用元:株式会社グッドパッチ(https://goodpatch.com/company/studios)

デジタルプロダクト開発(UI/UXデザイン)を中心に、ブランド構築・新規事業立ち上げ・デザイン組織支援といった、企業のビジネス課題に幅広くコミット。表面的なデザイン・アウトプットの納品ではなく、戦略立案フェーズからクライアントと共にチームを組み、目標の達成を目指して並走してくれるデザインパートナーとして、名だたる企業から厚い信頼を寄せられているUIUXデザイン専門会社です。また、デザイン会社では国内唯一※(2023年7月時点)の上場企業としても知られています。

※情報参照元:日経クロストレンド
(https://xtrend.nikkei.com/atcl/contents/watch/00008/00081/)

グッドパッチ会社イメージ

引用元:株式会社グッドパッチ(https://goodpatch.com/company/studios)

TSI HOLDINGS新卒採用サイト

  • 食品
  • toC
  • 株式会社TSIホールディングス
TSIホールディングス採用サイト

引用元:株式会社フォーデジット公式HP(https://www.4digit.com/projects/tsi-01/)

ファッションカンパニーの採用ブランディング

TSIホールディングスは、国内をはじめ海外ブランドのライセンス事業なども手がけるアパレル企業。EC・販売代行・コスメティック・飲食など、さまざまなファッションビジネスを展開しています。
公式の新卒採用サイトでは、総合的なファッションカンパニーとしての魅力・情報を伝達。ファッションを仕事にする喜びを知ってもらえるよう尽力しています。

WEBデザイン UIUXここがポイント!

サイト全体でブランドイメージを表現!

国内外でアパレル事業を展開するTSIホールディングスでは、スケールメリットの発揮を目的に人材力の強化を計画。その一環として、新卒の獲得を目指した採用サイトの設計・デザインを、UIUXデザイン会社のFOURDIGIT(フォーデジット)が担当しました。

採用サイトのコンセプトを「多様な個性(ブランド)を最大限に生かす仕事」と位置づけ、伝わりにくい情報を分かりやすくデザイン。ブランドや職種、入社後のキャリア・ライフスタイルといった、働き方の魅力を伝達できるような構造設計としました。

また、撮影・イラスト・モーショングラフィックなどは、すみずみまで細やかなディレクションを実施。イラストやアニメーションで目を引くよう工夫を凝らし、サイト全体でブランドイメージを表現できるよう心がけています。

このUIUX事例を手掛けた会社は…?
フォーデジット
フォーデジットの会社イメージ

引用元:株式会社フォーデジット(https://www.4digit.com/about/studios/tokyo)

FOURDIGIT(フォーデジット)は、2001年の創業から現在に至るまで、ビジネスとユーザーを結び付けるデジタルデザインを提供。日本国内はもちろん、世界各国のさまざまな企業にとってのプロフェッショナルパートナーとして、デジタル施策・DX・サービス創出に伴走し続けています。幅広い年齢・国籍のメンバーが揃っているのも特徴です。

フォーデジットの会社イメージ

引用元:株式会社フォーデジット(https://www.4digit.com/about/studios/tokyo)

T&G施設サイトのテンプレートデザイン

  • 食品
  • toC
  • 株式会社テイクアンドギヴ・ニーズ
株式会社テイクアンドギヴ・ニーズ結婚式場サイト

引用元:株式会社フォーデジット公式HP(https://www.4digit.com/projects/tg-01/)

結婚式場サイトのUIUXデザインリニューアル

株式会社テイクアンドギヴ・ニーズ(T&G)は、国内におけるウェディング事業を取り扱っている企業です。オリジナルウェディングにこだわり、顧客ニーズに合わせたサービスでシェアを拡大。新スタイルの挙式スタイルとして、ハウスウェディングを展開しています。自社サイトでは、それぞれの結婚式場を魅力的に紹介しています。

WEBデザイン UIUXここがポイント!

オリジナルウェディングの華やかさを表現

各結婚式場の魅力を伝え、さらに更新性を向上させることを目的とし、UIUXデザイン会社のFOURDIGIT(フォーデジット)がサイトのテンプレートリニューアルを実施。
ユーザーが求める情報はもちろん、「One Heart Wedding」というサービスコンセプトを伝えるための表現・ストーリーを意識したコンテンツの提案を行いました。

表現・コンテンツ作成では、「共感を生むための世界観」「雑誌を読むようなコンテンツ体験」といったキーワードに基づき、事前に設計しておいたペルソナを考慮したトーン&マナーを設計。
その結果、さまざまな結婚式場を取り扱うテンプレートでありながら、オリジナルウェディングのカスタマイズ感、華やかな世界観の表現を実現。ビジュアルデザイン・レイアウト・インタラクションのすべてで、依頼主であるテイクアンドギヴ・ニーズ社からも高い評価を得たとのこと。

このUIUX事例を手掛けた会社は…?
フォーデジット
フォーデジットの会社イメージ

引用元:株式会社フォーデジット(https://www.4digit.com/about/studios/tokyo)

FOURDIGIT(フォーデジット)は、2001年の創業から現在に至るまで、ビジネスとユーザーを結び付けるデジタルデザインを提供。日本国内はもちろん、世界各国のあらゆる企業にとってのプロフェッショナルパートナーとして、デジタル施策・DX・サービス創出に伴走し続けています。幅広い年齢・国籍のメンバーが揃っているのも特徴です。

フォーデジットの会社イメージ

引用元:株式会社フォーデジット(https://www.4digit.com/about/studios/tokyo)

あしなが育英会のサイトリニューアル

  • 遺児の支援を行う民間の非営利団体
  • toC
  • 一般財団法人あしなが育英会
あしなが育英会サイトリニューアル

引用元:株式会社グッドパッチ公式HP(https://goodpatch.com/work/ashinaga)

支援の輪を広げるブランディング&リニューアルデザイン

あしなが育英会は、病気や災害などで親をなくした子ども、親の障がいで経済的に苦しんでいる子どもなどを対象に、物・心の両面におけるサポートを行っている民間の非営利団体。奨学金の貸与による経済的な支援、心のケアハウス「レインボーハウス」での活動、短期ケアプログラム「つどい」による心のケアプログラムなどを提供しています。

WEBデザイン UIUXここがポイント!

誰もが必要な情報を探しやすいサイトへとリニューアル

あしなが育英会では、既存支援者からの支持を保ちつつ、新しい支援者を獲得するための施策を必要としていました。相談を受けたUIUXデザイン会社の「Goodpatch(グッドパッチ)」は、サイト内における寄付導線の検討に時間をかけ、必要な情報までスムーズにたどり着けるよう、サイトのUIUXを大きくリニューアル。
また、エンジニアを介すことなくコンテンツを更新できるCMSを構築し、誰でもページの構築・情報更新ができるようにするなど、運用面にも最大限配慮した開発を実施しました。

TOPページのメインビジュアルには、あしなが育英会のテーマカラーである緑色を使用し、より優しいイメージを抱かせるようブランディング。その結果、オンラインによる寄付やサイトへのアクセスといった、主要なKPIの大幅な改善に成功しています。

このUIUX事例を手掛けた会社は…?
グッドパッチ
グッドパッチ会社イメージ

引用元:株式会社グッドパッチ(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)

SEARCH

事例からUIUXデザイン会社を探す

あなたがUIUXデザイン会社に求めるのはどんな仕事ですか?「アプリやシステムを開発したい」「新規事業のブランディングを相談したい」「社内のDXを推進したい」……。あなたが期待する“こんな実績やノウハウを持っているUIUXデザイン会社”を、各社の事例から見つけましょう!