More than 5 years have passed since last update.

とあるLPの制作現場

Last updated at 2018-03-12Posted at 2018-03-12

Webデザインの本などで、「架空のカフェのサイトを作ってみよう！」みたいなフワフワしたチュートリアルはよくありますが、実際のサイトができあがっていく様をあまり見たことがないなと思い、LPの制作と並行して記事を書きました。

工程のすべてを書くのはつらいので、ハマった所や気をつけた所、後ろめたかった所を中心にまとめています。見苦しい所が多々あると思うので、そのときはそっと目を閉じてください。

※ 記事にする許可は先方からいただいています

LPとは
ランディングページ。ユーザーが訪れる最初のページという意味らしいのだけど、商品の魅力を訴求する1枚の縦長ページという認識の方が強い。このページは長くないけれど。

書くこと

環境構築
HTML
CSS
JavaScript
公開前の確認
ロリポップ

各項目に対して思ったことを書いているので、バランスはバラバラです。

LPと作業の概要

カードゲームの紹介ページです。

公開時はLP1枚だけですが、今後ページを追加する可能性があります。サーバーはロリポップで、ドメイン取得済です。

HTMLの修正や画像の差し替えなどは、フロントエンドに慣れていない人が行う可能性があるため、HTMLをそのまま触れるようにしておきます。リポジトリをクローンしてヤーンしてから編集したものをコミットしてください、みたいな寝言は言えません。

CSSやJSは触らないという話だったので、そこのところは自由にやります。

デザインはすでにできているので、画像の切り出しから入ります。

工数は1日。

Photoshopから画像を切り出す

いまだに雰囲気でPhotoshopを使っている。

もう長いこと使っている気がするのだけど、スライスとアセットぐらいしかできない。いくら覚えようと思ってもなかなか身につかないので、Photoshopを使いこなしている方々には尊敬の念しかないです。

そんなこんなで苦しみつつ、デザインデータから素材を切り出します。

レイヤーからの画像アセットの生成
 スライスを使った基本操作

フロントエンドの環境構築

エディターさえあればWebサイトは作れますが、SassやBabelを使った方が快適に開発を進めることができるので、環境を整えていきます。ただ、環境構築に時間をかけ過ぎると、Webサイトを作りたいのか、環境を作りたいのかわからなくなってくるので、完璧は目指さず手短に済ませます。

やりたいこと

| | やりたいこと |
|:---:|:---:|:---:|
| HTML | そのまま |
| CSS | Sass |
| JS | Babel |
| 画像 | 圧縮 |

やりたいことはWebpackだけでも実現できますが、今後ページが増えていくことを考えるとgulpを使用したほうがスッキリ書けそうなので、gulpとWebpackを併用しました。最近gulpの名前をめっきり聞かなくなりましたが、元気にしているだろうか。

Webpackとgulpの使い分け、あるいは共存

Webpack

webpack is a static module bundler for modern JavaScript applications.

https://webpack.js.org/concepts/

色々なファイルをまとめて、モリモリなJSファイルを出力してくれる。BabelやSassなどのローダーを設定するだけで、いい感じに変換してくれる。プラグインを使えばHTMLやCSSなどのファイル出力もできます。

gulp

gulp is a toolkit for automating painful or time-consuming tasks in your development workflow

https://gulpjs.com/

色々なタスクを実行してくれる。BabelやSassなどのタスクを設定すると、いい感じにファイルを吐き出してくれます。gulpからWebpackのタスクを呼び出すこともできます。

使い分け/共存

Webpackとgulpは共存も可能です。SPAを作る場合は、諸々のファイルをWebpackでまとめるだけで事足りますが、普通のWebサイト制作で、複数のHTMLやCSSを出力したくなった時には、Webpackだけだと辛くなってきます。

プラグインを組み合わせれば、本来のJSのバンドルから離れた事でも大体なんとかなりますが、なんとかなる頃にはコンフィグが超大作になっているので、素直にgulpを併用した方がシンプルに書けるかもしれません。

ひとつのツールにまとめたいのが本音ですが。

盛者必衰

ユーザーが減ってくるとプラグインのメンテナンスが滞りがちなので、gulpのプラグインに依存する恐怖はありますが、長い目で見ればWebpackも似たようなものなので、気にしないことにします。

「複雑なことはしない」ことにさえ気をつけていれば、ツールの寿命が来た時にサクッと乗り換えられるはずなので、なんとかなると信じたい。

ダラダラと書いていたら長くなってしまったので、使用したタスクのリンクだけ張っておきます。

HTML

ファイル分割などはせず、ひとつのファイルにガッと書いていきます。PugよりもHTMLのままの方が好きです。

タグを積む

ブロックごとに、タイトルがあって説明がある綺麗なデザインだったため、sectionでまとめて積んでいきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=640">
  <title>SPECIAL MOOOVE!｜カードゲーム</title>
  <!-- メタ -->
  <link rel="stylesheet" href="/assets/css/specialmooove.css">
</head>
<body>
  <div class="container">
    <div class="contents">
      <article class="main">
        <section class="section mv"></section>
        <section class="section intro"></section>
        <!-- 他のコンテンツが色々 -->
      </article>
      <footer class="footer"></footer>
    </div>
    <div class="modal"></div>
  </div>
  <script src="/assets/js/specialmooove.js"></script>
</body>
</html>

コメントを多めにする

日頃HTMLを見慣れていない人が、ぱっと見ただけで編集する場所がわかりやすいように、コメントを多めに残します。

<!-- スライダー ここから ======================================== -->
<ul class="system-step-wrapper swiper-wrapper">
  <li class="system-step-slide swiper-slide">
    <img src="/assets/img/specialmooove/system/step/step01.png" alt="[1]山札を1枚表にします。...">
  </li>
  <li class="system-step-slide swiper-slide">
    <img src="/assets/img/specialmooove/system/step/step02.png" alt="[2]全ヒーローは、...">
  </li>
  ...
</ul>
<!-- スライダー ここまで ======================================== -->

viewport 640

<meta name="viewport" content="width=640">

スマホメインのサイトを短い時間でデザイン通りに構築するには手っ取り早いのでviewportを固定しました。今どきviewport固定とかありえない、と言われたらぐうの音も出ない。震える。

組み上がり

まだスタイルがあたっていないので、画像が積まれているだけの状態です。

CSS

あまり複雑なレイアウトはないため、深く考えずにガシガシとCSSを書いていきます。

SassとSCSS

Sassには2つの記法があり、ミニマルなSass記法の方が好みだったのですが、CSSに慣れているとSCSS記法の方が読みやすいということもあり、新規で作る場合はSCSS記法を使うようにしています。

What’s the Difference Between Sass and SCSS?

Sass記法 - ミニマルなやつ

sass

=bg-cover
  background-position: center center
  background-repeat: no-repeat
  background-size: cover

.hoge
  +bg-cover()

SCSS記法 - CSSっぽいやつ

scss

@mixin bg-cover {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hoge {
  @include bg-cover();
}

ファイル構成

@charset "utf-8";

// ==========================================================================
// 変数とmixin
// ==========================================================================
@import "foundation/variables";
@import "foundation/mixin";

// ==========================================================================
// リセットとか
// ==========================================================================
@import "base/reset";
@import "base/helper";

// ==========================================================================
// ライブラリ
// ==========================================================================
@import "vendor/swiper";

// ==========================================================================
// Special Mooove
// ==========================================================================
@import "specialmooove/base";
@import "specialmooove/mv";
@import "specialmooove/intro";
@import "specialmooove/system";
@import "specialmooove/movie";
@import "specialmooove/choice";
@import "specialmooove/footer";
@import "specialmooove/modal";

変数などは専用のディレクトリにまとめて、LPのスタイルはセクションごとにファイルを分割して管理しています。

クラスの命名

.intro {
  position: relative;
  &-title {
    position: relative;
    z-index: 1;
    padding-top: 200px;
    text-align: center;
  }
  &-copy {
    //
  }
  &-text {
    //
  }
}

短いLPなのでクラス名が重複する危険性が少なく、使い回すパーツもないので、ブロック毎にクラスを振って子要素をハイフンでつなげるだけの、ゆるいクラス名にしました。

CSS適用後

動きはありませんが、デザインが無事に反映されました。

JavaScript

スライダーやモーダルでJSが必要なので、順番に実装していきます。工数を短縮するべく、できる限りライブラリを使いました。

メインビジュアル

mv.js

import { TweenMax, Expo } from 'gsap'
import imagesLoaded from 'imagesloaded'

export default function () {
  const anime = () => {
    // パッケージ
    TweenMax.fromTo('#mv-package', 0.6, {
      x: 600
    }, {
      x: 0,
      ease: Expo.easeOut
    })

    // 他に色々
  }

  // 画像読み込み完了後アニメーション
  imagesLoaded('#mv', { background: true }, () => anime())
}

斜めなロゴとSpecial Moooveという名前が印象的だったので、ナナメにギュインとムーブさせる事で、多少のゲーム感を出しています。アニメーションライブラリにはTweenMaxを使いました。

TweenMax
imagesLoaded

ループで横に流れるやつ

card.js

import { TweenMax, Power0 } from 'gsap'
import imagesLoaded from 'imagesloaded'
import { eachElement } from './helper'

export default function () {
  const SPEED = 45
  const cards = document.querySelectorAll('.intro-card')

  eachElement(cards, card => {
    imagesLoaded(card, () => {
      const inside = card.querySelector('.intro-card-inside')
      const img = inside.querySelector('img')
      const distance = img.clientWidth
      const duration = distance / SPEED
      const toRight = card.classList.contains('mod-reverse')

      inside.appendChild(img.cloneNode(true))

      TweenMax.fromTo(inside, duration, {
        x: toRight ? -distance : 0
      }, {
        x: toRight ? 0 : -distance,
        ease: Power0.easeNone,
        repeat: -1
      })
    })
  })
}

最初はCSSアニメーションを infinite してループさせていたのですが、iOSのSafariでなぜか時々チラついてしまい、原因の特定に時間がかかりそうだったので、気持ちを切り替えてTweenMaxで repeat させました。画像を複製して左右にループさせています（適当）。

スライダー

slider.js

new Swiper('.swiper-container', {
  pagination: {
    el: '.system-step-pagination',
    clickable: true
  },
  navigation: {
    nextEl: '.system-step-next',
    prevEl: '.system-step-prev'
  }
})

スライダーはタッチ対応などが面倒なので、Swiperというライブラリを使いました。

Swiper

モーダル

modal.js

import { TweenMax } from 'gsap'
import { eachElement } from './helper'

export default function () {
  const el = {
    // DOM
  }

  const open = () => {
    // 開く処理
  }

  const close = () => {
    // 閉じる処理
  }

  // ボタンのクリックで開く
  eachElement(el.triggers, trigger => {
    trigger.addEventListener('click', () => {
      const target = trigger.getAttribute('data-target')
      el.active = document.getElementById(target)

      open()
    })
  })

  el.modalContents.addEventListener('click', e => e.stopPropagation())
  el.modal.addEventListener('click', () => close())
  el.close.addEventListener('click', () => close())
}

モーダルは使い慣れているライブラリがなかったので、TweenMaxでやりました。

まとめてガッ

index.js

import FastClick from 'fastclick'
import mv from './mv'
import card from './card'
import slider from './slider'
import modal from './modal'

document.addEventListener('DOMContentLoaded', () => {
  FastClick.attach(document.body)

  card()
  slider()
  modal()
  mv()
})

もろもろの処理を、 DOMContentLoaded のときにまとめてガッと実行します。

DOMContentLoaded | MDN

JavaScript適用後

公開前の確認

このままサクッと公開したいところですが、コーディングに不備がないか確認していきます。

リント

対象	ツール
HTML	HTMLHint
CSS	なし
JS	ESLInt

HTMLとJSは、VSCodeに拡張をいれてコーディング中にチェックしています。CSSはSassのコンパイルが通ればOKというラフな感じで、特にチェックしていません。

リンク切れ

ページにリンク切れがあると残念なので、ツールを使って確認します。こちらのChrome拡張が使いやすいです。
https://chrome.google.com/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf?hl=en-GB