
MEER MOHSIN
スクロールを映画のカット割りとして設計したポートフォリオ。ヒーローもケーススタディもフッターも独立した1シーンになっている。
- クレジット
- Meer Mohsin
- 使用技術
- Three.jsGSAPHTML5スクロール連動ストーリーテリング
パキスタン・ラホールのフロントエンド開発者/UI・UXデザイナー Meer Mohsin の個人ポートフォリオ。自身を 3D Web Developer と名乗り、10件以上のプロジェクトを、発見からクリエイティブディレクション、実装、運用へという流れで見せています。
Awwwards の要素タグには Cinematic Hero Scroll Section、Case Study Scroll Experience、Cinematic Footer Experience が並んでおり、ヒーロー、ケーススタディ、フッターのそれぞれを独立した「シネマティックな1シーン」として設計しているのが分かります。技術タグは HTML5 / GSAP / Three.js。デスクトップ版とモバイル版で別バリエーションが登録されています。
【参考になるポイント】
・ページの上・中・下すべてにスクロール演出を仕込む構成。フッターまで演出対象にしているサイトは多くない
・デスクトップとモバイルで演出を作り分けている。3D演出をモバイルで単に無効化するのではなく、別バリエーションとして設計する方針
・OGP画像がサイトのスクリーンショットではなく本人の顔写真1枚(mohsin-face.jpg)。個人ポートフォリオの割り切り方として分かりやすい
・※Three.js の使われ方(どのセクションがWebGLで、どこがCSSとGSAPだけか)は未確認。バンドルの内容を取得できていない
・※2026年8月19日時点で Nominee。コミュニティ投票は 7.50 から 9.60 の幅
