制作例
ヘッダーの色反転はスクロールイベントではなくIntersectionObserverで実装することで、処理負荷を抑えてなめらかな切り替えを実現しています。コンテンツの絞り込みには Shuffle.jsを採用し、カテゴリーとタグを複数紐づけて柔軟な検索条件に対応しました。検索結果が0件の場合もメッセージで状態を伝え、ユーザーが迷わない実用的なフィードバックを設けています。ライブラリの選定から細部のUI設計まで、実務を意識した作り込みを心がけた制作物です。
歯科クリニックを想定したホームページをWordPressで実装しました。
カスタム投稿タイプ・カスタムタクソノミーを活用した診療メニューの管理機能や、Swiper.jsを用いたスライダーなど、動的なUIをオリジナルテーマとして構築しています。SCSSでは変数やミックスインを整備し、繰り返しパターンを共通化することで一貫性のある実装を実現しました。レスポンシブ対応やホバーエフェクトなど、デザインカンプを忠実に再現することにもこだわっています。
採用サイトを想定した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を使ったアニメーションで実装し、スクロールに連動した滑らかな動きを実現しています。デザインの再現度を意識し、各デバイスでレイアウトが意図通り表示されるよう丁寧に調整しました。