Kuma.Code 公式サイト

「技術力」と「遊び心」が伝わる名刺代わりのサイト

フリーランスとして活動するにあたり、単なる作品集ではなく、
「この人に任せれば、何か面白いことができる」 と予感させるサイトが必要でした。
既存テーマ『Dawn』をベースにしつつも、中身はほぼフルスクラッチで改造。パフォーマンス（表示速度）を犠牲にせず、
サイバーパンクな世界観とリッチなアニメーションを両立させるという、難易度の高い実装に挑戦しました。

「実績＝商品」でメタフィールドをフル活用

通常、ポートフォリオ機能を作るにはブログや固定ページを使いますが、私はあえてShopifyの「商品」機能を流用する設計にしました。
これにより、標準の「商品メタフィールド」や「メディア管理」をそのまま実績管理に使えます。結果、管理画面の使いやすさはそのままに、
フロントエンドだけをLiquidで完全に書き換えることで、「更新はECの商品登録と同じくらい簡単」な環境を実現しました。

Vanilla JSによる「マイクロインタラクション」と「条件分岐」

動きにはライブラリを使わず、全て素のJavaScriptで記述。
cyber-boot-loader.jsではセッションストレージを使って「2回目以降はローディングをスキップ」させたり、
ヘッダーメニュー(header-mega-menu.liquid)では「英語|日本語」という文字列をLiquidで分割してバイリンガル表示にするなど、
ユーザー体験と運用性をコードレベルで作り込んでいます。

脱ライブラリの軽量設計により、演出を入れても表示速度を落とさない構成に。Shopifyの標準仕様に準拠したまま、フロントだけを作り替えたポートフォリオサイトです。