

- Share On
目次
2024年、株式会社デパートは創業10周年を迎えました。これまで支えてくださった皆さまへの感謝を込めて、今後のビジョンや強みを発信する10周年記念サイトを制作しました。
https://depart-inc.com/10th-anniversary/
このプロジェクトの全体像は、先日開催された YGVS(弊社の親会社であるYUIDEA https://yuidea.co.jp/ と行っている、グループ内インターネットライブ配信)でも紹介され、コンセプトや制作の裏側についてグループ内で共有されました。
本記事では、その内容をあらためてまとめ、記念サイトに込めた想いや各コンテンツの意図、今後の展開までをご紹介します。
10周年記念サイトの目的と設計
デパートにとって10周年という節目は、これまでの歩みを振り返ると同時に、次の10年へのスタート地点でもあります。今回の記念サイトは、単なるお祝いではなく、「これからのデパートをどう伝えるか」という視点を重視して設計されました。
社員・お客さま・求職者といった多様なステークホルダーに向けて、感謝の気持ちや企業としての強み、今後のビジョンを可視化し、デパートという会社をより深く理解してもらうこと。それが本記念サイトの大きな目的です。
社員向け
過去10年間の歩みを振り返るとともに、代表メッセージやインタビューを通して会社への理解と帰属意識を深める内容に仕上げました。
お客さま・パートナー企業向け
これまでご一緒させていただいたお客さまやパートナー企業に向けて、私たちが培ってきた「デザイン力」「技術力」「対応力」といった強みを、信頼感をもって伝えることを重視しました。単なる実績の列挙ではなく、どんな姿勢で仕事に取り組み、どんな価値を提供してきたのかを、ビジュアルとコンテンツを通じて立体的に表現しています。
求職者向け
“働く場所としてのデパート”を伝えることで、「一緒に仕事がしたいな」と感じていただけるよう、社内イベントやインタビューも積極的に取り入れました。
10周年にちなんだ「10個のコンテンツ」で構成し、デパートの社名の由来である“百貨店”をモチーフにした立体的なビジュアルで、楽しみながら弊社の魅力に触れていただけます。
制作の裏側:テーマとテクニック
キービジュアルと体験設計
10周年という節目にふさわしい“特別な体験”を届けるため、記念サイト全体は「ワクワク感」と「没入感」をテーマに設計しました。
デパートの社名の由来である百貨店のフロアをぐるりと見回したりフロア間を移動するような構成を採用し、訪れた人が自然と企業の世界観を楽しみながら理解できる構造になっています。
制作は以下のステップで進行しました。
miroでの言語化・整理
「デパートらしさ」や構成の方向性について社内で丁寧に議論・可視化しました。
デザイン〜モック制作
・Photoshopによる設計
・Blenderでの3Dモック作成
・モックに動きもつけることで具体的な実装イメージを共有
UI設計
・ユーザーの視点はあえて固定し、ぐるりと見渡すような体験を設計
・1フロアあたりリンクは2つまでにし、遊び要素も1〜2点に絞ることで情報過多を防ぎつつ自然な回遊を促進
ビジュアル表現
こうして完成した記念サイトは、「見る」だけでなく「体験しながら理解できる」、まさに“デパートらしい”周年コンテンツとなりました。
実装技術
Next.js:ReactベースのWebアプリケーションフレームワーク
three.js:3D表現の中核ライブラリ
React Three Fiber:Reactベースでthree.jsを使えるラッパーライブラリ
Blender:3Dモデリング制作に使用
Magica Voxel:アバター作成に使用
Mastra:AIエージェント開発のフレームワーク
弊社エンジニアの技術ブログもご参考ください
デパート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
制作段階では、miroでの言語整理から始まり、Photoshopによる平面設計、そしてBlenderでの3Dモックアップ作成と、段階的かつ丁寧なワークフローを実施。デパートエンジニアの実装技術によって、設計以上の表現力が実現しました。
各フロアのコンセプトと内容紹介
エントランス
1階:代表メッセージ・強み訴求フロア
2階:歴史と成長を可視化するフロア
3階:制作実績・技術ブログフロア
4階:おもしろフロア(AI・クエスト)
5階:インタビュー・イベント報告フロア
エントランス
10周年の象徴であり、導入部としての役割を担う空間。近未来の百貨店をイメージしたビジュアルで、3D空間への没入感を演出しています。エントランスから自然と次のフロアに入っていけるよう、滑らかな3Dアニメーションによる導線設計にもこだわりました。
1階:代表メッセージ・強み訴求フロア
信頼感と、自社の「らしさ」を伝える起点。「代表メッセージ」フロアの代表・東からのメッセージは、これまで支えていただいた皆さまへの感謝の言葉と、これからの方向性についての想いが詰まったもの。また、「デパートのチカラ」フロアでは、デパートが大切にしてきた「安心感」「デザイン力」「技術力」を、石膏像を使ったアート的なビジュアルやタイポグラフィで直感的に伝えます。デジタルとアナログが融合した、まさに“デパートらしい”表現となっています。
2階:歴史と成長を可視化するフロア
過去10年の軌跡と、変化に対応し続ける柔軟性を提示。「デパート歴史館」フロアでは、Web業界の変遷を年表形式で見せつつ、そこに重ねる形でデパートの取り組みを紹介。「あの時代に、どんな選択をしてきたか」が見えてきます。テレワーク導入や多様な業界との取引実績の拡大、まるで博物館を回るように、楽しみながら情報が得られる空間です。「デパート成長録」フロアでは、グループ全体の成長も、社員のアバターを用いたインフォグラフィックで表現しました。
3階:制作実績・技術ブログフロア
具体的なアウトプットを通して、実力と信頼性を証明。
「クリエイティブ宝物庫」フロアでは、ピックアップされた実績、私たちの制作に関する考え方を発信しているデパートのブログ記事も掲載。「デパート研究所」では、日々進化するWeb技術を追求し続ける最前線で培ったデパートが、技術的な視点から書いたブログを紹介しています。
4階:おもしろフロア(AI診断・クエスト)
「楽しい」から始まる技術追求、AIと遊び心を融合。
AIを活用した「適職診断の館」フロアでは、ユーザーが選択肢に答えるだけで、自分に合った職種とその解説、関連する社内コンテンツへ導いてくれる体験型コンテンツ。生成AIによって導かれるキャラクターやアイコンも、視覚的な楽しさをプラスしています。また、「デパートクエスト」フロアと名付けられたクイズ型の回遊コンテンツは、サイト全体をしっかり読んだ人だけがクリアできる構成に。遊びながらデパートのことを深く知れる、仕掛けたっぷりのフロアです。
5階:インタビュー・イベント報告フロア
人を軸にしたストーリーテリングで、企業文化を浮き彫りに。
「メンバーの休憩室」フロアでは、これまでの10年を共に乗り越えてきた社員の声を集め、個々の考え方や価値観を紹介。チームや部門がどんな未来を描いているかというビジョンも垣間見ることができます。さらに、「イベントレポート」フロアでは、10周年を記念して開催された社内イベントの様子もを紹介しています。その様子を記録したスペシャルムービーは、デパートの空気感や楽しさをダイレクトに伝えてくれます。
今後の展望
10周年記念サイトは単なる社内外向けのお祝いコンテンツに留まりません。「イイDesignでイイ社会を実現する」というビジョンのもと、今回の10周年プロジェクトで得た知見や技術は、今後の案件への応用はもちろん、各種アワードへの出展など、積極的な対外展開にもつなげていく計画です。
制作秘話と裏話
プロジェクトの紹介だけでなく、ちょっとした制作秘話や裏話も飛び出しました。ここでは、そんなエピソードの一部を座談会形式でご紹介します。
メンバー:
若林(YUIDEA)|YGVS進行 今回のYGVS司会進行を担当。
末廣(デパート)|YGVS進行 同じく、今回のYGVS司会進行を担当。
伊藤(デパート)|ディレクター プロジェクト全体のディレクションを担当。企画立案からコンセプト設計、チームの進行管理など、一貫してプロジェクトをリードしました。
黒木(デパート)|ディレクター プロジェクト全体のディレクションサポート。主に、チームの進行管理を担当。
木川田(デパート)|デザイナー サイト全体のビジュアル設計をリード。企画初期から3Dモックまでを一貫して担当。
林(デパート)|デザイナー 各フロアのビジュアル作成、デザインを担当。
吉田(デパート)|エンジニア フロントエンド開発を担当。AI診断など新技術の実装も担いました。
福﨑(デパート)|エンジニア 3D表現やフロア移動など、ユーザー体験を支えるインタラクション設計を中心に実装を担当。
各メンバーの3Dイラストについて
YGVS進行 若林(YUIDEA):
とても可愛い社員アバターだなと思いました!実際にイラストを制作して、みなさんに確認してもらったとき、何か要望や意見はありましたか?みんなの反応も気になります(笑)
デザイナー 木川田(デパート):
正直、私もドキドキしながら確認してもらいました(笑)。でも、みなさんから「とても可愛いです!」「すごい!」といった声をいただけて、本当にホッとしました。代表の東さんにも「いいですね!」って言っていただけました。
YGVS進行 末廣(デパート):
いや〜、本当にみんなそっくりなんですよ(笑)。すごいなって思いました。ただ、実はひとりだけ、「この人はあんまり似てないかも…」って思った人がいて…
デザイナー 木川田(デパート):
えっ!?誰ですか!?
YGVS進行 末廣(デパート):
……ぼくです(笑)
デザイナー 木川田(デパート):
あ〜、男性の方は“髭”のあしらいがポイントだったりするんですけど…末廣さんは、いつも髭があったりなかったりなので、難しかったんですよね〜!
全員:
(笑)
4階おもしろフロアでの試行錯誤
YGVS進行 末廣(デパート): 「適職診断」フロアは、デザインだけでなく実装もかなり凝っていて、こだわった部分が多かったとききました。実際、やってみてどうでしたか?
エンジニア 吉田(デパート): 「適職診断」フロアの基本的な部分を担当したんですが、テストアップの段階で、何かが足りない気がしたんです。たとえるなら、“自分で作った料理なんだけど、何かが違う。プロの味にはまだまだ遠いな…”という感覚で。
それで、デザイナーの林さんに相談してみたんです。すると、林さんが本当にたくさんのアイディアを出してくれて、まさに“最高のレシピ”が出来上がったんですよ。でも、そのレシピを自分でちゃんと実装できるか…という不安もあって。
そこで、Kilala Communication(同グループのベトナム企業 https://kilala.com.vn/services/web-design-coding.html )のエンジニア Lamさんにお願いしたんです。そうしたら、彼が完璧なアニメーションで仕上げてくれて!もう「すごいものができたな」と、心から思いました。
Lamさんも、限られた時間の中で何度も試行錯誤してくれていて、その姿勢にも胸が熱くなりました。このコンテンツは、そんなふうにチームのみんなの力が集まって完成したものなので、私にとってもすごく思い出深いものになっています。
スマホでの表示について
YGVS進行 若林(YUIDEA): 3Dやアニメーションなど、色々な技術が盛り込まれたサイトだと思うのですが、スマホでも問題なく閲覧できるのでしょうか?
エンジニア 福﨑(デパート): もちろん、スマホでも問題なく閲覧できるように実装していましたが、公開直前になって「iPhoneだとうまく表示されない」というフィードバックがプロジェクトチーム内から上がってきました。わたし自身がiPhoneの実機を持っていなかったため、それまでまったく気付かず…このタイミングでの発覚に正直焦りました。原因はiOSやSafariの仕様によるものでした。そこからは、まさに根性で(笑)、1週間ほどかけてデータを修正したり、計算量を減らしたりと調整を重ね、なんとか今の“ぬるぬると動く”サイトにまで仕上げることができました。なので…iPhoneユーザーの方はぜひみていただけたらな、と思っています。
クライアントワークとこのプロジェクトのかけもちについて
YGVS進行 若林(YUIDEA): みなさん、忙しい中、このプロジェクトを進めていたと思うのですが、クライアントワークとの両立とか、モチベーションの維持など、大変ではなかったですか?
ディレクター 伊藤(デパート): やはりクラアントワークを優先しなければいけない大変さもあり、中々大変でした。実を言うと、公開が半年ほど延びているんです。どうしても手が回らない時期もあったりして…でもその中でみんなの共通認識として「もうこれ以上は延ばせない、この日だけは守るぞ!」というのがあり…「もうここまできたらみんなで走り抜こう!」という感じで、根性と気合で乗り切った部分があります(笑)
YGVS進行 若林(YUIDEA): なるほど…その根性にプロ意識を感じました!
最後に
10周年という節目に、私たちが選んだのは「過去を振り返る」だけでなく、「未来を見据える」ためのプロジェクトです。デザイン、技術、コミュニケーション。それぞれの要素を掛け合わせ、百貨店のように“多層的な魅力”を届けるサイトに仕上げました。
ぜひ、実際の10記念サイトをご覧いただき、デパートという企業の現在地とこれからを体感してください。
https://depart-inc.com/10th-anniversary/
Contact
制作のご依頼やサービスに関するお問い合わせ、
まだ案件化していないご相談など、
お気軽にお問い合わせください。
- この記事をシェア