就職活動を機に、自分のスキルや経験をまとめたポートフォリオサイトを作成しました。
UXの工夫
2段階の情報設計(モーダル・アズ・ゲート):ホーム画面のカードをタップすると概要モーダルが表示され、「さらに詳しく」を選んだ場合のみ詳細ページへ遷移します。ざっくり見るだけのユーザーと、深く読み込みたいユーザーの両方に対応した情報設計を意識しました。
コンテキストを保持するナビゲーション:詳細ページ下部のナビゲーションボタンは、どこから流入したかをリファラで判定して変化します。ホームのモーダルから来た場合は「もどる(#セクション)」で直接モーダルを開いていたセクションに戻り、一覧ページから来た場合は「一覧に戻る」が優先表示されます。
画面ジャンプのない快適な操作感:モーダルを開く際、スクロールバーが消滅することで画面全体が右にずれる現象を防ぐため、スクロールバー幅を動的に計算してパディングで補正しています。
Liquid Glassデザイン:半透明ガラス質のパネルと背景のアニメーションblobが透けて見えるデザインを採用し、Apple的なモダンUIを構築しました。日英切替・スクロールアニメーション・レスポンシブデザインにも対応しています。