制作例
採用サイトを想定したLPを実装しました。
Swiperを用いたスライダーやモーダル、アコーディオンなど、実用的な機能を揃えています。ローディングや各種アニメーションは、サイトの世界観に合わせて丁寧に調整し、細部まで心地よい体験になるよう意識しました。CSS設計にはFLOCSSを採用し、Sassのmixinや変数を活用することで保守性・可読性にも配慮しています。
カフェブランドを想定したホームページをWordPressで実装しました。
最新投稿をファーストビューに固定表示し、インスタグラムフィードを連携させてTOPページのギャラリーセクションに一覧表示する実装を行っています。
ランチメニューとグランドメニューはカスタム投稿タイプで構築し、管理画面から更新できるよう実装しました。写真主体のレイアウトがモバイルでも崩れないよう、ブレークポイントごとに確認しながら丁寧に仕上げました。
法人向けグローバル人材研修会社のコーポレートサイトをWordPressで実装しました。
コンタクトフォーム7でお問い合わせフォームと資料ダウンロードフォームを構築し、必須項目の入力後に送信ボタンを活性化する仕様で実装しています。
WordPressのデフォルトスタイルとテーマ側のCSSは競合が起きやすい箇所のため、FLOCSSの各レイヤーに沿って役割を分離し、スタイルが意図せず上書きされない設計を意識しました。
ポートフォリオトップに、Blenderでモデリングした石舞台とホログラムシェーダーを適用したダイヤモンドの3D表現をReact Three Fiberで実装しました。
GLSLシェーダーによるホログラムエフェクトとパーティクルを組み合わせ、インタラクティブな奥行きのある演出を実験しました。
シンプルなWebサービスのLPをFigmaカンプからコーディングしました。
CSS設計にはFLOCSSを採用して保守性を確保しつつ、Gulpによる開発環境を構築しSassコンパイル・ビルド処理を自動化しています。コードの品質と開発効率の両立を意識した実装を行いました。
表参道カフェのLPをFigmaカンプからHTML/CSS/JSでコーディングしました。
背景画像のパララックス演出はGSAPを使ったアニメーションで実装し、スクロールに連動した滑らかな動きを実現しています。デザインの再現度を意識し、各デバイスでレイアウトが意図通り表示されるよう丁寧に調整しました。