ポートフォリオサイトを制作しました

✅担当範囲
・コーディング

✅サイト範囲
・このポートフォリオサイトは、これまでの制作経験の集大成として制作しました。
・セマンティックなHTMLでは、見出しやリスト、ナビゲーションなど意味を持つタグを厳選して配置。 これにより、検索エンジン最適化（SEO）の強化やスクリーンリーダーなど支援技術のアクセスビリティ向上を両立させています。
・本サイトでは最初に目を引くローディングアニメーションを実装し、ユーザーの期待感を高めつつスムーズなページ遷移を演出しています。 一方で、ページ本文では過剰なアニメーションを控え、コンテンツの可読性と集中しやすさを重視しました。
・お問い合わせは専用ページを設けず一画面で完結させ、ユーザーが迷わずスムーズに問い合わせできるよう、視認性や操作性、アクセシビリティを重視して設計されています

✅実装の工夫
・再生中の動画をタップ・クリックするだけで再生・一時停止ができます。見た目はシンプルに保ちつつ、操作性を大幅に向上。商品紹介やプロモーション動画など、多くのコンテンツで快適な視聴体験を実現します。
・初回アクセス時にのみ再生されるローディングアニメーションは、GSAPのタイムラインで滑らかな同期とイージングを制御し、カラーグラデーションやシャドウの動的変化で視覚的な広がりを演出。訪問者に高品質で洗練された体験を提供します。
・ヘッダーはスクロールに応じて動的に状態を切り替え、視認性と操作性を大幅に向上させています。 特に、IntersectionObserverを用いて各セクションの視認状況を効率的に検知し、GSAPでスムーズな背景色や文字色、影の変化を制御しています。
・timeline形式のprofileセクションでは、各項目がスクロールトリガーにより順次フェードインし、GSAPを使って透明度、位置、拡大縮小、ぼかし効果を組み合わせたトランジションで動きを演出しています。 特に最終項目には、時間経過とスクロールに連動した光の流れを加え、洗練された印象と動的な演出によりユーザーの注目を集めやすく設計しています。 さらに、スクロール進行に合わせて項目間をつなぐtimelineラインの長さを動的に調整し、視覚的に進行度をわかりやすく示しています。

カテゴリー

HTML・CSSコーディング

業種

IT・通信・インターネット

制作期間

7日

参考価格

30,000 円

最終更新日

2025年8月7日