このたび、株式会社デパート（東京都港区）は、2025年6月22日に創業10周年を迎えました。
多くのご支援・ご愛顧に感謝の意を込めて、長年の歩みを振り返るとともに今後のビジョンを可視化し、デパートという会社をより深く理解してもらうことを目的とし、周年記念の特設サイトとして、Web上にデパートを建てることにしました。
[画像1: https://prcdn.freetls.fastly.net/release_image/40772/16/40772-16-a8e712e75951daac14027cbe1876cd3e-1440x779.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
特設サイトはこちら
＼￥ 我々のデパートへ、どうぞお立ち寄りください /／
10周年にちなんだ「10個のコンテンツ」で構成。近年注目が高まるAI技術の活用と、没入型の3Dデザインに挑戦すべく、React Three Fiberを活用したWebサイトの実装を行い、“百貨店”をモチーフにしたビジュアルで楽しみながら弊社の魅力に触れていただけます。
ポイント
- ユーザー体験と没入感
- 3D空間を使ったインタラクティブなサイト構築
- AIエージェントを活用した適職診断
ユーザー体験と没入感10周年という節目にふさわしい“特別な体験”を届けるため、サイト全体は「ワクワク感」と「没入感」をテーマに設計を行っております。本サイトの大きな特徴は3D表現によるエンターテイメント性。
3Dならではの魅力は、ディスプレイの中に奥行きが生まれ、さらに自分で視点を動かすことでインタラクティブな体験が可能になる点です。
全体としては、百貨店のフロアをぐるりと見回したりフロア間を移動するような構成を採用し、訪れた人が自然と企業の世界観を楽しみながら理解できる設計にしています。3Dは平面デザインと違い、360度回転させたりズームして細部まで見ることができます。これはとても自由度が高くできることが増える反面で、ユーザーがどこで何をすべきか迷う可能性が高くなる懸念があります。そこで今回は、視点をあえて固定し、「ぐるりと見渡す」ような動きに制限。
自由度を持たせつつも、ストレスのない体験導線となるよう工夫しています。
[画像2: https://prcdn.freetls.fastly.net/release_image/40772/16/40772-16-abebb607f31101cf6a76528f7413c265-1440x779.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
また、画面のドラッグ操作が難しいユーザーにも配慮し、誰でも楽しめるような使いやすいUI設計を行いました。
3D空間を使ったインタラクティブなサイト構築フロアの3D空間はBlenderで制作したモデルを使用し、React Three Fiberを用いてWeb上に構築しました。
パフォーマンスと表現のバランスを取りつつ、UI設計と連携した3D体験を実現しています。
[画像3: https://prcdn.freetls.fastly.net/release_image/40772/16/40772-16-47de9e927a609b2411292743edc652e4-1440x900.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
AIエージェントを活用した適職診断ユーザーが選択肢に答えることで、自分に合った職種を診断してくれるAIエージェントを活用した体験型コンテンツを用意しています。
従来の診断コンテンツでは、ルールの組み合わせによる条件分岐での診断が一般的でしたが、今回の診断コンテンツでは、大規模言語モデル（LLM）の推論能力を活用しています。
また、デパート社員による実際の回答データとも照らし合わせ、「あなたの回答パターンは、この職種の回答傾向に最も近い」といった、知識とデータに基づいた総合的な適職診断を提供しています。
[画像4: https://prcdn.freetls.fastly.net/release_image/40772/16/40772-16-7676dc9377e7c6a4f21e5a23e0b8362d-1440x779.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
特設サイトはこちら
＼￥ 我々のデパートへ、どうぞお立ち寄りください /／
想いのぎっしり詰まった、制作秘話も同時公開中制作秘話
株式会社デパート10周年プロジェクトの全容をご紹介します！
https://depart-inc.com/blog/depart-10th-project/
デザイナー制作秘話
3Dサイトのデザインフロー【デパート10周年記念サイト】
https://depart-inc.com/blog/depart-10th-3d-design/
エンジニア開発秘話
デパート10周年記念サイトでMastraを使ってAIエージェントを開発した
https://note.com/kerm/n/n4fee8ab2436e
React Three Fiberがステキ
https://note.com/mai_depart/n/na28e392b063c
ブラウザ上でも3Dモデルを綺麗に表示！Blender×Three.jsでテクスチャベイクをやってみた
https://note.com/mai_depart/n/nb574b7ce8194
Blender×React Three FiberでWebサイト上で3Dモデルをアニメーションさせてみた
https://note.com/mai_depart/n/n6c6b1efe83e1
最後にこれからも我々のミッションであるGood Design, Good Experienceを実行し、
心ゆさぶる体験をお届けするとともに、イイDesignでイイ社会の実現を目指してまいります。
今後ともご愛顧のほど、よろしくお願いいたします。
周年企画や、AI活用や3D表現を活用したWebサイトにご興味がございましたら、お気軽にお問い合わせください。
お問い合わせはこちら
イイDesignでイイ社会を実現する。
【株式会社デパート】
株式会社デパートは、東京青山にある、設計力と表現力でブランドづくりを支援するWeb制作会社です。Web制作を主軸に企画戦略からシステム開発・運用保守まで幅広くサービスを提供しています。企画戦略ではヒアリングやリサーチを重視し、デザイン業務においてはグラフィック開発からUXを重視したUI設計、インタラクションの実装まで、様々な面で「コミュニケーション」を生み出すことを得意としています。
[表: https://prtimes.jp/data/corp/40772/table/16_1_7f2993b387d56e21b1e7df4f4209128c.jpg?v=202507310816 ]企業プレスリリース詳細へ : https://prtimes.jp/main/html/rd/p/000000016.000040772.htmlPR TIMESトップへ : https://prtimes.jp
多くのご支援・ご愛顧に感謝の意を込めて、長年の歩みを振り返るとともに今後のビジョンを可視化し、デパートという会社をより深く理解してもらうことを目的とし、周年記念の特設サイトとして、Web上にデパートを建てることにしました。
[画像1: https://prcdn.freetls.fastly.net/release_image/40772/16/40772-16-a8e712e75951daac14027cbe1876cd3e-1440x779.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
特設サイトはこちら
＼￥ 我々のデパートへ、どうぞお立ち寄りください /／
10周年にちなんだ「10個のコンテンツ」で構成。近年注目が高まるAI技術の活用と、没入型の3Dデザインに挑戦すべく、React Three Fiberを活用したWebサイトの実装を行い、“百貨店”をモチーフにしたビジュアルで楽しみながら弊社の魅力に触れていただけます。
ポイント
- ユーザー体験と没入感
- 3D空間を使ったインタラクティブなサイト構築
- AIエージェントを活用した適職診断
ユーザー体験と没入感10周年という節目にふさわしい“特別な体験”を届けるため、サイト全体は「ワクワク感」と「没入感」をテーマに設計を行っております。本サイトの大きな特徴は3D表現によるエンターテイメント性。
3Dならではの魅力は、ディスプレイの中に奥行きが生まれ、さらに自分で視点を動かすことでインタラクティブな体験が可能になる点です。
全体としては、百貨店のフロアをぐるりと見回したりフロア間を移動するような構成を採用し、訪れた人が自然と企業の世界観を楽しみながら理解できる設計にしています。3Dは平面デザインと違い、360度回転させたりズームして細部まで見ることができます。これはとても自由度が高くできることが増える反面で、ユーザーがどこで何をすべきか迷う可能性が高くなる懸念があります。そこで今回は、視点をあえて固定し、「ぐるりと見渡す」ような動きに制限。
自由度を持たせつつも、ストレスのない体験導線となるよう工夫しています。
[画像2: https://prcdn.freetls.fastly.net/release_image/40772/16/40772-16-abebb607f31101cf6a76528f7413c265-1440x779.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
また、画面のドラッグ操作が難しいユーザーにも配慮し、誰でも楽しめるような使いやすいUI設計を行いました。
3D空間を使ったインタラクティブなサイト構築フロアの3D空間はBlenderで制作したモデルを使用し、React Three Fiberを用いてWeb上に構築しました。
パフォーマンスと表現のバランスを取りつつ、UI設計と連携した3D体験を実現しています。
[画像3: https://prcdn.freetls.fastly.net/release_image/40772/16/40772-16-47de9e927a609b2411292743edc652e4-1440x900.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
AIエージェントを活用した適職診断ユーザーが選択肢に答えることで、自分に合った職種を診断してくれるAIエージェントを活用した体験型コンテンツを用意しています。
従来の診断コンテンツでは、ルールの組み合わせによる条件分岐での診断が一般的でしたが、今回の診断コンテンツでは、大規模言語モデル（LLM）の推論能力を活用しています。
また、デパート社員による実際の回答データとも照らし合わせ、「あなたの回答パターンは、この職種の回答傾向に最も近い」といった、知識とデータに基づいた総合的な適職診断を提供しています。
[画像4: https://prcdn.freetls.fastly.net/release_image/40772/16/40772-16-7676dc9377e7c6a4f21e5a23e0b8362d-1440x779.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
特設サイトはこちら
＼￥ 我々のデパートへ、どうぞお立ち寄りください /／
想いのぎっしり詰まった、制作秘話も同時公開中制作秘話
株式会社デパート10周年プロジェクトの全容をご紹介します！
https://depart-inc.com/blog/depart-10th-project/
デザイナー制作秘話
3Dサイトのデザインフロー【デパート10周年記念サイト】
https://depart-inc.com/blog/depart-10th-3d-design/
エンジニア開発秘話
デパート10周年記念サイトでMastraを使ってAIエージェントを開発した
https://note.com/kerm/n/n4fee8ab2436e
React Three Fiberがステキ
https://note.com/mai_depart/n/na28e392b063c
ブラウザ上でも3Dモデルを綺麗に表示！Blender×Three.jsでテクスチャベイクをやってみた
https://note.com/mai_depart/n/nb574b7ce8194
Blender×React Three FiberでWebサイト上で3Dモデルをアニメーションさせてみた
https://note.com/mai_depart/n/n6c6b1efe83e1
最後にこれからも我々のミッションであるGood Design, Good Experienceを実行し、
心ゆさぶる体験をお届けするとともに、イイDesignでイイ社会の実現を目指してまいります。
今後ともご愛顧のほど、よろしくお願いいたします。
周年企画や、AI活用や3D表現を活用したWebサイトにご興味がございましたら、お気軽にお問い合わせください。
お問い合わせはこちら
イイDesignでイイ社会を実現する。
【株式会社デパート】
株式会社デパートは、東京青山にある、設計力と表現力でブランドづくりを支援するWeb制作会社です。Web制作を主軸に企画戦略からシステム開発・運用保守まで幅広くサービスを提供しています。企画戦略ではヒアリングやリサーチを重視し、デザイン業務においてはグラフィック開発からUXを重視したUI設計、インタラクションの実装まで、様々な面で「コミュニケーション」を生み出すことを得意としています。
[表: https://prtimes.jp/data/corp/40772/table/16_1_7f2993b387d56e21b1e7df4f4209128c.jpg?v=202507310816 ]企業プレスリリース詳細へ : https://prtimes.jp/main/html/rd/p/000000016.000040772.htmlPR TIMESトップへ : https://prtimes.jp
編集部おすすめ
