Misaki portfolio

GSAPを使って、デザインカンプどおりに「ユーザーの視線を自然に誘導する」アニメーションを実装しました。
スマホファーストで構築し、あらゆるデバイスで快適に閲覧できるよう配慮しています。
主な実装内容：
・方向の異なる斜めの無限スライダー
・時間差でフェードイン
・色が塗りつぶされた状態からテキストが出現
・スクロールに応じて線が伸びる
・スクロールに応じて背景を固定する
・タブ切替え

約１～２週間

こちらからご覧ください

WordPressのオリジナルテーマで構築し、更新のしやすさを考慮して制作実績セクションはカスタム投稿で設計しました。
アニメーションは、ユーザー目線の「心地よい動き」を意識し、サイトの雰囲気に合わせたローディング演出やテキストアニメーションを取り入れています。
主な実装内容：
・GSAPやVivus.jsを活用したローディング、テキストアニメーション
・スクロールを促すアニメーション演出
・上方向スクロール時に表示されるヘッダー
・時間差で表示されるフェードインアニメーション
・最新6件の制作実績を表示（カスタムフィールド連携）
・多彩なフォント利用への対応

約３週間

こちらからご覧ください

WordPressのオリジナルテーマで構築し、下層ページを含めて全10ページを制作しました。
アニメーションは、ユーザーが心地よく操作できるよう滑らかで自然な動きを意識しています。
主な実装内容：
・カスタム投稿タイプを利用し、最新事例を6件表示
・カスタムフィールドによる Q&A ページの作成
・カスタムテンプレートを用いた最新記事3件の表示
・お問い合わせフォームと完了ページの実装

約２週間

こちらからご覧ください

写真や装飾が多いページでも、デザインカンプどおりにレイアウトを再現し、どのデバイスでも崩れないよう配慮して制作しました。
主な実装内容：
・プラグインSwiperを使用したスライダー
・アコーディオンメニュー
・お問い合わせフォームのバリデーションチェック

約４日間

こちらからご覧ください

記事の文字量が変わっても レイアウトが崩れないよう配慮して制作しています。
主な実装内容：
・ポップアップ表示
・タグを使用した表組み
・YouTube動画の埋め込み
・スムーススクロール

約３日間

こちらからご覧ください

クリック可能な箇所を明確にし、ユーザーが直感的に操作できるよう配慮して制作しました。
また、お問い合わせフォームのバリデーションチェックも実装しています。

約２日間

こちらからご覧ください
ID：demo
Pass：demo