外狩大地

❏連絡先

✉️ [****](mailto:[email protected]?subject=お問い合わせ)[email protected]

❏SNS

X(Twitter)

実績

刻の標（LP)

Basic認証が求められた際は　ID：demo｜パスワード：demoをご入力ください。

Untitled

<aside>

制作ポイント

• トップの雰囲気を損なわないよう、PCではファーストビューだけなめらかな慣性スクロールを採用しています。
• スクロールに合わせて写真やコンセプトがゆるやかに動き・現れるフェードイン演出で、滞在時間を楽しめる構成にしました。
• ヴィラは種類ごとにタグ切り替え＋写真のスライドで、お食事は押すと**詳細がポップアップ（モーダル）**で読めるようにし、情報の階層を整理しています。
• スマホではハンバーガーメニュー、画面下の予約への導線、必要なときだけ出るヘッダーなど、操作しやすさを考えて配置しています。
• お問い合わせではエラー時には入力枠の色を変化させ、具体的な指示を表示することで、離脱率の低下と正確な情報の受け取りを両立させています </aside>

実装内容詳細

<aside> 💡

レコーディング 2026-06-28 140506.mp4

パララックス＆同時フェードイン＆慣性スクロール

実装の種類:　パララックス　 フェードイン　lenis

</aside>

<aside> 💡

固定パララックス

実装の種類:　固定パララックス

</aside>

<aside> 💡

ぼかしからの連動フェードイン

実装の種類:　GSAP　 フェードイン

</aside>

<aside> 💡

モーダル

実装の種類:　モーダル

</aside>

<aside> 💡

タブ切り替え＆画面切り替え

実装の種類:　タブ切り替え　画像置換

</aside>

<aside> 💡

バリテーションエラー

実装の種類:　バリテーションエラー

</aside>

アニメーション一覧

Untitled

その他実績

Untitled

出来る事

• HTML / CSS / Sass / jQuery / JavaScript（基礎）
• GSAP
• FLOCSS設計 / BEMライク命名
• WordPress（オリジナルテーマ）
• PHP（WordPress基礎）
• Cursor