ピーキナ株式会社
コーポレートサイト
粒子で描くブランドマークと、スクロールに連動する演出。表現でブランドを伝えるコーポレートサイト
プロジェクト概要
「戦略策定だけでなく実行まで担う」というピーキナ株式会社の姿勢を、サイトの表現そのもので伝えることを目指しました。
WordPressに React と WebGL を載せ、テンプレートでは届かない表現を実装しています。ファーストビューでは粒子がブランドマークを形づくり、スクロールに連動して人材戦略・経営支援・空間創出の3領域へと切り替わります。
表現を作り込みながらも、更新はこれまでどおりCMSから行える構成を保っています。見せ方のために運用を犠牲にしない、というのが設計の前提でした。
Project Points
プロジェクトの3つのポイント
WordPressにReactとWebGLを載せる
ブランドマークを粒子で描く表現は、通常のWordPressテーマの範囲では成立しません。React と Three.js で組んだ描画を単一バンドルとして子テーマに組み込み、CMSとしての更新性を保ったままWebGLの表現を成立させました。
演出の発火順をスクロールで制御
ファーストビューのアイリスアニメーションが完了するまで背景セクションを固定し、完了を待ってからMissionセクションの演出を発火させています。複数の演出が重ならないよう、順序そのものを設計しました。
ライブラリに頼らず挙動を再現
ハンバーガーメニューの円形展開は、Framer Motionの挙動をバニラのCSSとJavaScriptで再現しています。あわせてブレークポイントも約55箇所を自社設計へ移行し、依存を減らしました。
Screenshots
主要画面のデザイン
ファーストビュー
粒子がブランドマークを形づくり、人材戦略・経営支援・空間創出の3領域を色の切り替えで表現
Missionセクション
背景に大きく流れる文字と、スクロールに連動して立ち上がる本文
事業内容ページ
3つの事業領域を体系として見せ、実行まで一貫して担う姿勢を伝える
あなたのビジネスも変革しませんか？
見せ方のために運用を犠牲にしない。表現と更新性を両立させます