Sansan
Japanese business relationship platform for digitizing contacts, invoices, and enterprise connections.
살펴본 사이트: sansan.com · 공개 화면 기준
컬러 팔레트
Observation
The title, "Manage your contacts, maximize your business," is consistent across all provided pages. Headings for sections like "About Sansan," "Success Stories," and "About us" are also repeated. The content highlights business benefits and features named enterprise customers like "Konica Minolta Inc." and "DBJ Americas Inc."
Inference
The design follows a corporate, professional aesthetic aimed at a B2B audience. It uses a template-based approach to ensure brand consistency across the site. The prominent placement of customer logos and success stories is a deliberate design choice to build trust and social proof. The core design principle appears to be communicating value and credibility quickly.
Recommendation
To enhance user engagement, consider varying the primary headline and hero content based on the page's specific goal. For instance, the "Contact Us" page could feature a more action-oriented headline like "Let's build your future together." A valuable transferable pattern is "Contextual Messaging," where key visual and text elements are adapted to the user's immediate context, making the experience more relevant and persuasive. This avoids the impression that all pages are merely wrappers for the same core content.
Observation
The requirement is to build a professional, multi-language B2B marketing website. It needs to showcase products, pricing, and customer stories. It must integrate with analytics and provide clear calls-to-action, such as contacting sales or logging in.
Inference
This project requires a technology stack that is optimized for performance, SEO, and content management. A modern frontend framework is suitable for building a reusable component library. A backend is needed to manage content and handle form submissions. The infrastructure must support global delivery.
Recommendation
To build a similar site, I recommend a "Jamstack" approach, a common pattern for modern marketing sites.
- Frontend Framework: Use Next.js (built on React) for its excellent performance, static site generation (SSG) capabilities, and built-in internationalization routing.
- Content Management: Use a headless CMS like Contentful or Strapi. This allows marketing teams to update content easily without requiring developer intervention.
- Deployment: Deploy on a platform with a global CDN like Vercel or Netlify for fast load times worldwide and seamless CI/CD integration.
- Analytics: Integrate Google Analytics for user behavior tracking, a standard for marketing performance measurement.
Observation
The navigation links provide a clear list of the primary pages: Product, Features, Pricing, Success Stories, FAQ, News, About Us, and Contact Us. Utility pages include Log in, Sansan Academy, and Privacy Policy. The URL structure /en/ indicates a language-specific hierarchy.
Inference
The site's structure is a standard corporate marketing sitemap. There are top-level pages for each major section. It is highly probable that sections like "Success Stories" and "News" are index pages that link to individual detail pages for each story or article. The entire sitemap is duplicated for each supported language (e.g., /en/ and /jp/).
Recommendation
When creating the sitemap for a similar project, structure it hierarchically to reflect the relationships between pages. This is a best practice for SEO and user navigation. An example structure would be:
/ (Home)
├── /product
├── /features
├── /pricing
├── /success-stories
│ └── /success-stories/[customer-slug]
├── /about-us
├── /news
│ └── /news/[article-slug]
├── /contact
└── /faq
This pattern should be implemented for each language path (e.g., /en/product, /jp/product). Creating and submitting an XML sitemap with this structure to search engines is a crucial step for discoverability.
Observation
The navigation is extensive and consistent, featuring top-level links for "Product," "Features," "Pricing," "Success Stories," "FAQ," "News," and "About Us." Utility navigation includes "Log in," "Contact Us," and a language switcher ("EN," "JP"). Links to "Sansan Academy" and a separate product, "Bill One," are also present. The URL structure uses a language prefix, such as /en/.
Inference
The information architecture is structured to guide a potential B2B customer through a sales funnel, from awareness ("Product," "Features") to consideration ("Pricing," "Success Stories") and conversion ("Contact Us"). The IA is broad and flat, prioritizing direct access to many sections from any page. The /en/ path indicates a clear strategy for internationalization, separating content by language at the root level. The presence of "Bill One" suggests a multi-product company architecture.
Recommendation
Consider grouping related navigation items to reduce cognitive load. For example, "Product," "Features," and "Pricing" could be nested under a single "Solutions" dropdown menu. Similarly, "News," "About Us," and "Success Stories" could live under a "Company" or "Resources" category. This technique, known as creating a "Hierarchical Navigation," helps users by organizing choices into logical groups, making the site easier to scan and navigate, especially as the number of pages grows.
Observation
The provided text reveals several repeating elements across pages. There is a global navigation bar. There are distinct sections for customer testimonials, which are presented as a list of company names ("Mitutoyo Asia Pacific Pte. Ltd.," etc.). A video is mentioned ("Watch the video about Sansan"). Language selection ("EN", "JP") is available. A "Log in" button is consistently present.
Inference
The website is constructed using a component-based system. Key reusable components likely include a Header (containing the navigation and login button), a LanguageSwitcher, a CustomerLogoMarquee or TestimonialCard for success stories, and a VideoPlayer modal. This modularity ensures a consistent user interface and efficient development. The uncertainty is in the visual implementation of these components.
Recommendation
Formalize these inferred components into a documented Design System. A transferable pattern is to use a tool like Storybook to build, test, and document each UI component in isolation (e.g., Button, Card, Modal). This practice improves developer collaboration, accelerates UI development, and ensures visual consistency across the entire digital presence, including other products like "Bill One."
Observation
The only technology detected with high confidence (85%) is Google Analytics. The URLs (/en, /en/contact) are clean and do not have file extensions like .html. The site supports at least two languages, English and Japanese.
Inference
The use of Google Analytics is standard for a marketing website to track user behavior and campaign effectiveness. The clean URL structure suggests the use of a modern web framework with a routing system, rather than static HTML files. This could be a frontend framework like React or Vue, or a server-side framework like Ruby on Rails or Laravel. The backend is likely powered by a Content Management System (CMS) to manage the marketing content. Confidence in the specific frontend or backend technology is low due to the limited evidence.
Recommendation
To gain more certainty about a website's technology stack, a good transferable pattern is to use browser developer tools to inspect the source code for framework-specific attributes (e.g., data-react-id), check global JavaScript variables in the console (e.g., window.angular), and analyze the X-Powered-By header in network responses. This provides direct evidence that complements automated detection tools.
Observation
The website is structured with a clear separation between public-facing marketing content (Product, Features, Success Stories) and a private, authenticated user area ("Log in"). The system serves content in multiple languages, indicated by the /en/ URL prefix. It integrates with a third-party analytics service (Google Analytics).
Inference
The architecture is likely a traditional Multi-Page Application (MPA) where a server generates and serves distinct HTML pages for each URL. This server-side application probably uses a templating engine to render the consistent header and footer. Content for pages like "News" and "Success Stories" is likely managed in a backend Content Management System (CMS). The "Log in" link directs users to a separate application, possibly a Single-Page Application (SPA), which handles the core product functionality after authentication.
Recommendation
For future development or a rebuild, consider a "Headless" architecture. This pattern decouples the backend content management (the "body") from the frontend presentation layer (the "head"). A headless CMS would manage the content and deliver it via an API to a modern frontend framework (like Next.js or Gatsby). This approach improves performance, security, and developer flexibility, while also allowing the same content to be easily reused for other applications (e.g., a mobile app).
Observation
The company prominently features success stories from international clients in Asia and the Americas. They offer the site in both Japanese and English. They have chosen to link to another distinct product, "Bill One," in the navigation. They have also created an educational resource called "Sansan Academy."
Inference
A key strategic decision was to position Sansan as a global company, not just a Japanese one. This is supported by the multi-language site and the choice of international case studies. They have made a conscious decision to use social proof as a primary conversion tool. The decision to cross-promote "Bill One" indicates a strategy to build a multi-product ecosystem and leverage existing brand recognition. Investing in "Sansan Academy" reflects a decision to use content marketing and education to build authority and attract customers.
Recommendation
The decision to use customer stories is effective. To amplify this, create a more structured narrative for each story. A powerful, transferable pattern for case studies is the "STAR" method: describe the Situation the client was in, the Task they needed to accomplish, the Action they took (i.e., implementing Sansan), and the Result they achieved. This provides a clear, compelling, and data-driven story that is more persuasive than a simple logo.
