©︎ 2025 SATOSHI KAWASHIMA Portfolio.
採用サイト(自主制作)
- 概要
- figmaのデザインカンプからのコーディングをしました。
デザインを忠実に再現することや、どんな画面幅でも表示崩れがない構造を意識してリキッドレイアウトでコーディングしました。
保守しやすいようにCSSはBEMとFLOCSSを採用しています。
正しいHTMLのマークアップを意識しました。
下記①〜⑥のようにセクションごとに違うアニメーションを実装し、デザインで指定された動きを忠実に再現することにこだわりました。
①mvには無限に流れ続けるスライダー
②messageセクションには文字がなぞるように出現
③Our Businessセクションではカードを上のタブと連動させ横スクロールできるように実装
④Member Storiesセクションではスライダーを実装
⑤FAQではアコーディオンを実装
⑥CTAでは特定の画面の表示領域に入ったら画像が扉のように開くアニメーションを実装。
gulpを使用し、sassのコンパイル・jsやcssのファイルの圧縮・HTMLのフォーマット・画像のwebp化を全て自動化してスムーズに構築することを意識しました。
今まで写真編集でPhotoshopを触っていた経験を活かし、自身でモックアップ画像の作成も行いました。
*Basic認証*
user
$sample3104
Contact
ご覧いただきありがとうございます。
ご相談・お見積りは無料です。内容を確認し、３営業日以内に返信いたします。
お気軽にご相談ください。