自社サイトをフルリニューアルしました
コーポレートサイトを全面リニューアルいたしました。
「テクノロジーで、地域の可能性を広げる」という私たちのビジョンを体現するため、デザイン・技術・コンテンツのすべてを一新。ブランドコンセプト「No Border」をサイト全体で表現した、新しいアルラボのホームページをぜひご覧ください。
目次
リニューアルの背景
旧サイトは情報発信を主目的としたシンプルな構成でしたが、近年のお客様からのご相談内容がWebサイト制作にとどまらず、Webアプリケーション・SaaS開発・LINEミニアプリ開発など多岐にわたるようになりました。
こうした事業の広がりを正しくお伝えするとともに、「アルラボに頼めばここまでできる」という技術力をサイトそのもので証明したい——そんな思いからフルリニューアルに踏み切りました。
採用した技術
今回のリニューアルでは、東京の大手クリエイティブエージェンシーやデザインアワード受賞サイトで用いられるような先端技術を積極的に採用しています。
Three.js(WebGL / 3Dグラフィックス)
トップページのファーストビューには、Three.jsによるリアルタイム3Dグラフィックスを実装しました。ブラウザ上でGPUを直接活用し、スクロールに連動してダイナミックに変化する3D空間を描画しています。プラグインやアプリのインストールは不要で、PCでもスマートフォンでもシームレスに体験いただけます。
GSAP + ScrollTrigger(高度なアニメーション制御)
ページ全体のアニメーションには、業界標準のアニメーションライブラリ「GSAP(GreenSock Animation Platform)」とそのプラグイン「ScrollTrigger」を採用しました。スクロールに応じた要素の出現、ページ間のスムーズなトランジション、カルーセルのドラッグ操作など、ユーザーの操作に自然に応答するインタラクティブな体験を実現しています。
WordPress + ACF Pro(柔軟なコンテンツ管理)
バックエンドにはWordPressを採用し、Advanced Custom Fields(ACF)Proによるカスタムフィールド管理を導入しました。制作実績やサービス情報をお客様ご自身で更新できる仕組みを整えており、高度なフロントエンド表現とCMSの運用性を両立させています。
ダーク/ライトテーマ切り替え
ユーザーの好みに合わせてダークモード・ライトモードをワンクリックで切り替えられる機能を実装しました。選択したテーマはブラウザに記憶され、再訪問時にも維持されます。すべてのページ・コンポーネントが両テーマに完全対応しています。
その他の技術要素
- カスタムページトランジション:ページ遷移時にアニメーションを挟むことで、サイト全体がひとつのアプリケーションのような一体感のある体験に
- reCAPTCHA v3:お問い合わせフォームにはGoogleのreCAPTCHA v3を導入し、ユーザーの操作を妨げることなくスパムを防止
- AJAX動的コンテンツ読み込み:お知らせのカテゴリフィルターなど、ページ遷移なしでコンテンツを切り替えるスムーズなUI
- 完全レスポンシブデザイン:PC・タブレット・スマートフォンのすべてのデバイスで最適な表示を実現
地域で唯一の技術スタック
今回のリニューアルにあたり、佐賀県内のWeb制作会社が自社サイトにどのような技術を採用しているか調査を行いました。
県内の制作会社の多くは、HTML/CSS/jQueryをベースとしたオーソドックスな構成、あるいはテンプレートベースのCMS構築が主流です。もちろんこれらは堅実で実用的なアプローチですが、Three.js(WebGL)による3D表現やGSAPによる高度なスクロールアニメーションを自社サイトに実装している制作会社は、当社の調査した範囲では佐賀県内に存在しませんでした。
Three.jsやGSAPを活用したWebサイト制作は、主に東京を拠点とするクリエイティブエージェンシー(ICS、LIG、mount inc.、BALANCeなど)がCSS Design AwardsやAwwwardsといった国際的なデザインアワードを目指す案件で採用する、いわば「都市部の先端技術」です。
アルラボは、こうした技術を佐賀から発信し、地域のお客様にもハイクオリティなWeb体験をお届けできることを、自社サイトを通じて実証しました。「地方だからここまではできない」という境界線を越える——まさに私たちのコンセプト 「No Border」 を体現するリニューアルです。
今後の展開
今回のリニューアルは終わりではなく、始まりです。今後は以下のアップデートを予定しています。
- 多言語対応(英語・韓国語):AIを活用したリアルタイム翻訳機能の導入を検討中
- 制作実績の継続的な追加:新しいプロジェクトの成果を随時公開
- 技術ブログの発信:今回のリニューアルで培った知見を記事として公開予定
R-LABSは、これからも佐賀から最先端のWeb技術を発信し続けます。Webサイト制作・Webアプリケーション開発・SaaS開発・LINEミニアプリ開発など、お気軽にご相談ください。