LPを作成する際に意識していることフロントエンド定例 2022/8/5

こんにちは、フロントエンドチームの谷（@high_g_engineer）です。
今週のフロントエンド定例の内容を記載します。

フロントエンド定例について、以前の記事（ランサーズのフロントエンドチームが取り組んでいること）でお伝えしたのですが、毎週金曜日に開催しており、実際の業務で取り組んでいることや気になった技術情報等をシェアしあう会になっています。

以下、今週の内容です。

LPを作成する際に意識していること

概要

LPを作成する際に、感覚的に取り組んでいることをダンプします。
これからLPを作成する人の助けになったら良いと思います。

前提として

下記のエディタ、ツール、プラグイン、スニペット等を利用しています。

VSCode
Prettier, Stylelint, ESLint
GitHub Copilot
Emmet, CSS Snippets等のスニペット系のVSCodeプラグイン
利用頻度が高い関数等を定義した自身のスニペット

LPを作成する際に取り組む順番

PC用デザインのマークアップ
↓
SP用デザインのマークアップ
↓
タブレットサイズ（横幅がSPサイズ+1px〜PCサイズ-1px間）の調整
↓
最終調整

PC用デザインを取り組む時（LP作成開始）の意識

まずは、PC用デザインを確認します
SP用デザインもざっと確認します（軽く見て、後々問題にならないか程度に見ればok）
デザインを見ながら、上から順番にHTMLをなるべくセマンティックにざっくりと記述していきます
- セマンティックの温度感は、文章はp、意味のない要素はdiv, 意味のある要素はsection、単体で成り立つ要素はarticleといった感じです
- 重要なのは、ここでは、class、id、CSS、JS等は考えずに純粋にHTMLの構造だけを書くことです
- この時点でclassやidをつけたり、CSSを書き出したりすると、スピードが全く上がりません
- とにかく脊髄反射的にHTMLの構造をガシガシ組んでいきましょう
- 脊髄反射的にHTMLを書く為には、レイアウトを見た瞬間に完成形のマークアップをバッチリ想像できるレベルになっておく必要があります
- 脊髄反射的HTML記述が出来ない場合は、トレーニングが必要です
- 自分の場合、LP制作に慣れるまでは、雑誌や広告等のレイアウトを見たら、どうマークアップするか考えることを日常的に行っていました。写経とかも良いのですが時間がかかるので、日常的に頭の中でやることで、脊髄反射的HTML書く筋が鍛えられます
デザインデータから画像データ出力します（ここの順番は前後してok）
- 透過が必要なら、png
- 透過が必要でない写真データならjpg
- デザイン的なフォント、アイコンは、svg
- より速度を意識するなら、webp
- 作成した画像データは、作業に入る前にまとめて圧縮する（ILoveIMG, TinyPNG, Sqoosh等を利用）
HTML構造の記述と画像データが用意できたら仕込み完了。ここからはCSSに集中して取り組みます
CSS in JSの様なScoped CSSな環境であれば、クラスの命名はある程度、手抜きでokです
ただし、旧来のLPの様なBEMが必要になってくる場合、命名に手を抜いて、 .section1, .section2 の様な連番的命名にしてしまうと、更新がしづらく直感的で無い為、後で地獄を見ます
少なくとも .section__名詞的な後で更新が辛くない程度の命名は頑張りましょう
命名の際の英語は、ガッツリGoogle翻訳かDeepL翻訳を頼りましょう。拙い英語力の場合、これらに頼らない場合は、無駄に時間を消費します。思いついた単語を入力 + Enterキーで時間を短縮できます
PCサイズを組む場合、基本的にはpx指定で組みます
ここでは、まだメディアクエリを意識しなくて問題ありません
レイアウトごとにどういったスタイルを書くかの知識も必要なのですが、それは別記事に出来ればと思います
※書き出したら、パターン分岐がそれなりにあり、複雑になった為

雑にざっくりと書き出すと・・・

要素の内部に余白をもたせる場合
- padding
要素間や要素の外部に余白をもたせる場合
- 単発の場合
  - margin
    - 上下余白は、margin-topのみ、左右の余白は、margin-leftのみを利用する意識があると良いです
    - いろんな箇所でmargin-top, left, right, bottomが利用されているとmarginの打ち消しが発生したり、パット見でどの要素から発生しているmarginなのかが分からない状態になったりするので面倒です
- 固定でないサイズの要素が複数出現する場合
  - display: flex + gap
- 固定サイズの要素が複数出現する場合
  - display: grid + gap + template-◯◯
- 縦並びで、余白サイズ固定の場合
  - grid + template-rows + gap
  - flex + flex-direction + gap
- 縦並びで、余白サイズがバラバラの場合
  - 各要素にmargin-top
左右センター寄せ（上下を考慮しない場合）
- ブロックレベル
  - margin: 0 auto;
- インラインレベル
  - text-align: center;
中央寄せ（上下左右を考慮する場合）
- 単発要素の中央寄せ
  - grid + place-items: center
- 複数要素が絡む場合の中央寄せ
  - flex + align-items: center + justify-content: center
- あえてdisplay: block使っていて、flex, gridが使えない場合
  - 親にposition: relative; 子にposition: absolute; + top or left: 50% + translate: transformX(-50%) or transformY(-50%) or transform(-50%)
- margin, flex, gridで実現できない要素の配置
  - position: absolute;

etc …

SPを組む際の意識

PCサイズでのマークアップを完成させた後に取り組みます
SPサイズ用のデザインデータから画像を書き出します
CSSは、メディアクエリを利用した記述を行っていくことになります
都度メディアクエリを書くのは骨が折れるので、Sass, Scss, CSS in JS等で、下記のようなmixinを定義します

例：spサイズ用のmixin

@mixin mq-sp {
  @media all and (max-width: 767px) {
    @content;
  }
}

下記のようにSP用のスタイルを各要素のスタイルに追加していく

section-inner {
  // PC用のスタイル
  width: 100%;
  max-width: 1280px;
  padding: 0;
  margin: 0 auto;

  // SP用の上書きスタイルを各要素に追加していく
  @include mq {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
}

上記の関数をVSCodeのユーザスニペットとして定義し、mqと押下するだけで、 @include mq { } を表示できるようにしておけば、時短が可能です
px指定が問題なければ、px指定を利用します
画面幅いっぱいに表示する場合は、width: 100%を利用します
pxで制御が難しい場合、vwを利用します
スタイルの上書きでは再現が難しいレイアウトやUIの場合は、メディアクエリとdisplay: noneを組み合わせ、SPサイズの場合のみ表示される様な要素を作成します
ブラウザのサイズを767px以下にした時に表示が崩れないかを確認します
ChromeのデベロッパーツールのSPモードで表示が崩れないかを確認します（ブラウザサイズを縮めた時の表示と若干異なる為）

vwについて

vwは、画面の横幅に対する比率を指定する数値です。

vwの計算については、下記の計算式で導き出せます。
対象のpx / 対象のデバイスサイズ * 100

少し分かりにくいと思うので、もう少し分かりやすく書くと、

デザインデータの横幅が750pxになっていて、対象の数値（例えば、余白）が50pxとなっていたとします。
その場合、上記の計算式で、 50 / 750 * 100 = 6.67vw となります。
都度、手計算でこれを導き出すのは、現実的では無い為、SassやCSS in JS等で関数として定義しておきましょう。

Sass(Scss)

@function vw($pxValue) {
  @return (calc($pxValue / 750) * 100) + vw;
}

CSS in JS

export const vw = (pxValue) => {
  return (pxValue / 750) * 100 + 'vw'
}

あとは、下記の様に記述するだけで、特に難しいことを考えなくてもよしなにvw対応が出来ます。

&__target {
  margin-top: 40px;
　　　
  @include mq-sp {
    margin-top: vw(40);
  }
}

これも同じくVSCodeのユーザスニペットとして定義し、vwと押下するだけで、 vw() を表示できるようにしておけば、時短が可能です

タブレットサイズ（横幅がSPサイズ+1px〜PCサイズ-1px間）の調整

PC、SPサイズの両方のマークアップが完了した後に対応
個人的な体感ですが、PCとSPの間のデザインデータが作成されることは、ほぼほぼありません
その為、このサイズ間の調整がレスポンシブにおける肝だったりします
タブレットサイズの定義は、横幅がSPサイズ+1px〜PCサイズ-1px間です
具体的にPCサイズが1280px以上、SPサイズが767px以下で想定されているのであれば、タブレットサイズは、768px〜1279pxと考えましょう
SPと同じ様に、Sass, Scss, CSS in JS等で、下記のようなmixinを定義します

例：タブレットサイズ用mixin

@mixin mq-tb {
  @media all and (min-width: 768px) and (max-width: 1279px) {
    @content;
  }
}

同じくvw関数に関してもタブレットサイズ用に作成しておいた方が良いです

@function vwtb($pxValue) {
  // 基準となるPCサイズによって分母の数値が変わります
  @return (calc($pxValue / 1280) * 100) + vw;
}

これも同じ用にユーザスニペットに定義し、mqtやvwtと入力した時点で、それぞれが表示できると良いです
あとは、これらのmixinとvw関数を利用し、SP対応と同じ様に、各要素のCSSに追記していきます

&__target {
  margin-top: 40px;
　　　
  @include mq-tb {
    margin-top: vwtb(40);
  }

  @include mq-sp {
    margin-top: vw(40);
  }
}

できれば、clampやmin関数、max関数、gridを駆使し、少ない記述量でCSSが書けることが理想です

最終調整

PC、SP、タブレットの各サイズで表示崩れが無いかを確認しましょう
特にタブレットサイズは、最大値と最小値でかなり差があるので、理想論的なCSSが記述できたとしても必ずデバイスサイズを細かく変更しながら、目視で確認しましょう
また、Chromeだけでなく、Safari, Firefox等のブラウザごとのチェックも必要です
特にSafariは、現代のIEと言われるくらいなので注意が必要です
SPサイズに関しても実機での確認が出来るのであれば、したほうが良いです。Chromeのデベロッパーツールで正しく表示されていてもiPhoneで確認した時に、表示崩れが発生する場合は大いにあるので注意が必要です

まとめ

自分が前職の広告制作会社に入社したての頃、簡単なUIの作成や一部のUI修正は出来るけど、LPの様なページを組む方法が分からなくて、悩み、苦しんでいる時期がありました。

ネットの記事を漁っても体系的な知識が無いし、知識が足りなさすぎて周囲の先輩方に聞くのも何から聞けばよいのか分からないやらで、案件をこなしながら、先輩方の技を盗んだり、自身で工夫したりしながら徐々にLP制作の技を習得していきました。
この記事は、そんなノウハウまとめたものなので、これからLPを作成する方の助けになれば幸いです。

次回の更新予定は、夏季休暇に入りますので 8/19（金）になります！

前回の定例内容はこちらから確認可能ですのでご興味いただければ下記のリンクから閲覧いただければと思います。

https://engineer.blog.lancers.jp/?s=フロントエンド定例