ファーストビュー直下にスライダーを導入した事例

2025年12月16日

（00341U）こころレディース鍼灸整骨院　HP：https://toyohashi-sinkyu-seitai.com/

ターゲット：30代以降の女性

実際の様子

経緯

提供していただいた写真素材がとても綺麗な写真が多く、イメージアップに繋がると思い導入した。
ターゲットも女性で、雰囲気を重視する傾向もあると考えた為。

シンプルだが動きのあるHPとして「最近のWEBサイト」としてのイメージも狙った。
スマートフォンが普及後、顧客のWEBサイトを見る目も肥えていると考えている。

スライドには、

・店内写真
・施術の様子

などを織り交ぜることで、清潔感や信頼性が生まれたのではないかと考えている。

ゆいナンバー500番以降の顧客には積極的に取り入れている。

元々は（209）剃らないとソンのHPで導入した美容HP向けの事例
https://sorason-shaving.com/

お客様の声として追加した事例

ひつじ整体院岩槻院：https://hitsuji-seitaiin.com/

導入方法

画像の作成

見本

画像作成後、Wordpressのメディファイルにアップロードする。

横幅：1920px
縦幅：240px
書き出し：背景なし PNG

注意点：写真の画質、スタッフさんの清潔感や笑顔（見た目）が良くないと逆効果になる可能性あり

コード

HTML

挿入したい部分にコピペ。

<div style="position: relative;">
<div class="img-rep"></div>
</div>

CSS

style.cssにコピペ。

/* ================================================================================================
//
// Topスライド
//
// ============================================================================================== */
.img-rep {
    width: 100%;
    height: 320px;
    background-image: url(/wp-content/uploads/slide.png);
    background-repeat: repeat-x;
    background-size: 1920px 240px;
    animation-name: warning;
　　animation-duration: 50s; 
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: reverse;
}

@keyframes warning {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position:1920px 0;
  }
}

@media only screen and (max-width: 500px) {
.img-rep {
    height: 225px;
}
}

導入HP一例

むね整体院KANAZAWA：https://mune-seitaiin.com/
しんのう整骨院東三国駅前院：https://seikotsuin.xyz/
骨盤専門天六あず整骨院：https://az-seikotsuin.com/