概要
5年前に制作したHTML+WordPressサイトの全面リニューアル。会社の体制変更に合わせ、デザインとコンテンツを刷新し、統一されたWordPress環境に移行。
コンセプト・デザイン
ブランディング強化を目指すクライアントの要望に応え、動きのあるインタラクティブなサイトを提案。BtoBという性質上、見た目は落ち着いたデザインを保ちながら、随所に遊び心のある動きを実装した実験的なアプローチを採用。
フルスタック開発（単独担当）
-
インフラ: サーバー選定・構築、ドメイン取得・設定から環境構築まで
-
Three.js 3Dアニメーション: 背景canvasに配置した3D空間でクライアントゆかりのオブジェクトを散布。Blenderでのモデリング、Photoshopでのテクスチャ制作から実装まで一貫して担当
-
GSAP スクロールエフェクト: 横スクロール移動、スクロール連動の変色効果、パララックスなど多彩なアニメーションを実装
-
JavaScript: マルチステップフォームの状態管理、戻り機能の実装、細かなボタンインタラクションなど、ユーザビリティを重視した動作設計
-
バックエンド設計: ACFを活用したカスタム投稿・フィールドで、非エンジニアでも直感的に操作できる管理画面を構築
-
複合フォームシステム: 商品形態を3カテゴリに分けた3重アコーディオン式見積もりフォーム。確認画面からの戻り時も入力状態を保持するUX設計
-
運用・保守: 継続的な運用サポートも担当
制作体制・期間
-
制作期間: 約6ヶ月
-
体制: デザイナー1名、クライアント担当者との連携により、技術面・インフラ面を一貫してリード
特徴
WordPressフルスタック開発により、サーバー環境からフロントエンド表現、バックエンド運用まで一気通貫で対応。WordPressの枠を超えた実験的なサイトでありながら、長期運用を見据えた堅実な設計を実現。
技術スタック
-
フロントエンド: HTML5, CSS3, JavaScript, GSAP, Three.js
-
バックエンド: WordPress, PHP, ACF
-
3D制作: Blender, Photoshop
-
インフラ: サーバー構築、ドメイン管理
-
セキュリティ: 基本的なセキュリティ対策、スパム対策実装
-
SEO: 基本的なSEO対策実装はしたが、ギミックの多さからGoogle insightのスコアに問題がある。ある程度の期間の後サイトの軽量化を低コストで可能にする設計とし、まずはフォント制御などから解決へ動く予定。（Googleフォントは見かけはいいんだけどいつもネックになる。）