0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

LPをコーディングする(特に特集記事など)に気をつけるべきこと

Posted at

表題の通り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コーディング時の注意点です。
また、他の案件を通じて別記事として更新していけたらと思っています。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?