WORKS
Stories told through design.
ポートフォリオ
概要
映画のフィルム演出や立体的なアニメーションを取り入れたポートフォリオサイトのコーディングを担当しました。
トップのフルスクリーンスライダー、シネマティックな円形リビール、縦横に連動するフィルムライン、3D回転ギミック、タブ切り替えUIなど、多数のインタラクションを実装。大規模な CSS 設計とレスポンシブ最適化により、重厚な世界観を崩さず快適に閲覧できる構成を実現しました。
ターゲット
クリエイティブ性の高い表現を求めるクライアント・制作会社・Webディレクター。 インタラクション実装力・演出設計・UI構成力を見せることを目的としたポートフォリオ。
制作期間
14日
担当範囲
デザイン～コーディング
ツール/言語
テーマ
映画的世界観、重厚感、没入感、クリエイティブ、立体感、シネマティック演出
コンセプト
「映像的な没入感で、クリエイティブの深度を伝える」
映画フィルムの質感や光の表現をサイト全体に取り入れ、閲覧体験そのものが “作品を見る体験” となるよう設計。
トップの円形リビールアニメーションやランダムなフィルムノイズ、動きに合わせて変化するタイトルアニメーションなど、視覚的な没入感を重視。演出過多にならないよう、情報整理・動線設計は極めてシンプルに整え、デザインの世界観と操作性のバランスを最適化しました。
情報設計
・映画フィルムモチーフのアニメーションを全体に統一し、世界観を一貫して伝える構成に最適化
・ファーストビューに「円形リビール × クロスフェード × フィルムノイズ」を組み合わせ、没入度の高い導入を実現
・スライダーは is-active / is-prev の二段階制御で滑らかな映像切り替えを再現
・テキストはフェード＋スライドアップで“字幕の出現”のような演出に統一
・セクション背景には複数のフィルム装飾を配置し、読み込み負荷を抑えながらリッチな視覚効果を実現
・スキルセクションには 3D 回転ギミックを導入し、立体的なプレゼンテーションを構築
・WORKS はフィルム枠 × タブ切り替えで、カテゴリごとに作品を整理しながら世界観をキープ
・タブ UI は SP では固定表示に切り替え、ドロワー開閉と干渉しないよう制御
・Flow セクションではフィルム穴ラインが上下（SPでは左右）に流れる演出を実装
・GSAP / Swiper を活用し、スクロール・ホバー・タップごとに質感のある動きへ統一
・全コンテンツをレスポンシブで最適化し、PC/タブレット/スマホで途切れない体験を提供