パララックスについて
制作ページURL
制作期間
5日間
制作範囲
デザイン / コーディング / 機能実装
使用ツール
HTML / CSS / JavaScript (jQuery・GSAP使用)
目的
スクールの朝礼課題で、基本的なコーディングの練習としてシングルページサイトを制作しました。約10分ほどの発表資料として使用。
概要
ポートフォリオに動きを加えるためのパララックス効果（視差効果）の技術検証課題です。
JavaScriptとアニメーションライブラリGSAPを用い、3種類の異なる実装パターンをデモンストレーションしました。検証の結果、「過剰な動きによる情報伝達の妨げ」というデメリットを認識。最終的なポートフォリオではユーザーへの伝わりやすさを優先し、この機能の採用は見送りました。
情報設計
パララックスという技術の「仕組み」と「実装」を、短い発表時間内で明確に伝えることに重点を置いて構成しました。
課題
「ユーザーが快適に、迷うことなく情報を得られる」ためのデザインの基本原則やユーザビリティに関する知識を学び、技術とデザインの両面から伝わりやすいサイトやシステムを作成していきたいです。