まずは、FigmaファイルからHTMLの構造を読み取っていきます。
デザインファイルをもらってすぐにコーディングすると、共通部分のスタイリングが破綻したりリファクタリングの手間が増えたり、後々大変なことになりがちです。
なので、私はFigmaでHTMLタグを付けていってコーディング前に予め構造を組んでいきます。
▼Figmaファイルはこちらです。
（Figmaにもあるとおり、スマホベースでつくっていきます。PCも一応つくっていますが、途中で変更が加わりすぎてテキストが違ったり、色が違ったりします。）
では、実際に構成・構造を考えていきましょう。
各セクションの構造を考える
Figmaを上から見ながら、LPの構造を組んでいきましょう。
layout
まず、.l-headerです。
ページのlayoutとしてのheaderなので、l-headerクラスとしてコーディングしていきます。
その下にmainタグとしてコンテンツが入ってくる構造になります。
そして、一番下のfooterがl-footerクラスとして設定されます。
component
続いて、ページで共通の要素であるcomponentを設定していきましょう。
まず、セクションが複数回同じようなデザインが繰り返されているので、.c-section/.c-section__titleとして設定します。
次にボタン部分も２回だけですが、共通の要素なので、.c-buttonとして設定します。
あと、ファーストビューやヘッダー含めて最大幅をやpaddingを共通で設定したいので、.c-innerを設定します。
project
次に、main内の各セクションの構造を組んでいきます。各セクションでしか使わないのでprojectとして設定していきます。
まずはファーストビュー。.p-fvとして組みます。
次に、課題提示セクションとして.p-themeセクション、解決策セクションとして.p-solutionセクションを設定します。
よくある質問セクションは.p-faqセクション、最後のボタンを置いているセクションは.p-cvセクションとして設定していきます。
これで一旦全体の構造は組めました。次に、各セクション内の構造を組んでいきましょう！
現時点でのFigma
セクション内の構造を考える
おおまかな全体の構造は組めました。より詳細な構造を組むために各セクション内の構造も大まかに組んでいきましょう。
.l-header
まずはl-header部分です。ヘッダーはロゴとボタンを横並びにしたいので、l-header__contentとして囲みつつ、ロゴはl-header__logoクラスとして設定します。
.p-fv
p-fv部分も、画像とテキスト部分をスマホで縦の中央寄せ、PCで横並びにさせたいので、p-fv__content（figureタグ）としてflexboxを設定するイメージで設定します。
p-fv__content（figureタグ）の中身として、imgタグとfigcaptionタグ、figcaption内としてh1タグとpタグを設定します。
h1タグの２行部分は１行ずつinline-blockとして設定して改行を調整したいので、.u-inline-blockを設定します。（object/utilityとして）
.p-theme
続いて、p-themeセクションです。
まず、c-section__titleの部分はスマホでは２行、PCでは１行にしたいので、u-inline-blockとして設定しておきましょう。
p-theme__content（figureタグ）で囲んで、imgタグとfigcaptionタグで囲みます。
リスト部分はそれなりにスタイリングが必要なので、p-theme__listsとして設定します。
.p-solution
次は、p-solution部分。
p-solutionは3カラムがリスト状にあるので、p-solution__listsとして囲みつつ、各要素をp-solution__listとして設定していきます。
p-solution__listはimgタグとpタグで構成していきましょう。
.p-faq
次に、p-faq部分です。
p-faq__contentで全体を囲みつつ、p-faq__details（detailsタグ）としてアコーディオンメニューを設定します。
p-faq__details（detailsタグ）のなかに、p-faq__summary（summaryタグ）とp-faq__
answer（divタグ）を設定していきます。
.p-cv
.p-cv部分は、ボタンを囲むためにp-cv__contentを設定します。
.l-footer
.l-footer部分は、l-headerと同様に、c-inner/l-footer__contentで囲みます。
フッターのリストを.l-footer__lists、コピーライト部分はsmallタグとして設定していきます。
構成のおさらい
以上でFigmaからコードの構成を組んでみました。
この構成をもとに、次の章からはフォルダを組んでいきます。