We have completely redesigned the official フォーク website.
With a simple design and the integration of advanced front-end and back-end technologies, we have aimed to create a website that is easy to view and comfortable to use.
Key highlights of the renewal include:
Improved Loading Speed
In recent years, we have received more requests to improve website performance, which directly affects conversion rates. We are also increasingly asked to achieve high scores on Lighthouse as a benchmark during renewals. In this renewal, we designed and implemented the site to achieve a Lighthouse performance score of 95 or higher (※1).
※1 Measured on desktop (1280x720). Scores may vary depending on the user’s environment.
Simplified Content Updates
While conventional CMS platforms let users update websites without specialized knowledge, we often hear that customization takes time or that admin screens are slow. In this renewal, we have implemented a system that allows for easy updates via Google Sheets. By utilizing Looker Studio (formerly Data Studio) and form functions, we have achieved both high performance and robust security.
Technical Initiatives
PWA
This site is built as a PWA (Progressive Web App), allowing it to be installed like a mobile app and used even when offline.
Firebase Platform
By leveraging Firebase, Google’s platform for mobile and web applications, we have established a CI (Continuous Integration) environment for production, staging, and development integrated with GitHub. By utilizing Hosting, Functions, Cloud Run, Firestore (database), Storage, and Remote Config (for A/B testing), we can build infrastructure that handles heavy loads quickly and cost-effectively.
Data Management via Spreadsheets and Markdown
Rather than using a traditional administrative dashboard for content updates, we enter Markdown text in Google Sheets, and the browser converts it to HTML for display. We use WebAssembly (markdown-wasm) for this conversion, making it significantly faster than traditional JavaScript execution.
Static Delivery via Firestore Bundles
While the content data is stored in Firestore as a database, we do not read from it every time a page is requested. Instead, we generate static data files (bundles) in advance to ensure faster loading speeds and enhanced security.
Web Components
For the front end, we use the Lit library, developed by Google, to create Web Components. This gives us a fast site, simpler code, and high maintainability.
Automatic Text Layout with BudouX 🍇
Because this site is responsive, we use the BudouX library to automatically place line breaks at optimal points for each device’s screen width.
About Our Digital Transformation Services
As for content, we now feature service details and case studies for our Digital Transformation Services, which we launched last year. This marks our first step from being a Web production company to becoming a Digital Solution Company. We look forward to showing you the new フォーク.