架空アプリのLP

サムネイル画像

使用ツール:

HTML/CSS/JavaScriptt/jQuery

URL:

https://ksk-coder.com/products/oha!/

ソースコード:

https://github.com/kskishi/oha

制作のポイント

  • 1.アニメーションの実装

    JavaScriptを使用したドロワーメニューやモーダルの実装に取り組みました。
    モーダル表示時には背景のスクロールを無効化し、意図しない操作が起こらないようにしています。

    HTML
                                
ドロワーメニュー

<header class="header">
  <div class="header__inner">
    <h1 class="header__logo">
      <a href=""><img src="./img/logo(1).png" alt="OHA!" /></a>
    </h1>
    <nav class="header__nav">
      <a href="#about" class="header__link">サービスについて</a>
      <a href="#how-to-use" class="header__link">使い方</a>
      <a href="#merit" class="header__link">メリット</a>
      <a href="#contact" class="header__button button">お問い合わせ</a>
    </nav>
    <button id="js-drawer-icon" class="header__open drawer__icon">
      <span class="drawer__icon__bar"></span>
      <span class="drawer__icon__bar"></span>
      <span class="drawer__icon__bar"></span>
    </button>
  </div>
</header>

<div id="js-drawer-content" class="drawer-content">
  <nav class="drawer-content__menu">
    <a href="#about" class="drawer-content__link">サービスについて</a>
    <a href="#how-to-use" class="drawer-content__link">使い方</a>
    <a href="#merit" class="drawer-content__link">メリット</a>
    <div class="drawer-content__button">
      <a href="#contact" class="button">お問い合わせ</a>
    </div>
  </nav>
</div>
    CSS
                              
.drawer__icon.is-checked .drawer__icon__bar:nth-of-type(1) {
  top: 10px;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}
.drawer__icon.is-checked .drawer__icon__bar:nth-of-type(2) {
  display: none;
}
.drawer__icon.is-checked .drawer__icon__bar:nth-of-type(3) {
  top: 10px;
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

.drawer__icon__bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 3px;
  border-radius: 6px;
  background: #111;
  -webkit-transition:
    top 0.3s linear,
    -webkit-transform 0.3s linear;
  transition:
    top 0.3s linear,
    -webkit-transform 0.3s linear;
  transition:
    transform 0.3s linear,
    top 0.3s linear;
  transition:
    transform 0.3s linear,
    top 0.3s linear,
    -webkit-transform 0.3s linear;
}
.drawer__icon__bar:nth-of-type(2) {
  top: 9px;
}
.drawer__icon__bar:nth-of-type(3) {
  top: 18px;
}

.drawer-content {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: -webkit-transform 0.3s linear;
  transition: -webkit-transform 0.3s linear;
  transition: transform 0.3s linear;
  transition:
    transform 0.3s linear,
    -webkit-transform 0.3s linear;
}
.drawer-content.is-checked {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
    JS
                              
document
.querySelector("#js-drawer-icon")
.addEventListener("click",function(e){
    e.preventDefault();
    document.querySelector("#js-drawer-icon").classList.toggle("is-checked");
    document.querySelector("#js-drawer-content").classList.toggle("is-checked");
});

  • 2.共通パーツの作成

    ボタンや見出しなど何度も使用するパーツについては、共通クラスを作りました。
    これにより、スタイルの統一を保ちながらコーディングの効率化と保守性の向上を意識しています。

    HTML
                              
共通のタイトル部分

<div class="how-to-use__title">
  <div class="heading js-in-view fade-in-up">
    <div class="heading__en">HOW TO USE</div>
    <h2 class="heading__ja">OHA!の使い方</h2>
   </div>
</div>

 <div class="merit__title">
  <div class="heading js-in-view fade-in-up">
    <div class="heading__en">MERIT</div>
    <div class="heading__ja">OHA!を使うメリット</div>
  </div>
</div>

<div class="qa__title">
  <div class="heading js-in-view fade-in-up">
    <div class="heading__en">Q&A</div>
    <h2 class="heading__ja">よくあるご質問</h2>
  </div>
</div>
    CSS
                              
.heading__en {
  font-size: 38px;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 3.8px;
}
@media screen and (min-width: 768px) {
  .heading__en {
    font-size: 50px;
    letter-spacing: 5px;
  }
}

.heading__ja {
  font-size: 14px;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: 1.12px;
  margin-top: 14px;
}
@media screen and (min-width: 768px) {
  .heading__ja {
    font-size: 16px;
    letter-spacing: 1.28px;
  }
}

  • 3.レスポンシブ設計

    スマートフォンからPCまで幅広い環境で快適に閲覧できるレスポンシブ設計を行いました。
    画像内のボックス要素にはcalc()を使用し、画面幅に応じてサイズが柔軟に変化するよう実装しています。

    HTML
                              
<div class="how-to-use__box is-type2">
  <div class="how-to-use__box-title">
    誰かに起こされれば<br class="hidden-pc" />起きれる派の人
    <img src="./img/step2-title-img.png" alt="" />
  </div>
  <div class="how-to-use__steps">
    <div class="how-to-use__step">
      <div class="step-box">
        <div class="step-box__head">
          <div class="step-box__head-text">STEP</div>
          <div class="step-box__head-number">01</div>
        </div>
        <div class="step-box__body">
          <div class="step-box__image">
            <img src="./img/step2-1-img.png" alt="" />
          </div>
          <p class="step-box__text">
            起こされたい時間を<br />設定します
          </p>
        </div>
      </div>
    </div>
    <div class="how-to-use__step">
      <div class="step-box">
        <div class="step-box__head">
          <div class="step-box__head-text">STEP</div>
          <div class="step-box__head-number">02</div>
        </div>
        <div class="step-box__body">
          <div class="step-box__image">
            <img src="./img/step2-2-img.png" alt="" />
          </div>
          <p class="step-box__text">
            スマホを枕元に置いて<br />寝ます
          </p>
        </div>
      </div>
    </div>
    <div class="how-to-use__step">
      <div class="step-box">
        <div class="step-box__head">
          <div class="step-box__head-text">STEP</div>
          <div class="step-box__head-number">03</div>
        </div>
        <div class="step-box__body">
          <div class="step-box__image">
            <img src="./img/step2-3-img.png" alt="" />
          </div>
          <p class="step-box__text">
            起こされることによって<br />起きることができます
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
    CSS
                              
.how-to-use__box-title img {
  width: 85px;
  position: absolute;
  right: 50%;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
  bottom: calc(100% + 16px);
}
@media screen and (min-width: 768px) {
  .how-to-use__box-title img {
    right: 0;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    bottom: 0;
  }
}
@media screen and (min-width: 768px) {
  .is-type2 .how-to-use__box-title {
    padding-right: 0;
    padding-left: 95px;
  }
  .is-type2 .how-to-use__box-title img {
    right: auto;
    left: 0;
  }
}
◂ WORKSに戻る