SATOSHI KAWASHIMA
 Portfolio.
©︎ 2025 SATOSHI KAWASHIMA Portfolio.
Home Works フェムケアサロン(実案件)
H.anasaK.ura様の制作実績

フェムケアサロン(実案件)

制作内容
ヒアリング、写真撮影、コーディング
種別
WordPress、コーディング、写真撮影
制作期間
82時間
サイトへ
https://hana-official.com/
概要
figmaのデザインカンプからのコーディングをしました。
デザインを忠実に再現することや、どんな画面幅でも表示崩れがない構造を意識してリキッドレイアウトでコーディングしました。
保守しやすいようにCSSはBEMとFLOCSSを採用しています。
予約ボタンを押すと外部サービスのLINE予約と連携するように構築。
GA4とGMTを設置してサイト運用改善も視野に入れました。

gsapを使用したアニメーションで、サイトの柔らかい雰囲気を壊さずに印象的になるようにしました。
主なもの３点を下部に掲載しています。
1.「ブラー効果」による焦点がだんだん定まるアニメーション実装
2.下から画像がふわっと出現するアニメーション実装
3.文章が下から徐々にふわっとフェードインしてくるアニメーション実装

Code Detail

1.「ブラー効果」による焦点がだんだん定まるアニメーション実装

GSAPを使用し、スクロール中に思わず目を止めたくなるような、だんだんと焦点が合っていくブラー効果と順番にテキストが出現するアニメーションを実装しました。

HTML


<p class="p-about-content__text-top c-heading-ja-h3 c-blur-text">
    <span>「私」に還り、福が舞いこむ。</span>
    <span>韓国式子宮管理PONNYOで贈る、</span>
    <span>心と子宮の調律サロン。</span>
</p>

CSS

															
.c-blur-text {
	span {
		display: block;
		filter: blur(15px);
		transform: scale(1.1);
		transition: none;
	}
}

JS


window.addEventListener('load', function() {
gsap.registerPlugin(ScrollTrigger);

const contactSection = document.querySelector('.p-ponnyo');
const staggerItems = contactSection.querySelectorAll('.js-stagger-item');

gsap.to(staggerItems, {
	opacity: 1,
	y: 0,
	duration: 1.0,
	ease: "power2.out",
	stagger: 0.5,
	scrollTrigger: {
		trigger: contactSection,
		start: "top 65%",
		once: true,
		// 追加：セクションが見えたらブラー解除
		onEnter: () => {
			contactSection.classList.add('is-focused');
		}
	}
});
});
2.下から画像がふわっと出現するアニメーション実装

GSAPとclip-pathを使用し、スクロールしていくと滑らかに下からふわっと画像が出現するリッチなアニメーションを実装しました。

HTML


<div class="p-features-item__contents">
	<div class="p-features-item-number__wrapper">
		<div class="p-features-item__head">feature</div>
		<div class="p-features-item__number">01</div>
	</div>
	<h4 class="p-features-item__title c-heading-ja-h3">100％手技による<br class="u-pc-hidden">深部からのPONNYO（福女）の温め</h4>
	<p class="p-features-item__description c-re__text">
		機械を使わず、呼吸に合わせて優しく、深く、<br>
		全ての土台である脳と子宮を温めゆるめます。<br>
		指先から伝わる温かさが緊張を解きほぐします。<br>
		内側からじんわりと解ける、至福のデトックス体験を。<br>
	</p>
</div>

CSS

															
//片側から出現
.animated__clipView {
	// before (出現前)
	clip-path: inset(100% 0 0 0);
	// ふわっとさせるための初期状態 
	opacity: 0;
	transform: translateY(40px); // 少し下から浮き上がる 
	transition: 
	clip-path 1.0s cubic-bezier(0.25, 1, 0.5, 1), 
	opacity 0.8s ease,
	transform 0.8s ease;
	// after (出現後)
	&.js-show {
		clip-path: inset(0 0 0 0);
		// ふわっとしながら出現
		opacity: 1;
		transform: translateY(0);
	}
}

JS


window.addEventListener('load',function(){
	gsap.registerPlugin(ScrollTrigger);

	const clipViewItems = document.querySelectorAll('.animated__clipView');
	clipViewItems.forEach(item => {
		ScrollTrigger.create({
			trigger: item,
			start: "top 70%", // 要素が上部から70%の位置で発火
			onEnter: () => {
				// 要素内に入ったら、js-showクラスをつける
				item.classList.add("js-show");
			}
		});
	});
});
3.文章が下から徐々にふわっとフェードインしてくるアニメーション実装

GSAPを使用し、背景画像にブラー効果とテキストが順番に出現するアニメーションを実装しました。

HTML


<section id="ponnyo" class="l-section p-ponnyo animated__fadeIn">
<div class="p-ponnyo__bg"></div>
<div class="p-ponnyo__inner l-inner">
	<div class="p-ponnyo__contents">
		<h2 class="c-section-title__wrapper js-stagger-item">
			<div class="c-section-title__head p-ponnyo-section-title__head">
				<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14" fill="none">
					<path d="M0.00197682 14C-0.10655 7.70543 4.56068 0.000919697 17.5834 0C13.0253 9.116 11.8314 10.9612 0.00197682 14Z" fill="#F7B7AE"/>
				</svg>
				<p class="c-en-h2 c-section-title">what’s PONNYO</p>
			</div>
			<p class="p-ponnyo__caption c-heading-ja-h2">PONNYO（福女）とは</p>
		</h2>
		<div class="p-ponnyo__content">
			<h3 class="p-ponnyo__title c-heading-ja-h3 js-stagger-item">自分を慈しむことで<br class="u-pc-hidden">福（幸せ）を呼び込む体へ。</h3>
			<p class="p-ponnyo__text c-re__text js-stagger-item">
				PONNYOは、韓国の伝統療法をベースにした子宮管理の技術です。<br>
				「福女（ポンニョ）」という名前には、<br>
				自分を慈しむことで幸せを呼びこむ女性<br class="u-sp-hidden">
				という意味が込められています。<br>
			</p>
			<p class="p-ponnyo__text c-re__text js-stagger-item">
				単なるもみほぐしではなく、<br>
				女性の不調の根源である子宮の位置をととのえ、<br>
				内臓から温めることで、<br>
				自律神経やホルモンバランスを健やかに導きます。<br>
			</p>
			<p class="p-ponnyo__text c-re__text js-stagger-item">
				女性特有の不調ー冷え・生理トラブル・自律神経の乱れーを<br>
				ととのえるだけでなく、<br>
				心までふっと軽くなるような<br>
				深いリラクゼーションを提供するのが特徴です。<br>
			</p>
		</div>
	</div>
</div>
</section>

CSS

										
.p-ponnyo {
  position: relative;
  overflow: hidden;
  background: url(../img/img-whatsPonnyo.webp) center / cover no-repeat;
  @include mq('md'){
  background: url(../img/sp/img-whatsPonnyo-bg-sp.webp) center / cover no-repeat;
  }
  // 追加：背景ブラー用の疑似要素
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit; // 親と同じ背景画像を継承
    filter: blur(20px);
    transform: scale(1.05); // ブラーの端切れ防止
    transition: filter 2.5s ease, opacity 2.5s ease;
    z-index: 0;
  }

  // ブラー解除後のスタイル
  &.is-focused {
    &::before {
      filter: blur(0px);
    }
  }
}
// 疑似要素より前面にコンテンツを出す
.p-ponnyo__inner {
  position: relative;
  z-index: 1; // 追加
  display: flex;
}

JS

															
window.addEventListener('load', function() {
  gsap.registerPlugin(ScrollTrigger);

  const contactSection = document.querySelector('.p-ponnyo');
  const staggerItems = contactSection.querySelectorAll('.js-stagger-item');

  gsap.to(staggerItems, {
    opacity: 1,
    y: 0,
    duration: 1.0,
    ease: "power2.out",
    stagger: 0.5,
    scrollTrigger: {
      trigger: contactSection,
      start: "top 65%",
      once: true,
      // 追加：セクションが見えたらブラー解除
      onEnter: () => {
        contactSection.classList.add('is-focused');
      }
    }
  });
});
Back to TOP