project

A&F Corporate Website

戻る

Mission & Goals

2014年に aandf.co.jp のリニューアルに携わり、ここまで10年近く更新と進化を続け、1サイトから関連するブランドの商品のデータベースまでを管理するサイトとなりました。 スマホが浸透していく中でサイトの利用目的なども変わってきたため、よりモバイルファーストで、パフォーマンスの良いWebサイトへ進化させる必要がありました。 今回のリニューアルでは、PHPのフレームワークは、Laravelへ変更、フロントエンドのJSフレームワークは、Laravelとの相性の良さからVueJSを選択。 10年近く構築しつづけたPHPとjQueryを多用したサイトが、VueJSとInertiaJSを利用した、Server Side Rendering を備えた高速Webサイトとなりました。

Frameworks & Libraries

Laravel
InertiaJS
VueJS
TailwindCSS
PHP
MySQL
HTML5
CSS3
JavaScript
Node.JS
AWS
Cloudflare

Technologies

  1. Headless CMS | Content Management System:
    PHP、Larminas Frameworkと、jQuery、VueJSを利用したフルカスタムされたヘッドレスCMSが採用されており、フロントエンドと完全に切り離して構築されています。

  2. Server-side rendering:
    JSフレームワークを利用するにあたり、一般的なWebサイトではSEOに支障がでるため、SNSやアプリ以外での導入はあまり進んできておりませんでしたが、この度、PHPとNode.JSを利用したServer Side Rendering を実現、SEOをしっかり保持しつつ、SPA/MPAのようにページロードの回数やアセットの読み込み回数などが減り、サーバーへの負荷が減り、ユーザーのスマホのバッテリーにも優しい、エコなサイト構造をデザインしました。

  3. Sustainable structure:
    早い段階からHeadlessCMSを導入したこと、MySQLをつかったフレキシブルなテーブル構造は、サイト構築から10年近くたっても、コンテンツ自体は活かしたまま、効率よくフロントエンドのみ更新することができました。 サイトに合わせてコンテンツを作るわけではなく、コンテンツにあわせたWebサイトの構造を目指しているため、バックエンドやコンテンツはそのままでリニューアルを行うことができます。