仮想都市空間を舞台にした直感型UI/UXの探求「BBtown 2003」コンセプトデザイン
2000年代初頭のブロードバンド黎明期、インターネットは大容量データを瞬時に扱える次世代インフラへと変貌を遂げつつありました。本プロジェクト「BBtown 2003」は、大手IT企業からの依頼に基づき、「仮想の都市（マチ）をつくる」という壮大なテーマのもと、多様なデジタルコンテンツを有機的に内包する先進的なWebサイトのコンセプト案です。 当時、エンターテインメント、EC、教育などの広範なサービスを個別に見せるのではなく、ユーザーが「街を散策する」という空間的なメタファーを通じて直感的にアクセスできるインターフェースの構築を目指しました。 ここに掲載している手書きスケッチは、複雑な情報設計（インフォメーションアーキテクチャ）を視覚的なストーリーへと昇華させ、デザインの思想や体験の方向性を見出すために重ねられた最も初期の思考の軌跡です。空間メタファーがもたらす情報整理と体験の連続性
本サイトの最大の挑戦は、多岐にわたる施設や機能を一つの画面の中に破綻なく配置し、ユーザーに迷いのないナビゲーションを提供することでした。 街の中に予定されていた施設は、学校やカルチャースクールといった「教育」、音楽ライブ、テレビ・映画、書籍・図書館などの「エンタメ・メディア」、そしてチケット販売や通販、旅行といった「ライフスタイル・EC機能」まで、現代のプラットフォームに匹敵する膨大なラインナップでした。 これらを従来のポータルサイトのような階層型のテキストリンクで羅列しては、ブロードバンドがもたらす「新時代への没入感」が損なわれます。 視覚的な「都市」のビジュアルをメインUIに採用することで、ユーザーはスタジアムを見ればスポーツやライブを、神殿風の建物をみれば図書館やアカデミックなコンテンツを連想します。 記号論に基づいたこのアプローチにより、説明不要で次の行動を誘発するアフォーダンスの高いインターフェースを実現しています。手書きスケッチによる徹底的なユーザー体験のシミュレーション
デジタルでの構築前にこれほど緻密な手書きパースや画面遷移のスケッチを重ねたのは、ユーザーの視線の動きと認知負荷を徹底的に検証するためです。 都市全体の俯瞰図から、個別の「ストリート（BBStreet）」や「世界地図（BBWorld）」への連続的なカメラワークなど、画面が切り替わる際のロジックをスケッチ上でシミュレーションしています。 たとえば、円形闘技場（コロシアム）構造の施設では、3D空間的な奥行きを持たせながらも、右側には整然とした情報リストや選択ボタンを配するなど、情緒的なビジュアルと機能的な実用性のバランスを1画面ごとに検討しています。 これにより、クライアントと「ユーザーがどのような感情でこの街を歩くのか」というUXの目線を初期段階で強固に一致させました。「BBtown 2003」におけるUI/UXデザインのコア・バリュー
本コンセプト案の設計において、特に重視したデザインの本質的な強みは以下の通りです。- 認知の最適化を図る空間的インフォメーションアーキテクチャ：多様なコンテンツ（EC、メディア、教育）を直感的な都市の施設へとマッピングし、ユーザーの検索負荷を軽減。
- 情緒的エンゲージメントを高める世界観のブランディング：手書きのパースやストリートビューの概念を取り入れ、訪問すること自体が楽しくなる「デジタルな居場所」を構築。
- 機能性と視覚表現を両立させるハイブリッドUI：ダイナミックな構図を用いつつ、操作系（ナビゲーション、詳細テキスト）は既存のWeb標準に配慮した配置を徹底。
デジタル空間における「体験設計」の原点として
「BBtown 2003」のコンセプト設計は、技術的な制約が多かった時代だからこそ、「人間が情報をどのように知覚し、どのように楽しむか」というUI/UXデザインの原点に誠実に向き合ったプロジェクトです。 都市を模したWebデザインというアプローチは、現在のメタバースや空間コンピューティングの先駆けとも言える思考に基づいています。 表面的な美しさを整えるだけでなく、ビジネスの目的とユーザーの心理を結びつける「なぜ」を具現化するブランディングおよびUI/UXデザインを一貫して提供しています。 大規模なポータルサイトから、独自のコンセプトを持つブランドサイトまで、体験の深みを追求するWebサイト構築に貢献いたします。Exploring Intuitive UI/UX Set Against a Virtual Urban Space: “BBtown 2003” Concept Design
In the early 2000s, during the dawn of the broadband era, the Internet was transforming into a next-generation infrastructure capable of handling large capacities of data instantaneously. Based on a request from a major IT enterprise, this project, “BBtown 2003,” is an advanced website concept proposal under the grand theme of “creating a virtual town (machi)” that organically encompasses diverse digital content. At the time, rather than showing extensive services like entertainment, e-commerce, and education individually, we aimed to construct an interface that users could access intuitively through the spatial metaphor of “strolling through a town.” The handwritten sketches displayed here are the trajectories of our earliest thoughts, stacked to sublimate complex information architecture into a visual story and to find the design philosophy and the direction of the experience.Information Organization and Continuity of Experience Brought by Spatial Metaphors
The ultimate challenge of this site was to position multifaceted facilities and functions within a single screen without disruption, providing users with confusion-free navigation. The facilities planned inside the town represented an enormous lineup comparable to modern platforms, ranging from “education” such as schools and culture centers, to “entertainment & media” including live music, television/movies, and books/libraries, as well as “lifestyle & e-commerce functions” such as ticket sales, online shopping, and travel. Enumerating these via hierarchical text links like conventional portal sites would compromise the “sense of immersion into a new era” brought by broadband. By adopting visual “urban” imagery for the main UI, users associate stadiums with sports or live events, and temple-style buildings with libraries or academic content. This semiotics-based approach realizes a highly affordant interface that triggers the next action without requiring explanation.Thorough User Experience Simulation Through Handwritten Sketches
The reason we stacked such detailed handwritten perspectives and screen transition sketches prior to digital construction was to thoroughly verify the movement of the user’s eye and cognitive load. Logic for when the screen switches—such as sequential camera work from a bird’s-eye view of the entire city to individual streets (“BBStreet”) or a world map (“BBWorld”)—is simulated upon the sketches. For instance, in a facility with an amphitheater (colosseum) structure, while providing a 3D spatial depth, we allocated orderly information lists and selection buttons on the right side, evaluating the balance between emotional visuals and functional utility for each individual screen. Through this, we firmly aligned the UX perspective with the client at an early stage regarding “what kind of emotions users will feel while walking this town.”Core UI/UX Design Values in “BBtown 2003”
In engineering this concept proposal, the essential design strengths we particularly emphasized are as follows:- Spatial Information Architecture Optimizing Cognition: Mapping diverse content (e-commerce, media, education) onto intuitive urban facilities, reducing the user’s search load.
- Worldview Branding Elevating Emotional Engagement: Incorporating concepts of handwritten perspectives and street views, constructing a “digital place to belong” where the visit itself becomes enjoyable.
- Hybrid UI Balancing Functionality and Visual Expression: Enforcing placements for operational systems (navigation, detailed text) that respect existing web standards while utilizing dynamic compositions.
As the Origin of “Experience Design” in Digital Spaces
The concept engineering for “BBtown 2003” is a project that honestly faced the origins of UI/UX design—”how humans perceive and enjoy information”—precisely because it was an era with many technical constraints. The approach of web design mimicking a city is based on thinking that can be called a forerunner to current metaverses and spatial computing. Moving beyond merely adjusting superficial beauty, we consistently deliver branding and UI/UX designs that materialize the “why” connecting business objectives with user psychology. From large-scale portal sites to brand sites possessing unique concepts, we contribute to website construction that pursues the depth of experiences.■ 本WEBサイトに掲載されている、会社名、商品名、サービス名、ブランド名、ロゴマーク、サービスマーク、スローガン、キャッチコピー等の著作権・商標権は、各権利所有者に帰属します。■ 本コンテンツは、著者の制作実績およびスキルの紹介を目的として掲載しており、権利を侵害する意図はございません。■ 制作実績のうち、直接取引以外の案件につきましては、広告代理店、コンサルティング会社、制作会社等のパートナー企業様との提携、あるいは仲介による制作実績となります。■ 本ポートフォリオへの掲載に問題がある場合は、お手数ですがお問い合わせフォームよりご連絡ください。迅速に対応をさせていただきます。
