表題の通りLPコーディング時に気をつけるべきことを残します。
フォント指定があった場合の対応
- web-fontをlinkタグでインポートする。
- importをする。
以下のサイトでフォントの検索ができるので、link or importで対応できる。
https://fonts.google.com/
※やり方は後日別の記事に書きます。
metaタグのtitle, descriptionの内容をあらかじめ確認
- 後からでも別に問題はないけど、先に確認しておいた方がベター。
- パンくずリストがあった場合は、それも調整しておく。
既存のヘッダーやフッターが存在する場合
- 影響範囲も考えてsectionを作ること。
→ヘッダーやフッターにマージンが指定されていた場合は打ち消さないといけない。
その際に他の場所にも影響が及ぶ可能性があるので、最初に確認しておくとGoodかも。
GoogleSpeedInsghtでスピードチェック
サイトが完成したらGSIでスピードチェックを行う。
合格表示されればOK
SEOに関しての分析や改善点も表示されるので、それを確認して修正するとよし。
https://pagespeed.web.dev/?hl=ja
ローカル環境で実機確認できるように環境を作っておく
自分は作成せずVScodeの拡張機能LiveServerを使って確認していたんですがそれだと他のメンバー(特にメンターやチューターがいる場合)は実機で確認ができなくなってしまうので、作成しておくべき。
※作成方法は自分で作成してみてから、後日別の記事で書きます。
altタグの入力漏れがないかの確認(SEOに関わってくる。)
imgを挿入する際は出来うる限りaltタグの記載をするべき。
デザイナーさんが作成した画像でaltのつけようがないものは空でもいいが、一旦確認するとベターかも。
環境依存文字がデザインにある場合は、文字コードでコーディングする方がベター。
ブラウザ差異やフォントファミリーでの差異が発生する可能性があるので、あらかじめ文字コードで記載しておくとgood
※🅰️という文字を打ちたかったのですが、デザインカンプからコピペしたものと、(えー)と打って変換したものが別のもので、実機確認した時に表示に差異が発生した経験があります。
https://gray-code.com/html_css/list-of-symbols-and-special-characters/
大元のサイトがワードプレスで作成されている可能性もあるため、cssをbodyタグの中で読み込む処理を書く必要ありかも。
これはまだ経験がないのですが、クライアントによってはこういう指定をしてくることもあるので、可能性を頭に入れておいた方が良い。
まとめ
長くなりましたが、以上が私が最初に担当した案件で得たLPコーディング時の注意点です。
また、他の案件を通じて別記事として更新していけたらと思っています。