数あるポートフォリオの中からご覧いただき、誠にありがとうございます。

佐々木由夏 Webコーダー

お問い合わせは以下より よろしくお願いいたします。 ◼️連絡先 fymh972@gmail.com

◼️SNS X：@sasapi_y94

制作実績

わかば個別指導塾(LP)

◼️実装のポイント

• FV では clip-path や Swiper、Keyframe アニメーション を活用し、動きのある印象的なビジュアルを構築しています。
• サイト全体には フェードインアニメーション を組み込み、速度やタイミングを丁寧に調整することで、情報がスムーズにつながって見える自然な流れを意識しました。
• 各セクションには モーダル、タブ切替、パララックス、アコーディオン、固定スクロール など多様な UI を実装し、コンテンツに合わせて適切な動きや仕組みを取り入れています。
• コンタクトフォームでは JavaScript によるリアルタイムバリデーション を導入し、入力中でも誤りが分かるように制御。送信時はエラー箇所へ自動スクロールするなど、ユーザーの負担を減らすための工夫を施しました。

<<実装内容>>

わかば個別指導塾LPに関する実装内容の詳細です。

clip-pathアニメーション / 時間差出現 / ボタンエフェクト

• 実装のポイント

固定スクロール / 時間差フェードイン

• 実装のポイント

時間差フェードイン

• 実装のポイント

タブの切り替え / モーダル

• 実装のポイント

パララックス

• 実装のポイント

バリデーションエラー

• 実装のポイント

その他の実績紹介

▪️採用特設サイト

実装のポイント

• WordPressの投稿から最新記事を1件のみ取得し、タイトルと詳細ページへのリンクを自動的に表示する仕様を実装しました。
• フェードインアニメーションやホバーエフェクトを適切に配置し、自然な動きのある快適なUIに仕上げました。
• 目次では現在位置の項目を自動でアクティブ表示し、スクロールに合わせてリアルタイムに切り替わるようにしました。
• WordPressのオリジナルテーマで構築し、カスタム投稿、カスタムタクソノミー、カスタムフィールド、コンタクトフォームを活用して運用しやすい設計にしました。

<<実装内容>>

▪️海外旅行情報サイト

実装のポイント

• 画面いっぱいに広がるレイアウトにすることで、よりインパクトのあるページを演出しています。
• 各コンテンツに、テキストのめくり演出やフェードイン、ホバー時の画像拡大（1.1倍）などのさりげないアニメーションを取り入れ、読みやすさと操作性を高めています。

<<実装内容>>

▪️介護人材派遣LP

非公開実績

対応業務